前端用express+mongodb写接口

402 阅读2分钟

初始化项目结构

初始化项目

npm init -y

安装Express框架,创建服务器

npm i express

在根目录下新建入口文件app.js

const express = require('express')
const app = express()

app.listen(5000, function () {
  console.log('app is runing at port 5000');
})

为了项目运行方便,全局安装一个自动重启的node工具nodemon

npm install -g nodemon

package.json中添加启动命令

  "scripts": {
    "start": "nodemon app.js"
  },

连接MongoDB数据库

安装mongoose

npm i mongoose

mongoose是node中的一个模块,让node借助这个模块来实现管理mongoDB的程序,不需要通过命令管理,而是通过程序管理连接数据库
在根目录下新建一个plugins文件夹,再在plugins文件夹下新建数据库连接文件db.js

const mongoose = require('mongoose')

const IP = 'localhost'
const PORT = 27017
const DB_NAME = 'garbage_sorting'

//连接
mongoose.connect(`mongodb://${IP}:${PORT}/${DB_NAME}`, {
  useNewUrlParser: true
})

//连接成功
mongoose.connection.on('connected', () => {
  console.log('Mongoose connection success')
})

//连接异常
mongoose.connection.on('error', (err) => {
  console.log('Mongoose connection error:' + err)
})

//连接成功
mongoose.connection.on('disconnected', () => {
  console.log('Mongoose connection disconnected')
})

module.exports = mongoose

接着在入口文件app.js中将其引用进来

require('./plugins/db')

创建数据模型

在根目录建立一个models文件夹,用来存储数据模型。以垃圾分类数据为例,在models文件夹下新建一个garbage.js

const mongoose = require('mongoose')

const garbageSchema = new mongoose.Schema({
  city: { type: String },
  cityCode: { type: Number },
  name: { type: String },
  type: { type: Number },
  category: { type: String },
  remark: { type: String },
}, { versionKey: false })
// versionKey 不显示版本字段

module.exports = mongoose.model('garbage', garbageSchema, 'garbage')
//第三个参数,指定集合名。省略则匹配garbages。

定义路由接口

在根目录下创建一个routes文件夹,在此文件夹下创建adminweb 两个文件夹,分别为后台管理和前台页面的路由
admin文件夹下新建一个index.js文件

const express = require('express')
const router = express.Router()

const garbage = require('../../models/garbage')

let result = {
  code: 200,
  msg: 'ok'
}

//创建数据
router.post('/postData', async (req, res) => {
  let postData = new garbage({ ...req.body })
  await postData.save(err => {
    if (err) {
      throw err
    } else {
      res.json({ ...result })
    }
  })
})

//获取数据
router.get('/getList', async (req, res) => {
  let { start, limit } = req.query
  if (start == undefined) {
    start = 0;
  }
  if (limit == undefined) {
    limit = 10;
  }
  let data = await garbage.find().skip(Number(start)).limit(Number(limit));
  res.json({ ...result, data })
})

module.exports = router

app.js中应用路由

const apiRouter = require('./routes/admin')
app.use('/api', apiRouter)

处理跨域

因为express服务是在localhost:5000端口启动的,而vue-cli创建的项目是在默认端口localhost:8080启动的,所以肯定会涉及到跨域的情况
在根目录下安装cors模块

npm i cors

app.js中应用,此时完整的代码

const express = require('express')
const cors = require('cors')
const app = express()

require('./plugins/db')

//解决跨域
app.use(cors())
//express内置的post参数解析
app.use(express.urlencoded({ extended: false }))

const apiRouter = require('./routes/admin')
app.use('/api', apiRouter)

app.listen(5000, function () {
  console.log('app is runing at port 5000');
})

启动项目

通过npm run start启动

image.png

接口调试

使用Postman进行接口测试 image.png

至此,我们的后台接口就定义完成了。