关于springboot:第四阶段-day925-Spring-Boot

应用 ajax 特点为: 部分刷新, 异步响应.
同步毛病: 如果进行了同步的申请, 那么用户不能够做任何的操作, 只能期待工作的实现. 用户的敌对性差.

`<%@ 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> 您好 Springboot</title>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
     /**
          for 语法 1:
            for(let i=0;i<xxx.length;i++){.....}

          for 语法 2:   index  代表下标
           for(let index in data){console.log("测试 for 循环")
                let user = data[index];
                alert(user.name);
           }

           for 语法 3:   user 以后循环遍历的对象
               for(let user of data){console.log("for 循环测试:"+user.name);
               }

           **/

    $(function(){

        $.ajax({
            type : "get",
            url  : "/findAjax",
            //dataType : "text/json/html/xml",        // 返回值类型
            async : false,    // 敞开异步操作, 改为同步的申请
            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("申请异样!!!!");
            }
        })

        //1. $.get(url,data, 回调函数)
        //findAjax 查问后端 userList 汇合信息.
       /*  $.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> 学生信息 </h3></td>
        </tr>
        <tr>
            <th> 编号 </th>
            <th> 姓名 </th>
            <th> 年龄 </th>
            <th> 性别 </th>
        </tr>
    </table>
</body>
</html>`

京淘我的项目架构设计

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

阐明: 因为单体我的项目将所有的模块都写到了一起, 未来如果其中一个模块呈现了问题, 将导致整个我的项目不能失常的运行.

因为传统我的项目导致各个模块之间的耦合性较高. 所以须要采纳分布式的思维将我的项目进行拆分.
核心理念: 化整为零 将我的项目依照某些特定的规定进行拆分.

阐明: 因为单体我的项目的耦合性高, 所以须要依照功能模块进行拆分.升高零碎架构的耦合性

在依照模块拆分的根底之上, 将我的项目依照层级拆分, 将粒度管制的更加的具体. 分工更加的明确, 无效的进步软件的开发效率.

`<?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>
    <!-- 定义父级工程打包类型 -->
    <packaging>pom</packaging>

    <!--1. 引入 springBoot 父级我的项目 -->
    <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. 引入属性的配置 -->
    <properties>
        <java.version>1.8</java.version>
        <!-- 跳过测试类打包 -->
        <skipTests>true</skipTests>
    </properties>

    <!--3. 在父级我的项目中增加 jar 包文件 -->
    <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>

        <!-- 引入插件 lombok 主动的 set/get/ 构造方法插件  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!-- 引入数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--springBoot 数据库连贯  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

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

        <!--springBoot 整合 JSP 增加依赖  -->
        <!--servlet 依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>

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

        <!-- 使 jsp 页面失效 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

        <!-- 反对热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

        <!-- 增加 httpClient jar 包 -->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>

        <!-- 引入 dubbo 配置 -->
        <!--<dependency>
            <groupId>com.alibaba.boot</groupId>
            <artifactId>dubbo-spring-boot-starter</artifactId>
            <version>0.2.0</version>
        </dependency>-->

        <!-- 增加 Quartz 的反对 -->
       <!-- <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-quartz</artifactId>
        </dependency>-->

        <!-- 引入 aop 反对 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

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

    <!-- 父级工程只是我的项目的管理者不会在其中编辑代码 所以不要增加 build-->

</project>`

阐明: 将课前材料中的 jt-common 中的 src 导入我的项目即可

留神增加继承 / 依赖 / 插件

`<?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>
    <!-- 指定打包形式 -->
    <packaging>war</packaging>

    <!-- 指定父级我的项目 -->
    <parent>
        <artifactId>jt</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!--2. 增加依赖信息 -->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--3. 增加插件 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>`

阐明: 将课前材料中的 jt-manage 中的 src 文件导入即可

步骤:

http://localhost:8091/
默认机制 http://localhost:8091/index 申请… 被 springBoot 程序优化过了.
利用默认工具 API

