Springboot+Vue快速搭建个人博客系统

本文详细讲解如何使用SpringBoot后端结合Vue.js前端快速构建个人博客系统。内容涵盖SpringBoot的CORS配置、MyBatis-Plus分页、文件上传、Shiro权限管理,以及Vue组件化开发、路由配置等。通过实例代码,演示了用户和博客表的逻辑实现,适合有一定基础的学习者参考。
摘要由CSDN通过智能技术生成


前言

本篇博客讲解如何使用SpringBoot和Vue如何快速搭建自己个人博客系统,功能比较少,但是作为一个期末小作业应该够了。本篇博客默认你已经有了SpringBoot和Vue的基础啦!后端还是用了MyBatis-Plus 完成数据库增删改查,我会分别从前后端介绍如何实现。同时呢,代码也会上传到GitHub上。

内容 地址
GitHub 链接
项目演示地址 链接

一、SpringBoot实现后端

SpringBoot后端,主要是接收前端发送的请求,完成逻辑处理后,将Json数据返回前端,这样我们的网页就 “动”起来了!!!首先我们来看一下后端项目包的结构。
在这里插入图片描述
后端主要是一些配置过程相对比较麻烦,对于请求的处理,基本就是对数据库进行访问,然后对数据进行处理。配置包括如下:
在这里插入图片描述

  1. CrosConfig:跨域请求配置,例如后端端口时8888,前端端口是9999,前端请求时,由于端口不同,所以就需要这个配置啦。
  2. MybatisPlusConfig:MybatisPlus 分页配置,数据之大,一个见面放不下的情况,就需要分页了。这也是很多网页中所必须的,例如豆瓣电影Top250:
    在这里插入图片描述
  3. MyWebAppConfiguration:文件上传配置,主要配置上传文件的保存路径。
  4. ShiroConfig:用户管理框架shiro的配置
    其中我们还会封装一下常用的功能作为工具类去使用,如下图:
    在这里插入图片描述
  5. CodeGeneratorUtil:根据数据库表自动生成controller层,mapper层,entity层和Service层的代码,这样我们就可以少些一些代码了。
  6. EmailUtil:发送邮件内容到指定邮箱。
  7. GetDateUtil:从网络中获取当前时间,计算未来N天的日期
  8. JwtUtils:生成JwtToken
  9. RandomPwdUtil:产生指定长度的随机字符串
    其余两个Util用处不大,这里就不介绍了。工具类的代码可以去GitHub看看

这个简单的小项目,主要是两个数据表的逻辑,一个是博客表另一个是用户表
首选我们来看用户表的实现:
-用户数据表:

列名 数据类型 是否为空 备注
user_id bigint(20) 主键(自增)
user_name varchar(64) 用户名
user_avatar varchar(255) 用户头像
user_email varchar(64) 用户邮箱
user_ password varchar(64) 用户密码
user_status int(5) 是否被删除
user_created datetime 用户创建日期
last_login datetime 上一次登录时间

接下来我们看一下controller层,mapper层,entity层和Service层的代码:

  • entity层:
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("m_user")

public class User implements Serializable {
   

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    private String username;

    private String avatar;

    private String email;

    private String password;

    private Integer status;
    @JsonFormat(shape = JsonFormat.Shape.STRING,pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private LocalDateTime created;
    @JsonFormat(shape = JsonFormat.Shape.STRING,pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private LocalDateTime lastLogin;
    @TableField(exist = false)
    private String token;

}

这里需要添加很多注解,包裹主键,属性是否存在于数据表,日期转换为Json格式。

  • controller层:
@RestController
@RequestMapping("/user")
public class UserController {
   

    @Resource
    private UserService userService;
    @PostMapping("/login")
    public CommonResult login(@Validated @RequestBody User user){
   
       return   userService.login(user);
    }

    @PostMapping("/register")
    public CommonResult register(@Validated @RequestBody User user){
   
        return userService.register(user);
    }

    @PostMapping("/resetPwd")
    public CommonResult resetPwd(@Validated @RequestBody User user){
   
        return userService.resetPwd(user);
    }
    @RequiresAuthentication
    @GetMapping("/logout")
    public CommonResult logout(){
   
//        SecurityUtils.getSubject().logout();
        return CommonResult.successResponse(null,"退出成功");
    }
    //更具用户名获取用户详细信息
    @GetMapping("getUserByName/{username}")

    public CommonResult getUserByName(@PathVariable("username") String username){
   
        return userService.getUserByName(username);
    }

}

主要控制前端请求去往哪里,完成制定的任务,真正得逻辑是在Service里面实现

  • Service层接口:
public interface UserService extends IService<User> {
   

    CommonResult login(User user);

    CommonResult register(User user);

    CommonResult resetPwd(User user);

    CommonResult getUserByName(String username);
}

主要是几个接口得声明:

  • ServiceImpl:
    实现主要得逻辑
package com.work.user.service.impl;

import cn.hutool.crypto.SecureUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.work.common.results.CommonResult;
import com.work.user.entity.User;
import com.work.user.mapper.UserMapper;
import com.work.user.service.UserService;
import com.work.utils.EmailUtil;
import com.work.utils.GetDateUtil;
import com.work.utils.JwtUtils;
import com.work.utils.RandomPwdUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.time.LocalDateTime;

/**
 * <p>
 * 服务实现类
 * </p>
 *
 * @author jian
 * @since 2021-05-27
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
   

    @Resource
    private JwtUtils jwtUtils;
    @Autowired
    private  EmailUtil emailUtil;

    @Override
    public CommonResult login(User user) {
   
        //查询数据库
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__不想写代码__

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值