010 springboot整合mybatis-plus 登录页面和首页不拦截

文章目录

- customer.sql
- ConfigRegistCenter.java
- CustomerController.java
- Customer.java
- LoginCustomer.java
- JwtInterceptor.java
- CustomerMapper.java
- ICustomerService.java
- CustomerServiceImpl.java
- JwtUtil.java
- ServerResult.java
- ServletInitializer.java
- SpringbootLoginApplication.java
- application.yaml
- css_04_首页.css
- css_11_login.css
- js_02_登录验证.js
- index.html
- login.html
- pom.xml

customer.sql


-- ----------------------------
-- Table structure for customer
-- ----------------------------
DROP TABLE IF EXISTS `customer`;
CREATE TABLE `customer`  (`customer_id` int(0) NOT NULL AUTO_INCREMENT COMMENT '用户id',`customer_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户名',`customer_pwd` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户密码',`customer_telno` bigint(0) NOT NULL COMMENT '用户电话',`customer_status` int(0) NULL DEFAULT NULL COMMENT '用户状态',`customer_create_date` date NULL DEFAULT NULL COMMENT '注册时间',`customer_head_img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '头像',`customer_update_date` date NULL DEFAULT NULL COMMENT '更改时间',`other1` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,`other2` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,`custom_cteate_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',`custom_update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',PRIMARY KEY (`customer_id`) USING BTREE,UNIQUE INDEX `customertel_index`(`customer_telno`) USING BTREE COMMENT '用户手机号'
) ENGINE = InnoDB AUTO_INCREMENT = 111 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of customer
-- ----------------------------
INSERT INTO `customer` VALUES (1, 'zhang', 'zhang1023', 14506764314, 1, '2001-06-17', 'zhang.png', NULL, NULL, NULL, NULL, NULL);

ConfigRegistCenter.java


