vue+ts+node+mongoDB折騰記

前言

寫這篇博客主要是來記錄我作畢設的大體過程。畢竟是第一次本身起手作項目，之前都是在搭建完善的項目上直接上手開發

項目同步更新在github上：

前端：https://github.com/sue7777777/owm-fe

服務端：https://github.com/sue7777777/owm-server

-2019.2.12

起步

首先大體構想了一下項目須要的大體框架，前端方面是vue+ts，後端服務打算用node+mongodb嘗試一下（第一次寫）

一、前端

起初的時候使用的是vue init webpack xxx直接搭建，搭完一看，發現和本身如今正在實習的項目結構差別太大，太過冗餘，若是還要再轉型成ts就更復雜了。因此這裏使用的是vue cli 3，生成的結構比較簡潔，大概以下：

這樣項目自己生成的時候就是已經轉型成爲ts了，不用再作過多的配置。

流程以下：

全局安裝@vue/cli

npm install -g @vue/cli

安裝完成以後，直接

vue ui

就能夠打開vue提供的GUI界面

後面的能夠參考這篇博客：@vue/cli 3.0.0圖形化管理，至關人性化

完成以後，將項目推送至github上，下面是如何將本地項目推送至github倉庫的流程：

一、註冊github帳號、綁定ssh key略過

二、在github新建一個空項目（readme.md最好也不要有

三、在本地項目終端

git init

初始化本地git倉庫

git add .

將全部改動暫存

git commit -m 'init'

將暫存區的改動提交

git remote add origin git@github.com:sue7777777/online-works-management.git

添加遠程倉庫

ps：上面那個地址複製自你的新建的git倉庫地址

最後

git push -u origin master

將提交推送至遠程倉庫

大功告成，刷新你的github，就能夠看到你的push了

 二、數據庫

採用的是node+express+mongoDB

node和express很少說，搭建的過程很大一部分能夠參考這篇博客：https://blog.csdn.net/calmreason/article/details/82685249

博客裏有部分說的不是很清楚，主要關於mongoDB搭建這部分：

（1）下載：https://pan.baidu.com/s/17oi6mzthXCoulvYhL4UWCw

（2）完成以後按照txt說的安裝

 

（3）安裝完成以後，先設置mongoDB

打開你安裝的路徑，若是沒修改的話是 C:\Program Files\MongoDB\Server\3.4\bin

而後設置環境變量（右鍵個人電腦-屬性-高級系統設置-環境變量），在Path下添加mongo bin的地址 C:\Program Files\MongoDB\Server\3.4\bin

完成以後你就能夠在bash裏使用mongod和mongo命令了

這裏解釋一下bin路徑下的幾個exe對應的命令

最重要的是mongo和mongod這兩個

mongod 是整個MongoDB最核心的進程，負責數據庫的建立，刪除等管理操做，運行在服務器端，監聽客戶端的請求，提供數據服務。

mongo進程是構造一個Javascript Shell，用於跟mongod進程交互，根據mongod提供的接口對MongoDB數據庫進行管理，至關於SSMS(SQL Server Management Studio)，是一個管理MongoDB的工具。

（4）設立db路徑

在你想要的某個磁盤根路徑下建立：data\db（不要更名字）

如： D:\data\db

而後能夠在這個文件夾下打開bash，調起mongod

出現如上頁面。表示連接創建成功，在27017端口，此時能夠打開 http://localhost:27017/ ，以下

大功告成

（5）robot t3客戶端鏈接mongodb

robot客戶端能夠提供圖形化的方式讓咱們來更方便管理db，咱們讓mongod服務跑起來以後，能夠在robot裏面建立和管理數據庫

輸入一個你喜歡的名字，connect以後就會在左側顯示這個數據庫

結束。

三、服務端

數據庫環境配置完成，而後主要是配置服務器項目結構，爲了更好的操做MongoDB，這裏使用了mongoose，配置好的結構大概以下：

比較重要的幾個文件夾已經在圖裏標註出來，其中

