devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot + vue项目：大事件文章管理系统（黑马程序员）_黑马程序员大事件项目

作者：IT小白 | 2024-08-22 15:38:40

赞

踩

黑马程序员大事件项目

 一、项目介绍

首先声明，本项目静态资源和前端部分样式，后端部分接口代码由黑马程序员提供，我根据黑马程序员的基础更改了一部分功能，本项目学习视频：https://www.bilibili.com/video/BV14z4y1N7pg/?spm_id_from=333.337.search-card.all.click&vd_source=3c7831e560a6c8660ad9e4ed74fc8980

 该项目是经典的后台管理系统

前后端分别使用vue和springboot

首先我先进行演示一下

 

 

 

 

 

 

 

二、业务实现逻辑

注册模块：用户通过输入用户名，邮箱，邮箱验证码，密码进行注册，后端接收到用户传入的数据，首先对数据进行校验，验证用户输入的邮箱验证码是否与数据库中的匹配，如果匹配就通过验证，将用户的信息存储到数据库中，其中密码通过md5加密算法进行算法加密，前端返回用户登录成功。

登录模块：用户输入邮箱和密码后进行登录，后端开始对数据进行验证，首先验证邮箱输入是否正确，如果错误返回给用户提示信息，否则登录成功，当用户登录成功后，后端会生成相应的token，并储存在redis中一份，用户在访问其他页面时，必须携带token，否则拦截器进行拦截。

忘记密码模块：用户通过输入邮箱，获取验证码后进行校验比对，如果用户输入的验证码正确，就通过下一步，用户输入新密码，确认新密码后，密码重置成功。

文章管理模块：用户登录成功后，会跳转后文章管理的页面，如果用户在数据库中有数据，则前端向后端发送请求获取文章数据，同时获取用户数据的数量，对其进行分页，用户可以进行条件查询，后端使用动态sql语句进行查询并返回结果，用户点击添加文章，前端通过监听点击事件，弹出抽屉，用户可以输入文章标题，文章分类通过调用后台获取用户的分类数量并显示，用户输入文章封面时，获取图片的url地址，图片会上传到阿里云服务器，数据库存储的仅仅只是数据库的路径，当用户点击编辑按钮时，也会通过监听事件弹出抽屉，并且获取点击按钮的数据并展示，当用户修改了数据，会调用后台的接口进行修改，当用户删除时会进行提示，当用户点击确定后，后台会将该文章从该数据库中删除。

文章分类模块：用户点击分类模块时，前端监听到事件后会调用后台接口进行数据查询，并且返回给前端，前端进行渲染，用户点击添加分类时会弹出表单框，用户输入数据后，前端会把数据返回到后端，后端进行添加，用户点击编辑分类时，通过会弹出表单框，表单框中存有数据，用户可以修改数据然后提交，后端接收到用户修改的数据进行修改，当用户点击删除时，前端监听到事件后会提示用户是否删除，如果用户点击确定，前端调用后端接口进行删除。

基本资料模块：用户点击基本资料，调用后台接口查询数据库中的用户信息，渲染在前端页面上，当用户点击操作按钮时，会弹出一个表单框，用户数据渲染在表单上，用户可以修改用户信息，但是用户名和邮箱是不可修改的，用户无权限修改。

上传头像模块：用户点击选择图片，选择本地图片，然后调用后端接口显示在页面上，此时图片储存到了阿里云服务器上，数据库仅仅存放图片在阿里云服务器url地址，当用户点击上传，后端接口接收到指令后，向阿里云服务器发送请求，获取图片，并且将图片返给前端，前端将图片渲染在页面上。

重置密码模块：用户在表单中输入旧密码，新密码和确认新密码后，点击提交，前端将用户数据发送给后端，后端接收到请求后首先判断用户输入的旧密码是否正确，如果错误，返回给前端错误信息，前端将错误信息渲染后返给用户，如果正确，则验证输入的新密码和确认后的新密码是否一致，如果一致，则调用接口修改数据库中的密码，并将md5加密后的密码存储在数据库中。

三、代码实现

由于项目过大，本次我仅仅演示 登录注册模块的前后端交互模块

后端

在后端接口中，我们创建业务的模块分为四部分，controller层，mapper层，service层和pojo层

