In the third stage, day04 creates the parent and child projects

Time:2020-11-13

1. Ajax enhancement

1.1 Ajax features

Using Ajax features: local refresh, asynchronous response
Synchronization disadvantage: if the request of synchronization is made, the user can not do any operation and can only wait for the completion of the task. The user is not friendly
In the third stage, day04 creates the parent and child projects

1.2 about Ajax call description

`<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
< title > Hello, springboot < / Title >
<script type="text/javascript"></script>
<script type="text/javascript">
     /**
          For syntax 1:
            for(let i=0;i<xxx.length;i++){
                .....
            }

          For syntax 2: index stands for subscript
           for(let index in data){
                console.log (test for loop)
                let user = data[index];
                alert(user.name);
           }

           For syntax 3: the object that the user currently loops through
               for(let user of data){
                    console.log (for loop test:+ user.name );
               }

           **/

    $(function(){

        $.ajax({
            type : "get",
            url  : "/findAjax",
            //Datatype: "text / JSON / HTML / XML", // return value type
            Async: false, // close asynchronous operation and change to synchronous request
            success : function(data){
                let trs = "";
                for(let user of data){
                   let id = user.id;
                   let name = user.name;
                   let age = user.age;
                   let sex = user.sex;
                   trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
                }
                $("#tab1").append(trs);
            },
            error : function(){
                Alert ("request exception!!");
            }
        })

        //1. $. Get (URL, data, callback function)
        //Findajax queries the backend userlist collection information
       /*  $.get("/findAjax",function(data){

            $(data).foreach(function(index,user){
                console.log(user);
               })

            let trs = "";
            for(let user of data){
               let id = user.id;
               let name = user.name;
               let age = user.age;
               let sex = user.sex;
               trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
            }
            $("#tab1").append(trs);
        }); */

    });

</script>

</head>
<body>
    <table id="tab1" border="1px" width="65%" align="center">
        <tr>
            < TD colSpan = "6" align = "center" > < H3 > student information</h3></td>
        </tr>
        <tr>
            < th > No. < / th >
            < th > name < / th >
            < th > age < / th >
            < th > gender < / th >
        </tr>
    </table>
</body>
</html>`
  1. Jingtao project architecture design

============

2.1 traditional project architecture design

Note: since all modules are written together in a single project, if one module fails in the future, the whole project will not run normally
In the third stage, day04 creates the parent and child projects

2.2 distributed architecture design

2.2.1 distributed introduction

Due to the high coupling between the modules caused by traditional project, the distributed idea is needed to split the project
Core concept:break up the whole into partsFollow certain specific rules for the projectsplit.

2.2.2 split according to function module

Note: due to the high coupling of single project, it needs to be split according to the function moduleReduce the coupling of system architecture
In the third stage, day04 creates the parent and child projects

2.2.3 split by hierarchy

On the basis of module splitting, the project will be split according to the level, the granularity control will be more specific, the division of labor will be more clear, and effectively improve the efficiency of software development
In the third stage, day04 creates the parent and child projects

2.3 problems brought by distributed thinking

2.3.1 how to maintain Distributed Idea jar package?

In the third stage, day04 creates the parent and child projects

2.3.2 how to manage the tool API in distributed thinking?

In the third stage, day04 creates the parent and child projects

2.4 create parent project

2.4.1 create project

In the third stage, day04 creates the parent and child projects

2.4.2 editing pom.xml file

`<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>jt</artifactId>
    <version>1.0-SNAPSHOT</version>
    <! -- define the packaging type of parent project -- >
    <packaging>pom</packaging>

    <! -- 1. Introduce springboot parent project -- >
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <! -- 2. Introduce attribute configuration -- >
    <properties>
        <java.version>1.8</java.version>
        <! -- skip test class packaging -- >
        <skipTests>true</skipTests>
    </properties>

    Add the jar package file to the parent project -- >
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <! -- introduces the plug-in Lombok automatic set / get / construction method plug-in -- >
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <! -- introducing database driver -- >
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <! -- springboot database connection -- >
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <! -- spring integrates mybatis plus -- >
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>

        <! -- springboot integrates JSP and adds dependency -- >
        <! -- servlet dependency -- >
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>

        <! -- JSTL dependency -- >
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <! -- make JSP page effective -- >
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

        <! -- support hot deployment -- >
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

        <! -- add httpclient jar package -- >
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>

        <! -- introducing Dubbo configuration -- >
        <!--<dependency>
            <groupId>com.alibaba.boot</groupId>
            <artifactId>dubbo-spring-boot-starter</artifactId>
            <version>0.2.0</version>
        </dependency>-->

        <! -- add quartz support -- >
       <!-- <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-quartz</artifactId>
        </dependency>-->

        <! -- introducing AOP support -- >
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

        <! -- spring integrates redis -- >
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
        </dependency>
    </dependencies>

    <! -- the parent project is only the project manager, who will not edit the code in it, so do not add build -- >

</project>`

