node+vue+MongoDB從構建專案到伺服器部署
阿新 • • 發佈:2018-12-24
用到技術: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會提示未找到模組