package com.example.config;import com.example.interceptor.JwtInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;@Configuration //将当前类注入到Spring容器中
@EnableWebMvc
public class ConfigRegistCenter implements WebMvcConfigurer {//注册拦截器public void addInterceptors(InterceptorRegistry registry){// "/" 项目根目录（http://localhost:80/app）registry.addInterceptor(new JwtInterceptor()).addPathPatterns("/**") //所有资源，包括静态资源.excludePathPatterns("/static/**").excludePathPatterns("/customer/login");}// 静态资源配置@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("/","classpath:webapp/");WebMvcConfigurer.super.addResourceHandlers(registry);}}

CustomerController.java


package com.example.controller;import com.example.entity.Customer;
import com.example.service.ICustomerService;
import com.example.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;/*** <p>*  前端控制器* </p>** @author dd* @since 2024-04-10*/
@Controller
@RequestMapping("customer")
public class CustomerController {@Autowiredprivate ICustomerService iCustomerService;@GetMapping("{customerId}")@ResponseBodypublic Customer getById(@PathVariable("customerId") Integer customerId){Customer customer = iCustomerService.getById(customerId);return customer;}//    @PostMapping("login")
//    public ModelAndView login(String customerName, String customerPwd){
//
//        ServerResult result = iCustomerService.login(customerName, customerPwd);
//        ModelAndView mav = new ModelAndView();
//        if(result.getCode() == 200){
//            mav.addObject("result",result);
//            mav.setViewName("login2");
//        }else{
//            mav.addObject("result",result);
//            mav.setViewName("login");
//        }
//        return mav;
//
//
//    }@PostMapping("login")@ResponseBodypublic ServerResult login(String customerName, String customerPwd){System.out.println("contoller层"+customerName+customerPwd);ServerResult result = iCustomerService.login(customerName,customerPwd);System.out.println(result);return result;}}

Customer.java


package com.example.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;import java.io.Serializable;
import java.time.LocalDate;
import java.time.LocalDateTime;/*** <p>* * </p>** @author dd* @since 2024-04-10*/
public class Customer implements Serializable {private static final long serialVersionUID = 1L;/*** 用户id*/@TableId(value = "customer_id", type = IdType.AUTO)private Integer customerId;/*** 用户名*/private String customerName;/*** 用户密码*/private String customerPwd;/*** 用户电话*/private Long customerTelno;/*** 用户状态*/private Integer customerStatus;/*** 注册时间*/private LocalDate customerCreateDate;/*** 头像*/private String customerHeadImg;/*** 更改时间*/private LocalDate customerUpdateDate;private String other1;private String other2;/*** 创建时间*/private LocalDateTime customCteateTime;/*** 更新时间*/private LocalDateTime customUpdateTime;public Integer getCustomerId() {return customerId;}public void setCustomerId(Integer customerId) {this.customerId = customerId;}public String getCustomerName() {return customerName;}public void setCustomerName(String customerName) {this.customerName = customerName;}public String getCustomerPwd() {return customerPwd;}public void setCustomerPwd(String customerPwd) {this.customerPwd = customerPwd;}public Long getCustomerTelno() {return customerTelno;}public void setCustomerTelno(Long customerTelno) {this.customerTelno = customerTelno;}public Integer getCustomerStatus() {return customerStatus;}public void setCustomerStatus(Integer customerStatus) {this.customerStatus = customerStatus;}public LocalDate getCustomerCreateDate() {return customerCreateDate;}public void setCustomerCreateDate(LocalDate customerCreateDate) {this.customerCreateDate = customerCreateDate;}public String getCustomerHeadImg() {return customerHeadImg;}public void setCustomerHeadImg(String customerHeadImg) {this.customerHeadImg = customerHeadImg;}public LocalDate getCustomerUpdateDate() {return customerUpdateDate;}public void setCustomerUpdateDate(LocalDate customerUpdateDate) {this.customerUpdateDate = customerUpdateDate;}public String getOther1() {return other1;}public void setOther1(String other1) {this.other1 = other1;}public String getOther2() {return other2;}public void setOther2(String other2) {this.other2 = other2;}public LocalDateTime getCustomCteateTime() {return customCteateTime;}public void setCustomCteateTime(LocalDateTime customCteateTime) {this.customCteateTime = customCteateTime;}public LocalDateTime getCustomUpdateTime() {return customUpdateTime;}public void setCustomUpdateTime(LocalDateTime customUpdateTime) {this.customUpdateTime = customUpdateTime;}@Overridepublic String toString() {return "Customer{" +"customerId=" + customerId +", customerName=" + customerName +", customerPwd=" + customerPwd +", customerTelno=" + customerTelno +", customerStatus=" + customerStatus +", customerCreateDate=" + customerCreateDate +", customerHeadImg=" + customerHeadImg +", customerUpdateDate=" + customerUpdateDate +", other1=" + other1 +", other2=" + other2 +", customCteateTime=" + customCteateTime +", customUpdateTime=" + customUpdateTime +"}";}
}

LoginCustomer.java


package com.example.entity;public class LoginCustomer {private Integer customerId;private String customerName;public LoginCustomer() {}public LoginCustomer(Integer customerId, String customerName) {this.customerId = customerId;this.customerName = customerName;}public Integer getCustomerId() {return customerId;}public void setCustomerId(Integer customerId) {this.customerId = customerId;}public String getCustomerName() {return customerName;}public void setCustomerName(String customerName) {this.customerName = customerName;}
}

JwtInterceptor.java


package com.example.interceptor;import com.example.util.JwtUtil;
import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** 登录检查拦截器* 被拦截下来的URL:* 1.获得token* 2.check token*/
public class JwtInterceptor implements HandlerInterceptor {//在访问前拦截@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {System.out.println("登录检查拦截器正在拦截URL>>>"+request.getRequestURI());//跨域请求会首先发一个option请求,直接返回正常状态并放行//if(request.getMethod().equals("OPTION"))//return true;//1.获得tokenString token = request.getHeader("token");if(token == null || token.equals("")){System.out.println("登录检查拦截器正在拦截,没有获得到token");//跳转到登录页面response.sendRedirect(request.getContextPath()+"/static/login.html");return false;}else {//2.check tokenSystem.out.println("登录检查拦截器正在拦截,获得到的token:"+token);if (JwtUtil.checkToken(token)){//有效tokenreturn true;}else {System.out.println("被拦截了，无效token");return false;}}//        if(token != null){
//            if(JwtUtil.checkToken(token))
//                return true;//token有效
//        }
//        return false;}}

CustomerMapper.java


package com.example.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.entity.Customer;/*** <p>*  Mapper 接口* </p>** @author dd* @since 2024-04-10*/
public interface CustomerMapper extends BaseMapper<Customer> {}

ICustomerService.java

package com.example.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.example.entity.Customer;
import com.example.util.ServerResult;/*** <p>*  服务类* </p>** @author dd* @since 2024-04-10*/
public interface ICustomerService extends IService<Customer> {public ServerResult login(String customerName, String customerPwd);}

CustomerServiceImpl.java


package com.example.service.impl;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.entity.Customer;
import com.example.mapper.CustomerMapper;
import com.example.service.ICustomerService;
import com.example.util.JwtUtil;
import com.example.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;/*** <p>*  服务实现类* </p>** @author dd* @since 2024-04-10*/
@Service
public class CustomerServiceImpl extends ServiceImpl<CustomerMapper, Customer>   implements ICustomerService {@Autowiredprivate CustomerMapper customerMapper;@Overridepublic ServerResult login(String customerName, String customerPwd){System.out.println("seivice层"+customerName+customerPwd);QueryWrapper<Customer> wrapper = new QueryWrapper<>();wrapper.eq("customer_name",customerName).eq("customer_pwd",customerPwd);Customer customer = customerMapper.selectOne(wrapper);if(customer != null){System.out.println("service层customer 登录");String token = JwtUtil.createToken(customer.getCustomerId(),customer.getCustomerName());return ServerResult.loginSuccess(token);}return ServerResult.loginFail("用户登录失败");}}

JwtUtil.java


package com.example.util;import com.example.entity.LoginCustomer;
import io.jsonwebtoken.*;import java.util.Date;
import java.util.HashMap;
import java.util.Map;public class JwtUtil {private static final String jwtToken = "dahkgag7*$";private static long expireTime = 1000*60*60*24;/*** 创建新token* @param customerId 用户id* @param customerName* @return*/public static String createToken(Integer customerId,String customerName){Map<String,Object> claims = new HashMap<>();claims.put("customerId",customerId);claims.put("customerName",customerName);System.out.println("创建token"+customerId);System.out.println("创建token"+customerName);JwtBuilder jwtBuilder = Jwts.builder().signWith(SignatureAlgorithm.HS256,jwtToken)//签发算法(head部分),秘钥为jwtToken.setClaims(claims)//body数据,要唯一,自行设。payload部分数据 //1.(customerId,customerName)--token.setIssuedAt(new Date())//设置签发时间:保证每次生成的token不同.setExpiration(new Date(System.currentTimeMillis()+expireTime));//一天的有效时间String token = jwtBuilder.compact();return token;}//验证token是否有效/*** 验证token是否有效* @param token 客户端携带的token* @return 返回是否有效*///2.验证token是否过期public static boolean checkToken(String token){if(token != null && !token.equals("")){try {Jwt parse = Jwts.parser().setSigningKey(jwtToken).parseClaimsJws(token);return true;}catch (ExpiredJwtException e){System.out.println("token已经过期了");return false;} catch (Exception e) {System.out.println("无效的token");return false;}}elsereturn false;}/*** 解析token中的用户数据* @param token 客户端携带的token* @return 返回登录用户信息(customerIs)*/public static LoginCustomer parseToken(String token){if(token != null && !token.equals("")) {try {Jwt parse = Jwts.parser().setSigningKey(jwtToken).parseClaimsJws(token);Map<String,Object> map = (Map<String, Object>)parse.getBody();if(map != null){Integer custId = (Integer)map.get("customerId");//注意，此处的key 要与当初绑定进去的key一致String custName = (String)map.get("customerName");//注意，此处的key 要与当初绑定进去的key一致LoginCustomer loginCustomer = new LoginCustomer(custId,custName);System.out.println("获得到的登录用户的信息是:" + loginCustomer);return loginCustomer;}else{System.out.println("获得到的登录用户的信息失败");return null;}} catch (Exception e){e.printStackTrace();return null;}}elsereturn null;}}

ServerResult.java

package com.example.util;public class ServerResult {private int code;private String msg;private Object data;public static ServerResult getSuccess(Object data){return new ServerResult(200,"查询成功",data);}public static ServerResult getFail(Object data){return new ServerResult(201,"查询失败",data);}/*** 添加、删除、修改的成功* @param data* @return*/public static ServerResult updateSuccess(Object data){return new ServerResult(200,"处理成功",data);}/*** 添加、删除、修改的失败* @param data* @return*/public static ServerResult updateFail(Object data){return new ServerResult(201,"处理失败",data);}public static ServerResult loginSuccess(Object data){return new ServerResult(200,"登录成功",data);}public static ServerResult loginFail(Object data){return new ServerResult(201,"登录失败",data);}public ServerResult() {}public ServerResult(int code, String msg, Object data) {this.code = code;this.msg = msg;this.data = data;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}@Overridepublic String toString() {return "ServerResult{" +"code=" + code +", msg='" + msg + '\'' +", data=" + data +'}';}
}

ServletInitializer.java


package com.example;import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;public class ServletInitializer extends SpringBootServletInitializer {@Overrideprotected SpringApplicationBuilder configure(SpringApplicationBuilder application) {return application.sources(SpringbootLoginApplication.class);}}

SpringbootLoginApplication.java


package com.example;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
@MapperScan("com.example.mapper")
public class SpringbootLoginApplication {public static void main(String[] args) {SpringApplication.run(SpringbootLoginApplication.class, args);}}

application.yaml


server:servlet:context-path: /appport: 80spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/dicts?useSSL=true&useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456mvc:view:prefix: / #前缀suffix: .jsp #后缀hiddenmethod:filter:enabled: true # 支持表单 method 转换logging:file:path: d://logger #日志记录level:com.example: debug

css_04_首页.css


*{margin: 0;padding: 0;
}
/* =======================头部======================= */
.header{width: 85%;   /*  %: 父元素（父标签的百分比）*/height: 58px;/* background-color: aquamarine; */min-width: 1000px;margin: 0 auto;  /*容器水平居中*/
}/* =======================logo部分 =======================*/
.header .logo{width: 15%;height: 33px;/* background-color: #fa8072; */float: left;   /*不换行*/margin-top: 12px;  /*距离顶部间距*/
}.header .logo a{  /*行内元素不能设置宽高度，转换成 inline-block / block*/display: inline-block;width: 100%;height: 33px;background: url(../images/header-small-sprites3.png) no-repeat 0 -25px;background-size: 125px;
}/*======================= 导航部分 =======================*/
.header .nav{width: 35%;height: 100%;/* background-color: skyblue; */float: left;min-width: 450px;
}/* 1.设置UL 宽高度 ： 100%
2.小黑点去掉UL
3.Li 不换行 ： float :left 
4.设置每个li 宽高度
5.A 超链接宽高度 = li 宽高度
6.设置a超链接文字的大小，居中，下划线
7.鼠标悬浮样式修改 a:hover */.nav .head-nav{width: 100%;height: 100%;/* background-color: burlywood; */list-style: none;  /*小黑点去掉UL*/
}.head-nav li{float: left;  /*不换行 */height: 100%;width: 80px;/* border-right: 1px dotted white;  solid : 实线 , dashed: 虚线 , dotted : 圆点*/
}.head-nav li a{display: inline-block;width: 100%;height: 100%;color: rgb(78, 78, 78);text-decoration: none; /*超链接下划线去除*/font-size: 13px;text-align: center;line-height: 58px;
}
.head-nav li a:hover{  /*鼠标悬浮样式修改 */background-color: rgba(230, 69, 102, 0.1);color: rgb(78, 78, 78);border-bottom: 3px solid rgba(230, 69, 102, 0.1)
}.head-nav .first-item{  /*第一个li ,首页*/background-color: rgba(230, 69, 102, 0.1);color: rgb(78, 78, 78);
}
.head-nav .first-item:hover{ /*第一个li ,首页，鼠标悬浮不变*/background-color: rgba(230, 69, 102, 0.1);color: rgb(78, 78, 78);border-bottom:none;
}/* =====================搜索区域=========================== */
.search{width: 25%;height: 100%;/* background-color: yellow;  */float: left;min-width: 260px;
}.search form{width: 100%;height: 30px;/* background-color: aqua; */margin-top: 12px;}
/* 搜索框 */
.search form .search-kw{width: 180px;height: 100%;border: 1px solid rgba(230, 69, 102, 0.1);border-radius: 4px;outline: none; /*点击输入框的内边框 取消*/padding-left: 10px;/*内部的文字 左间距 ： 左内间距*/color:  rgb(108, 108, 108);
}/* 搜索按钮 */
.search .search-btn{width: 60px;height: 30px;background-color: rgba(230, 69, 102, 0.1);font-size: 12px;color: rgb(78, 78, 78);border: none;cursor: pointer ;  /*鼠标悬浮上去 是小手链接形状*/border-radius: 4px;
}/*======================= 登录区域======================= */
.header  .login{width: 13%;height: 100%;/* background-color: yellow; */float: right;
}.login a{display: inline-block;width: 60px;height: 30px;background-color: rgba(230, 69, 102, 0.1);margin-top: 14px;  /*上间距*/border-radius: 4px;  /*圆角*/text-decoration: none;color: rgb(78, 78, 78);font-size: 12px;text-align: center;line-height: 30px;
}.login a:hover{  /*:hover  鼠标悬浮*//* background-color:white;color: rgba(230, 69, 102, 0.1); *//* border: 1px solid rgba(230, 69, 102, 0.1); */font-weight: bold;
}/* ==========================banner======================== */
.banner{width: 100%;height: 400px;/* background-color: salmon; */
}.banner img{width: 100%;height: 100%;
}/*    =======================  热门商品==================  */
.pro-title{width: 100%;height: 80px;/* background-color: salmon; */text-align: center;line-height: 80px;font-size: 28px;
}
/* 商品列表 */
.pro-list{width: 85%;height: 660px;/* background-color: skyblue;  */margin:  0 auto; /* 容器居中 */
}.pro-list ul{width: 100%;height:  100%;list-style: none;
}.pro-list ul li{width: 230px;height: 320px;/* border: 3px solid salmon; */float: left;  /* 不换行 */margin-right: 30px;margin-bottom: 10px;}.pro-list ul li img{width: 160px;height: 160px;/* background-color: sandybrown; */
}.pro-list ul  .pro-name{width: 190px;height: 48px;/* background-color: chartreuse; */margin-left: 20px;font-size: 13px;color: darkgrey;text-align: center;
}
.pro-name-a{text-decoration: none;
}
.pro-list ul  .pro-price{width: 190px;height: 18px;/* background-color: antiquewhite; */margin-left: 20px;margin-top: 10px;text-align: center;color: rgba(230, 69, 101, 0.591);}.pro-price i{vertical-align: middle;font-size: 12px;font-weight: 700;font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
}

css_11_login.css

*{margin:0;padding: 0;
}body{background : rgba(230, 69, 102, 0.1); /*背景图片*/
}.login_form{width: 440px;height: 350px;background-color: white;margin: 0 auto;margin-top: 80px; border-radius: 6px;/*圆角*/ 
}.form_title{height: 80px;    line-height: 80px ;  /* line-height = height   */text-align: center;color: rgba(113,115,118,1);;font-family: PingFangSC-Regular,PingFang SC; /*字体*/font-size: 18px;
}.myform{width: 80%;height: 280px;margin: 0 auto;margin-top: 40px; 
}
.myform .user_name,.user_pwd{width: 320px;height: 40px;display: block;margin:  0 auto;margin-bottom: 20px;border-radius: 4px;outline: none;  border:none;background-color: #f6f7f9;padding-left: 10px;padding-right: 10px;
}.myform .loginBtn{width: 320px;height: 42px;background-color: rgba(230, 69, 102, 0.1);color: rgb(146, 145, 145);display: block;margin:  0 auto;margin-top: 10px;border: none;border-radius: 4px;
}.myform .loginBtn:hover{background-color: rgba(230, 69, 101, 0.196);
}.login_tip{display: block;width: 340px;height: 30px;font-size: 10px;color: red;text-align: center;
}

js_02_登录验证.js


// document : HTML 网页文档
// query 查询， Selector 选择器
var loginTip = document.querySelector(".login_tip");
var usernameEle = document.querySelector(".user_name");
//onblur ： 光标移开输入框
usernameEle.onblur = checkUsername;
// 验证用户名
function checkUsername(){var username = usernameEle.value;console.log("用户名是：" + username)if(username == '' || username.length ==0){loginTip.innerText = '用户名不能为空';return false;}else{loginTip.innerText = '';return true;}}// 光标移开密码域，验证密码是否为空
var userPwdEle = document.querySelector('.user_pwd');
userPwdEle.onblur = checkUserPwd;
// 验证密码
function checkUserPwd(){var userPwd = userPwdEle.value;if(userPwd =='' || userPwd.length == 0){loginTip.innerText = '密码不能为空';return false;}else{loginTip.innerText = '';return true;}
}// 登录表单提交验证
document.querySelector(".myform").onsubmit = function(){var result  =  checkUsername() && checkUserPwd();console.log(result);return result;
}

index.html


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><link href="css/css_04_首页.css" rel="stylesheet"/><link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<!-- ======================1. 头部 ======================-->
<div class="header"><div class="logo"><a href=""> </a></div><div class="nav"><ul class="head-nav"><li><a href="" class="first-item">首页</a></li><li><a href="">菜品</a></li><li><a href="">店铺</a></li><li><a href="">热卖</a></li><li><a href="">优惠券</a></li></ul></div><div class="search"><form><input type="text" class="search-kw" ><input type="submit" class="search-btn" value="搜索"/></form></div><div class="login"><a href="login.html">登录</a><a href="">注册</a></div>
</div><!-- ======================2. 横幅 banner ======================-->
<div class="banner"><img src="images/bg1.jpg" />
</div><!-- =======================3. 热门商品================== -->
<h3 class="pro-title"> 热门商品</h3>
<div class="pro-list"><ul><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro2.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro3.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro2.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro3.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro2.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro3.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro2.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li><li><a href="css_06_商品详情.html"><img class="pro-img" src="images/pro3.webp" /></a><a href="" class="pro-name-a"><p  class="pro-name">HUAWEI Mate X5 典藏版 16GB+1TB 青山黛</p></a><div class="pro-price"><i>￥</i><span>6999.00</span></div></li></ul>
</div></body>
</html>

login.html


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/css_11_login.css" /><script src="js/jquery-3.7.0.min.js"></script></head>
<body>
<div class="login_form"><h4 class="form_title">登录</h4><form class="myform" method="post" ><span class="login_tip"></span><input type="text"  class="user_name" placeholder="您的邮箱或手机号" name="customerName"/><input type="password"  class="user_pwd"  placeholder="您的密码" name="customerPwd"/><input type="button" value="登录" class="loginBtn"></form>
</div><script src="js/js_02_登录验证.js"></script><script>$(".loginBtn").click(function (){var url = "http://localhost:80/app/customer/login";var formData = $(".myform").serialize();$.post(url,formData,function (result){console.log(result)if(result.code ==200){localStorage.setItem("token",result.data);  // 1.保存tokenwindow.location.href = "index.html";}else{$(".login_tip").text(result.data);}})})
</script>
</body>
</html>

pom.xml


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.6</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>springboot_login</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><name>springboot_login</name><description>springboot_login</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.9</version></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>taglibs</groupId><artifactId>standard</artifactId><version>1.1.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.28</version></dependency><!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.2</version></dependency><!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-generate --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.5.1</version></dependency><dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.31</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>