簡(jiǎn)介

最近整理學(xué)習(xí)資料的時(shí)候，看到了一個(gè)半年前寫的后臺(tái)管理系統(tǒng)。于是想著整理一篇關(guān)于node+vue去實(shí)現(xiàn)一個(gè)后臺(tái)管理系統(tǒng)：使用node手寫后端服務(wù)與接口、使用mongoDB數(shù)據(jù)庫、使用vue寫前端頁面。在整理的這篇文章里，會(huì)著重的去講一個(gè)后臺(tái)服務(wù)、登陸注冊(cè)接口、數(shù)據(jù)庫以及前端頁面之間的實(shí)現(xiàn)。文末會(huì)附上git地址。(之前寫的東西，整理成文章后有點(diǎn)粗糙，講個(gè)大概步驟，有需要實(shí)現(xiàn)的可以私信我)

準(zhǔn)備

思路：
使用express框架搭建簡(jiǎn)易服務(wù)；
引入mongoDB數(shù)據(jù)庫，鏈接數(shù)據(jù)庫；
編寫路由接口；
通過mongoose獲得schema對(duì)象，在對(duì)應(yīng)的集合內(nèi)進(jìn)項(xiàng)數(shù)據(jù)查詢、數(shù)據(jù)插入；
前端頁面調(diào)用接口；

node服務(wù)采用express和mongoDB，所以npm init -y新建一個(gè)空項(xiàng)目后，需要安裝以下內(nèi)容

npm i express -S
npm i mongoose -S

關(guān)于目錄結(jié)構(gòu)大家可以參考我這邊整理的

目錄結(jié)構(gòu).png

一、node服務(wù)

1.1 入口

server.js

const express = require('express')
const app = express()
const db = require('./db/connect') // 鏈接數(shù)據(jù)庫
const port = 3000
// expresss實(shí)例化

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
所有接口的統(tǒng)一入口，模塊化開發(fā)?？梢詮奈业哪夸浗Y(jié)構(gòu)圖內(nèi)看出，除了user類路由，還有其他的模塊類的路由

const userRouter = require('./userRouter')

module.exports = {
  userRouter
}

router/userRouter.js
可以看到定義了兩個(gè)接口：登錄 和 注冊(cè)。

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 用戶注冊(cè)
 */
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: '注冊(cè)成功'}})
      })
      .catch(() => {
        res.send({err: -3, msg: '用戶名已存在'})
      })
  } else {
    res.send({err: -4, msg: '用戶名或密碼不能為空'})
  }
})
module.exports = router

著重講一下const User = require('../db/model/userMoldel'):
通過mongoose獲得schema對(duì)象，定義了userSchema的數(shù)據(jù)格式，決定了數(shù)據(jù)庫內(nèi)集合的格式。

const mongoose = require('mongoose')
var Schema = mongoose.Schema
// 通過mongoose獲得schema對(duì)象
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) // 該數(shù)據(jù)對(duì)象和集合關(guān)聯(lián)('集合名', schema對(duì)象)

module.exports = User

集合users.png

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

二、前端頁面

這邊展示最終的效果，代碼會(huì)跟node服務(wù)代碼一起放在文末。因?yàn)榍岸说捻撁嬷皇钦{(diào)用我們node服務(wù)的接口，所以也可以換成更簡(jiǎn)單的頁面。由于本項(xiàng)目的思路是簡(jiǎn)單的登錄注冊(cè)，和簡(jiǎn)單頁面的數(shù)據(jù)請(qǐng)求，如果需要完成的后臺(tái)管理系統(tǒng)模版，建議把github上大把功能完整的后臺(tái)管理模版拉下來，再自己手寫一些接口，替換掉mock數(shù)據(jù)。

登錄.png

首頁.png

本文源碼：

說明：

所有準(zhǔn)備之前，需要先安裝配置完成mongoDB。啟動(dòng)完mongoDB數(shù)據(jù)庫后，本服務(wù)的啟動(dòng)才可正常連接數(shù)據(jù)。這才有數(shù)據(jù)從數(shù)據(jù)庫 -> 后臺(tái)服務(wù)接口 -> 前端頁面，這樣一個(gè)完整的流程。若是只想體驗(yàn)node服務(wù)端返回mock數(shù)據(jù)，直接在接口內(nèi)res.send(mock數(shù)據(jù))

注意：

若完全用我的代碼，需要新建一個(gè)menus集合，放查詢菜單接口需要的數(shù)據(jù)源。或者使用./src/constant/menus.json內(nèi)的數(shù)據(jù)作為菜單

menusjson.png

菜單schema.png

菜單.png

前端github：前端項(xiàng)目地址icrm，
后端github：后端項(xiàng)目地址icrmNode