豆宝社区项目实战教程简介
本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的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>
