CGB2005 JT-3 (spring整合web资源:war包目录结构，配置启动项，同步异步查询练习，ajax复习，引入js的2种方式，js变量 js遍历方式，分布式架构)

清风微凉 aaa

已于 2024-01-20 23:24:36 修改

阅读量245

点赞数

分类专栏：第四阶段：springboot 亿万发级别文章标签： spring ajax java

于 2021-01-04 12:13:50 首次发布

本文链接：https://blog.csdn.net/aa35434/article/details/108307499

版权

第四阶段：springboot 亿万发级别专栏收录该内容

19 篇文章 1 订阅

订阅专栏

注意事项

1.spring整合web资源:
创建springboot项目各个填写说明。
打包为war包方式的springboot项目目录结构。
引入jsp所需的依赖。
配置解析jsp视图解析器的yml文件。
idea页面资源加载404问题.
作业练习：同步异步方式发送请求跳转jsp页面.
ajax复习。
引入js的2种方式。路径。
注意jsp不能兼容js的EL表达式。jsp的取值遍历。
2.分布式架构设计：
jar包管理，api管理。

1.SpringBoot整合Web资源

1.1 创建项目

1.1.1 利用工具创建web项目

注意：
1.jt项目用的是jsp,动态web资源打包是war包 spring boot 创建项目依赖初始只要 spring web依赖。
2.动态web资源也可以用jar包的方式，但是需要额外配置。

请添加图片描述
注意:因为你用的是破解版的IDEA 不要点击更新IDEA,更新用了正版的–凉凉。
在这里插入图片描述

1.1.2 编译web资源缺少的目录结构

注意：直接用插件创建项目确少 webapp目录（目录：directory ），此目录属于main目录的子目录。
请添加图片描述
整合web资源的3种方式：

html 用模板工具API ， template。
动态的web资源放在webapp目录下。
大前端的方式即完全的前后端分离。

注意：此目录属于main目录的子目录

说明:将课前资料中的web-inf目录添加到web资源

1.1.3 编辑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_demo3_web</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>springboot_demo3_web</name>
	<description>Demo project for Spring Boot</description>
	
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	
	<properties>
		<java.version>1.8</java.version>
		<!--项目打包时,跳过测试类打包-->
		<skipTests>true</skipTests>
	</properties>
	
	<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>
	</dependencies>

	<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
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资源时,默认的运行环境可能配置有误,则导致页面资源无法加载!!!
说明:配置IDEA启动项.将工作目录配置到本项目即可
在这里插入图片描述
解决方案:
1).选择编辑按钮

2).配置项目路径 (打钩意思是，保存配置，不然下次还需要重新设定)

1.3 作业练习(同步)

需求：用户通过http://localhost:8090/findAll请求，跳转到userList.jsp也面中，并且展现user表所有的数据，以MP的方式查询。

1.3.1 编辑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>

jsp页面属性分析=
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
引入的jstl函数类库 prefix="c"代表前缀可以随意指定,以后想用这里面的标签就c开通，如<c:forEach >
${userList}表示从域中取值, 把数据遍历出来了，之后一个一个拿出来起了个名字为 u,通过这个u对象获取里面的属性。

1.3.2 编辑pojo类

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

@TableName
@Data
@Accessors(chain = true)
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private Integer age;
    private String sex;
}

1.3.3 编辑UserController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
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 java.util.List;

//@RestController   //json  字符串本身   不经过视图解析器
@Controller
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 需求：用户通过http://localhost:8090/findAll
     * 跳转页面路径:userList.jsp
     * 页面取值信息: el表达式:${userList} 从域中取值.
     *              在页面跳转之前应该将userList数据保存到域中 key就是userList.
     */
    @RequestMapping("/findAll")
    public String findAll(Model model){  //利用model对象将数据保存到request对象中.

        //1.查询数据库 获取list集合信息
        List<User> userList = userService.findAll();
        model.addAttribute("userList",userList);
        System.out.println(userList);
        return "userList";
    }

}

1.3.4 编辑UserService以及实现类

package com.jt.service;

import com.jt.pojo.User;

import java.util.List;

public interface UserService {
    public List<User> findAll();
}

package com.jt.service;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;


    @Override
    public List<User> findAll() {

        return userMapper.selectList(null);
    }
}

1.3.5 Mapper层

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;

public interface UserMapper extends BaseMapper<User> {

}

1.3.6 编辑主启动类

package com.jt;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.jt.mapper")
@SpringBootApplication
public class SpringbootDemo3WebApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringbootDemo3WebApplication.class, args);
	}

}

1.3.7 页面效果展现

在这里插入图片描述

1.4 ajax(异步)的方式实现列表的展现

1.4.1 Ajax复习

特点:局部刷新,异步访问.
问题: Ajax如何做到异步的??
答:因为有ajax引擎参与,使得请求由一个变为多个.
普通同步调用: 缺点 1. 用户在等待的过程中不能干别的活，2.当前服务器处于忙碌状态，这是用户发来请求只能等着·，最多等到超时。
在这里插入图片描述
ajax异步: （异步是请求个数不是一个，而是2个）
把请求交给ajax引擎再给服务器，请求完成后再进行通知用户在js中通知又叫回调

1.4.2 复制一份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>	
	</table>
</body>
</html>

请添加图片描述

1.4.3 跳转到复制后的jsp页面

  //跳转ajax页面
    @RequestMapping("/ajax")
    public String toAjax(){

        return "ajax";
    }

在这里插入图片描述

1.4.4下载jQuery函数类库

第一个是生产环境下：jar包文件js更加简洁(用这个)。
第二个是开发环境下:开发环境下会有测试方法，注释等。文件比较大。
在这里插入图片描述