controller层

  1.  @PostMapping("/register")
  2.     public Result register(@RequestBody UserRegistrationDTO userRegistrationDTO) {
  3.         //获取前端传过来的参数
  4.         String username = userRegistrationDTO.getUsername();
  5.  
  6.         String password = userRegistrationDTO.getPassword();
  7.  
  8.         String email = userRegistrationDTO.getEmail();
  9.  
  10.         String captcha = userRegistrationDTO.getCaptcha();
  11.  
  12.  
  13.         if (username == null && password == null && email == null && captcha == null){
  14.             return Result.error("请求参数不能为空！");
  15.         }
  16.  
  17.         // 查找用户名是否已被占用
  18.         User user = userService.findByUserName(username);
  19.         if (user != null) {
  20.             return Result.error("用户名已被占用！");
  21.         }
  22.         //查找邮箱是否被占用
  23.         User find_email = userService.findByEmail(email);
  24.         if (find_email != null){
  25.             captchaMapper.deleteByEmail(email);
  26.             return Result.error("邮箱已经被占用！");
  27.         }
  28.  
  29.         // 验证邮箱和验证码是否匹配
  30.         try {
  31.             capthcaService.vaildCaptcha(email, captcha);
  32.         } catch (IllegalArgumentException e) {
  33.             return Result.error("验证码错误！");
  34.         }
  35.  
  36.         // 注册用户
  37.         try {
  38.             userService.register(username, password, email, captcha);
  39.             return Result.success();
  40.         } catch (Exception e) {
  41.             return Result.error("注册失败：" + e.getMessage());
  42.         }
  43.     }
  44.     @PostMapping("/login")
  45.     public Result<String> login(@RequestBody User user){
  46.         String email = user.getEmail();
  47.         String password = user.getPassword();
  48. //        System.out.println(email);
  49. //        System.out.println(password);
  50.         //查找是否存在用户邮箱
  51.         User find_email = userService.findByEmail(email);
  52.         if (find_email == null){
  53.             return Result.error("邮箱不存在！");
  54.         }
  55.         //加密后的密码
  56.         String passwordByEmail = userService.findPasswordByEmail(email);
  57. //        System.out.println("数据库中加密后的密码："+passwordByEmail);
  58.  
  59.         String inputUserPassword = Md5Util.getMD5String(password);
  60. //        System.out.println("用户输入的加密后的密码："+inputUserPassword);
  61.         if (passwordByEmail.equals(inputUserPassword)){
  62.             //登录成功
  63.             userService.login(email,password);
  64.             //获取数据库中的用户名和id
  65.             String usernameByEmail = userService.findUsernameByEmail(email);
  66.             Integer idByEmail = userService.findIdByEmail(email);
  67.             //jwt令牌验证
  68.             Map<String,Object> claims = new HashMap<>();
  69.             claims.put("id",idByEmail);
  70.             claims.put("username",usernameByEmail);
  71.             String token = JwtUtil.genToken(claims);
  72. //            System.out.println(token);
  73.             //把token存储到redis中
  74.             ValueOperations<String, String> operations = stringRedisTemplate.opsForValue();
  75.             //将token设置为键值对，token即为键，又为值，并且设置redis中token过期时间为12天
  76.             operations.set(token,token,12, TimeUnit.DAYS);
  77.         return Result.success(token);
  78.         }else {
  79.             return Result.error("密码错误！");
  80.         }
  81.  
  82.     }

mapper层

  1. @Mapper
  2. public interface UserMapper {
  3. //根据用户名查询
  4.     @Select("select * from user where username = #{username}")
  5.     User findByUserName(String username);
  6.  
  7.     @Insert("insert into user(username,password,email,create_time,update_time) " +
  8.             "values(#{username},#{encryptedPassword},#{email},now(),now())")
  9.     void register(User user);
  10.     //查询数据库中的邮箱
  11.     @Select("select * from user where email = #{email}")
  12.     User findByEmail(String email);
  13.     //查询数据库中加密后的密码
  14.  
  15.     @Select("SELECT password FROM user WHERE email =#{email}")
  16.     String findPasswordByEmail(String email);
  17.     //根据邮箱查询数据库中的用户名
  18.     @Select("SELECT username FROM user WHERE email =#{email}")
  19.     String findUsernameByEmail(String email);
  20.     //根据邮箱查询数据库中的id
  21.     @Select("SELECT id FROM user WHERE email =#{email}")
  22.     Integer findIdByEmail(String email);
  23. }

