第四階段筆記 Jingtao_day03

時間  2020-11-30
標籤 javascript html java mysql jquery web ajax spring sql 數據庫 欄目 JavaScript 简体版
原文   原文鏈接

day 03 SpringBoot - Ajax

此文檔是根據上課流程整理，更多細節和圖片請參考劉老師的專欄javascript

江哥的專欄

《cgb2008-京淘day03》html

一. SpringBoot整合Web資源
  1. 建立動態Web資源 -- springboot_demo3
  2. 項目結構

    建立webapp目錄，將WEB-INF文件夾粘貼進來java

  3. 添加jar包mysql

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

  4. 編輯yml文件jquery

    mvc:         #引入mvn配置
    view:
      prefix: /WEB-INF/     # /默認表明根目錄 src/main/webapp
      suffix: .jsp
二. 完成Web資源入門案例

​ 需求：用戶經過http://localhost:8090/findAll獲取所有UerList集合，並在userList.jsp頁面中進行表格化地展示。web

  1. 編輯UserControllerajax

    ​ 第三階段：pojo --> Mapper --> service --> controller -->頁面及js 自下而上spring

    ​ 第四階段：pojo --> controller --> service --> Mapper 自上而下sql

    //@RestController //程序將不會執行視圖解析器的方法
@Controller
public class UserController {

    //HandlerMapping --> Map<K,Method>
    //HandlerAdaptor --> controller --> service --> dao
    //ViewResolver --> ModelAndView
    //View --> Model 視圖渲染
    @Autowired
    private UserService userService;

    @RequestMapping("/findAll")
    /*public ModelAndView findAll(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("userList");
        modelAndView.addObject("key", "value");
        return modelAndView; //ModelAndView
    }*/
    public String findAll(Model model){
        List<User> list = userService.findAll();
        model.addAttribute("userList",list);
        return "userList";
    }
}
  2. 動態Web資源404報錯說明

    ​ IDEA默認條件下工做目錄的選擇是不正確的，須要手動配置一下。注意工做目錄的編輯。數據庫

三. 異步實現數據獲取(Ajax)
  1. Ajax的工做原理

    ​ http協議規範：一次請求，一次響應

    ​ 同步請求：用戶發起了一個請求，服務器處理後將結果返回給用戶。若是後端服務器正忙，用戶須要等待，體驗很差。

    ​ 異步請求：用戶發起了一個請求，先把請求交給Ajax引擎(代理)，代理經過回調函數和用戶保持聯繫，用戶不須要等待服務器的響應。代理向服務器發起請求，等待後端服務器處理後第一時間經過回調函數將結果返回給用戶。

    ​ 說明：1) Ajax中間有代理的參與，實際上是代理的思想；2) ajax發起屢次請求，屢次響應

  2. 導入jQuery.js函數類庫/webapp/js

    參見《Download jQuery | jQuery》

  3. 完成ajax業務的調用
=== ajax.html ===
<!-- 引入函數類庫 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">//1.讓頁面所有加載完成 函數式編程
$(function(){
    alert("ajax調用成功!");
    //1.$.get(url地址,傳遞的參數,回調函數,返回值類型) 
    //關於參數的寫法 1.JSON格式 {id:1,name:"tomacat"}2.字符串拼接 id=1&name=tomacat
    $.get("/findAjax",{id:1},function(data){
        //console.log(data);
        //循環遍歷的方式1
        /* for(let i=0;i<data.length;i++){
            let user = data[i];
            let id = user.id;
            let name = user.name;
            console.log(id+":"+name);
        } */
        //循環遍歷的方式2. in
        /* for(let index in data){
            let user = data[index];
            console.log(user);
        } */
        //循環遍歷方式3. of
        for(let user of data){
            //console.log(user);
            let id = user.id;
            let name = user.name;
            let age = user.age;
            let sex = user.sex;
            let $tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";
            $("#table1").append($tr);
        }
    },"json")
    //$.post() $.getJson() $.ajax
})
</script>

  1. ajax請求流程

    ​ 若是須要發起ajax請求時，通常須要發起兩個請求，一個("toAjax")是用來跳轉頁面的，另外一個("findAjax")是用來請求數據的。

    /* 測試轉到ajax.html */
@RequestMapping("/toAjax")
public String toAjax(Model model){
    List<User> list = userService.findAll();
    model.addAttribute("userList",list);
    return "ajax";
}
 
/* 接收ajax請求:/findAjax */
@RequestMapping("/findAjax")
@ResponseBody  //1.將返回值的結果轉化爲JSON的數據;2.表明ajax請求結束
public List<User> findAjax(){
    return userService.findAll();
}

  2. $.ajax()的使用

    //$.ajax()
