0
0

SpringBoot项目之前后端界面搭建

1.项目搭建

技术点介绍：

前端：Freemarker、jQuery
后端：SpringBoot、MyBatisPlus、Lombok
中间件：Redis

1.1.项目前准备

导入数据库表

用户表：t_user

商品表：t_goods

订单表：t_order

订单项表：t_order_item

数据源表：t_dict_type

数据项表：t_dict_data

** 创建一个springboot项目，注意不要勾选如何组件**

1.2导入pom依赖

  1. <parent>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-parent</artifactId>
  4.     <version>2.3.9.RELEASE</version>
  5.     <relativePath/> <!-- lookup parent from repository -->
  6. </parent>
  1. <properties>
  2.     <java.version>1.8</java.version>
  3. </properties>
  4. <dependencies>
  5.     <!--freemarker-->
  6.     <dependency>
  7.         <groupId>org.springframework.boot</groupId>
  8.         <artifactId>spring-boot-starter-freemarker</artifactId>
  9.     </dependency>
  11.     <!--spring web-->
  12.     <dependency>
  13.         <groupId>org.springframework.boot</groupId>
  14.         <artifactId>spring-boot-starter-web</artifactId>
  15.     </dependency>
  17.     <!--mysql-->
  18.     <dependency>
  19.         <groupId>mysql</groupId>
  20.         <artifactId>mysql-connector-java</artifactId>
  21.         <scope>runtime</scope>
  22.         <version>5.1.44</version>
  23.     </dependency>
  25.     <!--lombok-->
  26.     <dependency>
  27.         <groupId>org.projectlombok</groupId>
  28.         <artifactId>lombok</artifactId>
  29.         <optional>true</optional>
  30.     </dependency>
  32.     <!--junit-->
  33.     <dependency>
  34.         <groupId>org.springframework.boot</groupId>
  35.         <artifactId>spring-boot-starter-test</artifactId>
  36.         <scope>test</scope>
  37.         <exclusions>
  38.             <exclusion>
  39.                 <groupId>org.junit.vintage</groupId>
  40.                 <artifactId>junit-vintage-engine</artifactId>
  41.             </exclusion>
  42.         </exclusions>
  43.     </dependency>
  45.     <dependency>
  46.         <groupId>junit</groupId>
  47.         <artifactId>junit</artifactId>
  48.         <scope>test</scope>
  49.     </dependency>
  51.     <!-- mybatis plus依赖 -->
  52.     <dependency>
  53.         <groupId>com.baomidou</groupId>
  54.         <artifactId>mybatis-plus-boot-starter</artifactId>
  55.         <version>3.4.0</version>
  56.     </dependency>
  57.     <!-- mybatis-plus-generator依赖 -->
  58.     <dependency>
  59.         <groupId>com.baomidou</groupId>
  60.         <artifactId>mybatis-plus-generator</artifactId>
  61.         <version>3.4.0</version>
  62.     </dependency>
  64.     <!--hariki-->
  65.     <dependency>
  66.         <groupId>com.zaxxer</groupId>
  67.         <artifactId>HikariCP</artifactId>
  68.     </dependency>
  70.     <!-- MD5依赖 -->
  71.     <dependency>
  72.         <groupId>commons-codec</groupId>
  73.         <artifactId>commons-codec</artifactId>
  74.     </dependency>
  76.     <dependency>
  77.         <groupId>org.apache.commons</groupId>
  78.         <artifactId>commons-lang3</artifactId>
  79.         <version>3.6</version>
  80.     </dependency>
  82.     <!-- valid验证依赖 -->
  83.     <dependency>
  84.         <groupId>org.springframework.boot</groupId>
  85.         <artifactId>spring-boot-starter-validation</artifactId>
  86.     </dependency>
  88.     <!--redis-->
  89.     <dependency>
  90.         <groupId>org.springframework.boot</groupId>
  91.         <artifactId>spring-boot-starter-data-redis</artifactId>
  92.     </dependency>
  94.     <!--commons-pool2 对象池依赖 2.0版本的lettuce需要-->
  95.     <dependency>
  96.         <groupId>org.apache.commons</groupId>
  97.         <artifactId>commons-pool2</artifactId>
  98.     </dependency>
  100.     <!--spring-session将session借助于第三方存储（redis/mongodb等等），默认redis-->
  101.     <!--<dependency>
  102.         <groupId>org.springframework.session</groupId>
  103.         <artifactId>spring-session-data-redis</artifactId>
  104.     </dependency>-->
  105.     <dependency>
  106.         <groupId>com.alipay.sdk</groupId>
  107.         <artifactId>alipay-easysdk</artifactId>
  108.         <version>2.0.1</version>
  109.     </dependency>
  110. </dependencies>
  112. <build>
  113.     <plugins>
  114.         <plugin>
  115.             <groupId>org.springframework.boot</groupId>
  116.             <artifactId>spring-boot-maven-plugin</artifactId>
  117.         </plugin>
  118.     </plugins>
  119. </build>

