基于若依的二次开发
数据库设计
首先先设计系统的数据库，这款产品的功能主要围绕文章方面，包含用户的发布文章，用户评论与点赞，用户的喜欢，以及文章的删除等操作，数据库主要包含下面的表：
后台系统搭建
主要就是通过若依的代码生成功能，来生成一些基本的业务接口，具体的代码生成逻辑如下：
- 首先先导入数据库表
- 然后修改信息
- 导出代码
- 引入若依中
最后效果：
前端ui搭建
花了点时间，重新学了css和html，然后用vue简单的搭建了一个前台，供给用户使用：
其中路由主要包含主页(home组件)，文章(Body-Article组件组)，发现(find组件)，记录(note)组件，目前功能设计主要有：
- 主页：显示热门文章
- 文章：显示所有文章，分类管理
- 发现：根据用户喜好和长短来推荐相关文章
- 记录：记录用户的个人笔记，使用习惯
- 搜索：搜索用户想要的文章
- 个人信息：存储用户个人信息
前端axios封装
首先，借鉴了若依框架对于request的封装，如下：
request.js
//生成axios实例
import axios from "axios";
import {getToken} from "@/api/request/auth";
import errorCode from "@/api/request/errorCode";
/**
* 对于axios拦截器的封装
* @type {{show: boolean}}
*/
export let isRelogin = {show: false};
//配置响应头
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
//配置axios的基本信息
const service = axios.create({
baseURL: '/dev-api',
timeout: 10000,
})
// request拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
/**
* 响应拦截器，一定要把结果给返回，无论中间做什么处理
*/
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
/**
* 注意这里，前面的判断完成后，一定要把res的结果返回，否则拿不到数据
*/
return res.data
}, err => {
console.log("err=" + err)
})
export default service;
vue.config.js
module.exports = {
devServer: {
port: 91,
proxy: {
'/dev-api': {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + '/dev-api']: ''
}
}
}
}
}
前端已实现功能： 登录验证码获取，登录功能
methods: {
/**
* 获取验证码逻辑 后端接口 /captchaImage
*/
getCode() {
getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) {
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
}
})
},
/**
* 登录逻辑处理 后端接口 /login
*/
handleLogin() {
userLogin(this.loginForm).then((res) => {
console.log(res)
if (res.code === 500) {
this.$message.error(res.msg)
}
if (res.code === 200) {
this.$message.success('登录成功!')
this.$router.push('/home')
}
})
}
},
created() {
this.getCode()
},
