本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

作为后端开发，如果能自己独立快速搭建出来一个管理系统框架，并且能独立维护，那也是非常的Nice的。在平时自己练习前端代码，掌握一部分前端知识，也是提升了自己的硬实力，在面试中也是可以加分的！下面带大家展示如何从0开始搭建管理台，配合Api为大家实现功能。

开源Vue-Admin-Template

选择Vue-Admin-Template就是因为它简单，上手容易，开源。GitHub地址直接拉取即可，下图为默认项目结构，简单为大家讲解一下。

build：构建相关资源文件
mock: 一些模拟数据
public：静态资源
src：包括所有请求、页面、公用组件、路由、入口文件等等
vue.config.js：vue cli配置
.....

先决条件：Node环境、git环境

由于node版本太多，切换起来非常麻烦，建议使用nvm，灵活安装，切换项目所需要的node版本，使用起来更灵活。

//拉取仓库代码
git clone https://github.com/PanJiaChen/vue-admin-template.git
//还原node_modules包
npm install
//启动代码
npm run dev

运行效果如下，注意：默认使用了Mock数据

使用自己的Api实现登录

配置的时候要注意根目录的几个文件

.env.development 本地开发环境
.env.staging 测试环境
.env.production 正式环境

我自己搭建了本地的后端服务，本文均在本地调试，修改.env.development的VUE_APP_BASE_API配置即可！

接下来我们找到Login页面，找到调用方法的地方

所有api.js请求都在request.js中，由于Api设计风格各异，大家可以在requst.js中进行修改，封装错误提示返回信息，以及使用Store（全局存储）Token用于保存用户登录凭证。

handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

后端定义的Login授权方法

错误返回

{
  "statusCode": 500,
  "data": null,
  "succeeded": false,
  "errors": "[u1000] 用户名或密码不正确",
  "extras": null,
  "timestamp": 1659494976299
}

正常返回

{
  "statusCode": 200,
  "data": {
    "id": 1,
    "account": "admin",
    "accessToken": "...................",
    "nickname": "张三",
    "photo": "................",
    "signinedTime": "2022-08-03T10:52:10.4247863+08:00"
  },
  "succeeded": true,
  "errors": null,
  "extras": null,
  "timestamp": 1659495130425
}

修改请求（修改默认request.js）

为Api请求添加Token授权验证

这里用到了全局存储Vuex.Store，在Store文件夹下配置，可根据自己Api返回格式进行SetToken操作，再调用其他Api的时候，直接读取缓存里面的Token放置到请求头即可。

新增页面
- 直接再views文件夹下创建User文件夹新增index.vue文件
- 在router文件夹下index.js文件新增constantRoutes节点

页面配置也可以通过后端Api返回再进行渲染，通过权限来控制菜单按钮展示也可以的，根据项目复杂度来决定是否要加一些配置，当然不需要的页面也可以直接干掉。

引入依赖（直接在main.js里引入即可全局使用）

import countTo from 'vue-count-to'
Vue.component('countTo', countTo)

构建和发布（建议使用Docker部署，新增Dockfile文件）

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

总结

这一套下来看上去其实还是非常简单的，前端的活都比较细致，使用过程中也需要注意一些使用，也是有非常多的坑的，这一套框架使用门槛还是比较低的，基本会一点点Vue语法基础就能上手搬砖，不过光靠搬砖前端遇到问题也是非常苦恼的，像各种包的依赖，解决包冲突这些地方确实也是很麻烦。身为后端开发，我觉得自己撸一下前端代码，写起来也并不吃力，可以一起来上手试试。

路过掘友们点个赞再走吧

使用Vue-Admin-Template快速搭建基于ElementUI后台管理框架

前言

开源Vue-Admin-Template

使用自己的Api实现登录

总结