vue+node+mongodb實現的簡單TodoList

原由

初學node，js既然也能夠寫後臺,也能夠自定義接口，身爲一個小前端就一直就想利用node來作一個簡單的後端。由此有了這個簡單的demo，看官見笑。

項目搭建

環境需求vue-cli(腳手架)、mongodb、nodejs

在mongodb中 數據庫 -》集合-》文檔文檔的數據結構和JSON基本同樣。全部存儲在集合中的數據都是 BSON 格式。BSON 是一種相似 JSON 的二進制形式的存儲格式，是 Binary JSON 的簡稱。 因此咱們能夠將mongodb想象成一個大json對象處理，傳統的數據庫中表和表之間的外鍵關聯都不存在了.取而代之的是json格式的類樹形結構.這就是轉到mongodb以後最大的區別. 設計時把複雜的東西抽象成一個樹形結構,而不是像從前那樣先抽象成一個個實體,而後再抽象實體之間的關係，對前端而言mongodb作設計比sql作設計要簡單不少

1. 利用vue-cli初始化項目vue create todo_list

2. 經過brew 安裝mongodb

   使用 OSX 的 brew 來安裝 mongodb的命令以下：
   
   sudo brew install mongodb
   要安裝支持 TLS/SSL 命令以下：
   
   sudo brew install mongodb --with-openssl
   若是要安裝開發版本，可使用下面的命令：
   
   sudo brew install mongodb --devel
   而後，使用命令mongod --version來查看mongo DB是否安裝成功。
   複製代碼

   後因爲mongodb已經不開源頭 我在這裏直接安裝默認的社區版本，執行brew install mongodb-community 也能夠參考文檔安裝指定的版本； 以後採用show dbs 查看安裝是否成功

• 若是發現數據庫連接不上，能夠在~/.bashrc中配置 export PATH=/usr/local/Cellar/mongodb-community/4.2.3/bin:${PATH}

• 以後執行brew services start mongodb-community 最後進行mongo鏈接

  

  這裏推薦使用robo3t這個mongodb可視化工具來快速的構建字典表

  

前端項目結構

todolist
|
└─── NodeApi 後端api提供文件
│     |--controller  控制層，對數據庫進行操做
|     |--db          數據庫實例
|     |--middlewares node中間件
|     |--router      向前端暴露的接口
|     |--app         入口js
|     |--config      全局配置
|
└─── src 前端項目目錄
│     |--api           前端請求接口
|     |--assets        圖片相關
|     |--components    項目公關組件
|     |--router        路由
|     |--views         視圖層
|  
複製代碼

前端主要的界面和設計就不細說，有興趣的能夠去github上看一下交互細節和頁面邏輯。github地址

編寫Node項目

經過npm安裝koa、mongoose、body-parser模塊

npm install koa body-parser mongoose --save
複製代碼

• 數據庫連接app.js

const Koa = require('koa');
const mongoose = require('mongoose');
const app = new Koa();

mongoose.connect('mongodb://localhost/todolist', 
{ useNewUrlParser: true }, err => {
  if (err) {
    console.error('Failed to connect to database');
  } else {
    console.log('數據庫連接成功');
  }
});

app.listen(3000);

複製代碼

經過運行node app.js過瀏覽器訪問localhost:3000就能夠看到數據庫已經連接

數據模型的構建

數據模型就是在數據庫構建的表中，所須要的數據和數據的對應類型。

在項目根目錄創建一個db文件夾，每一個模型都是由一個Schema生產，舉個例子在db文件夾中建立一個user.js文件,內容以下

// name: {例子
// type: String,
// required: true, // 表示該字段是必需的
// unique: true // 表示該字段惟一
// },

//引入mongoose模塊
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const userSchema = new Schema({
  user_id: { //用戶id
    type: String
  },
  user_name: {  //用戶名稱
    type: String,
    required: true
  },
  user_password: {  //用戶密碼
    type: String,
    required: true
  },
  user_event: {
    type: Array,
    default: ['001'] //能夠給與默認值
    // 字符串數組類型
  }
}, {
//這裏mongoose.Schema最好要寫上第二個參數
//明確指定到數據庫中的哪一個表取數據，我這裏寫了user，目的就是爲了之後操做數據要去user表中。
  timestamps: { createdAt: 'created', updatedAt: 'updated' },
  collection: 'user',
  versionKey: false // 不須要 __v 字段，默認是加上的
})

