• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

京淘day03-SpringBoot整合web

互联网 diligentman 2个月前 (11-26) 35次浏览

1.SpringBoot整合web资源

1.1 创建动态web资源

京淘day03-SpringBoot整合web

1.2 项目结构

京淘day03-SpringBoot整合web

1.3 添加资源/jar包

1).添加资源
京淘day03-SpringBoot整合web
2).添加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>

1.4 添加YML配置文件

server:
  port: 8090
  servlet:
    context-path: /     #项目根目录发布
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

  mvc:         #引入mvn配置
    view:
      prefix: /WEB-INF/     # /默认代表根目录 src/main/webapp
      suffix: .jsp

# Spring整合Mybatis-plus配置
mybatis-plus:
  type-aliases-package: com.jt.pojo
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

# 打印Mybatissql语句
logging:
  level:
    com.jt.mapper: debug

1.5 入门案例

需求: 用户通过http://localhost:8090/findAll 获取全部userList集合,并且在userList.jsp页面中进行表格数据展现

1.5.2 动态web资源404报错说明

说明:IDEA默认条件下工作目录选择不正确的,需要手动配置一下,注意工作目录编辑
京淘day03-SpringBoot整合web
京淘day03-SpringBoot整合web

1.5.2 编辑UserController

第三阶段: pojo–>Mapper—–>Service——>Controller——->页面及JS 自下而上的开发方式
第四阶段 pojo—>Controller—>Service—–>Mapper 自上而下的开发方式

package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/findAll")
    public String findAll(Model model){
        List<User> userList = userService.findAll();
        model.addAttribute("userList", userList);
        return "userList";
    }
}

1.5.3 编辑UserService

package com.jt.service;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }
}

1.5.4 页面效果展现

京淘day03-SpringBoot整合web

1.6 异步实现业务调用

1.6.1 Ajax为什么可以异步呢?工作原理是?

说明:
1).Ajax中间有ajax引擎的参与.ajax引擎实质就是一种代理的思想
2).由于需要实现异步的操作,所以请求必然是多次请求.多次响应.
京淘day03-SpringBoot整合web

1.6.2 导入jQuery.JS

京淘day03-SpringBoot整合web

1.6.3 Ajax请求流程

如果需要发起Ajax请求时,一般需要发起2个请求.
1个是用来跳转页面的 http://localhost:8090/toAjax
1个是用来请求数据的 http://localhost:8090/findAjax

1.6.4 编辑页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>您好Springboot</title>
      <!-- 引入函数类库 -->
 <script src="../js/jquery-3.4.1.min.js"></script>
 <script type="text/javascript">
      
        //1.让页面全部加载完成  函数式编程
          $(function(){
            //1.$.get(url地址,传递的参数,回调函数,返回值类型)  
              //$.post()   $.getJSON  $.ajax
          $.ajax({
          url:"/findAjax",          //url地址
          method:"get",             //参数类型
          data:{id:1,name:"tomcat"},//请求参数
          success: function(data){
          //console.log(data);
          for(let user of data){
          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: true,//缓存默认true
          async: true,//同步异步默认异步true
         })
         //关于参数写法 2种 
         //1.JSON格式{id:1,name:"tomcat"}   
         //2.字符串拼接 id=1&name="tomcat" 
         // $.get("/findAjax",{id:1},function(data){    
         //console.log(data);    
         //循环遍历方式3  of
         //for(let user of data){
         //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); 
         // } 
         //循环遍历方式2  in
         //for(let index in data){ 
         //let user=data[index]; 
         //let id=user.id; 
         //let name=user.name; 
         //let age=user.age; 
         //let sex=user.sex; 
         //console.log(user); 
         //} 
         //循环遍历方式1 for
         //for(let i=0;i<data.length;i++){ 
         //let user=data[i]; 
         //let id=user.id; 
         //let name=user.name; 
         //let age=user.age; 
         //let sex=user.sex; 
         //console.log(id+":"+name+":"+age+":"+sex);
         //} 
         //})
         })
      </script>
      </head>
      <body>
         <table id="table1" border="1px" width="65%" align="center">
            <tr>
               <td colspan="6" align="center"><h3>学生信息</h3></td>
            </tr>
            <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
            </tr>
         </table>
      </body>
      </html>

1.6.5 编辑UserController

    //跳转到ajax.jsp页面中
    @RequestMapping("toAjax")
    public String toAjax(){
        return "ajax";
    }
    /**
     * 接收ajax请求: /findAjax
     * 返回值:  List<User>
     */
    @RequestMapping("/findAjax")
    @ResponseBody //1.将返回值结果转化为JSON数据返回   2.代表ajax请求结束
    public List<User> findAjax(){
        return userService.findAll();
    }

喜欢 (0)