model文件夾主要是生成對應表的schema，並根據schema生成對應model

controller文件夾根據model來完成對應的數據庫操做

routes文件夾裏是服務器對接口url的解析以及請求方式

dbhandler.js是最重要的一環，它負責連接數據庫，內容主要以下

var mongoose = require('mongoose'),
    DB_URL = 'mongodb://localhost:27017/OWM-db' // 這裏是你數據庫的端口和名字

/**
 * 鏈接
 */
mongoose.connect(DB_URL, {useNewUrlParser: true}, (err) => {
  if(err){
    console.log('Connection Error:' + err)
  }else{
    console.log('Connection success!') }
})

/**
  * 鏈接成功
  */
mongoose.connection.on('connected', function () {    
    console.log('Mongoose connection open to ' + DB_URL)
});    

/**
 * 鏈接異常
 */
mongoose.connection.on('error',function (err) {
    console.log('Mongoose connection error: ' + err)
});    
 
/**
 * 鏈接斷開
 */
mongoose.connection.on('disconnected', function () {    
    console.log('Mongoose connection disconnected')
});

module.exports = mongoose

mongoose的使用主要參考了這篇博客：https://www.cnblogs.com/zhongweiv/p/mongoose.html 

以及總體參考了這個項目：https://github.com/tianya930502/node_mongodb_port

（1）配置dbhandler，鏈接數據庫

將上面的代碼拷貝，修改爲本身的數據庫端口和名字便可

（2）配置對應數據庫表的model

如上述項目中的 model/user.js

const mongoose = require('../utils/dbhandler')

/**
 * 參數1： 須要連接的表名（mongoose會自動將這個表加一個s）
 * 參數2： 字段的類型對象（配置項）
 */
const User = mongoose.model('user', {
  username: String,
  password: String,
  isLogin: Boolean
})

// 查找
const findUser = (userInfo, callback) => {
  User.findOne(userInfo).then((res) => {
    callback(res)
  })
}

// 添加
const insertUser = (userInfo, callback) => {
  let user = new User({
    username: userInfo.username,
    password: userInfo.password,
    isLogin: false
  })
  user.save().then((res) => {
    callback(res)
  })
}

module.exports = {
  findUser,
  insertUser
}

對數據庫操做的api參考mongoose的官方文檔：https://mongoosejs.com/docs/api.html

（3）實現相應接口

在controller調用model對數據庫的操做，添加邏輯，返回對應的數據

如上述項目裏的 controller/user.js

const userModel = require('../model/user')

const login  = (req, res) => {
  let {username, password, status} = req.body
  userModel.findUser({username}, (user) => {
    if (!user) {
      res.json({
        code: 200,
        msg: '用戶名不存在'
      })
    } else {
      if (user.password == password) {
        res.cookie('user', username)
        res.json({
          code: 200,
          msg: '登陸成功！'
        })
      } else {
        res.json({
          code: 200,
          msg: '密碼錯誤'
        })
      }
    }
  })
}

const register = (req, res) => {
  let {username, password} = req.body
  // 檢查是否用戶名已存在
  userModel.findUser({username}, (user) => {
    if (user) {
      res.json({
        code: 200,
        msg: '用戶名已存在'
      })
    } else {
      userModel.insertUser({username, password},(result) => {
        !result? res.json({
          code: 200,

          msg: "error: "+err
        }) : res.json({
          code: 200,
          msg: '註冊成功！'
        })
      })
    }
  })
}

module.exports = {
  login,
  register
}

（4）配置對應url

在routes裏配置請求的方式和url，如上述項目裏routes/user.js

var express = require('express')
var router = express.Router()

var userController = require('../controller/user')

router.post('/login', userController.login)
router.post('/register', userController.register)

module.exports = router;

（5）在app.js裏配置相應路由

這樣就能夠把服務跑起來：

在postman裏進行測試：

固然前提是你要先在數據庫的users表裏事先寫入這個用戶