1.4.5 引入jquery方式一

把js放到本地进行加载：把课前资料的js文件复制到webapp目录下。
js函数类库是静态资源不能放在WEB-INF目录下.WEB-INF目录是私有的资源不能直接访问，需要用controller的里面的方法进行中转,放在其他目录下的资源浏览器可以直接访问。

在这里插入图片描述

1.4.6 引入jquery方式二

CDN 类似于缓存：
在这里插入图片描述

1.4.7 编辑ajax.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函数类库   可以在jquery官网下载 -->
<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.4.8 实现Ajax数据访问

执行流程说明：用户先根据地址访问这个包含Ajax的页面，通过文档就绪事件函数在执行里面的Ajax函数发送请求，之后去访问控制层，服务层，数据层调用里面的数据之后通过回调函数返回给里面的data数据，在把里面的数据动态拼接到页面上。

 //实现ajax业务调用,返回页面列表数据.
    @RequestMapping("/findAjax")
    @ResponseBody
    public List<User> findAjax(){

        return userService.finaAll();
    }

1.4.9 编辑ajax.jsp把数据更新到页面上

注意:这里不能用js的EL表达是取值，因为和jsp的EL表达式冲突不兼容，所以只能用拼接的方式。

<%@ 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">
     /**思路：循环遍历data之后取值,之后封装tr标签append追加。
          for语法1:   let声明变量（有作用域）    var声明变量（没有作用域，赋值可能会出错）    const声明常量
            for(let i=0;i<xxx.length;i++){
            //data[i]获取到了是一个对象
                   let user =data[i];
                   let id = user.id;
	               let name = user.name;
	               let age = user.age;
	               let sex = user.sex;
	               alert("执行输出结果："+name);
            }

          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);
               }
  以上都是js原生的for循环语法，没有用jquery的for循环，因为以后如果不用jquery它自带的for循环就用不了了。
           **/

//方式一：Ajax最为根本的方法
	$(function(){

		$.ajax({
			type : "get",
			url  : "/findAjax",
			//dataType : "text/json/html/xml",		//返回值类型，一般不用写会根据数据类型自动指定，特殊的写如：跨域。
			async : false,	//关闭异步操作,改为同步的请求，默认为true
			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("请求异常!!!!");
			}
		})


    //方式二：$.get
        //1. $.get(url,data,回调函数)
        //findAjax查询后端userList集合信息.    回调函数是数据由Ajax引擎传回来以后才正常执行。
       /*  $.get("/findAjax",function(data){
           //jauery提供的循环方式
            $(data).each(function(index,user){
				console.log(user);
               })
    //循环遍历data之后取值  之后封装   append追加
            let trs = "";
            for(let user of data){  //jsp中不适用与箭头的形式
               let id = user.id;
               let name = user.name;
               let age = user.age;
               let sex = user.sex;
      //目的是把数据拼接过去，准备一个行级标签元素
      //js原生的拼接方式  align='center'：设置里面的数据居中
               trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
            }
         //在把标签添加到table标签里面
            $("#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>

在这里插入图片描述

2. 京淘项目架构设计

2.1 传统项目架构设计问题

说明:由于单体项目将所有的模块都写到了一起,将来如果其中一个模块出现了问题,将导致整个项目不能正常的运行.
在这里插入图片描述

2.2 分布式架构设计

2.2.1 分布式介绍

由于传统项目导致各个模块之间的耦合性较高.所以需要采用分布式的思想将项目进行拆分.
核心理念: 化整为零将项目按照某些特定的规则进行拆分.

2.2.2 按照功能模块拆分

说明:由于单体项目的耦合性高,所以需要按照功能模块进行拆分.降低系统架构的耦合性
在这里插入图片描述

2.2.3 按照层级拆分

在按照模块拆分的基础之上,将项目按照层级拆分,将粒度控制的更加的具体.分工更加的明确,有效的提高软件的开发效率.
在这里插入图片描述

2.3 分布式思想带来的问题

2.3.1 分布式思想jar包如何维护?（继承）

一个单体架构项目只有一个pom文件，现在分布式比如是2个系统就有2个pom文件，里面就要维护2份jar包，但是如果版本升级每个pom文件都要维护。解决：定义父级工程管理公共的jar包，子级工程只需要继承父级即可。

通过项目的打包方式为pom，来区分它是父级项目。
在这里插入图片描述

2.3.2 分布式思想中工具api如何管理?（依赖）

继承的最小单位是jar包文件， API是.java文件比jar包小不能被继承所以就不能放在父级工程。解决：创建一个公共的类项目用来存放工具API，之后打成一个jar包，别人想用你的项目只需要在pom文件中引入依赖即可，和平时添加依赖一样。
注意：这个工具API项目和父级项目的jar包关系仍是继承关系，只是和它平级的项目如manage是依赖关系
在这里插入图片描述

总结：1.继承一次性可以继承多个jar包文件，依赖一次性只能依赖一个。
2. 继承用的是公共的，第三方别人已经写好的，拿过来直接用即可。而自己写的工具Api或则公司的架构师写的API来简化代码操作的放在common里面。

清风微凉 aaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CGB2005 JT-3 (spring整合web资源:war包目录结构，配置启动项，同步异步查询练习，ajax复习，引入js的2种方式，js变量 js遍历方式，分布式架构)

1.SpringBoot整合Web资源1.1 创建项目1.1.1 利用工具创建项目1.1.2 新建web资源目录说明:将课前资料中的web-inf目录添加到web资源1.1.3 编辑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-inst
复制链接

扫一扫