手把手教你后台管理系统开发（Vue实战）

本文将通过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