service层

  1.    @Override
  2.     public void register(String username, String password, String email, String captcha) {
  3.         // 创建用户对象
  4.         User user = new User();
  5.         user.setUsername(username);
  6.         String encryptedPassword = Md5Util.getMD5String(password);
  7.         user.setEncryptedPassword(encryptedPassword);
  8.         user.setEmail(email);
  9.         // 将用户信息添加到数据库
  10.         userMapper.register(user);
  11.     }
  12.  
  13.     @Override
  14.     public void login(String email, String password) {
  15.         // 根据用户名查询用户信息
  16.         User email_login = userMapper.findByEmail(email);
  17.         if (email_login == null) {
  18.             throw new IllegalArgumentException("邮箱不存在！");
  19.         }
  20.         // 验证密码是否匹配
  21.         String encryptedPassword = Md5Util.getMD5String(password);
  22.         if (!email_login.getPassword().equals(encryptedPassword)) {
  23.             throw new IllegalArgumentException("密码已经错误！");
  24.         }
  25.  
  26.     }

pojo层

  1. //lombok 在编译阶段自动生成getter setter toString等方法
  2. @Data
  3. public class User {
  4.     private Integer id;//主键ID
  5.     private String username;//用户名
  6. //    @JsonIgnore //让springmvc把当前对象转换成json格式的时候忽略
  7.     private String password;//密码
  8.     private String encryptedPassword;//加密后密码
  9.     private String nickname;//昵称
  10.     private String email;//邮箱
  11.     private String userPic;//用户头像地址
  12.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  13.     private LocalDateTime createTime;//创建时间
  14.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  15.     private LocalDateTime updateTime;//更新时间
  16.     private String age;  //年龄
  17.     private String phoneNumber; //手机号
  18.     private String gender; //性别
  19.     private String work; //职业
  20.     private String hobby; //兴趣爱好
  21.     private String area; //地区
  22.     private String personSignature; //个性签名
  23. }

前端

