摘要：注僅做記錄使用又不舍得刪除推薦使用相關資料很多的運行環境構建基于全局安裝安裝過程略配置的淘寶鏡象全局安裝官方腳手架工具官網文檔創建項目基于模板創建創建配置按需，我除了安裝之外其他都選了運行與打包測試安裝依賴包運行打包配

注(2018-2-12):僅做記錄使用,又不舍得刪除,推薦使用koa2,koa2相關資料很多的~

全局安裝node（v6.9.4)

安裝過程略

配置cnpm（npm的淘寶鏡象）

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`

全局安裝vue官方腳手架工具vue-cli（vue官網文檔）

cnpm install --global vue-cli

基于 webpack 模板創建

vue init webpack tifi-music

創建配置按需，我除了安裝router之外其他都選了no

運行與打包測試

cd tifi-misic
//安裝依賴包
cnpm i
//運行
npm run dev
//打包
npm run build

在項目根目錄下創建server.js文件，內容如下

//用于獲取路徑
const path = require("path")
//用于讀寫文件流
const fs = require("fs")
const express = require("express")
//無需cnpm安裝,因為是express的中間件bodyParser
//用于解析客戶端請求的body中的內容,內部使用JSON編碼處理,url編碼處理以及對于文件的上傳處理.
//bodyParse可以接受客戶端ajax提交的json數據,以及url的處理,不使用這個中間件將導致無法接收客戶端的json數據
const bodyParser = require("body-parser")
//需要cnpm安裝,cookieParser中間件用于獲取web瀏覽器發送的cookie中的內容.
//在使用了cookieParser中間件后,代表客戶端請求的htto.IncomingMessage對象就具有了一個cookies屬性
//該屬性之為一個對象的數組,其中存放了所有web瀏覽器發送的cookie,每一個cookie為cookies屬性值數組中的一個對象.
const cookieParser = require("cookie-parser")
//serve-favicon中間件用于請求網站的icon用法如下
//express().use(favicon(__dirname + "/public/images/favicon.ico"))
const favicon = require("serve-favicon")
//morgan中間件是日志中間件，用于node的日志輸出
//進階用法見http://www.cnblogs.com/chyingp/p/node-learning-guide-express-morgan.html
const logger = require("morgan")
//獲取后端路由.我設置在根目錄下的server文件,讀取下面的index.js
const routes = require("./server/router")
//用于管理配置的插件.統一管理后端服務端口和數據庫連接地址等,默認配置在config目錄下的default.js中
const config = require("config-lite")
//compression 中間件用于壓縮和處理靜態內容
//例子:app.use(express.static(path.join(__dirname, "public")))
const compression = require("compression")
//實例化express對象,用于連接中間件
const app = express()


app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(compression({ threshold: 0 }))
app.use("/api", routes)


app.use(express.static(path.resolve(__dirname, "./dist")))
// 因為是單頁應用 所有請求都走/dist/index.html
app.get("*", function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, "./dist/index.html"), "utf-8")
    res.send(html)
})
app.listen(config.port, function () {
    console.log(`Server running in port ${config.port}`)
})

解決npm run dev時即開發模式下跨域問題
打開根目錄下的config目錄下的index文件，配置proxyTable如下：

proxyTable: {
    "/api": {
        //這里的target填服務端的端口的接口地址
        target: "http://localhost:3000/api/",
        changeOrigin: true,
        pathRewrite: {
            "/api": ""
        }
    }
}

創建router
server.js文件中寫了const routes = require("./server/router")
這里require的路徑就是我們需要創建router的路徑
在根目錄下創建server文件夾,并在其目錄下創建router.js文件，內容如下：

//express的路由中間件,引入等待從controller中添加路由
const router = require("express").Router()
//引入node的文件路徑模塊path和文件處理模塊fs
const path = require("path")
const fs = require("fs")
//讀取controller文件下的所有控制器，為了實現動態讀取控制器，有空再研究更好的寫法
const controllers = fs.readdirSync(path.resolve(__dirname, "./controller"))
//遍歷獲取到的文件，動態添加express的路由信息：url、type、response即請求路徑、請求方式、響應處理函數
controllers.forEach((file) => {
    //獲取到具體到控制器
  let controller = require("./controller/" + file)
    //遍歷控制器攜帶的信息
  for (let o in controller) {
        //獲取請求路徑，未取到則取默認路徑 為"/"+文件名(不包括后綴)
    let url = controller[o].url ? controller[o].url : ("/" + o)
        //獲取請求方式，未取到則取默認方式 為"get"
    let type = controller[o].type ? controller[o].type : "get"
        //響應處理函數，未取到則使用默認的處理
    let response = controller[o].response ? controller[o].response : (req, res) => {
      res.json({
        success: false,
        info: "沒有處理響應的無效路由"
      })
    }
        //設置路由信息
    router[type](url, response)
  }
})
//使用動態設置好的路由
router.use(router)
//輸出路由
module.exports = router

創建controller
router.js文件中寫了獲取同級目錄controller下的所有文件
所以我們只需要在server文件夾下的controller中創建一個user的控制器
即創建user.js文件，內容如下：

const userName = [{
    name: "測試用戶名0"
  },
  {
    name: "測試用戶名1"
  }
]
//"輸出待添加的路由信息對象
//每個對象中可設置三個屬性:url、type、response（不設置的話均做了默認處理）
module.exports = {
  users: {
    response: (req, res) => {
      res.json(userName)
    }
  },
  reg: {
    type: "post",
    response: (req, res) => {
      res.json("reg")
    }
  }
}

運行express

前面文件創建完成之后，要運行express首先安裝依賴包

cnpm i cookie-parser morgan serve-favicon morgan config-lite –save-dev

另外修改文件時需要頻繁的重啟服務器，全局安裝nodemon可以實現自動重啟

cnpm install -g nodemon 

然后配置package.json中的scripts添加start命令

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "start": "nodemon server.js"
}

執行npm run build打包項目用于生產環境

最后命令行里輸入node start就可以運行了，命令行輸出Server running in port 3000表示express成功啟動了，瀏覽器訪問http://localhost:3000/api/users看到輸出的測試數據就是成功配置好express了

安裝mongodb并啟動（過程省略）

安裝mongoose

cnpm install mongoose --save-dev

連接mongodb

編寫入口：在server文件下新建一個文件夾名為db，并在其下新建一個文件db.js，內容如下：

//引入node的文件路徑模塊path和文件處理模塊fs
const path = require("path")
const fs = require("fs")
const mongoose = require("mongoose")


// mongodb 連接?
mongoose.connect("mongodb://localhost/tifi-music")
// 此處防止 node.js - Mongoose: mpromise 錯誤
mongoose.Promise = global.Promise;
let db = mongoose.connection;
db.on("error", console.error.bind(console, "Connect error"))
db.once("open", function() {
    console.log("Mongodb started successfully")
})
//聲明待添加的model對象
let model = {}
//讀取方式和router一樣
const schemas = fs.readdirSync(path.resolve(__dirname, "./model"))
schemas.forEach((file) => {
    //設置數據庫表名為讀取到的文件名(去除后綴名)
    let name = file.substring(0,file.lastIndexOf("."))
    //獲取到的對象就是數據庫字段
    let schema = require("./model/" + file)
    //使用mongoose.Schema和mongoose.model完成對數據庫表和字段的創建
    model[name] = mongoose.model(name, mongoose.Schema(schema))
})
//輸出model對象
module.exports = model

編寫model：也在db文件夾下新建一個文件夾名為model，并在其下新建user.js，內容如下：

module.exports = {
  //設計數據庫字段,先簡單的設置一些常用的字段
  name: String,
  phone: String,
  email: String,
  password: String,
  createTime: Date
}

修改controller：修改controller文件下單user.js為：

//"引入mongoose的model
const model = require("../db/db")
//加密用戶的密碼
const sha1 = require("sha1")
//mogodb會自動的為我們添加_id字段,類型為objectid,我們要把它轉換成創建該用戶的時間
const objectIdToTimestamp = require("objectid-to-timestamp")


module.exports = {
  //獲取所有用戶
  users: {
    response: (req, res) => {
      model.User.find({}, (err, doc) => {
        if (err) console.log(err)
        res.send(doc)
      })
    }
  },
  //用戶注冊
  reg: {
    type: "post",
    response: (req, res) => {
      console.log(req.body);
      let userRegister = new model.User({
        email: req.body.email,
        password: sha1(req.body.password),
      })
      // 將 objectid轉換為用戶創建時間,使用是的UTC國際標準時間
      userRegister.createTime = objectIdToTimestamp(userRegister._id)

      //查詢郵箱是否已存在于數據庫
      model.User.findOne({
        email: (userRegister.email)
          .toLowerCase()
      }, (err, doc) => {
        if (err) console.log(err)
        if (doc) {
          res.json({
            success: false,
            info: "該郵箱已被注冊"
          })
        } else {
          userRegister.save(err => {
            if (err) console.log(err)
            console.log(new Date(), "register success")
            res.json({
              success: true,
              data: {
                email: userRegister.email
              }
            })
          })
        }
      })
    }
  }
}

運行mongoose與測試查詢與插入

確定連接mongod成功，如果之前配置好nodemon的話，控制臺會有Mongodb started successfully

測試插入數據，打開postman進行post請求，成功之后如下圖:

![圖片描述][3]
- 測試查詢數據,打開[postman][2]進行get請求，成功之后如下圖:
![圖片描述][5]
- 如果前面都成功了，說明已經成功的連接了mongoose，說明全部的基礎建設已經搞好了，可以進行下一步的開發了！