1.3.转换yml文件

application.yml:

  1. server:
  2.     port: 8081
  3.     servlet:
  4.         context-path: /
  5. spring:
  6.     datasource:
  7.         url: jdbc:mysql://localhost:3306/mybatis_ssm?useSSL=false&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC&characterEncoding=UTF8
  8.         driver-class-name: com.mysql.jdbc.Driver
  9.         password: 123456
  10.         username: root
  11.         hikari:
  12.             # 最小空闲连接数量
  13.             minimum-idle: 5
  14.             # 空闲连接存活最大时间，默认600000（10分钟）
  15.             idle-timeout: 180000
  16.             # 连接池最大连接数，默认是10
  17.             maximum-pool-size: 10
  18.             # 此属性控制从池返回的连接的默认自动提交行为,默认值：true
  19.             auto-commit: true
  20.             # 连接池名称
  21.             pool-name: MyHikariCP
  22.             # 此属性控制池中连接的最长生命周期，值0表示无限生命周期，默认1800000即30分钟
  23.             max-lifetime: 1800000
  24.             # 数据库连接超时时间,默认30秒，即30000
  25.             connection-timeout: 30000
  26.     freemarker:
  27.         #设置编码格式
  28.         charset: UTF-8
  29.         #后缀
  30.         suffix:
  31.         #文档类型
  32.         content-type: text/html
  33.         #模板前端
  34.         template-loader-path: classpath:/templates/
  35.         #启用模板
  36.         enabled: true
  37.     mvc:
  38.         static-path-pattern: /static/**
  39.     redis:
  40.        ** #服务端IP
  41.         host: 47.100.191.44
  42.         #端口
  43.         port: 6379
  44.         #密码
  45.         password: (不准看！！！)**
  46.         #选择数据库
  47.         database: 0
  48.         #超时时间
  49.         timeout: 10000ms
  50.         #Lettuce的连接是基于Netty的，连接实例（StatefulRedisConnection）可以在多个线程间并发访问
  51.         #Lettuce线程安全，Jedis线程非安全
  52.         lettuce:
  53.             pool:
  54.                 #最大连接数，默认8
  55.                 max-active: 8
  56.                 #最大连接阻塞等待时间，默认-1
  57.                 max-wait: 10000ms
  58.                 #最大空闲连接，默认8
  59.                 max-idle: 200
  60.                 #最小空闲连接，默认0
  61.                 min-idle: 5
  62. #mybatis-plus配置
  63. mybatis-plus:
  64.     #所对应的 XML 文件位置
  65.     mapper-locations: classpath*:/mapper/*Mapper.xml
  66.     #别名包扫描路径
  67.     type-aliases-package: com.xbb.spbootpro.model
  68.     configuration:
  69.         #驼峰命名规则
  70.         map-underscore-to-camel-case: true
  71. #日志配置
  72. logging:
  73.     level:
  75.         com.xbb.spbootpro.mapper: debug

**在spbootproApplication.java里面加两个注解辅助 **

** 导入相关文件：如果需要学习请私信我！！！**

1.4.测试

创建一个测试类进行测试：

  1. package com.xbb.spbootpro.controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  6. /**
  7.  * @author冰冰
  8.  * @create  2022-11-08 16:37
  9.  */
  10. @Controller
  11. public class IndexController {
  12.     @RequestMapping("/")
  13.     public String index(){
  14.         return "index.html";
  15.     }
  16. }

