用到技術:node-vue-vuex-axios-es6/es7-mongodb
記錄一下專案從無到有到伺服器部署
Centos 6
MongoDB 3.2.7

一、利用vue-cli構建專案：
1、安裝vue-cli至全域性

 npm install -g vue-cli

2、使用vue-cli初始化專案：

 vue init webpack-simple node-vue-demo

3.安裝依賴：

npm install

4.執行專案：

npm run dev

二、啟動node服務及安裝mongodb
1.在專案資料夾下建立server資料夾放node程式碼
2.在server資料夾下建立app.js

const api = require('./api')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(api);

// 靜態檔案
app.use(express.static
 
(path.resolve(__dirname, '../dist')))
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})

//允許跨域訪問
app.all('*',function (req, res, next) {
    console.log(req,res)
    res.header("Access-Control-Allow-Origin", "*"
 
);
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// 監聽80埠
app.listen(80);
console.log('server is running 80');

3.建立api.js

"use strict";
const models = require('./db');
const express = require('express');
const router = express.Router();

// 建立賬號
router.post('/api/login/createAccount',(req,res) => {
    let newAccount = new models.Login({
        account : req.body.account,
        password : req.body.password
    });
    newAccount.save((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send('Create success');
        }
    });
});

// 獲取全部賬號
router.get('/api/login/getAccount',(req,res) => {
    // 查詢資料庫
    models.Login.find((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send(data);
        }
    });
});

module.exports = router;

5.安裝下載並安裝mongodb（linux安裝方法）

這裡我們在官網下載原始碼進行安裝. 下載地址: https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.2.7.tgz

使用wget下載

cd /usr/local
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.2.7.tgz
tar -xvf mongodb-linux-x86_64-rhel62-3.2.7.tgz
mv mongodb-linux-x86_64-rhel62-3.2.7 mongodb
配置環境變數

修改/etc/profile, 新增如下內容

export MONGODB_HOME=/usr/local/mongodb
export PATH=$MONGODB_HOME/bin:$PATH
執行命令:
vim /etc/profile
source /etc/profile

檢視mongodb版本資訊 mongod -v


啟動

建立資料庫目錄

MongoDB需要自建資料庫資料夾.
mkdir -p /data/mongodb
mkdir -p /data/mongodb/log
touch /data/mongodb/log/mongodb.log
新增配置檔案
新建mongodb.conf配置檔案, 通過這個配置檔案進行啟動.
vim /etc/mongodb.conf
配置檔案內容:
dbpath=/data/mongodb
logpath=/data/mongodb/log/mongodb.log
logappend=true
port=27017
fork=true
##auth = true # 先關閉, 建立好使用者在啟動

通過配置檔案啟動
mongod -f /etc/mongodb.conf
about to fork child process, waiting until server is ready for connections.
forked process: 2814
child process started successfully, parent exiting
出現successfully表示啟動成功了.

進入 MongoDB後臺管理 Shell
cd /usr/local/mongodb/bin
./mongo
建立資料庫

use test
switched to db test
建立成功.

建立使用者, 設定許可權
db.createUser(
    {
        user: "test",
        pwd: "test",
        roles: [ { role: "readWrite", db: "test" } ]
    }
)

4.連線mongodb

const mongoose = require('mongoose');
// 連線資料庫
mongoose.connect("mongodb://admin:[email protected]:27017/admin",{useMongoClient:true});
//如沒有建立使用者則："mongodb://172.0.0.1:27017/test

const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));

const loginSchema = mongoose.Schema({
    account : String,
    password : String
});


const Models = {
    Login : mongoose.model('Login',loginSchema)
}

module.exports = Models;

5.啟動node服務

node  /server/app.js

6.vue呼叫node服務

<template>
  <div class="hello">
    <img src="../assets/logo.png">
    <h2>Hello</h2>
    <div>
      <p>賬號：<input type="text" v-model='account'></p>
      <p>密碼：<input type="text" v-model='password'></p>
      <button @click='login'>建立</button>
      <button @click='query'>檢視建立</button>
    </div>
    <ul>
      <li style="display:block;" v-for="(val, key) in list">
        <span>使用者名稱:{{val.account}}密碼:{{val.password}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import http from "./../lib/http";
import apiUrl from "./../lib/ApiSetting";
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      account:'',
      password:'',
      list:{}
    }
  },
  created() {

  },
  methods: {
    login(){
      if(this.account&&this.password){
        http(apiUrl.createAccount,
          {
            account:this.account,
            password:this.password
          })
        .then((res)=>{
          alert('建立成功')
        })
      }
    },
    query(){
      http(apiUrl.getAccount)
      .then((res)=>{
        console.log(res.data)
        this.list = res.data
      })
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

三、node服務常駐linux系統

$ sudo npm install forever -g   #安裝
$ forever start ./server/app.js          #啟動
$ forever stop ./server/app.js         #停止
$ forever start -l forever.log -o out.log -e err.log ./server/app.js   #輸出日誌和錯誤
//此次有個小坑，如果進入server裡面執行app.js會提示未找到模組