$.ajax({
    url:"/findAjax", //url地址
    method:"get", //請求類型"post","put","delete"
    data:{id:1,name:"tomcat"},
    success:function(data){
        for(let user of data){
            //console.log(user);
            let id = user.id;
            let name = user.name;
            let age = user.age;
            let sex = user.sex;
            let $tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";
            $("#table1").append($tr);
        }
    },
    error:    function(data){
        alert("請求失敗!")
    },
    cache:    false, //默認值爲true 開啓緩存
    async:    true,  //默認值爲true 異步
})
四. 分佈式架構設計
  1. 傳統項目中存在的問題

    ​ 單體項目架構：對於外層，tomcat服務器只有一個，暴露的端口號爲80。

    ​ 將菜單管理 用戶管理 角色管理 ... 數以百計的模塊寫在了一塊兒

    ​ 常常性的操做會致使錯誤，一個模塊出錯就會致使整個程序沒法運行

  2. 分佈式架構(拆)

    ​ 1) 能夠將程序按照業務拆分紅不一樣的功能模塊：菜單管理系統 用戶管理系統 角色管理系統，若是其中一個出了問題，不會影響其餘系統的正常運行

    ​ www.jd.com miaosha.jd.com item.jd.com

    ​ 2) 若是業務功能足夠複雜則還須要按照層級拆分：以菜單管理爲例：

    ​ web層 js/html vo層 controller層 service層

    ​ 按照模塊拆分是一種粗粒度的拆分方式，按照層級拆分是一種細粒度的拆分方式。

  3. 拆分的意義

    ​ 使用分佈式架構設計，能夠有效地下降架構中的耦合性，提升程序開發的速度及運維速度。

  4. 分佈式思想存在的問題：

    ​ 1) 在分佈式架構中如何保證jar包文件的統一? pom.xml文件 -- 繼承

    ​ 2) 在分佈式架構中如何保證工具API的統一? 工具類 -- 依賴

    解決方法：

    ​ === 聚合項目 ===

    ​ 父級項目：管理公共jar包 工具項目common.jar：xxx.java

    ​ 用戶管理系統：端口號8080 pom.xml 商品管理系統：端口號8081 pom.xml --> 繼承/依賴

    ​ 繼承的最小單位是.jar，工具類的單位是.java，不能被繼承。

五. 搭建京淘後端服務器

  1. 建立父級工程

    做用：管理jar包文件，打包方式爲pom，只有pom項目能夠被繼承

    i. 建立項目jingtao

    ii. 修改pom.xml文件

    <!-- 打包的類型爲pom 只有pom才能被其餘項目繼承 -->
<packaging>pom</packaging>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.4.0</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
    <!-- 指定JDK版本 -->
    <java.version>1.8</java.version>
    <!-- 跳過測試類打包 -->
    <skipTests>true</skipTests>
</properties>

<!-- 2.依賴的做用:依賴須要的jar包文件 -->
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <!-- spring-boot-starter-xxx 啓動項 開箱即用
            只須要引入特定的jar包,進行簡單的配置,便可以使用該功能-->
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
        <scope>test</scope>
    </dependency>
    <!--支持熱部署 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </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>
        <version>5.1.32</version>
    </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>
</dependencies>
<!-- 不要添加build標籤,須要發佈的模塊才須要 -->
  2. 建立工具API項目

    i. 建立子級工程jingtao _common

    ii. 導入工具API

    爲何將pojo對象放到工具項目中? 由於用戶項目和商品項目都須要使用

  3. 建立後臺管理項目

    i. 建立子級工程jingtao _manage

    ii. 導入工具API

    iii. 添加依賴

    <!-- 動態web資源,jar包 -->
<packaging>war</packaging>

<!-- 添加jar包文件的依賴 -->
<dependencies>
    <dependency>
        <groupId>com.jt</groupId>
        <artifactId>jingtao_common</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

<!-- 全部的業務系統必須添加build標籤 -->
<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

    iv. 導入靜態資源文件

  4. 頁面的相關說明

    i. 默認的首頁如何跳轉

    ​ /WEB-INF/views/index.jsp

    ​ 當SpringBoot程序添加了springmvc的jar包以後，開啓自動化配置，生成一個/index的請求，在yml文件中配置了視圖解析器的前綴和後綴，會自動地拼接成首頁所在的路徑，實現跳轉。

    ​ 注意：默認頁面的名稱必須是index

    ii. 如何實現通用的頁面跳轉

    @Controller
public class IndexController {

   //動態獲取url中的地址做爲參數,能夠實現自動跳轉
   /* restFul語法：
        1.參數與參數之間用/分割
        2.參數用{}包裹
        3.參數使用指定註解獲取
      restFul風格2:
        按照不一樣的業務邏輯,採用不一樣的請求方式
        1.查詢業務 GET
        2.提交操做 POST
        3.更新操做 PUT
        4.刪除操做 DELETE
     */
    //@RequestMapping(value = "/page/{moduleName}",method = RequestMethod.GET)
    @GetMapping("/page/{moduleName}")
    public String module(@PathVariable String moduleName) {
        return moduleName;
    }
做業：複習JSON結構
  1. 什麼是JSON?
  2. JSON的基本結構
  3. JSON是否能夠嵌套
  4. 對象轉化JSON的內部原理
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程