先把后台代码跑起来，在访问即可！！

直接访问localhost：8081

如果** **能访问成功说明 项目搭建完成！！！

2.首页功能

2.1.代码生成

导入我们提前准备好的文件夹

打开generator里面的CodeGenerator运行项目

** 生成的代码：**

2.2.前台界面的编写

  1. **IndexController：**
  1. package com.xbb.spbootpro.controller;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.baomidou.mybatisplus.extension.conditions.query.QueryChainWrapper;
  5. import com.xbb.spbootpro.model.Goods;
  6. import com.xbb.spbootpro.service.IGoodsService;
  7. import com.xbb.spbootpro.utils.DataUtils;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.ui.Model;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  13. import java.util.List;
  14. import java.util.Map;
  16. /**
  17.  * @author冰冰
  18.  * @create  2022-11-08 16:37
  19.  */
  20. @Controller
  21. public class IndexController {
  22.     @Autowired
  23.     private IGoodsService goodsService;
  25.     @RequestMapping("/")
  27.     public String index(Model model){
  28.         //摆件花艺
  29.         List<Goods> goods01 = goodsService.list(new QueryWrapper<Goods>()
  30.                 .eq("goods_type",01)
  31.                 .last("limit 6"));
  32.         //壁挂
  33.         List<Goods> goods07 = goodsService.list(new QueryWrapper<Goods>()
  34.                 .eq("goods_type",07)
  35.                 .last("limit 12"));
  36.         //为了方便首页数据展示
  37.         DataUtils<Goods> dataUtils = new DataUtils<Goods>();
  38.         Map<String ,List<Goods>> gt01 = dataUtils.transfor(3,goods01);
  39.         Map<String ,List<Goods>> gt07 = dataUtils.transfor(4,goods07);
  40.         model.addAttribute("gt01",gt01);
  41.         model.addAttribute("gt07",gt07);
  42.         return "index.html";
  43.     }
  44. }