2.5 editing tool API project JT common

2.5.1 create project

In the third stage, day04 creates the parent and child projects

2.5.2 import SRC file

Note: import the Src in JT common in the pre class materials into the project
In the third stage, day04 creates the parent and child projects

2.6 define JT manage project

2.6.1 create project

In the third stage, day04 creates the parent and child projects

2.6.2 editing pom.xml file

Pay attention to add Inheritance / dependency / plug-in

`<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>jt-manage</artifactId>
    <! -- specify packing method -- >
    <packaging>war</packaging>

    <! -- specify the parent project -- >
    <parent>
        <artifactId>jt</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    Add dependency information -- >
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    Add plug-in -- >
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>`

2.6.3 import SRC file

Note: import the SRC file in JT manage before class
In the third stage, day04 creates the parent and child projects

2.6.4 modify YML configuration file

In the third stage, day04 creates the parent and child projects

2.6.5 boot Item Configuration

In the third stage, day04 creates the parent and child projects

2.6.6 access testing

In the third stage, day04 creates the parent and child projects

2.7 project default page Jump description

Steps:

  1. http://localhost:8091/
  2. Default mechanismhttp://localhost: 8091 / index request It has been optimized by springboot program
  3. Using the default tool API

WelcomePageHandlerMapping : Adding welcome page template: index
A dynamic / index request is initiated, and then a dynamic page path is formed with the view parser
/WEB-INF/views/index.jsp

matters needing attention:
When using the springboot program, it can be accessed by default, but the name of the system’s home page must be index.xxxx

3. Learning about Jingtao

3.1 easyUI framework

EasyUI is a collection of user interface plug-ins based on jQuery, angular., Vue and react.

EasyUI provides the necessary functionality for creating modern, interactive, JavaScript applications.

You don’t have to write a lot of code to use easyUI, you just need to write some simple HTML tags to define the user interface.

EasyUI is a complete framework that perfectly supports HTML5 web pages.

EasyUI saves you time and scale of web development.

EasyUI is simple but powerful.

3.2 introduction case of easyUI

3.2.1 import function class library

`<! -- JS is introduced into jQuery, and the execution of easyUI depends on jQuery -- >
<script type="text/javascript"
   ></script>
<! -- JS main file of easyUI -- >
<script type="text/javascript"
   ></script>
<! -- internationalized JS file -- >
<script type="text/javascript"
   ></script>
<! -- introducing the style of easyUI -- >
<link rel="stylesheet" type="text/css"
    href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
    href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />`

3.2.2 edit page code

`<body>
        <! -- easyUI introduction case as long as the introduction of a specific style, you can have corresponding functions -- >
        < div class = "easyUI draggable" > drag div < / div >
        < / easy div > test
    </body>`

3.3 description of background page

3.3.1 about page layout

`<body class="easyui-layout">

   < -- data options are specific properties of UI framework -- >
   < div data options = "region: 'West', Title: 'menu', split:true " style=" width:25%; "></div>
   < div data options = "region: 'center', Title: 'home'" > < / div >

</body>`

3.3.2 tree structure display

`<ul class="easyui-tree">
      
      <li>
      <span>Commodity management</span>
          <ul>
              <li>Commodity inquiry</li>
              <li>New products</li>
              <li>Commodity editor</li>
              <li>
                  <span>Three level title</span>
                  <ul>
                      <li>11</li>
                      <li>22</li>
                      <li>33</li>
                  </ul>
              </li>
          </ul>
      </li>
      </ul>`

3.3.3 tab Technology

