一、 Express 项目搭建

1. 安装 Node.js
   请先安装Node.js
2. 项目搭建
   1. 创建文件夹
      请先找一个地方，创建一个文件夹，我取名为 service，名字请随意。通过命令行就入该文件，然后输入 npm init，初始化一个 node 项目，之后一直 enter 到结束。现在 service 文件夹里面就有一个 package.json 文件了
      create.png
   2. 安装
      命令行输入 npm install express --save，会自动生成一个node_modules文件夹和package-lock.json。
   3. 搭建服务器
      在 server 里面新建一个index.js文件，然后编辑 index.js。
   4. 编辑 index.js(入口文件)

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

   5. 启动服务器
      在命令行输入node index，即可启动成功，并且会打印 **********【服务器启动成功】**********

二、Vue 单页面项目构建

1. 安装 vue-cli
   请先全局安装vue-cli，命令为：进入cmd，然后输入npm install vue-cli -g
2. 单页面构建
   找个文件夹，进入 cmd 命令行，输入：vue init webpack proName，其中的proName：是你的项目名称，可以随意取名。然后就是依据提示，enter下去，安装完成后，cd proName，运行npm install，完成后npm run dev，会默认打开一个浏览器，里面是 vue 的 logo，则 vue 单页面项目构建成功

三、Vue 与 Express 连接

1. Vue 代理配置
   请在config—index.js下面，往dev.proxyTable里面添加代理代码

    "/api": {
        target: "http://localhost:5000",//接口的域名
        pathRewrite: {
          "^/api": ""//需要将/api重写为''
        },
        secure: false,// 如果是https接口，需要配置这个参数
        changeOrigin: true// 如果接口跨域，需要进行这个参数配置
      }

proxyTable.png

1. Node—index.js(入口文件)
   1. 请在index.js里面这样写 get、post 接口
      apiWrite.png
   2. （请先安装axios哦）然后，在 vue 这样访问 get、post 时：
      apiGet.png
   3. 最后请分别运行 node 和 vue

Express 与 MongoDB 连接

1. db.js(数据库文件)

   1. 连接数据库
      请先在 service 下，进入 cmd，然后运行 npm install mongoose --save，安装 mongoose 依赖,，它是一个 MongoDB 对象建模工具
      然后在 service 下新建一个 db.js，用于 mongodb 数据库的配置

      引入mongoose依赖
      const mongoose = require("mongoose");
      连接mongodb数据库
      参数1：mongodb数据库启动的地址
      参数2：回调函数，用于判断是否连接成功
      mongoose.connect("mongodb://localhost/Test", err => {
          if (err) console.log("**********【数据库连接失败】**********");
          else console.log("**********【数据库连接成功】**********");
      });
      要导出的模型Model
      const Models = {};
      module.exports = Models;
      

      然后在index.js顶部里面引入该文件
      const models = require("./db");
      最后运行 node index

      db.png
      表明数据库连接成功啦

   2. 数据库操作
      Mongoose 文档
      请先 db.js 里面加上以下代码，具体原因需要自行学习 mongoose 文档
      a.定义Schema(模式)

      登录模式
      const logins = new mongoose.Schema({
          username: String,
          password: String,
          userimg: {
              type: String,
              default: "avatar0" //用户默认头像
          }
      });
      

      b.定义Model(模型)

      要导出的模型Model
      const Models = {
          Logins: mongoose.model("logins", logins)
      }
      导出模型
      module.exports = Models;
      

      c.然后在 index.js 里面的登陆接口写数据库操作

      apiGet.png

      就可完成对数据库的操作。

以上内容就完成了：vue 连接 node 服务器，node 服务器连接 mongodb 数据