index.html:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head lang="en">
  4.       <#include "common/head.html">
  5.       <link rel="stylesheet" type="text/css" href="css/public.css"/>
  6.       <link rel="stylesheet" type="text/css" href="css/index.css" />
  7.    </head>
  8.    <body>
  9.       <!------------------------------head------------------------------>
  10.       <#include "common/top.html">
  12.       <!-------------------------banner--------------------------->
  13.       <div class="block_home_slider">
  14.          <div id="home_slider" class="flexslider">
  15.             <ul class="slides">
  16.                <li>
  17.                   <div class="slide">
  18.                      <img src="img/banner2.jpg"/>
  19.                   </div>
  20.                </li>
  21.                <li>
  22.                   <div class="slide">
  23.                      <img src="img/banner1.jpg"/>
  24.                   </div>
  25.                </li>
  26.             </ul>
  27.          </div>
  28.       </div>
  29.       
  30.       <!------------------------------thImg------------------------------>
  31.       <div class="thImg">
  32.          <div class="clearfix">
  33.             <a href="${ctx}/page/vase_proList.html"><img src="img/i1.jpg"/></a>
  34.             <a href="${ctx}/page/proList.html"><img src="img/i2.jpg"/></a>
  35.             <a href="#2"><img src="img/i3.jpg"/></a>
  36.          </div>
  37.       </div>
  38.       
  39.       <!------------------------------news------------------------------>
  40.       <div class="news">
  41.          < class="wrapper">
  42.             <h2><img src="img/ih1.jpg"/></h2>
  43.             <div class="top clearfix">
  44.                <a href="${ctx}/page/proDetail.html"><img src="img/n1.jpg"/><p></p></a>
  45.                <a href="${ctx}/page/proDetail.html"><img src="img/n2.jpg"/><p></p></a>
  46.                <a href="${ctx}/page/proDetail.html"><img src="img/n3.jpg"/><p></p></a>
  47.             </div>
  48.             <div class="bott clearfix">
  49.                <a href="${ctx}/page/proDetail.html"><img src="img/n4.jpg"/><p></p></a>
  50.                <a href="${ctx}/page/proDetail.html"><img src="img/n5.jpg"/><p></p></a>
  51.                <a href="${ctx}/page/proDetail.html"><img src="img/n6.jpg"/><p></p></a>
  52.             </div>
  53.             <h2><img src="img/ih2.jpg"/></h2>
  55.             <#if gt01?? && gt01?size gt 0>
  56. <#--               遍历gt01中所有的key，是为了该key中的对象-->
  57.                <#list gt01?keys as key>
  58.                   <div class="flower clearfix tran">
  59.                   <#list gt01[key] as g>
  61.                      <a href="proDetail.html" class="clearfix">
  62.                         <dl>
  63.                            <dt>
  64.                               <span class="abl"></span>
  65.                               <img src="${g.goodsImg}"/>
  66.                               <span class="abr"></span>
  67.                            </dt>
  68.                            <dd>${g.goodsName}</dd>
  69.                            <dd><span>¥ ${g.goodsPrice}</span></dd>
  70.                         </dl>
  71.                      </a>
  72.                   </#list>
  73.                   </div>
  74.                </#list>
  75.             </#if>
  77.          </div>
  78.       </div>
  79.       
  80.       <!------------------------------ad------------------------------>
  81.       <a href="#" class="ad"><img src="img/ib1.jpg"/></a>
  82.       
  83.       <!------------------------------people------------------------------>
  84.       <div class="people">
  85.          <div class="wrapper">
  86.             <h2><img src="img/ih3.jpg"/></h2>
  87.             <#if gt07?? && gt07?size gt 0>
  88.             <#list gt07?keys as key>
  89.             <div class="pList clearfix tran">
  90.                <#list gt07[key] as g>
  91.                   <a href="proDetail.html">
  92.                      <dl>
  93.                         <dt>
  94.                            <span class="abl"></span>
  95.                            <img src="${g.goodsImg}"/>
  96.                            <span class="abr"></span>
  97.                         </dt>
  98.                         <dd>${g.goodsName}</dd>
  99.                         <dd><span>￥${g.goodsPrice}</span></dd>
  100.                      </dl>
  101.                   </a>
  102.                </#list>
  103.             </div>
  104.             </#list>
  105.             </#if>
  106.          </div>
  107.       </div>
  109.       <#include "common/footer.html"/>
  111.       <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
  112.       <script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
  113.       <script src="js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
  114.       <script type="text/javascript">
  115.          $(function() {
  116.             $('#home_slider').flexslider({
  117.                animation: 'slide',
  118.                controlNav: true,
  119.                directionNav: true,
  120.                animationLoop: true,
  121.                slideshow: true,
  122.                slideshowSpeed:2000,
  123.                useCSS: false
  124.             });
  126.          });
  127.       </script>
  128.    </body>
  129. </html>

注意：要重启服务！！

前台的价格发生的改变

3.用户文明登陆

3.1.实现登陆界面跳转

在controller里面创建一个PageController类

  1. package com.xbb.spbootpro.controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.PathVariable;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  7. /**
  8.  * @author冰冰
  9.  * @create  2022-11-09 11:05
  10.  */
  11. @Controller
  12. public class PageController {
  13.     @RequestMapping("/page/{page}")
  14.     private String page(@PathVariable("page") String page){
  16.         return page;
  18.     }
  20.     @RequestMapping("/page/dir/{page}")
  21.     private String page(@PathVariable("dir")String dir
  22.             ,@PathVariable("page") String page){
  24.         return dir +"/"+ page;
  26.     }
  28. }
  1. **重启服务,点击登陆即可跳到登陆界面如下图：**

