Vue （第18篇 vue+express+MongoDB 搭建项目）

*本文默认已经安装好node，不在介绍node安装教程。

*node.js+Express搭建项目，也可通过启动WebStorm,File->New->Project，选择Node.js Express App，Location是项目路径，Template是页面模板和解析引擎。

1、Vue项目搭建教程已在其他文章介绍过：https://blog.csdn.net/qq_42540989/article/details/89853923

2、搭建express项目：

①创建文件夹
新建项目文件夹，在项目目录中新建一个文件夹，运行cmd  命令行进入该文件，然后输入npm init，初始化一个 node 项目，之后一直按 ENTER 键直到结束。现在文件夹里面就有一个package.json文件。

②安装
cmd  命令行输入 cnpm install express  --save 会自动生成node_modules文件夹和package-lock.json 文件。

新建express步骤 ：在你想要指定的文件夹下可以新建一个目录， 比如：

cmd 命令运行： express myapp 

就会创建 myapp文件夹，然后cd myapp文件夹，执行 npm  install  命令  安装依赖 。安装完成，npm  start  启动即可。

目录如下：

 

③服务器搭建启动
在 项目目录中新建index.js文件，然后编辑 index.js。

const express = require("express");

const app = express();

app.listen(5000, () => console.log('**********【服务器启动成功】**********'));

 此时在cmd命令行执行 node index 命令 ，服务器就会启动成功。

3、搭建完成后项目目录

api.js  (用来编写接口)

//api.js (参考)

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

/************** 创建(create) 读取(get) 更新(update) 删除(delete) **************/

// 创建账号接口
router.post('/api/login/createAccount',(req,res) => {
    // 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
    let newAccount = new models.Login({
        account : req.body.account,
        password : req.body.password
    });
    // 保存数据newAccount数据进mongoDB
    newAccount.save((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send('createAccount successed');
        }
    });
});
// 获取已有账号接口
router.get('/api/login/getAccount',(req,res) => {
    // 通过模型去查找数据库
    models.Login.find((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send(data);
        }
    });
});

module.exports = router;

db.js(用来配置mongodb的相关设置，在文章第6条中会详细介绍)

//db.js (参考)

// Schema、Model、Entity或者Documents的关系请牢记，Schema生成Model，Model创造Entity，Model和Entity都可对数据库操作造成影响，但Model比Entity更具操作性。
const mongoose = require('mongoose');
// 连接数据库 如果不自己创建 默认test数据库会自动生成
mongoose.connect('mongodb://127.0.0.1:27017'); // 地址跟第一步的地址对应。

// 为这次连接绑定事件
const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));
/************** 定义模式loginSchema **************/
const loginSchema = mongoose.Schema({
    account : String,
    password : String
});

/************** 定义模型Model **************/
const Models = {
    Login : mongoose.model('Login',loginSchema)
}

module.exports = Models;

index.js(入口文件)

//index.js (参考)

// 引入编写好的api
const api = require('./api'); 
// 引入文件模块
const fs = require('fs');
// 引入处理路径的模块
const path = require('path');
// 引入处理post数据的模块
const bodyParser = require('body-parser')
// 引入Express
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(api);
// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件
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)
})
// 监听8088端口
app.listen(8088);
console.log('success listen…………');

 

4、Mongodb 环境搭建

①下载Mongodb：https://www.mongodb.com/download-center/community 

 ②解压安装，在mongodb目录下创建data文件夹和log文件夹，在data文件夹下创建db文件夹，在log文件夹下创建MongoDB.log文件，在mongodb目录下新建mongod.config文件：

//mongod.config
//例如：

systemLog:
    destination: file
    path: D:\Mongodb\log\mongodb.log
storage:
    dbPath: D:\Mongodb\data\db

 整个目录如下：

 

③在bin目录下，执行cmd命令：

//例如：

D:\Mongodb\bin>mongod -dbpath "D:\Mongodb\data\db"

安装完成后，在浏览器打开 http://127.0.0.1:27017/ （27017为默认端口）

浏览器出现上面内容，则安装成功。 此时不要关闭cmd，重新打开一个新的cmd，在bin目录下运行  mongo：

此时为连接成功，关闭两个cmd。 

关闭mongodb方法：https://www.cnblogs.com/buro79xxd/archive/2011/03/23/1993220.html

④配置windows服务

在bin目录下，cmd执行以下命令：

mongod --config "D:\Mongodb\mongod.config" --install --serviceName "MongoDB"

 根据刚刚创建的mongod.config 配置文件安装服务，名称为MongoDB

⑤cmd 运行 net start MongoDB  启动服务

⑥cmd 运行 net stop mongodb  关闭服务 

*如果遇到 发生服务特定错误 ：100 ，比如：

解决：在Mongodb 目录中进入data文件夹，然后进入db文件夹中找到mongod.lock文件删掉，重新启动服务即可。

5、启动后端服务

① cd  进入service 目录下，执行node index命令，node就会跑起来；

这时在浏览器输入http://localhost:8088/api/login/getAccount就能访问到这个接口了。

*启动后端服务时，mongodb踩坑-Error: Cannot find module 'mongoose' （缺少mongoose这个模块，npm（cnpm） 安装即可）

cnpm install mongoose

6、在node中测试mongodb数据库是否连接成功

① 启动mongodb 数据库。（上面第4条第③点中也已经介绍过）

例如：在bin 目录下执行：

D:\Mongodb\bin>mongod -dbpath "D:\Mongodb\data\db"

如下图，则代表启动成功。 

②连接mongodb（上文中已经介绍过在node+express搭建的项目的目录结构，此处我们介绍node项目目录中的db.js）

//引入 mongoose 
const mongoose = require('mongoose');

// 连接数据库 如果不自己创建 默认test数据库会自动生成
mongoose.connect('mongodb://127.0.0.1:27017'); 

// 为这次连接绑定事件，用来提示是否连接成功
const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));

在cmd 命令行中，执行：

// 例如

node db.js

 如下图，则代表连接成功。