乐趣区

关于java:第四阶段笔记-Jingtaoday03

jiezi

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

    @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 构造
  1. 什么是 JSON?
  2. JSON 的根本构造
  3. JSON 是否能够嵌套
  4. 对象转化 JSON 的外部原理
退出移动版