创建一个login.js:

在login.html里面添加：

在到login.js里面进行测试

刷新项目点击登陆看是否能不能弹出1，能弹1说明这个方法能用。

3.2.登陆验证

部分代码：

  1. **UserDto：**
  1. package com.xbb.spbootpro.model.dto;
  3. import com.xbb.spbootpro.validator.IsMobile;
  4. import lombok.Data;
  6. import javax.validation.constraints.NotBlank;
  8. /**
  9.  * @author冰冰
  10.  * @create  2022-11-10 14:45
  11.  */
  12. @Data
  13. public class UserDto {
  14.     @NotBlank(message = "手机号码不能为空！")
  15.     @IsMobile
  16.     private String mobile;
  17.     @NotBlank(message = "密码不能为空！")
  18.     private String password;
  19. }
  1. **IsMobile：**
  1. package com.xbb.spbootpro.validator;
  3. import javax.validation.Constraint;
  4. import javax.validation.Payload;
  5. import java.lang.annotation.*;
  7. @Documented
  8. @Constraint(
  9.         validatedBy = {MobileValidator.class}
  10. )
  11. @Target({ElementType.METHOD, ElementType.FIELD, ElementType.ANNOTATION_TYPE, ElementType.CONSTRUCTOR, ElementType.PARAMETER, ElementType.TYPE_USE})
  12. @Retention(RetentionPolicy.RUNTIME)
  13. public @interface IsMobile {
  15.     boolean required() default true;
  17.     String message() default "手机号码格式错误！";
  19.     Class<?>[] groups() default {};
  21.     Class<? extends Payload>[] payload() default {};
  23. }
  1. **UserController：**
  1. package com.xbb.spbootpro.controller;
  3. import com.xbb.spbootpro.model.dto.UserDto;
  4. import com.xbb.spbootpro.service.IUserService;
  5. import com.xbb.spbootpro.utils.JsonResponseBody;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RestController;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import javax.validation.Valid;
  15. /**
  16.  * <p>
  17.  * 用户信息表 前端控制器
  18.  * </p>
  19.  *
  20.  * @author xbb
  21.  * @since 2022-11-09
  22.  */
  23. @RestController
  24. @RequestMapping("/user")
  25. public class UserController {
  26.     @Autowired
  27.     private IUserService userService;
  28.     @RequestMapping("/toLogin")
  29.     public JsonResponseBody toLogin(@Valid UserDto userDto,
  30.                                     HttpServletRequest req,
  31.                                     HttpServletResponse resp){
  33.         return  userService.toLogin(userDto,req,resp);
  34.     }
  36. }
  1. **UserServiceImpl：**
  1. package com.xbb.spbootpro.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.xbb.spbootpro.exception.BusinessException;
  5. import com.xbb.spbootpro.model.User;
  6. import com.xbb.spbootpro.mapper.UserMapper;
  7. import com.xbb.spbootpro.model.dto.UserDto;
  8. import com.xbb.spbootpro.service.IUserService;
  9. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  10. import com.xbb.spbootpro.utils.JsonResponseBody;
  11. import com.xbb.spbootpro.utils.JsonResponseStatus;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.stereotype.Service;
  15. import javax.servlet.http.HttpServletRequest;
  16. import javax.servlet.http.HttpServletResponse;
  18. /**
  19.  * <p>
  20.  * 用户信息表 服务实现类
  21.  * </p>
  22.  *
  23.  * @author xbb
  24.  * @since 2022-11-09
  25.  */
  26. @Service
  27. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
  28.     @Autowired
  29.     private UserMapper userMapper;
  30.     @Override
  31.     public JsonResponseBody toLogin(UserDto userDto, HttpServletRequest req, HttpServletResponse resp) {
  32. //        1.5.1）判断mobile和password是否为空
  33. //        1.5.2）判断mobile格式是否正确
  34. //        1.5.3）根据用户手机号码查询用户是否存在
  35.         User user= userMapper.selectOne(new QueryWrapper<User>().eq("id",userDto.getMobile()));
  37. //        1.5.4）校验账号
  38.         if(user==null){
  39.             throw  new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  40.         }
  41. //        1.5.5）校验密码
  42.         if(userDto.getPassword().equals(user.getPassword())){
  43.             throw new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  44.         }
  46.         return new JsonResponseBody();
  47.     }
  48. }

