node + vue全栈手撸后台管理系统

简介

最近整理学习资料的时候，看到了一个半年前写的后台管理系统。于是想着整理一篇关于node+vue去实现一个后台管理系统：使用node手写后端服务与接口、使用mongoDB数据库、使用vue写前端页面。在整理的这篇文章里，会着重的去讲一个后台服务、登陆注册接口、数据库以及前端页面之间的实现。文末会附上git地址。(之前写的东西，整理成文章后有点粗糙，讲个大概步骤，有需要实现的可以私信我)

准备

思路：
使用express框架搭建简易服务；
引入mongoDB数据库，链接数据库；
编写路由接口；
通过mongoose获得schema对象，在对应的集合内进项数据查询、数据插入；
前端页面调用接口；

node服务采用express和mongoDB，所以npm init -y新建一个空项目后，需要安装以下内容

npm i express -S
npm i mongoose -S

关于目录结构大家可以参考我这边整理的

目录结构.png

关于mongoDB数据库的使用连接，可以参考 使用node写一个简易的邮箱验证，这边不做说明了。或者可以拉我代码看文件夹 db下的代码。
写serve之前，还需要安装一个插件 npm i body-parser -S，其作用是解析传参。

一、node服务

1.1 入口

server.js

const express = require('express')
const app = express()
const db = require('./db/connect') // 链接数据库
const port = 3000
// expresss实例化

var bodyParser = require('body-parser')
// 解析表单 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// 解析json application/json
app.use(bodyParser.json())

const { userRouter } = require('./router/index')

app.use('/user', userRouter)
app.listen(port, ()=> {
  console.log('server start listening on: http://localhost:%s', port)
})

1.2 路由

router/index.js
所有接口的统一入口，模块化开发。可以从我的目录结构图内看出，除了user类路由，还有其他的模块类的路由

const userRouter = require('./userRouter')

module.exports = {
  userRouter
}

router/userRouter.js
可以看到定义了两个接口：登录 和 注册。

const express = require('express')
const router = express.Router()
const User = require('../db/model/userMoldel')
const utils = require('../utils/index')

/**
 * @api {post} /user/login 登录
 */
router.post('/login', async (req, res) => {
  let { us, ps } = req.body
  if (us && ps) {
    let data = await utils.search(us, ps)
    res.send({ code: 1, success: true, result: data})
  } else {
    res.send({err: -4, msg: '用户名或密码不能为空'})
  }
})

/**
 * @api {post} /user/reg 用户注册
 */
router.post('/reg', async (req, res) => {
  let { us, ps, phone, sex, company } = req.body

  if (us && ps) {
    utils.isExist(us)
      .then(() => {
        const userId = (new Date()).getTime()
        User.insertMany({us, ps, phone, userId, sex, company})
        res.send({ code: 1, success: true, result: {msg: '注册成功'}})
      })
      .catch(() => {
        res.send({err: -3, msg: '用户名已存在'})
      })
  } else {
    res.send({err: -4, msg: '用户名或密码不能为空'})
  }
})
module.exports = router

着重讲一下const User = require('../db/model/userMoldel'):
通过mongoose获得schema对象，定义了userSchema的数据格式，决定了数据库内集合的格式。

const mongoose = require('mongoose')
var Schema = mongoose.Schema
// 通过mongoose获得schema对象
var userSchema = new Schema({
  us: { type: String, required: true },
  ps: { type: String, required: true },
  userId: Number,
  phone: Number,
  company: String,
  sex: { type: Number, default: 0 }
})

var User = mongoose.model('users', userSchema) // 该数据对象和集合关联('集合名', schema对象)

module.exports = User

集合users.png

User.insertMany 在users集合内插入数据，
utils.isExist方法内的 User.find在users集合内查询数据

  isExist: function (us) {
    return new Promise((resolve, reject) => {
      User.find({us}).then((data) => {
        if (!data.length) {
        // 用户名不存在，可以注册
          resolve()
        } else {
          reject()
        }
      })
    })
  }

二、前端页面

这边展示最终的效果，代码会跟node服务代码一起放在文末。因为前端的页面只是调用我们node服务的接口，所以也可以换成更简单的页面。由于本项目的思路是简单的登录注册，和简单页面的数据请求，如果需要完成的后台管理系统模版，建议把github上大把功能完整的后台管理模版拉下来，再自己手写一些接口，替换掉mock数据。

登录.png

首页.png

本文源码：

说明：

所有准备之前，需要先安装配置完成mongoDB。启动完mongoDB数据库后，本服务的启动才可正常连接数据。这才有数据从数据库 -> 后台服务接口 -> 前端页面，这样一个完整的流程。若是只想体验node服务端返回mock数据，直接在接口内res.send(mock数据)

注意：

若完全用我的代码，需要新建一个menus集合，放查询菜单接口需要的数据源。或者使用./src/constant/menus.json内的数据作为菜单

menusjson.png

菜单schema.png

菜单.png

前端github：前端项目地址icrm，
后端github：后端项目地址icrmNode