Vue+Express+MongoDB 安装部署（weblog）

拼搏现实的明天。 2022-01-14 15:07 256阅读 0赞

## （一）搭建express ##

**（1）创建一个空的文件夹A**  
**（2）在该目录下打开命令行`npm init`初始化项目，然后一路enter**  
**（3）此时该目录下有个package.json文件**  
**（4）`npm install express --save`**  
**（5）在A下创建一个Index.js（入口文件）写如下代码**  
![在这里插入图片描述][20190613222010716.png]  
**（6）启动node index 若打印则启动成功**

## （二）Vue项目构建 ##

**（1）安装 vue-cli**  
**（2）`vue init webpack weblog`**  
**（3）`npm install`然后`npm run dev`**  
**（4）打开浏览器可访问则构建成功**

## （三）Vue 与 Express 连接 ##

**（1）配置vue代理**  
**（2）请在config文件夹下的index.js中添加如下代码**

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

**（3）在node服务那边的index.js文件下写如下代码**

const express = require('express');
    const models=require('./db');
    const app = express();
    app.get('/user/get',(req,res)=>{
        res.send("get访问成功");
    });
    app.post('/user/post',(req,res)=>{
        res.send("post访问成功");
    })
    app.listen(5000, () => console.log("*************服务器启动成功*************"));

**（4）安装axios**  
**（5）在vue的src文件夹下的App.vue添加如下代码**

**（6）分别运行node和vue**

## （三）Express 与 MongoDB 连接 ##

**（1）在服务中安装`mongoose`依赖**  
**（2）在服务端新建一个文件夹db.js用于数据库的配置**

//引入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;

**（3）在服务端的index.js引入`const models=require('./db');`**  
**（4）运行，见打印服务器，数据库连接成功！**

[20190613222010716.png]: /images/20220114/563d97d34ee84d959c1cee745c1624c2.png