效果：

什么也不填：

写了正确的手机号：

密码正确，手机号错误

3.3.盐加密

前端加密：防止客户端浏览器F12导致密码泄露

后端加密：防止数据库数据泄露导致密码泄露

后台加密：

  1. **MD5Utils：**
  1. package com.xbb.spbootpro.utils;
  3. import org.apache.commons.codec.digest.DigestUtils;
  4. import org.springframework.stereotype.Component;
  6. import java.util.UUID;
  8. /**
  9.  * MD5加密
  10.  * 用户端：password=MD5(明文+固定Salt)
  11.  * 服务端：password=MD5(用户输入+随机Salt)
  12.  * 用户端MD5加密是为了防止用户密码在网络中明文传输，服务端MD5加密是为了提高密码安全性，双重保险。
  13.  */
  14. @Component
  15. public class MD5Utils {
  17.     //加密盐，与前端一致
  18.     private static String salt="f1g2h3j4";
  20.     /**
  21.      * md5加密
  22.      * @param src
  23.      * @return
  24.      */
  25.     public static String md5(String src){
  26.         return DigestUtils.md5Hex(src);
  27.     }
  29.     /**
  30.      * 获取加密的盐
  31.      * @return
  32.      */
  33.     public static String createSalt(){
  34.         return UUID.randomUUID().toString().replace("-","");
  35.     }
  37.     /**
  38.      * 将前端的明文密码通过MD5加密方式加密成后端服务所需密码
  39.      * 注意：该步骤实际是在前端完成！！！
  40.      * @param inputPass 明文密码
  41.      * @return
  42.      */
  43.     public static String inputPassToFormpass(String inputPass){
  44.         //混淆固定盐salt,安全性更可靠
  45.         String str=salt.charAt(1)+""+salt.charAt(5)+inputPass+salt.charAt(0)+""+salt.charAt(3);
  46.         return md5(str);
  47.     }
  49.     /**
  50.      * 将后端密文密码+随机salt生成数据库的密码
  51.      * @param formPass
  52.      * @param salt
  53.      * @return
  54.      */
  55.     public static String formPassToDbPass(String formPass,String salt){
  56.         //混淆固定盐salt,安全性更可靠
  57.         String str=salt.charAt(7)+""+salt.charAt(4)+formPass+salt.charAt(1)+""+salt.charAt(5);
  58.         return md5(str);
  59.     }
  61.     /**
  62.      * 将用户输入的密码转换成数据库的密码
  63.      * @param inputPass 明文密码
  64.      * @param salt      盐
  65.      * @return
  66.      */
  67.     public static String inputPassToDbPass(String inputPass,String salt){
  68.         String formPass = inputPassToFormpass(inputPass);
  69.         String dbPass = formPassToDbPass(formPass, salt);
  70.         return dbPass;
  71.     }
  73.     public static void main(String[] args) {
  74.         //d7aaa28e3b8e6c88352bd5e7c23829f9
  75.         //5512a78a188b318c074a15f9b056a712
  76.         String formPass = inputPassToFormpass("123456");
  77.         System.out.println("前端加密密码："+formPass);
  78.         String salt = createSalt();
  79.         System.out.println("后端加密随机盐："+salt);
  80.         String dbPass = formPassToDbPass(formPass, salt);
  81.         System.out.println("后端加密密码："+dbPass);
  82.         System.out.println("-------------------------------------------");
  83.         String dbPass1 = inputPassToDbPass("123456", salt);
  84.         System.out.println("最终加密密码："+dbPass1);
  85.     }
  86. }