登录注册在一个vue文件中，两个表单通过数据模型的变化而变化

  1. <script setup>
  2. import {User, Lock, CreditCard, Right} from '@element-plus/icons-vue'
  3. import {ref} from 'vue'
  4. // 导入 axios
  5. import axios from 'axios';
  6. import {getCaptcha,startCountdown} from './api/register.js'
  7. import {ElMessage} from "element-plus";
  8.  
  9. //控制注册与登录表单得显示， 默认显示注册
  10. const isRegister = ref(false)
  11. //定义用于注册的数据模型
  12. const registerData = ref({
  13.   username:'',
  14.   email:'',
  15.   captcha:'',
  16.   password:'',
  17.   repassword:''
  18. });
  19. const loginData = ref({
  20.   email:'',
  21.   password:''
  22. })
  23. //自定义确认密码的校验函数
  24. const rePasswordValid = (rule, value, callback) => {
  25.   if (value == null || value === '') {
  26.     return callback(new Error('请再次确认密码'))
  27.   }else if(value !== registerData.value.password) {
  28.     return callback(new Error('两次输入密码不一致'))
  29.   }else {
  30.     return callback()
  31.   }
  32. }
  33. //定义表单校验规则
  34. const rules = {
  35.   username:[
  36.       {required:true,message:"请输入用户名",trigger:"blur"},
  37.       {max:16,min:5,message: "长度为5到16位非空字符",trigger: "blur"}
  38.   ],
  39.   email:[
  40.     {required:true,message:"请输入邮箱",trigger:"blur"}
  41.   ],
  42.   captcha:[
  43.     {required:true,message:"请输入验证码",trigger:"blur"}
  44.   ],
  45.   password:[
  46.     {required:true,message:"请输入密码",trigger:"blur"},
  47.     {max:16,min:5,message: "长度为5到16位非空字符",trigger: "blur"}
  48.   ],
  49.   repassword:[
  50.     {validator:rePasswordValid,trigger:"blur"}
  51.   ]
  52. }
  53. const email = ref('');
  54. const disabled = ref(false);
  55. const countdown = ref(60);
  56. const buttonText = ref('获取验证码');
  57.  
  58. function handleGetVerificationCode() {
  59.  
  60.   // 检查邮箱是否为空
  61.   if (!registerData.value.email) {
  62.     console.error("邮箱不能为空！");
  63.     return;
  64.   }
  65.   // 发送请求给后端获取验证码
  66.   getCaptcha(registerData.value.email, axios)
  67.       .then(response => {
  68.         ElMessage.success("验证码发送成功！")
  69.         // 验证码发送成功，开始倒计时
  70.         disabled.value = true;
  71.         startCountdown({ disabled, countdown, buttonText });
  72.       })
  73.       .catch(error => {
  74.         console.error(error);
  75.         // 处理错误情况
  76.       });
  77. }
  78.  
  79.  
  80.   // 发送注册请求给后端
  81.   async function register(){
  82.     // 从 registerData 中获取用户输入的数据
  83.     const { username, email, captcha, password } = registerData.value;
  84.  
  85.     // 发送注册请求给后端
  86.     try {
  87.       const response = await axios.post('/api/user/register', {
  88.         username,
  89.         password,
  90.         email,
  91.         captcha
  92.       }, {
  93.         headers: {
  94.           'Content-Type': 'application/json'
  95.         }
  96.       });
  97.  
  98.       // 根据后端返回的响应进行处理
  99.       if (response.data.code === 0) {
  100.         ElMessage.success("注册成功！")
  101.       } else {
  102.         console.error('注册失败:', response.data.message);
  103.         // 在界面上显示错误提示信息或者执行其他必要的操作
  104.         ElMessage.error(response.data.message?response.data.message:"注册失败!")
  105.       }
  106.     } catch (error) {
  107.       // 处理注册失败的情况
  108.       console.error('验证注册失败:', error.message);
  109.     }
  110.   }
  111.   import {useTokenStore} from "@/stores/token.js";
  112.   import {useRouter} from 'vue-router'
  113.   const router = useRouter()
  114.   const tokenStore = useTokenStore()
  115.   //发送登录请求给后端
  116.   async function login(){
  117.     // 从 loginData 中获取用户输入的数据
  118.     const {email,password} =loginData.value;
  119.  
  120.     //给后端发送登录请求
  121.     try {
  122.       const response = await axios.post('/api/user/login', {
  123.         email,
  124.         password
  125.       }, {
  126.         headers: {
  127.           'Content-Type': 'application/json',
  128.         }
  129.       });
  130.       if (response.data.code === 0){
  131.  
  132.         console.log('登录成功:', response.data);
  133.         ElMessage.success("登录成功！")
  134.         //将得到的token放入pinia中
  135.         tokenStore.setToken(response.data.data,12 * 24 * 60 * 60)//设置12天有效期
  136.         //登录成功后跳转到主页面
  137.         router.push('/layoutMain')
  138.       }else {
  139.         // 在界面上显示错误提示信息或者执行其他必要的操作
  140.         ElMessage.error(response.data.message?response.data.message:"登录失败!")
  141.       }
  142.     }catch (error){
  143.       console.log("登录失败:"+error.message)
  144.     }
  145.   }
  146. //忘记密码跳转页面
  147. const forgetPwd = ()=>{
  148.     router.push('/forgetPwd')
  149. }
  150. </script>
  151.  
  152. <template>
  153.   <el-row class="login-page">
  154.     <el-col :span="12" class="bg"></el-col>
  155.     <el-col :span="6" :offset="3" class="form">
  156.       <!-- 注册表单 -->
  157.       <template v-if="isRegister">
  158.         <el-form ref="form" size="large" autocomplete="off" :rules="rules" :model="registerData">
  159.           <el-form-item>
  160.             <h1>注册</h1>
  161.           </el-form-item>
  162.           <el-form-item prop="username">
  163.             <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
  164.           </el-form-item>
  165.           <el-form-item prop="email">
  166.             <el-input :prefix-icon="CreditCard" placeholder="请输入邮箱" v-model="registerData.email"></el-input>
  167.             <el-button type="primary" :disabled="disabled" @click="handleGetVerificationCode">{{buttonText}}</el-button>
  168.           </el-form-item>
  169.           <el-form-item prop="captcha">
  170.             <el-input :prefix-icon="Right" placeholder="请输入验证码" v-model="registerData.captcha"></el-input>
  171.           </el-form-item>
  172.           <el-form-item prop="password">
  173.             <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
  174.           </el-form-item>
  175.           <el-form-item prop="repassword">
  176.             <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.repassword"></el-input>
  177.           </el-form-item>
  178.           <!-- 注册按钮 -->
  179.           <el-form-item>
  180.             <el-button class="button" type="primary" auto-insert-space @click="register">
  181.               注册
  182.             </el-button>
  183.           </el-form-item>
  184.           <el-form-item class="flex">
  185.             <el-link type="info" :underline="false" @click="isRegister = false">
  186.               ← 返回
  187.             </el-link>
  188.           </el-form-item>
  189.         </el-form>
  190.       </template>
  191.       <!-- 登录表单 -->
  192.       <template v-else>
  193.         <el-form ref="form" size="large" autocomplete="off" :rules="rules" :model="loginData">
  194.           <el-form-item>
  195.             <h1>登录</h1>
  196.           </el-form-item>
  197.           <el-form-item prop="email">
  198.             <el-input :prefix-icon="User" placeholder="请输入邮箱" v-model="loginData.email"></el-input>
  199.           </el-form-item>
  200.           <el-form-item prop="password">
  201.             <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="loginData.password"></el-input>
  202.           </el-form-item>
  203.           <el-form-item class="flex">
  204.             <div class="flex">
  205.               <el-checkbox>记住我</el-checkbox>
  206.               <el-link type="primary" :underline="false" @click="forgetPwd">忘记密码？</el-link>
  207.             </div>
  208.           </el-form-item>
  209.           <!-- 登录按钮 -->
  210.           <el-form-item>
  211.             <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
  212.           </el-form-item>
  213.           <el-form-item class="flex">
  214.             <el-link type="info" :underline="false" @click="isRegister = true">
  215.               注册 →
  216.             </el-link>
  217.           </el-form-item>
  218.         </el-form>
  219.       </template>
  220.     </el-col>
  221.   </el-row>
  222. </template>
  223.  
  224. <style lang="scss" scoped>
  225. /* 样式 */
  226. .login-page {
  227.   height: 100vh;
  228.   background-color: #fff;
  229.  
  230.   .bg {
  231.     background: url('@/assets/logo.png') no-repeat 60% center / 240px auto,
  232.     url('@/assets/login_bg.jpg') no-repeat center / cover;
  233.     border-radius: 0 20px 20px 0;
  234.   }
  235.  
  236.   .form {
  237.     display: flex;
  238.     flex-direction: column;
  239.     justify-content: center;
  240.     user-select: none;
  241.  
  242.     .title {
  243.       margin: 0 auto;
  244.     }
  245.  
  246.     .button {
  247.       width: 100%;
  248.     }
  249.  
  250.     .flex {
  251.       width: 100%;
  252.       display: flex;
  253.       justify-content: space-between;
  254.     }
  255.     /* 将输入框和按钮的宽度设为自适应 */
  256.     .el-input {
  257.       flex: 2; /* 较长 */
  258.     }
  259.  
  260.     .el-button {
  261.       flex: 1; /* 较短 */
  262.     }
  263.  
  264.     /* 调整输入框和按钮之间的间距 */
  265.     .el-input + .el-button {
  266.       margin-left: 10px;
  267.     }
  268.   }
  269. }
  270. </style>

浏览器跨域问题

在前后端分离的项目中还存在浏览器跨域问题，我们通过配置代理的方法，让前端向后端发送请求，不直接通过浏览器发送

  1. import { fileURLToPath, URL } from 'node:url'
  2.  
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5.  
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.   ],
  11.   resolve: {
  12.     alias: {
  13.       '@': fileURLToPath(new URL('./src', import.meta.url))
  14.     }
  15.   },
  16.   //为后端服务器配置代理
  17.   server:{
  18.     proxy:{
  19.       '/api':{
  20.         target:'http://localhost:8080',  //后端服务器地址
  21.         changeOrigin:true,
  22.         rewrite:(path)=>path.replace(/^\/api/,'')  //api替换为控制符串
  23.       }
  24.     }
  25.   }
  26.  
  27. })

本项目的源码后续更新......尽请期待.......

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/1016980
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号