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

55次阅读

共计 11945 个字符，预计需要花费 30 分钟才能阅读完成。

1.Ajax 增强

1.1 Ajax 特点

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

1.2 对于 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>`
  1. 京淘我的项目架构设计

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

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 文件

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

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

2.5.1 创立我的项目

2.5.2 导入 src 文件

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

2.6 定义 jt-manage 我的项目

2.6.1 创立我的项目

2.6.2 编辑 pom.xml 文件

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

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

2.6.3 导入 src 文件

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

2.6.4 批改 YML 配置文件

2.6.5 启动项配置

2.6.6 拜访测试

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

步骤:

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

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

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

3 对于京淘页面学习

3.1 EasyUI 框架

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

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

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

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

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

easyui 很简略但功能强大的。

3.2 EasyUI 入门案例

3.2.1 导入函数类库

`<!-- 引入 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" />`

3.2.2 编辑页面代码

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

3.3 对于后盾页面阐明

3.3.1 对于页面布局阐明

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

3.3.2 树形构造展示

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

3.3.3 选项卡技术

`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  
        });  
    }
}`

4 京淘后盾商品业务实现

4.1 表设计

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

4.2 编辑 POJO

`@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(",");
    }
}`

4.3 通用页面跳转实现

4.3.1 页面 url 标识

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

4.3.2 编辑 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";}*/

    /**
     * 业务需要:
     *         实现用户页面的跳转
     *     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;}
}`

4.4 EasyUI 中表格数据展示阐明

4.4.1 页面标识

`<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 返回值后果

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

正文完
springboot
发表至： springboot
2020-09-28
 0
关于springboot:Kafka成长记6Producer如何将消息放入到内存缓冲区上
关于springboot:SpringBoot容器化的多环境配置
关于springboot:Mybatis与SQL连接配置
关于springboot:聊聊springboot的ConfigurationProperties的绑定