Vue+Express+MongoDB 项目搭建

一、 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 数据