第四階段 day9.25 Spring Boot

時間  2020-09-29
標籤 第四 階段 day9.25 day spring boot 欄目 Spring 简体版
原文   原文鏈接

1.Ajax增強

1.1 Ajax特色

使用ajax特色爲: 局部刷新,異步響應.
同步缺點: 若是進行了同步的請求,那麼用戶不能夠作任何的操做,只能等待任務的完成. 用戶的友好性差.
在這裏插入圖片描述javascript

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. 京淘項目架構設計

============css

2.1 傳統項目架構設計問題

說明:因爲單體項目將全部的模塊都寫到了一塊兒,未來若是其中一個模塊出現了問題,將致使整個項目不能正常的運行.
在這裏插入圖片描述html

2.2 分佈式架構設計

2.2.1 分佈式介紹

因爲傳統項目致使各個模塊之間的耦合性較高.因此須要採用分佈式的思想將項目進行拆分.
核心理念: 化整爲零 將項目按照某些特定的規則進行拆分.java

2.2.2 按照功能模塊拆分

說明:因爲單體項目的耦合性高,因此須要按照功能模塊進行拆分.下降系統架構的耦合性
在這裏插入圖片描述mysql

2.2.3 按照層級拆分

在按照模塊拆分的基礎之上,將項目按照層級拆分,將粒度控制的更加的具體.分工更加的明確,有效的提升軟件的開發效率.
在這裏插入圖片描述jquery

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導入項目便可
在這裏插入圖片描述web

2.6 定義jt-manage項目

2.6.1 建立項目

在這裏插入圖片描述

2.6.2 編輯pom.xml文件

注意添加繼承/依賴/插件ajax

`<?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文件導入便可
在這裏插入圖片描述redis

2.6.4 修改YML配置文件

在這裏插入圖片描述

2.6.5 啓動項配置

在這裏插入圖片描述

2.6.6 訪問測試

在這裏插入圖片描述

2.7 項目默認頁面跳轉說明

步驟:spring

  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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程