`function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        //The effect of picture in picture of iframe
        var url2 = "https://map.baidu.com/search/%E5%85%A8%E5%9B%BD/@12959219.601961922,4825334.624608941,5z?querytype=s&wd=%E5%85%A8%E5%9B%BD&c=1&provider=pc-aladin&pn=0&device_ratio=1&da_src=shareurl";
        var content = '<iframe scrolling="auto" frameborder="0"  ></iframe>';
        $('#tt').tabs('add',{  
            title:title,  
            content:content,
            closable:true  
        });  
    }
}`

Taojing 4 background business

4.1 table design

`create table tb_item
(
   id                   bigint(10) not null auto_ Increment comment 'commodity ID, also commodity number',
   title                varchar(100),
   sell_point           varchar(150),
   Price bigint (20) comment 'unit: Min',
   num                  int(10),
   barcode              varchar(30),
   Image varchar (500) comment 'up to 5 pictures',
   cid                  bigint(10),
   Status int (1) default 1 comment 'the default value is 1. Optional values are: 1 normal, 2 offline, 3 delete',
   created              datetime,
   The updated datetime comment 'list is sorted according to the modification time, so this value needs to be set when adding. ',
   primary key (id)
);`

4.2 edit POJO

`@Jsonignorexroperties (ignoreunknown = true) // indicates that unknown properties are ignored during JSON conversion
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
    @TableId(type=IdType.AUTO)
    Private long ID; // commodity ID
    Private string title; // product title
    Private string sellpoint; // product selling point information
    Private long price; // commodity price 0.98 * 100 = 98 / 100 = 0.98
    Private integer num; // product quantity
    Private string barcode; // barcode
    Private string image; // product image information 1.jpg, 2.jpg, 3.jpg
    Private long CID; // indicates the classification ID of the product
    Private integer status; // 1 normal, 2 offline
    
    //In order to meet the page call requirements, the get method is added
    public String[] getImages(){
        
        return image.split(",");
    }
}`

4.3 implementation of general page Jump

4.3.1 page URL identification

`<ul>
                     < Li data options = "attributes: {'URL': '/ page / item add'} > > new item</li>
                     < Li data options = "attributes: {'URL': '/ page / item list'}" > query product</li>
                     < Li data options = "attributes: {'URL': '/ page / item param list'}" > specification parameters</li>
                 </ul>`

4.3.2 edit indexcontroller

`package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class IndexController {

    /*@RequestMapping("/index")
    public String index(){

        return "index";
    }*/

    /**
     *Business requirements:
     *Realize the jump of user page
     *     url:   http://localhost : 8091 / page / item add page: item add
     *            http://localhost : 8091 / page / item list page: item list
     *
     *Can we use a method to realize the jump function of general page!!!!
     *Implementation idea: if you can dynamically get the parameters in the URL, you can realize the page Jump. Restful style
     *Restful syntax:
     *1. Parameters must be separated by '/'
     *2. Parameters must be wrapped in {} form
     *3. You need to use @ pathvariable to obtain parameters
     *
     *Restful style usage 2:
     *Use different request types to define different business functions!!
     *Type: "get", query business
     *Type = post, add operation
     *Type = "put", update operation
     *Type = "delete" delete operation
     * @return
     */

    //@RequestMapping(value = "/page/{moduleName}",method = RequestMethod.GET)
    @GetMapping("/page/{moduleName}")
    /*@PutMapping
    @DeleteMapping
    @PostMapping*/
    public String module(@PathVariable String moduleName) {
        
        return moduleName;
    }
}`

4.4 table data presentation in easyUI

4.4.1 page identification

`<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> 
                <thead> 
                    <tr> 
                        <th data-options="field:'code',width:100">Code</th> 
                        <th data-options="field:'name',width:100">Name</th> 
                        <th data-options="field:'price',width:100,align:'right'">Price</th>
                    </tr> 
                </thead> 
            </table>` 

4.4.2 return value results

{
    "total":2000,
    "rows":[
        {"code": "a", "name": "juice", "price": "20"},
        {code ":" B "," name ":" Hamburg "," price ":" 30 "},
        {"code": "C", "name": "chicken fillet", "price": "40"},
        {code ":" d "," name ":" coke "," price ":" 50 "},
        {"code": "e", "name": "French fries", "price": "10"},
        {code ":" F "," name ":" wheat whirlwind "," price ":" 20 "},
        {code ":" g "," name ":" package "," price ":" 100 "}
    ]
}