Front and rear separation

In our second article in this series, “Learning About Microservices (part 2) : Building Services With SpringBoot,” we can build a SpringBoot based service, but also integrate a page template into the service similar to our previous standalone services. At present, the mainstream application is not to integrate the page template in a service, but to make the organization of the front and back end separation, using THE HTTP protocol for the front and back end data interaction, our B-S product has gone through about three stages, and finally we have the front and back end separation:The first phase is that all requests are sent to the Servlet as the controller and they are distributed to the appropriate JSPS for response based on the request information. The Servlet also generates an instance of the Model based on the REQUIREMENTS of the JSPS and outputs it to the JSP environment. JSP can parse the data content returned by the server through JSTL expressions. Typically, we use template engines such as Velocity, Freemaker and so on for the View layer. Using a template engine, you can write HTML templates on the front end while developing on the back end, and then nest them according to the syntax structure of the corresponding template engine.The HTML part of the second stage is often accelerated with CDN. When the browser requests resources, the main process is:

  1. Request the page to load static resources, CSS, JS, images.
  2. Initiates an Ajax request to the server for data and displays loading.
  3. After getting the data returned by the server, the template is logically selected to render the DOM string, and sometimes the HTML tag is dynamically rendered.
  4. The Web View renders the DOM structure by inserting the DOM string into the page.

This process is sequential, and is performed step by step by the user’s browser, so the speed depends on the user’s device and hardware network. Maybe the user’s device is not good, so the page will open very slowly. If you look at the second phase, the advantages of this approach over the first phase are obvious. Front-end does not embed any backend code, front-end focus on HTML, CSS, JS development, does not rely on the back end. You can also simulate Json data to render the page. Find the Bug, and quickly locate the problem. But there are a lot of problems with this:

  • If the server has to return a large amount of data, there will be a page lag.
  • Resource consumption is serious, a page to repeatedly request a corresponding resource.
  • Page SEO can be very inconvenient.

The third stage is SPA(Single-page Application). All the display data used is provided by asynchronous interface (AJAX/JSONP) at the back end, while the front end only displays the data. Do your own thing, and finally synchronize the data through the asynchronous interface. There have been many front-end frameworks such as vue.js, react.js, and so on. But it’s basically the same as Node.js. With Node, the scope of the front end is extended and the Controller layer is considered part of the front end during the period when the front and back ends are completely separated. During this period:

  • Front end: Responsible for the View and Controller layers.
  • Back end: only responsible for Model layer, business/data processing, etc.

RESTFUL Style interfaces

The server project is the same as we did in the previous article. We only need to make the following changes to the controller:

@RestController
public class IndexController {
    /**
     * Go Index
     *
     * @return* /
    @RequestMapping(value = {"", "/"}, method = RequestMethod.GET)
    public String index(a) {
        Map<String ,String> result = new HashMap<>();
        result.put("aa"."123");
        result.put("bb"."456");
        String s = JSONObject.toJSONString(result);
        returns; }}Copy the code

In this way, our front-end page can get the json structure data returned by the server.