前台加密：

login.js:

  1. $(function () {
  2.     alert(6);
  4.     //登陆向后台发送ajax请求
  5.  $("#login").click(function () {
  6.      let mobile =  $("#mobile").val();
  7.      let password =  $("#password").val();
  9.      //1.密码加密
  10.      //1) 定义固定盐
  11.      let salt='f1g2h3j4';
  12.      //2) 固定盐混淆
  13.      let temp=salt.charAt(1)+""+salt.charAt(5)+password+salt.charAt(0)+""+salt.charAt(3);
  14.      //3) 使用MD5完成前端第一次加密
  15.      let pwd=md5(temp);
  17.      $.post("/user/toLogin",{
  18.          mobile:mobile,
  19.          password:password
  20.      },function (res) {
  21.          alert(res.msg)
  22.      },"json");
  23.  });
  24. });
  1. **UserServiceImpl:**
  1. package com.xbb.spbootpro.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.xbb.spbootpro.exception.BusinessException;
  5. import com.xbb.spbootpro.model.User;
  6. import com.xbb.spbootpro.mapper.UserMapper;
  7. import com.xbb.spbootpro.model.dto.UserDto;
  8. import com.xbb.spbootpro.service.IUserService;
  9. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  10. import com.xbb.spbootpro.utils.JsonResponseBody;
  11. import com.xbb.spbootpro.utils.JsonResponseStatus;
  12. import com.xbb.spbootpro.utils.MD5Utils;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.stereotype.Service;
  16. import javax.servlet.http.HttpServletRequest;
  17. import javax.servlet.http.HttpServletResponse;
  19. /**
  20.  * <p>
  21.  * 用户信息表 服务实现类
  22.  * </p>
  23.  *
  24.  * @author xbb
  25.  * @since 2022-11-09
  26.  */
  27. @Service
  28. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
  29.     @Autowired
  30.     private UserMapper userMapper;
  31.     @Override
  32.     public JsonResponseBody toLogin(UserDto userDto, HttpServletRequest req, HttpServletResponse resp) {
  33. //        1.5.1）判断mobile和password是否为空
  34. //        1.5.2）判断mobile格式是否正确
  35. //        1.5.3）根据用户手机号码查询用户是否存在
  36.         User user= userMapper.selectOne(new QueryWrapper<User>().eq("id",userDto.getMobile()));
  38. //        1.5.4）校验账号
  39.         if(user==null){
  40.             throw  new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  41.         }
  42.         //前台传递到后台的密码，要进过工具类md5加密一次，才有可能跟数据库密码匹配上
  43.      String pwd = MD5Utils.formPassToDbPass(userDto.getPassword(),user.getSalt());
  44. //        1.5.5）校验密码
  45.         if(!pwd.equals(user.getPassword())){
  46.             throw new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  47.         }
  49.         return new JsonResponseBody();
  50.     }
  51. }

4.服务端和客户端登陆密码管理

