The project architecture

The front and back ends were developed separately

Front – end separation architecture

  • Front-end and back-end separation has become the industry standard for Internet project development, decoupling front-end and back-end development. And the separation of the front and back ends will lay a solid foundation for the future large-scale distributed architecture, micro-service architecture, multi-terminal services (various clients, such as browsers, vehicle-mounted terminals, Android, IOS, etc.).

  • The core idea of front-end and back-end separation is that the front-end HTML page calls the BACK-END API through AJAX and interacts with the JSON data.

Interface documentation

  • What is an interface document? In our project, we used the separated development mode of the front and back end, which required the front and back end engineers to jointly define the interface and write the interface document, and then we all developed according to the interface document, and maintained the interface document until the end of the project.

  • Why write interface documentation? 1. During the project development process, front-end and back-end engineers have a unified file for communication and parallel development 2. Project maintenance or project personnel change, convenient for later personnel to view and maintain

  • What is the interface specification? A description of the interface that include at least the following several: name: findCourseList description: according to the condition information query course URL: http://localhost:8080/lagou_edu_home/course/ request: GET request parameters

    methodName:"findCourseList";
Copy the code

    In response to the results

    {
    "status": "0",
    "msg": "success"
}
Copy the code

Advantages of a separate front-end and back-end architecture

  • A front-end coupling approach to development in which Java programmers are both mom and dad, front-end and back-end. Is the so-called specialty, if a person can do anything, then he is certainly not good at anything.

  • Disadvantages of front and back coupling (JSP for example)
    1. After a good UI design drawing, the front-end development engineer is only responsible for cutting the design drawing into HTML, which needs to be set into JSP pages by Java development engineers. When modifying problems, both sides need to cooperate in development, which is inefficient.
    2. JSP pages must be run on Java supported WEB servers (such as Tomcat, Jetty, etc.), can not use Nginx, etc. (official claims that single instance HTTP concurrency is up to 5W), performance is not improved.
    3. The first request for a JSP, which must be compiled into a Servlet in the WEB server, runs slowly the first time. Each subsequent JSP request is an HTML page that accesses the Servlet reuse output stream, which is less efficient than using HTML directly
  • The development method of front and back end separation

  • Advantages of front and rear end separation
    1. When the front and back ends are separated, if a Bug is found, the fault can be quickly identified without the phenomenon of kicking the ball
    2. Front-end and back-end separation reduces concurrency/load stress on back-end servers. All HTTP requests except for the interface are forwarded to the front-end Nginx, and the interface requests are forwarded to invoke Tomcat.
    3. In the split mode, even if the back-end server temporarily times out or goes down, the front-end page will still be accessible, but the data will not be flushed.
    4. The separation of the front and back ends can more reasonably distribute the workload of the team, reduce the workload of the back end team, and improve the performance and scalability.

Technology selection

Front-end technology selection

The front-end technology instructions
Vue.js Is a set of incremental steps for building user interfacesJavaScript framework
Element UI library Element-ui is a vue.js based background component library produced by Ele. me front-end.

Convenient for programmers to quickly layout and build pages
node.js Simply put, Node.js is a JavaScript environment that runs on the server side.
axios Ajax encapsulation, in a nutshell, ajax technology implements partial data refresh, and AXIos implements Ajax encapsulation

Back-end technology selection

The back-end technology instructions
The Web tier A) Servlet: front-end controller

A) Filter B) Filter

C) BeanUtils: data encapsulation
The Service layer A) Business processing
Dao layer A) Mysql

B) Druid: database connection pool

C) DBUtils: operation database

Project development environment

  • The development tools
    • Back-end: IDEA 2020
    • Front end: VS Code
    • Database: Navicat Premium
  • The development environment
    • JDK 11
    • Maven 3.6.3
    • MySQL 5.7

Maven project management tool

Maven is introduced

What is Maven

  • Maven is a cross-platform project management tool. As a successful open source project organized by Apache, it mainly serves for project creation, dependency management and project information management based on Java platform. Maven is a project management tool. Maven itself is pure Java development, you can use Maven to build Java projects, dependency management.

The role of Maven

  • Dependency management
    • Dependency refers to the third-party Jar packages that need to be used in our project. A larger project often requires dozens or hundreds of Jar packages. According to our previous method, every Jar used needs to be imported into the project and various Jar conflicts need to be solved.
    • Maven provides unified Jar management, including rapid Jar import and unified version control of the Jar packages used
  • One-click build project
    • Before we create the project, we need to determine the directory structure of the project, for examplesrcStore Java source code,resourcesYou have to store configuration files, you have to configure the environment like the version of the JDK, etc. If you have multiple projects, you have to do one configuration at a time, which is very troublesome
    • Maven provides a standardized Java project structure that allows you to quickly create a standard Java project.

The use of Maven

Maven software download

To use the Maven management tool, you need to download the installation software from the official website.

Maven.apache.org/download.cg…

Maven software installation

  • After downloading Maven, unzip Maven to a directory with no Chinese characters and Spaces
  1. Bin: stores maven commands
  2. Boot: Stores some of Maven’s own booters, such as class loaders
  3. Conf: Stores some maven configuration files, such as setting.xml
  4. Lib: Contains jars for running Maven itself

Maven environment variable configuration

Background system setup

Environment set up

Create a project

Project directory

Import the pom. XML

Import tool classes and configuration files

Import entity class

General Servlet

JSON

JSON is briefly

  • JSON(JavaScript Object Notation) JavaScript Object Notation (JSON comes from JS).

JSON features:

  • JSON is a lightweight data interchange format.
  • JSON has a completely language-independent text format, meaning that JSON data is consistent across programming languages.
  • JSON is easy for humans to read and write, but also easy for machines to parse and generate (often used to speed up network traffic).

Differences between XML and JSON

  • XML: Extensible Markup Language (EXTENSIBLE Markup Language), a markup language for marking up electronic files to make them structured.
  • JSON (JavaScript Object Notation) is a lightweight data interchange format.
  • Similarities:
    • Both can be used as a data exchange format.
  • Differences between the two:
    • XML is heavyweight, while JSON is lightweight. XML takes up bandwidth during transmission, while JSON takes up less bandwidth and is easy to compress.
    • Both XML and JSON are used for project interaction, with XML mostly used for configuration files and JSON for data interaction
    • JSON exists independently of the programming language, and any programming language can parse JSON

Postman

PostMan is introduced

Postman is a powerful HTTP interface testing tool, you can use Postman to complete HTTP requests functional testing.

Official address: www.getpostman.com/

File upload

Three elements of file uploading:

  • 1. Form submission: POST (get submission has size limitation,post does not)
  • 2. Enctype property of the form: must be set tomultipart/form-data.
    • Enctype means encodeType means encoding type.
    • Multipart /form-data is a multipart file upload. It refers to the form data consisting of multiple parts, including both text data and binary data, such as files.

BeanUtils tools

introduce

BeanUtils is a member of the Apache Commons component and is used to simplify encapsulating data in Javabeans. You can encapsulate all the data for a form submission into a JavaBean.

This section describes POST request modes

  • Three data submission formats commonly used by the POST request method
format instructions
Content-Type: application/x-www-form-urlencoded The data in the request body is sent to the back end as a normal form (key-value pairs).
Content-Type: application/json; charset=utf-8 The data in the request body is sent to the back end as a JSON string.
Content-Type : multipart/form-data Multi-part upload allows you to upload both key-value pairs and files.

Note: Neither the second JSON format nor the third multi-part upload can get the data using the getParameter() method