豆宝社区项目实战教程简介
本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。
项目首页截图
代码开源地址
视频教程地址
前端技术栈
Vue
Vuex
Vue Router
Axios
Bulma
Buefy
Element
Vditor
DarkReader
后端技术栈
Spring Boot
Mysql
Mybatis
MyBatis-Plus
Spring Security
JWT
Lombok
每日一句后端
1.实体类
import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import lombok.NoArgsConstructor; import java.io.Serializable; @Data @NoArgsConstructor @TableName("bms_tip") public class BmsTip implements Serializable { private static final long serialVersionUID = 1L; /** * 主键 */ private Integer id; /** * 内容 */ @TableField("`content`") private String content; /** * 作者 */ private String author; /** * 1：使用，0：过期 */ private boolean type; }
2.mapper接口层
public interface BmsTipMapper extends BaseMapper<BmsTip> { }
3.BmsTipMapper.xml
resource/mapper创建BmsTipMapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.notepad.blog.mapper.BmsTipMapper"> <select id="getRandomTip" resultType="com.notepad.blog.domain.BmsTip"> select * from bms_tip order by rand() limit 1 </select> </mapper>
每日一句前端
1.在src下创建/api/tip.js
import request from '@/utils/request' export function getTodayTip() { return request({ url: '/tip/today', method: 'get' }) }
2.修改tip.vue
<template> <div> <el-card> <div class="header"> <span>每日一句</span> </div> <div class="has-text-left block"> {{ tip.content }} </div> <div class="has-text-right mt-5 block"> {{ tip.author }} </div> </el-card> </div> </template> <script> import { getTodayTip } from "@/api/tip"; export default { name: "CardBar", data() { return { tip: {} }; }, created() { this.fetchTodayTip() }, methods: { fetchTodayTip() { getTodayTip().then(Response => { const { data } = response this.tip = data }) } } }; </script>