UserServiceImpl.java变更如下

  1. package com.xbb.spbootpro.service.impl;
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.xbb.spbootpro.exception.BusinessException;
  5. import com.xbb.spbootpro.model.User;
  6. import com.xbb.spbootpro.mapper.UserMapper;
  7. import com.xbb.spbootpro.model.dto.UserDto;
  8. import com.xbb.spbootpro.service.IRedisService;
  9. import com.xbb.spbootpro.service.IUserService;
  10. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  11. import com.xbb.spbootpro.utils.CookieUtils;
  12. import com.xbb.spbootpro.utils.JsonResponseBody;
  13. import com.xbb.spbootpro.utils.JsonResponseStatus;
  14. import com.xbb.spbootpro.utils.MD5Utils;
  15. import org.springframework.beans.factory.annotation.Autowired;
  16. import org.springframework.stereotype.Service;
  18. import javax.servlet.http.HttpServletRequest;
  19. import javax.servlet.http.HttpServletResponse;
  20. import java.util.UUID;
  22. /**
  23.  * <p>
  24.  * 用户信息表 服务实现类
  25.  * </p>
  26.  *
  27.  * @author xbb
  28.  * @since 2022-11-09
  29.  */
  30. @Service
  31. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
  32.     @Autowired
  33.     private UserMapper userMapper;
  34.     @Autowired
  35.     private IRedisService iRedisService;
  36.     @Override
  37.     public JsonResponseBody toLogin(UserDto userDto, HttpServletRequest req, HttpServletResponse resp) {
  38. //        1.5.1）判断mobile和password是否为空
  39. //        1.5.2）判断mobile格式是否正确
  40. //        1.5.3）根据用户手机号码查询用户是否存在
  41.         User user= userMapper.selectOne(new QueryWrapper<User>().eq("id",userDto.getMobile()));
  43. //        1.5.4）校验账号
  44.         if(user==null){
  45.             throw  new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  46.         }
  47.         //前台传递到后台的密码，要进过工具类md5加密一次，才有可能跟数据库密码匹配上
  48.         String pwd = MD5Utils.formPassToDbPass(userDto.getPassword(),user.getSalt());
  49. //        1.5.5）校验密码
  50.         if(!pwd.equals(user.getPassword())){
  51.             throw new BusinessException(JsonResponseStatus.USER_USERNAME_ERROR);
  52.         }
  54.         //6.将登陆用户对象与token令牌进行绑定保存到cookie和redis
  55.         //创建登陆令牌token
  56.         String token= UUID.randomUUID().toString().replace("-","");
  57.         //将token令牌保存到cookie中
  58.         CookieUtils.setCookie(req,resp,"token",token,7200);
  59.         //将登陆token令牌与用户对象user绑定到redis中
  60.         iRedisService.setUserToRedis(token,user);
  61.         //将用户登陆的昵称设置到cookie中
  62.         CookieUtils.setCookie(req,resp,"nickname",user.getNickname());
  63.         return new JsonResponseBody<>();
  64.     }
  65. }
  1. IRedisService.java
  1. package com.xbb.spbootpro.service;
  3. import com.xbb.spbootpro.model.User;
  5. /**
  6.  * @author冰冰
  7.  * @create  2022-11-10 16:39
  8.  */
  9. public interface IRedisService {
  10.     void setUserToRedis(String token, User user);
  12.     User getUserByToken(String token);
  13. }
  1. RedisServiceImpl:
  1. package com.xbb.spbootpro.service.impl;
  3. import com.xbb.spbootpro.model.User;
  4. import com.xbb.spbootpro.service.IRedisService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.data.redis.core.RedisTemplate;
  7. import org.springframework.stereotype.Service;
  9. /**
  10.  * @author冰冰
  11.  * @create  2022-11-10 16:43
  12.  */
  14. @Service
  15. public class RedisServiceImpl implements IRedisService {
  17.     @Autowired
  18.     private RedisTemplate<String,Object> redisTemplate;
  20.     @Override
  21.     public void setUserToRedis(String token, User user) {
  22.         redisTemplate.opsForValue().set("user:"+token,user,7200L);
  23.     }
  25.     @Override
  26.     public User getUserByToken(String token) {
  27.         return (User) redisTemplate.opsForValue().get("user:"+token);
  28.     }
  29. }
标签： spring boot java spring
本文转载自: https://blog.csdn.net/m0_68211831/article/details/127750313
版权归原作者 冰冰酱哈 所有， 如有侵权，请联系我们删除。
登录后发布评论

“SpringBoot项目之前后端界面搭建”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？