文档章节

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

疯狂的亮坨坨
 疯狂的亮坨坨
发布于 2017/09/11 11:56
字数 938
阅读 500
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

用到技术: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:Password@172.0.0.1: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会提示未找到模块

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

© 著作权归作者所有

疯狂的亮坨坨
粉丝 0
博文 3
码字总数 1822
作品 0
私信 提问
加载中

评论(0)

用Node+VueCli+ElemenetUI+MongoDB教你开发综合性教程网站,包括后台管理系统

运用Node手摸手教你写一个教程网站(遵循响应式),包括前台内容和后台管理系统,整合Express框架和Mongodb数据库服务器开发;教你用Vue.JS,ElementUI和iViewUI写出超漂亮的页面 作者原创文章...

取舍🍂
2019/10/13
0
0
用 node 搭建的个人开源博客 - node-blog

node-blog,用 node 搭建的个人开源博客。 这个项目是为了学习 node 而建的,从前端到后端一手包办。相对来说,还是有一定难度的,适合有一定编程基础的人进阶学习。 如果有问题,欢迎提 is...

谭光志
2019/06/24
4.5K
0
easy-mock 本地部署(挤需体验三番钟,里造会干我一样,爱象节款mock)

前言 很多小伙伴问我怎么在自己公司的项目里面添加配置mock,在vue项目里面都知道怎么配置mock,在大型前端项目里面就一脸疑惑了。 我就回答他,你今天会在vue项目里面用,那天换公司是用angul...

osc_nmvhliqx
2018/09/13
2
0
mongodb图片上传 初识vue

1、回顾 1.1 node node 服务器 url querystring express express 项目生成器 ejs 1.2 mongodb mongod --dbpath d:datadbmongo db.users.insert({})db.users.insert([{},{}])db.users.insert......

osc_m2bqaiwa
2019/10/21
1
0
学习笔记:Vue+Node+Mongodb构建简单商城系统(一)

所需前置知识:   HTML、CSS、JS、Vue、ES6、Npm、Webpack、Node、Express、Mongodb 项目整体架构: IDE:webstorm; 项目建立过程(cmd常用命令行指令):   node的安装 下载连接:https...

osc_2qxlyxer
2018/03/04
3
0

没有更多内容

加载失败,请刷新页面

加载更多

B站教学,全中文课程:港中文周博磊强化学习课程完结 - 知乎

历时两个多月,本周一,香港中文大学信息工程系助理教授周博磊的中文强化学习课程终于完结了。 机器之心报道,参与:张倩。 作为全国知名的学习网站,我们经常可以在 B 站上看到国内外名师的...

osc_4tfw1dxv
14分钟前
19
0
沈向洋下一站确定:投资并出任News break董事长,亲率「一点资讯美国版」 - 知乎

昨日,前微软全球执行副总裁,微软亚洲研究院院长沈向洋博士宣布就任 News Break 董事长。 机器之心报道,参与:泽南、蛋酱。 这位著名中国籍人工智能高管在离开自己工作了 23 年的微软后,终...

osc_f4kbwieu
15分钟前
33
0
Python、Java、C++一网打尽,这个GitHub项目用多种语言实现经典算法 - 知乎

经典数据结构和算法你了解几个?想去大厂面试?想成为算法工程师?收下这份全面的复习材料。 机器之心报道,参与:Racoon、Jamin。 不想做低级码农,不想成为前端抠图达人或是后台「增删改查...

osc_9fz4iln8
16分钟前
20
0
攻克视频AI界难题,直通芒果TV offer,这场算法大赛你一定不能错过 - 知乎

一场面向顶尖 AI 技术人才的数据竞赛正广募英雄,获奖者不仅有奖金回报,还有机会直接进入芒果 TV 算法岗位面试。首届「马栏山杯」国际音视频算法大赛正在火热进行中。 在当前热门的人工智能...

osc_ocl8o73l
16分钟前
25
0
ES[7.6.x]学习笔记(十二)高亮 和 搜索建议

ES当中大部分的内容都已经学习完了,今天呢算是对前面内容的查漏补缺,把ES中非常实用的功能整理一下,在以后的项目开发中,这些功能肯定是对你的项目加分的,我们来看看吧。 高亮 高亮在搜索...

osc_71qxolcv
17分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部