第四阶段笔记 Jingtao

day 03 SpringBoot - Ajax

此文档是根据上课流程整理，更多细节和图片请参考刘老师的专栏

江哥的专栏

《cgb2008-京淘day03》

一. SpringBoot整合Web资源

创建动态Web资源 -- springboot_demo3
项目结构
创建webapp目录，将WEB-INF文件夹粘贴进来

添加jar包




    javax.servlet
    javax.servlet-api



    javax.servlet
    jstl



    org.apache.tomcat.embed
    tomcat-embed-jasper

编辑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
    //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 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 ===

ajax请求流程

如果需要发起ajax请求时，一般需要发起两个请求，一个("toAjax")是用来跳转页面的，另一个("findAjax")是用来请求数据的。

/* 测试转到ajax.html */
@RequestMapping("/toAjax")
public String toAjax(Model model){
    List list = userService.findAll();
    model.addAttribute("userList",list);
    return "ajax";
}
 
/* 接收ajax请求:/findAjax */
@RequestMapping("/findAjax")
@ResponseBody  //1.将返回值的结果转化为JSON的数据;2.代表ajax请求结束
public List 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 = ""+id+""+name+""+age+""+sex+"";
            $("#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


    org.springframework.boot
    spring-boot-starter-parent
    2.4.0
     


    
    1.8
    
    true




    
        org.springframework.boot
        
        spring-boot-starter-web
    
    
        org.springframework.boot
        spring-boot-starter-test
        test
    
    
        junit
        junit
        4.12
        test
    
    
    
        org.springframework.boot
        spring-boot-devtools
    
    
    
        org.projectlombok
        lombok
    
    
    
        mysql
        mysql-connector-java
        runtime
        5.1.32
    
    
    
        org.springframework.boot
        spring-boot-starter-jdbc
    
    
    
        com.baomidou
        mybatis-plus-boot-starter
        3.2.0
    
    
    
    
        javax.servlet
        javax.servlet-api
    
    
    
        javax.servlet
        jstl
    
    
    
        org.apache.tomcat.embed
        tomcat-embed-jasper

创建工具API项目
i. 创建子级工程jingtao _common
ii. 导入工具API
为什么将pojo对象放到工具项目中? 因为用户项目和商品项目都需要使用

创建后台管理项目

i. 创建子级工程jingtao _manage

ii. 导入工具API

iii. 添加依赖


war



    
        com.jt
        jingtao_common
        1.0-SNAPSHOT
    




    
        
            org.springframework.boot
            spring-boot-maven-plugin

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的内部原理

第四阶段笔记 Jingtao_day03