jt-day03

1.web项目创建(springboot项目)

步骤：xml---jsp---pojo---yml---controller---serveice--- 页面效果展现
1.pom.xml文件：springboot【jdbc/web/devtools热部署/mysql/lombok/mybatis-plus/JSP/jstl/】

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </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>

编辑JSP页面

<%@ 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>
</head>
<body>
    <table 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>
            <th></th>
        </tr>
        
        <c:forEach items="${userList}" var="u">
            <tr>
                <th>${u.id}</th>
                <th>${u.name}</th>
                <th>${u.age}</th>
                <th>${u.sex}</th>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

3.编辑POJO

@TableName
@Data
@Accessors(chain = true)
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id; //主键自增
    private String name;
    private Integer age;
    private String sex;
}

4.编辑YML配置文件

server:
  port: 8090
  servlet:
    context-path: /
spring:
  datasource:
    #驱动版本问题 高版本需要添加cj关键字  一般可以省略
    #driver-class-name: com.mysql.cj.jdbc.Driver
    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



mybatis-plus:
  #别名包定义 Mapper的resultType中只需要写类名 之后自动拼接即可
  type-aliases-package: com.jt.pojo
  #加载指定的xml映射文件
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true


# 实现sql打印
logging:
  level:
    com.jt.mapper: debug

5.编辑UserController

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 java.util.List;

@Controller
public class UserController {
    @Autowired
    private UserService userService;
    /**
     * 跳转页面: userList.jsp
     * url:localhost:8090/findAll
     * 步骤:
     *      1.pojo  2.mapper 3.service  4.controller
     *      5.YML配置前后缀
     *      6.jar包问题  3个包
     *      7.导入页面 userList.jsp
     *      */
    @RequestMapping("/findAll")
    public String findAll(Model model){
        //1.查询用户列表信息
        List<User> userList = userService.findAll();
        //2.将数据保存到request域中 之后返回给用户 视图渲染过程
        model.addAttribute("userList",userList);
        return "userList";
    }
}

6.编辑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);
    }
}

效果展示

2.异步方式调用（AJAX）【js--controller】

1.知识回顾
特点: 局部刷新:异步调用(加载)
调用原理说明:

1.用户将请求发给AJAX引擎进行处理.之后等待引擎返回数据.
2.ajax引擎接收到用户的请求之后.,代替用户访问后端服务器,
3.后端服务器接收请求之后,执行业务处理. 并且将返回值返回.
4.ajax引擎收到返回值结果之后,要在第一时间通知给用户. 利用回调函数将数据传给客户端.ajax调用成功.

2.js页面的内容变化（get/post/getJson）

<%@ 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>

<!-- 1.导入函数类库 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //让JS页面加载完成,之后执行JS
    $(function(){
        /*     
            需求: 利用ajax方式动态获取user数据信息
            请求网址:  /findAjax
            知识点:  
                返回值类型: 可以根据数据自动匹配类型,所以可以不写.
                1. $.get(url地址,传递的参数,回调函数,返回值类型)
                2. $.post(.....)
                3. $.getJSON(.....)
         */
        $.get("/findAjax",function(result){
            //1.可以使用js中的for循环
            /* for(let i=0; i<result.length;i++){
                
            } */
            
            /* for(let index in result){
                console.log(index);
            } */
        
            for(let user of result){
                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>"
                $("#tab1").append(tr);
            }
        })
    })
</script>

</head>
<body>
    <table id="tab1"  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>

3.编辑UserController

 /**
     * 实现页面的跳转
     * url地址:  localhost:8090/ajax
     * 跳转的页面:  ajax.jsp
     */
    @RequestMapping("/ajax")
    public String ajax(){
        return "ajax";
    }

    /**
     * 实现ajax业务调用
     * url: http://localhost:8090/findAjax?id=40
     * 参数: id
     * 返回值:List<User>
     */
    @RequestMapping("/findAjax")
    @ResponseBody       //ajax结束标识
    public List<User> findAjax(){
        return userService.findAll();
    }

页面效果展现

jt-day03

1.web项目创建(springboot项目)

2.异步方式调用（AJAX）【js--controller】

早起的鸟儿

引用和评论

端口查找/删除

【成功解决】JetBrains PyCharm 激活提示 “Key is invalid” (秘钥无效) 的终极解决方案

解剖DeepSeek四把刀，一场深到源码，大到行业，细到人心的手术盛宴

个人博客目录在此

【前瞻技术布局】打破"沙漏“现象→提高生成式搜索/推荐的上限

好用的开源埋点方案-ClkLog埋点用户分析系统

做「长期主义者」的技术人们