Xuecheng online project summary – day4 page static


Page static

To generate a static page, we needPage template + data model。 A template is an HTML page, but the data in it is filled with placeholders; There are many kinds of data models, such as list, map

First, we need to make a template.

Template management

Xuecheng online project summary - day4 page static

Template making – FreeMarker:

We can create a new project to realize template making.

  • Get the original page template and add it to the Templates folder
  • Identify the plates that need to be replaced with model data and replace them with FreeMarker tags

Note: if you want to fill in data in the template later, you need to use resttemplate to remotely request model data
-First get the dataurl, then get the model through the dataurl, and store the model in the map
-Test code:

RestTemplate restTemplate;
public String index_banner(Map<String, Object> map){
String dataUrl = "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f";
ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
Map body = forEntity.getBody();
return "index_banner";
-Access at this time` http://localhost:8088/freemarker/banner `You can get a static page.

Template access – gridfs

Mongodb provides a distributed module for persistent storage of files.
The purpose of this project is to store the completed template file.

working principle

In gridfs, files are stored in blocks. Files are divided into multiple blocks according to the size of 256Kb for storage. Gridfs uses two collections to store files. One set is chunks, which is used to store binary data of files; One collection is files, which is used to store metadata information of files (file name, block size, upload time, etc.). To read a file from gridfs, assemble and merge the blocks of the file.

Add template manually

After storing the template information in blocks to the database through gridfs, we need to manuallycms_templateAdd template information to. The key is to store the data generated during gridfs storagefile_idfilltemplateFIleIdIn this column, through this ID, we can locate file_ Template data in chunks.

How to get the data model of the page?

CMS from database_ From the config collection, we know that the data model of the page on the front page of the project has three categories: rotation map, boutique recommendation and classification information. We can queryconfig_idTo get the data model of the corresponding configuration. And thisconfig_idThis is the last part of the dataurl.

Because there are many kinds of data models, and CMS is only responsible for executing static programs, it is impossible to know the data model of the page. Therefore, we need to specify the dataurl for each page when editing the page. When executing the static program, we can obtain the data model information of the page through the dataurl.

Page static process

Xuecheng online project summary - day4 page static

Each step is described in detail below.

Fill in page dataurl

A page needs to add dataurl information. This operation is added by the administrator in the background operation page. This specifies the data model for the page

  • Fill in the dataurl in the edit CMS page information interface and save this field to CMS_ In the page collection.
  • This dataurl is CMS_ ID of template in config

Get page dataurl

Define interface

Define a cmsconfigcontroller interface under the API package, which defines a method to query the configuration model according to the ID.

Define Dao

Define cmsconfigrepository in Dao layer and inheritMongoRepository<Config, String>, to query the database content using methods such as findbyid().

The service layer implements query

Calling cmsconfigurepositoryfindById()Method to query cmsconfig.

Controller call

Rewrite the getmodel () method in API to call the service layer implementation method to obtain CMS_ Model ID in config –This is the dataurl information added for the page later. CMS is used to obtain the data model of the page

Here, the dataurl we get is:http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f

Get page dataurl

Remote request dataurl to get data model

After adding okhttpclient dependency, configure resttemplate in springboot startup class. Then use resttemplate to obtain the data model in the business layer method.

Get the template information of the page

  • Logic of the whole acquisition:
    Page ID – > template ID – > templatefileid – > download template

Generate static pages

//Execute static
    private String generateHtml(String templateContent,Map model ){
        //Create configuration object
        Configuration configuration = new Configuration(Configuration.getVersion());
        //Create template loader
        StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
        //Configure template loader to configuration
        //Get template
        try {
            Template template = configuration.getTemplate("template");
            //Call API for static
            String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
            return content;
        } catch (Exception e) {

        return null;

Preview page

In order to enable the administrator to view the new page preview in the background management, we also need to configure the path of a preview page in nginx to realize page preview.
Similar to the implementation of direct CRUD, we all need to define interfaces, write business layer implementation methods, invoke the interface in Controller rewrite, and define the path of front-end to realize this function.

Today’s code is here

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]