共计 7101 个字符,预计需要花费 18 分钟才能阅读完成。
day 03 SpringBoot – Ajax
此文档是依据上课流程整顿,更多细节和图片请参考刘老师的专栏
江哥的专栏
《cgb2008- 京淘 day03》
一. SpringBoot 整合 Web 资源
- 创立动静 Web 资源 — springboot_demo3
- 我的项目构造
创立 webapp 目录,将 WEB-INF 文件夹粘贴进来
-
增加 jar 包
<!--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>
-
编辑 yml 文件
mvc: #引入 mvn 配置 view: prefix: /WEB-INF/ # / 默认代表根目录 src/main/webapp suffix: .jsp
二. 实现 Web 资源入门案例
需要:用户通过 http://localhost:8090/findAll 获取全副 UerList 汇合,并在 userList.jsp 页面中进行表格化地展示。
-
编辑 UserController
第三阶段:pojo –> Mapper –> service –> controller –> 页面及 js 自下而上
第四阶段:pojo –> controller –> service –> Mapper 自上而下
//@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"; } }
- 动静 Web 资源 404 报错阐明
IDEA 默认条件下工作目录的抉择是不正确的,须要手动配置一下。留神工作目录的编辑。
三. 异步实现数据获取(Ajax)
- Ajax 的工作原理
http 协定标准:一次申请,一次响应
同步申请:用户发动了一个申请,服务器解决后将后果返回给用户。如果后端服务器正忙,用户须要期待,体验不好。
异步申请:用户发动了一个申请,先把申请交给 Ajax 引擎(代理),代理通过回调函数和用户保持联系,用户不须要期待服务器的响应。代理向服务器发动申请,期待后端服务器解决后第一工夫通过回调函数将后果返回给用户。
阐明:1) Ajax 两头有代理的参加,其实是代理的思维;2) ajax 发动屡次申请,屡次响应
- 导入 jQuery.js 函数类库 /webapp/js
参见《Download jQuery | jQuery》
- 实现 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>
-
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(); }
-
$.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 异步 })
四. 分布式架构设计
- 传统我的项目中存在的问题
单体我的项目架构:对于外层,tomcat 服务器只有一个,裸露的端口号为 80。
将菜单治理 用户治理 角色治理 … 数以百计的模块写在了一起
经常性的操作会导致谬误,一个模块出错就会导致整个程序无奈运行
- 分布式架构(拆)
1) 能够将程序依照业务拆分成不同的功能模块:菜单管理系统 用户管理系统 角色管理系统,如果其中一个出了问题,不会影响其余零碎的失常运行
www.jd.com miaosha.jd.com item.jd.com
2) 如果业务性能足够简单则还须要依照层级拆分:以菜单治理为例:
web 层 js/html vo 层 controller 层 service 层
依照模块拆分是一种粗粒度的拆分形式,依照层级拆分是一种细粒度的拆分形式。
- 拆分的意义
应用分布式架构设计,能够无效地升高架构中的耦合性,进步程序开发的速度及运维速度。
- 分布式思维存在的问题:
1) 在分布式架构中如何保障 jar 包文件的对立? pom.xml 文件 — 继承
2) 在分布式架构中如何保障工具 API 的对立? 工具类 — 依赖
解决办法:
=== 聚合我的项目 ===
父级我的项目:治理公共 jar 包 工具我的项目 common.jar:xxx.java
用户管理系统:端口号 8080 pom.xml 商品管理系统:端口号 8081 pom.xml –> 继承 / 依赖
继承的最小单位是.jar,工具类的单位是.java,不能被继承。
五. 搭建京淘后端服务器
-
创立父级工程
作用:治理 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 标签, 须要公布的模块才须要 -->
- 创立工具 API 我的项目
i. 创立子级工程 jingtao _common
ii. 导入工具 API
为什么将 pojo 对象放到工具我的项目中? 因为用户我的项目和商品我的项目都须要应用
-
创立后盾治理我的项目
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. 导入动态资源文件
-
页面的相干阐明
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 构造
- 什么是 JSON?
- JSON 的根本构造
- JSON 是否能够嵌套
- 对象转化 JSON 的外部原理