Xuecheng online project summary – day3 CMS page management development


Custom query page

After the database data can be displayed in the page, we also need to query the required page information according to different conditions (site ID, template ID, page alias, etc.). Some queries need to support fuzzy matching, and some must match accurately.

We need to useFindall in cmspagerepository (example < s > VAR1, pageable var2)Method implementation.

The basic logic of this function is:

  • Create a user-defined query based on the query criteria enteredCmsPageobject
  • Passing objects intoExampleObject through the condition matcherExampleMatcherTo match the query
  • At this point, thisExampleObject passed inCmsPageRepositoryoffindAll()Method, query whether there is matching data from all pages

Exact match test code

    public void testFindAllByExample() {
        //Paging parameters
        int page = 0; //  Page numbers start at 0
        int size = 10;
        Pageable pageable = PageRequest.of(page, size);

        //Condition value object
        CmsPage cmsPage = new CmsPage();
        //Condition matcher
        ExampleMatcher exampleMatcher = ExampleMatcher.matching();
        //Define example
        Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
        Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
        List<CmsPage> content = all.getContent();
//        cmsPageRepository.findAll();

If you need fuzzy matching, such as querying page aliases, you can alsoexampleMatcherAdd the following code to define the condition matcher:

exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); 
//For fuzzy query of page alias, a matcher of user-defined string is required to realize fuzzy query
//Examplematcher. Genericpropertymatchers. Startswith() // start match

Note that every time you use the matcher, you need to return it to aExampleMatcherObject

Add query code to the server

In fact, you only need to copy the test code just written to the business layer.
It should be noted that since the querypagerequest request value may be empty, it is necessary to add a judgment in advance
if (queryPageRequest == null) {queryPageRequest = new QueryPageRequest();}
Later, you need to use the if statement to determine which data has been input as query criteria, and assign the value toCmsPageObject.

code:Custom page query function

Implementation of front end

We need to enter the form in the front part to get the query criteria, so that the back end can query by criteria.
After the back-end queries the corresponding results, the results are also displayed through the front-end.

Here are the steps to achieve this process

  • Create query form
    Xuecheng online project summary - day3 CMS page management development
  • Populate the site drop-down box with data (in the<script>Hook method in)
  • staydata()Add the required data model objects to thesiteIdandpageAliase, the corresponding parameters should also be passed in the query method.
  • Then we have to pass the query conditions to the server, specifically splicing the query content to the URL in cms.js.
    //Define the method to request the server page query interface
    export const pagelist = (page, size, params) =>{
    //Assemble the data passed by params into a key / value string
    let queryString = querystring.stringify(params);
    //Page query interface of request server
    //Get page data through Ajax call
    return http.requestQuickGet(apiUrl + '/cms/page/list/' + page + '/' + size + '?' + queryString);

code:Custom query front end

New page

Back end development

Define API interface

  • The function of this part is to add a page’s data information. First of all, I want to add a corresponding interface to the API.
    • What is the function of API interface? It is an add () method: add a cmspage object and take cmspageresult as the return type to prompt whether the addition is successful or not.

Define business layer interface implementation classes

Here, override the add () method in the interface toCmsPageObject passed in throughcmsPageRepositoryofsave()Method to save the new page into the database and return a prompt whether it is successful or not.

It should be noted that in order to prevent adding the same page repeatedly, we define a new query method in the query classsiteId, pageWebPathandpageNameQuery whether the new page already exists. If it does not exist, we will save the new page.

Front end development

  • We add a “new page” button in the query list interface. Used here<router-link>Tab to direct the button to a new page.
  • stayindex.jsAdd new page route in
  • Improvement of new pages
    • Add back button:
      • In order to return to the original page, we need to know the page number of the original page and the site ID of the query.
      • On the query page, clickthis.params.pagePass parameters to the return button
      • On the new page, clickthis.$route.query.pageGet parameters
      • Returning to the query page, we need to get the page number and site ID data before page rendering, so we pass the parameters to the hook methodcreated()in
    • Form Validation
      • stay<el-form>Add verification name to:rules="pageFormRules"
      • staydata()Configure verification rules

Front end API call

  • staycms.jsCreate a method call server interface to submit the presentation data to the background.
  • Improve the submission process: add the submission confirmation process and empty the list after submission

Front and back end of new page

Modify page

Define interface

  • Query page interface through IDpublic CmsPage findById(String id);
  • Modify page interfacepublic CmsPageResult edit(String id,CmsPage cmsPage);

Business layer implementation

  • In the business layer, write the code to query the ID and modify the specified page
  • Override the method defined by the interface in the controller (that is, use the business layer method)
    • Note: submit JSON data with@RequestbodyNotes, and@PathVariable
    • getmappingputmappingpostmappingURL of corresponding query, modification and new function

Back end code

Front end implementation

  • Writing an edit page is similar to creating a new page
  • Configure the route in index.js and pass in pageid
  • Add the edit page link on the pagelist page, write the edit method, and pass in the pageid to open the page
  • Add pageid to edit page data () to receive page information
  • Get page information according to pageid in the hook method
  • Define API methods and establish a connection with the server: obtain page information + submit editing content

Front end code

Process summary of adding, deleting, modifying and querying


  • Define interfaces and determine requirements.
    • For example, to add a new page, you need the add () method
  • Write business layer code
    • It is the specific operation to realize the requirements
  • Calling business layer method in Controller
    • That is, rewrite the method in the defined interface and map this method to the corresponding path (such as @ postmapping (‘/ add’))
    • Note that you need to use @ requestbody to get the; Placeholders in the path are obtained using @ pathvariable

front end

  • Create the required page
    • If the page is to be guided by the parent page, you need to add a label to the parent page and add routing information to guide the page;
    • If you also need to transfer parameters, such as entering the editing interface of a data, you need to obtain its pageid information in the hook method and obtain it from the server through $route
  • Configure API routing in cms.js and establish a connection with the server
  • Configure page routing in index.js

exception handling

  • Create a unified exception handling class to catch exceptions
  • Execute the method in the business layer, persistence layer or controller, throw an exception first, and then handle the correct code
  • Exceptions are divided into predictable exceptions and unpredictable exceptions

Xuecheng online project summary - day3 CMS page management development

exception handling

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