前言
寫這篇博客主要是來記錄我做畢設的大致過程。畢竟是第一次自己起手做項目，以前都是在搭建完善的項目上直接上手開發
項目同步更新在github上：
前端：https://github.com/sue7777777/owm-fe
服務端：https://github.com/sue7777777/owm-server
-2019.2.12
起步
首先大致構想了一下項目需要的大致框架，前端方面是vue+ts，后端服務打算用node+mongodb嘗試一下（第一次寫）
1、前端
起初的時候使用的是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倉庫的流程：
1、注冊github賬號、綁定ssh key略過
2、在github新建一個空項目（readme.md最好也不要有
3、在本地項目終端
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了
2、數據庫
采用的是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之后就會在左側顯示這個數據庫
結束。
3、服務端
數據庫環境配置完成，然后主要是配置服務器項目結構，為了更好的操作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表里事先寫入這個用戶