WelcomePageHandlerMapping : Adding welcome page template: index
动静的发动的 /index 申请, 之后配合视图解析器造成动静的页面门路:
/WEB-INF/views/index.jsp

注意事项:
当应用 SpringBoot 程序时, 能够通过缺省值拜访, 然而零碎的首页的名称必须为 index.xxxx

easyui 是一种基于 jQuery、Angular.、Vue 和 React 的用户界面插件汇合。

easyui 为创立现代化，互动，JavaScript 应用程序，提供必要的性能。

应用 easyui 你不须要写很多代码，你只须要通过编写一些简略 HTML 标记，就能够定义用户界面。

easyui 是个完满反对 HTML5 网页的残缺框架。

easyui 节俭您网页开发的工夫和规模。

easyui 很简略但功能强大的。

`<!-- 引入 jquery 的 js，EasyUI 的执行须要依赖于 jQuery  -->
<script type="text/javascript"
    src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI 的 js 主文件  -->
<script type="text/javascript"
    src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 国际化的 js 文件  -->
<script type="text/javascript"
    src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 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" />`

`<body>
        <!--easyUI 入门案例  只有引入特定的款式就能够有对应的性能 -->
        <div class="easyui-draggable"> 拖动 DIV</div>
        <div class="easyui-draggable"> 测试 div</div>
    </body>`

`<body class="easyui-layout">

   <-- data-options 是 UI 框架的特定的属性 -->
   <div data-options="region:'west',title:' 菜单 ',split:true" style="width:25%;"></div>
   <div data-options="region:'center',title:' 首页 '"></div>

</body>`

`<ul class="easyui-tree">
      
      <li>
      <span> 商品治理 </span>
          <ul>
              <li> 商品查问 </li>
              <li> 商品新增 </li>
              <li> 商品编辑 </li>
              <li>
                  <span> 三级题目 </span>
                  <ul>
                      <li>11</li>
                      <li>22</li>
                      <li>33</li>
                  </ul>
              </li>
          </ul>
      </li>
      </ul>`

`function addTab(title, url){if ($('#tt').tabs('exists', title)){$('#tt').tabs('select', title);
    } else {
        //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"src="'+url2+'"></iframe>';
        $('#tt').tabs('add',{  
            title:title,  
            content:content,
            closable:true  
        });  
    }
}`

`create table tb_item
(id                   bigint(10) not null auto_increment comment '商品 ID，也是商品编号',
   title                varchar(100),
   sell_point           varchar(150),
   price                bigint(20) comment '单位为：分',
   num                  int(10),
   barcode              varchar(30),
   image                varchar(500) comment '最多 5 张图片',
   cid                  bigint(10),
   status               int(1) default 1 comment '默认值为 1，可选值：1 失常，2 下架，3 删除',
   created              datetime,
   updated              datetime comment '列表排序时按批改工夫排序，所以在新增时须要设置此值。',
   primary key (id)
);`

`@JsonIgnoreProperties(ignoreUnknown=true) // 示意 JSON 转化时疏忽未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{@TableId(type=IdType.AUTO)
    private Long id;                // 商品 id
    private String title;            // 商品题目
    private String sellPoint;        // 商品卖点信息
    private Long   price;            // 商品价格 0.98 * 100 = 98 /100 = 0.98
    private Integer num;            // 商品数量
    private String barcode;            // 条形码
    private String image;            // 商品图片信息   1.jpg,2.jpg,3.jpg
    private Long   cid;                // 示意商品的分类 id
    private Integer status;            // 1 失常，2 下架
    
    // 为了满足页面调用需要, 增加 get 办法
    public String[] getImages(){return image.split(",");
    }
}`

 `<ul>
                     <li data-options="attributes:{'url':'/page/item-add'}"> 新增商品 </li>
                     <li data-options="attributes:{'url':'/page/item-list'}"> 查问商品 </li>
                     <li data-options="attributes:{'url':'/page/item-param-list'}"> 规格参数 </li>
                 </ul>`

