項目1 day03

時間 2021-02-20

標籤 javascript html java mysql jquery es6 web ajax spring sql 欄目 JavaScript 简体版

原文原文鏈接

1.SpringBoot整合Web資源

1.1 建立項目

1.1.1 利用工具建立項目

1.1.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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>springboot_jsp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <!--parent標籤做用: 定義了SpringBoot中全部關聯項目的版本號信息.-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>


    <properties>
        <java.version>1.8</java.version>
        <!--項目打包時,跳過測試類打包-->
        <skipTests>true</skipTests>
    </properties>

    <!--開箱即用:SpringBoot項目只須要引入少許的jar包及配置,便可擁有其功能.
        spring-boot-starter 擁有開箱即用的能力.
        maven項目中依賴具備傳遞性.
            A 依賴  B  依賴 C項目   導入A bc會自動依賴
    -->
    <dependencies>
        <!--直接依賴web springMVC配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <!--springBoot-start SpringBoot啓動項  -->
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--SpringBoot重構了測試方式 能夠在測試類中 直接引入依賴對象-->
        <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>

        <!--支持熱部署 -->
        <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>
        </dependency>

        <!--springBoot數據庫鏈接  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--spring整合mybatis-plus 只導入MP包,刪除mybatis包 -->
        <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,則程序發佈時否則會報
        項目中沒有main方法.
    -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

1.2 SpringBoot整合web

1.2.1 編輯YML配置文件

server:
  port: 8090
  servlet:
    context-path: /
spring:
  datasource:
    #driver-class-name: com.mysql.cj.jdbc.Driver  #驅動註釋,採用默認的方式
    url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

  #引入mvc配置
  mvc:         #引入mvn配置
    view:
      prefix: /WEB-INF/     # /默認表明根目錄 src/main/webapp
      suffix: .jsp

#Mybatisplus整合
mybatis-plus:
  #定義別名包 將實體對象的包路徑進行封裝.
  type-aliases-package: com.jt.pojo
  #添加xml文件的依賴
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #開啓駝峯映射
  configuration:
    map-underscore-to-camel-case: true

# 配置數據庫日誌
logging:
  level:
    #打印哪一個包下的日誌信息.
    com.jt.mapper: debug

1.2.2 關於IDEA頁面資源加載404問題

說明:因爲IDEA加載動態web資源時,默認的運行環境可能配置有誤,則致使頁面資源沒法加載!!!
javascript

1.2.3 編輯userList.jsp頁面

<%@ 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>
</head>
<body>
    <table 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>
            <th></th>
        </tr>

        <!-- ${userList}表示從域中取值. request域 Session域 -->
        <c:forEach items="${userList}" var="u">
            <tr>
                <th>${u.id}</th>
                <th>${u.name}</th>
                <th>${u.age}</th>
                <th>${u.sex}</th>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

1.2.4 編輯UserController

package com.jt.controller;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@Controller  //執行視圖解析器代理.
//@RestController //通常適用於ajax 不走視圖解析器. 而且返回JSON數據.
public class UserController {

    @Autowired
    private UserMapper userMapper;

    /**
     * 需求1: 請求路徑localhost:8090/findAll   跳轉到userList.jsp頁面中
     * 頁面取值方式: ${userList}
     */
    @RequestMapping("/findAll")
    public String findAll(Model model){ //model是SpringMVC中提供操做request對象的API

        //1.從數據庫中獲取的數據
        List<User> userList = userMapper.selectList(null);

        //2.將userList集合保存到域中,以後頁面取值
        model.addAttribute("userList",userList);
        //model調用的是request對象

        //返回頁面邏輯名稱
        return "userList";
    }
}

1.2.4 頁面效果展示

1.3 Ajax複習

1.3.1 Ajax特色

特色:局部刷新,異步訪問.
問題: Ajax如何作到異步的?? 答:由於有ajax引擎參與,使得請求由一個變爲多個
html

1.3.2 跳轉ajax頁面

//跳轉ajax頁面
    @RequestMapping("/ajax")
    public String toAjax(){
        return "userAjax";
    }

1.3.3 編輯UserAjax.jsp頁面

<%@ 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>
<!-- 引入JS函數類庫 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    //讓頁面加載完成以後執行
    $(function(){

        //1.$.get("url地址","添加參數","回調函數","返回值結果類型 text/html/json....通常ajax會自動匹配.");
        $.get("/findAjax",function(data){
            alert("ajax執行成功!!!!");
            //將數據封裝到頁面中!!!
        });

        //2.$.post();
        //3.$.getJSON();
        //4.$.getScript();
        //5.$.ajax();

    })
</script>


<title>您好Springboot</title>
</head>
<body>
    <table 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>
            <th></th>
        </tr>
    </table>
</body>
</html>

1.3.4 實現Ajax數據訪問

//實現ajax業務調用,返回頁面列表數據.
    @RequestMapping("/findAjax")
    @ResponseBody
    public List<User> findAjax(){
        return userMapper.selectList(null);
    }

1.3.4 編輯頁面JS

<%@ 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>
<!-- 引入JS函數類庫 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    //讓頁面加載完成以後執行
    $(function(){

        //1.$.get("url地址","添加參數","回調函數","返回值結果類型 text/html/json....通常ajax會自動匹配.");
        $.get("/findAjax",function(data){
            //data = [{user},{user},{user}]  es6~jsp中衝突
            //需求: 將userList集合信息動態的添加到table中.

            var trs = null;
            $(data).each(function(index){
                //index表明循環遍歷的下標從0開始
                var user = data[index];
                var id = user.id;
                var name = user.name;
                var age = user.age;
                var sex = user.sex;
                //最終須要在table中展示
                trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
            });

            //將結果追加到table中便可.
            $("#tab1").append(trs);
        });

        //2.$.post();
        //3.$.getJSON();
        //4.$.getScript();
        //5.$.ajax();  說明
        $.ajax({
            type: "get",
            url: "/findAjax2",
            //data: {"id":"1","name":"tomcat"},
            data: "id=1&name=tomcat",
            success: function(data){
                alert("ajax調用成功!!!");
                alert(data);
            },
            async :  true,
            error :  function(data){
                alert("服務器異常,請稍後重試!!!!");
            }
        });

    })
</script>


<title>您好Springboot</title>
</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>
            <th></th>
        </tr>
    </table>
</body>
</html>