本文将通过Vue实战演示,手把手教你如何开发一款后台管理系统。我们将从技术选型、数据库设计、前后端分离、权限管理、数据展示等方面一步步展开。
一、 技术选型
- 前端框架:Vue.js 3.x
- 后端框架:Node.js + Express
- 数据库:MongoDB
- 其他工具或库: Axios、Element.ui、JWT、bcrypt、jsonwebtoken
说明:以上是比较流行的一组前后端技术栈,也是比较适合后台管理系统开发的方案。其中MongoDB为NoSQL数据库,极大的提高开发效率。Element.ui是比较流行的组件库,而Axios则是Vue常用的网络请求库,JWT和bcrypt是常用的用户认证和密码加密库,jsonwebtoken需要采用后端配合使用的Token组件。
二、 数据库设计
根据需要的功能来构建数据库,并在其中创建集合。
例如,我们可以有以下集合:
- 用户:包含用户名、密码、邮箱和角色等字段。
- 商品:包含名称、价格、描述等字段。
- 订单:包含商品列表、用户信息和状态等字段。
- 权限:包含路由路径和所需要的权限等字段。
三、 前后端分离
前后端分离是现代Web开发的趋势,将前后端分离能够提高系统的可维护性和可扩展性,同时可以极大的提高开发效率
Vue.js是完全基于前端开发的框架,所以我们需要搭建一个后端接口来让它与后端进行数据交流。
1.搭建接口
可以通过Node.js和Express来搭建接口,通过路由的方式来定义接口,下面是一个示例:
const express = require('express');
const router = express.Router();
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const User = require('../models/user');
router.post('/login', (req, res) => {
User.findOne({ username: req.body.username }, (err, user) => {
if (err) throw err;
if (!user) {
return res.status(401).json({ message: 'User does not exist' })
} else {
bcrypt.compare(req.body.password, user.password, (err, result) => {
if (err) throw err;
if (result) {
const token = jwt.sign({ id: user._id }, 'secret', { expiresIn: '24h' });
res.json({ token });
} else {
res.status(401).json({ message: 'Incorrect password' });
}
});
}
});
});
2.创建Vue实例
在Vue中,我们需要通过Axios进行异步请求,也需要使用一些状态管理模式如Vuex来保持数据的同步。
// Vuex store
const store = new Vuex.Store({
state: {
token: null,
},
mutations: {
setToken(state, token) {
state.token = token
},
clearToken(state) {
state.token = null
},
},
actions: {
login({ commit }, userData) {
return axios.post('/api/login', userData)
.then(res => {
localStorage.setItem('token', res.data.token)
commit('setToken', res.data.token)
return Promise.resolve(true)
})
.catch(err => {
console.log(err);
return Promise.reject(err)
})
},
},
getters: {
isAuthenticated(state) {
return state.token != null
}
}
});
// Vue instance
const app = createApp(App)
.use(router)
.use(store)
.mount('#app');
四、 权限管理
权限管理是后台管理系统开发的重要部分。我们需要针对不同的角色来分配不同的权限。在我们的示例中,我们是通过Token来实现身份验证和权限管理的。
前端用户在登录成功后,会将token存储在localStorage中,在随后的请求中必须包含这个Token。后端服务将验证这个Token,如果验证通过则进行数据处理并返回数据,如果验证失败,则返回错误信息。下面的代码展示了关于Token验证的服务端路由:
const jwt = require('jsonwebtoken');
const User = require('../models/user');
const authorization = require("../middleware/authorization");
router.get('/users', authorization, (req, res) => {
User.find({}, (err, users) => {
if (err) throw err;
res.json(users.map(user => ({ id: user._id, username: user.username, role: user.role })));
});
});
在这里,我们在GET /api/users路由下使用了名为authorization的中间件。在这个中间件中,我们检查请求的Authorization头是否包含了正确的Token。如果Token正确,则传递请求到下一个中间件;否则,我们直接返回错误信息。
exports.authorization = (req, res, next) => {
const token = req.headers.authorization;
if (!token) return res.status(401).send({ message: 'No token provided.' });
jwt.verify(token, 'secret', (err, decoded) => {
if (err) {
return res.status(401).send({ message: 'Failed to authenticate token.' });
}
req.userId = decoded.id;
next();
});
};
五、 数据展示
我们将使用Element-ui来实现数据展示的组件。例如,我们可以使用Table组件来展示用户信息,同时在表格的列中定义操作列,例如,编辑和删除功能。
<el-table ref="table" :data="users" style="width: 100%">
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
在Vue的脚本中,我们定义users数组和用于获取和处理这个数组的方法:
<template>
<div>
<el-table ref="table" :data="users" style="width: 100%">
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
data() { return { users: [] } },
created() { this.loadUsers(); },
computed: {
...mapGetters(['isAuthenticated'])
},
methods: {
...mapActions(['loadUsers', 'deleteUser']),
handleDelete(index, row) {
this.$confirm(`确认删除用户 ${row.username} 吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteUser(row.id);
this.users.splice(index, 1);
});
},
handleEdit(index, row) {
this.$router.push(`/user/${row.id}`);
}
}
}
六、发布
在将代码部署到生产环境之前,首先需要编写严格的单元测试、集成测试和端对端测试,同时需要对系统进行性能测试并对其进行优化。
发布时需要将前端和后端代码分别打包成静态文件和服务端代码,并将其部署到服务器上。
前端代码需要使用Webpack或Rollup打包为静态页面或静态文件,后端代码则需要使用PM2部署到生产环境中。
七、总结
在此篇文章中,我们介绍了开发后台管理系统的基本流程,并使用了Vue.js和Express以及相关的组件和库来完成这个项目。通过实践,我们可以更加深入地了解这个领域,并且提高Web开发的水平。最后相应教学:
2023最新 轻松快速学会 后台管理系统开发+Vue实战 从搭建到项目使用 学完即可兼职做项目_哔哩哔哩_bilibili