`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";}*/

    /**
     * 业务需要:
     *         实现用户页面的跳转
     *     url:  http://localhost:8091/page/item-add    页面:item-add
     *           http://localhost:8091/page/item-list     页面:item-list
     *
     *     是否利用一个办法实现通用页面的跳转性能!!!!
     *  实现的思路: 如果可能动静的获取 url 中的参数就能够实现页面的跳转. restFul 格调....
     *  restFul 语法:
     *      1. 参数必须应用 "/" 分隔
     *      2. 参数必须应用 {} 模式包裹
     *      3. 参数接管时须要应用 @PathVariable 获取
     *
     *  restFul 格调用法 2:
     *      利用不同的申请的类型, 定义不同的业务性能!!
     *      type="GET",       查问业务
     *      type="POST",      新增操作
     *      type="PUT",          更新操作
     *      type="DELETE"     删除操作
     * @return
     */

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

`<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>`

`{
    "total":2000,
    "rows":[{"code":"A","name":"果汁","price":"20"},
        {"code":"B","name":"汉堡","price":"30"},
        {"code":"C","name":"鸡柳","price":"40"},
        {"code":"D","name":"可乐","price":"50"},
        {"code":"E","name":"薯条","price":"10"},
        {"code":"F","name":"麦旋风","price":"20"},
        {"code":"G","name":"套餐","price":"100"}
    ]
}`

要求: 动静的接管用户的 url 地址, 之后查问 item 表的数据, 利用分页的形式实现
url: http://localhost:8091/item/query?page=1&rows=20
难点: JSON 串如何封装!!!

<table class="easyui-datagrid" id="itemList" title="商品列表" 
       data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:60"> 商品 ID</th>
            <th data-options="field:'title',width:200"> 商品题目 </th>
            <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>
            <th data-options="field:'sellPoint',width:100"> 卖点 </th>
            <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>
            <th data-options="field:'num',width:70,align:'right'"> 库存数量 </th>
            <th data-options="field:'barcode',width:100"> 条形码 </th>
            <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>
            <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime"> 创立日期 </th>
            <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime"> 更新日期 </th>
        </tr>
    </thead>
</table>

1.Ajax 增强

1.1 Ajax 特点

1.2 对于 Ajax 调用阐明

2.1 传统我的项目架构设计问题

2.2 分布式架构设计

2.2.1 分布式介绍

2.2.2 依照功能模块拆分

2.2.3 依照层级拆分

2.3 分布式思维带来的问题

2.3.1 分布式思维 jar 包如何保护?

2.3.2 分布式思维中工具 api 如何治理?

2.4 创立父级工程

2.4.1 创立我的项目

2.4.2 编辑 pom.xml 文件

2.5 编辑工具 API 我的项目 jt-common

2.5.1 创立我的项目

2.5.2 导入 src 文件

2.6 定义 jt-manage 我的项目

2.6.1 创立我的项目

2.6.2 编辑 pom.xml 文件

2.6.3 导入 src 文件

2.6.4 批改 YML 配置文件

2.6.5 启动项配置

2.6.6 拜访测试

2.7 我的项目默认页面跳转阐明

3 对于京淘页面学习

3.1 EasyUI 框架

3.2 EasyUI 入门案例

3.2.1 导入函数类库

3.2.2 编辑页面代码

3.3 对于后盾页面阐明

3.3.1 对于页面布局阐明

3.3.2 树形构造展示

3.3.3 选项卡技术

4 京淘后盾商品业务实现

4.1 表设计

4.2 编辑 POJO

4.3 通用页面跳转实现

4.3.1 页面 url 标识

4.3.2 编辑 IndexController

4.4 EasyUI 中表格数据展示阐明

4.4.1 页面标识

4.4.2 返回值后果

作业: