开发环境

首先你需要安装 MongoDB、node以及vue-cli

• MongoDB的安装可以参考https://blog.csdn.net/surtol/article/details/121106833
• node的安装直接官网下载，傻瓜式操作点击下一步即可
• vue-cli的安装
  npm install -g @vue/cli 或者 yarn global add @vue/cli

第一步：新建vue项目

你可以使用vue ui图形化界面进行新建，也可以vue create 项目名称

第二步：启动MongoDB

• 方法1：任务管理器–>服务–>找到MongoDB右击开始
• 方法2：找到你MongoDB安装的目录，cmd打开操作窗口，输入mongo。
  出现以下界面即为成功。
  

第三步：安装后台所需模块

//npm 安装
npm install express body-parser mongoose --save

第四步：项目根目录文件下创建一个app.js，用来启动express

//app.js文件

//1.引入express模块
const express = require('express')
//2.创建app对象
const app = express()
//定义简单路由
app.use('/',(req,res) => {
  res.send('成功')
})
//定义服务启动端口
app.listen(3000,() => {
    console.log('app listening on port 3000.')
})

以上做完之后，打开命令行工具node app.js，在浏览器打开localhost:3000,页面显示send输出的“成功”即正确。

第五步：创建数据模型

数据模型就是你要创建什么样的数据库表，表中需要有什么

• 根目录下创建文件夹schema,新建student.js

//引入mongoose模块
const mongoose = require('mongoose');
const studentSchema = mongoose.Schema(
  {
    name: String,
    age: String,
    sex: String,
    //第二个参数为数据库表
  },
  { collection: 'mystudent' }
);
//导出model模块
let Student = mongoose.model('student', studentSchema);

module.exports = Student;

第六步：利用express创建一个查询的路由接口

提示：所谓的后台接口，就是通过express建立路由，如果不明白的话可以去看下express介绍。

• 在项目根目录下创建一个routes文件夹，新建student.js,

//引入express模块
const express = require('express');
//定义路由级中间件
const router = express.Router();
//引入数据模型模块
const Student = require('../schema/student');
// 查询所有英雄信息路由
router.get('/student', (req, res) => {
  Hero.find({})
    .sort({ update_at: -1 })
    .then((stu) => {
      res.json(stu);
    })
    .catch((err) => {
      console.log(2);
      res.json(err);
    });
});
module.exports = router;

第七步：app.js中接入数据库、应用路由接口

const mongoose = require('mongoose');
//引入express模块
const express = require('express');
//连接数据库
mongoose
  .connect('mongodb://127.0.0.1:27017/school', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log('Mongodb Connected'))
  .catch((err) => console.log(err));

//创建app对象
const app = express();
//CORS设置跨域访问
app.all('*', (req, res, next) => {
  // 响应头的设置，我的后台支持跨域请求
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});
//定义服务启动接口
app.listen(3000, () => {
  console.log('app 3000');
});
//引入刚才定义的hero路由并应用
const student = require('./routes/student');
//访问接口为http://localhost:3000/api/student
app.use('/api', student);

此时接口已经写好，你需要创建一个school数据库，新建一个student数据库表，参照第五步定义的数据模型插入数据。

最后一步：前端请求数据

• 命令行中node app.js再启动一下后台
• 前端请求如下

export default {
  data() {
    return {
      list: {},
      pageNum: 40,
    };
  },
  created() {
    this.getData();
    this.$emit('change');
  },
  computed: {},
  methods: {
    async getData() {
      this.list = await axios.get('/api/hero');
      console.log(this.list);
    },
  },
};