第四阶段笔记 Jingtao_day03

头像
嘉全JacquesCN
    阅读 9 分钟
    1

    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的内部原理
    javaintellij-idea
    嘉全JacquesCN
    56 声望4 粉丝

    Null4Fun 闹着玩

    « 上一篇
    第四阶段笔记 Jingtao_day02
    下一篇 »
    第四阶段笔记 Jingtao_day04

    引用和评论

    推荐阅读
    头像
    第一阶段笔记 Java基础_day01

    嘉全JacquesCN阅读 1.4k

    头像
    Java8的新特性

    codecraft赞 36阅读 31.7k评论 1

    头像
    Java11的新特性

    codecraft赞 28阅读 22.5k评论 3

    头像
    Java5的新特性

    codecraft赞 13阅读 26.7k

    头像
    Java9的新特性

    codecraft赞 20阅读 18.7k

    头像
    Java13的新特性

    codecraft赞 17阅读 13.8k

    头像
    Java7的新特性

    codecraft赞 10阅读 21.3k

    0 条评论
    得票最新