node+vue+MongoDB从构建项目到服务器部署

用到技术: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/localwget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.2.7.tgztar -xvf mongodb-linux-x86_64-rhel62-3.2.7.tgzmv mongodb-linux-x86_64-rhel62-3.2.7 mongodb配置环境变量修改/etc/profile, 添加如下内容export MONGODB_HOME=/usr/local/mongodbexport PATH=$MONGODB_HOME/bin:$PATH执行命令:vim /etc/profilesource /etc/profile查看mongodb版本信息 mongod -v启动创建数据库目录MongoDB需要自建数据库文件夹.mkdir -p /data/mongodbmkdir -p /data/mongodb/logtouch /data/mongodb/log/mongodb.log添加配置文件新建mongodb.conf配置文件, 通过这个配置文件进行启动.vim /etc/mongodb.conf配置文件内容:dbpath=/data/mongodblogpath=/data/mongodb/log/mongodb.loglogappend=trueport=27017fork=true##auth = true # 先关闭, 创建好用户在启动通过配置文件启动mongod -f /etc/mongodb.confabout to fork child process, waiting until server is ready for connections.forked process: 2814child process started successfully, parent exiting出现successfully表示启动成功了.进入 MongoDB后台管理 Shellcd /usr/local/mongodb/bin./mongo创建数据库use testswitched to db test创建成功.创建用户, 设置权限db.createUser(    {        user: "test",        pwd: "test",        roles: [ { role: "readWrite", db: "test" } ]    })

4.连接mongodb

const mongoose = require('mongoose');// 连接数据库mongoose.connect("mongodb://admin:Password@172.0.0.1:27017/admin",{useMongoClient:true});//如没有创建用户则："mongodb://172.0.0.1:27017/testconst 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会提示未找到模块

部署完成
GitHub地址:https://github.com/474782977/node-vue