//導出model模塊
module.exports = mongoose.model('user', userSchema)
複製代碼

創建路由接口

在項目根目錄建立一個router文件夾，文件夾中建立一個user_router.js文件,內容以下,分別爲對用戶的增刪改查路由。項目模塊較多，對應的路由也不少。若是一個個的去註冊，效率過低。這裏用node的fs模塊去遍歷讀取routes下的全部路由文件，統一註冊，能夠直接在index.js中對全部的router進行引用。

//index.js
const fs = require('fs') //引入fs讀取文件
module.exports = app => {
  fs.readdirSync(__dirname).forEach(file => {
    if (file === 'index.js' || file === '.DS_Store') {
      return
    }
    const route = require(`./${file}`)
    app.use(route.routes()).use(route.allowedMethods())//統一註冊路由
  })
}

複製代碼

//user_controller.js
// 引入路由模塊並實例化
const Router = require('koa-router') //引入koa路由實例
// const router = new Router();
const router = new Router({ prefix: '/user' }) //設置路由訪問路徑
// 導如對應的控制器
const user_controller = require('../controller/user_controller')

// 爲控制器的方法定義請求路徑和請求方式
router.post('/set', user_controller.set_User) //保存用戶
router.post('/get', user_controller.get_User) //查詢用戶

module.exports = router

複製代碼

創建controller來控制事務(增刪改查)

增刪改查示例：

const User_col = require('../db/user')

5ca3894ee78a732a245e3bb8爲id
//查詢全部數據
User_col.find(function (err, ret) {}

//根據條件查詢數據
User_col.find({
  _id: '5ca3894ee78a732a245e3bb8',
  username: 'czk'
}, function (err, ret) {}

//根據條件查詢數據的第一個
User_col.findOne({})
//根據id值查詢數據
User_col.findById('5ca3894ee78a732a245e3bb8', function (err, ret) {})

改 更新
User_col.findByIdAndUpdate('5ca3894ee78a732a245e3bb8', {})

刪
User_col.findByIdAndDelete('5ca3894ee78a732a245e3bb8', function (err, ret) {})

增
let admin = {
  username: 'czk',
  password: '123',
}
User_col.create(admin)

複製代碼

在項目根目錄創建一個controller文件夾，在controller文件夾中建立一個user_controller.js文件,內容以下

// 引入剛纔定義的表
const User_col = require('../db/user')

// get 請求返回全部數據
const get_User = async (ctx, next) => {
  const result = await User_col.find({})
  ctx.status = 200
  ctx.body = {
    data: result
  }
}

// post 帶一個 msg 參數，並插入數據庫
const set_User = async (ctx, next) => {
  const req = ctx.request.body
  ctx.status = 200

  ctx.verifyParams({
    user_name: { type: 'string', required: true },
    //若是required爲true則入參爲必填項
    user_password: { type: 'string', required: true }
  })
  const result = await User_col.create(
  { user_name: req.user_name, user_password: req.user_password })
  // const result = await User_col.create({ req });
  ctx.body = {
    data: result
  }
}

// 暴露出這兩個方法，在路由中使用
module.exports = {
  set_User,
  get_User
}

複製代碼

入口文件的構建

項目根目錄的app.js，是後端項目的入口文件,內容以下

const Koa = require('koa')
const mongoose = require('mongoose')
const parameter = require('koa-parameter') // 參數校驗
const error = require('koa-json-error') // 錯誤抓取
const cors = require('koa2-cors') //koa前端跨域，解決option跨域
const BodyParser = require('koa-bodyparser') // 獲取json數據
const routing = require('./router/index') 
const config = require('./config')
const app = new Koa()

mongoose.connect('mongodb://localhost/todolist', 
{ useNewUrlParser: true }, err => {
  if (err) {
    console.error('Failed to connect to database')
  } else {
    console.log('數據庫連接成功')
  }
})

app.use(cors()) 
app.use(BodyParser()) // 使用koa-bodyparser：
app.use(parameter(app)) // 參數校驗

routing(app) // 路由處理
app.use(error({
  postFormat: (e, { stack, ...rest }) => 
  config.environment == 'master' ? rest : { stack, ...rest }
}))

app.listen(3000, () => console.log('程序啓動在3000端口了'))
複製代碼