day 03 SpringBoot - Ajax

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

江哥的专栏

《cgb2008-京淘day03》

一. SpringBoot整合Web资源
  1. 创立动静Web资源 -- springboot_demo3
  2. 我的项目构造

    创立webapp目录，将WEB-INF文件夹粘贴进来

  3. 增加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>

  4. 编辑yml文件

    mvc:         #引入mvn配置    view:      prefix: /WEB-INF/     # /默认代表根目录 src/main/webapp      suffix: .jsp
二. 实现Web资源入门案例

需要：用户通过http://localhost:8090/findAll获取全副UerList汇合，并在userList.jsp页面中进行表格化地展示。

  1. 编辑UserController

    第三阶段：pojo --> Mapper --> service --> controller -->页面及js 自下而上

    第四阶段：pojo --> controller --> service --> Mapper 自上而下

    //@RestController //程序将不会执行视图解析器的办法@Controllerpublic 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. 如何实现通用的页面跳转

    @Controllerpublic 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的外部原理