数据mock

前端 2020-07-24 1110

1.mockjs

安装：
cnpm install mockjs --save
在nuxt项目中，使用asyncData发送请求时，会出现问题。
以下示例在vue-cli项目可用：
建立mock目录
编写一个js文件，如index.js

const Mock = require('mockjs')
const index = {
    ret: true,
    city: '武汉'
}
Mock.mock('/api/index', 'get', index)
JavaScript

在main.js中

// mock文件
import './mock/index'
JavaScript

在组件中调用：

axios.get('/api/index').then(this.getSucc)
JavaScript

2.mock网站(推荐)

推荐阿里妈妈旗下：http://rap2.taobao.org/
先注册账号，具体操作查看下方图片：

3.express

先安装express
cnpm install express --save
该方式使用nodejs单独启一个接口服务，是一个独立的服务。
只讲解在nuxt中使用：
建立api目录，新建一个js文件，如home.js

const { Router } = require('express')

const router = Router()

const data = {
    a: 'b'
}
/* GET users listing. */
router.get('/home', function (req, res, next) {
  res.json(data)
})

module.exports = router
JavaScript

在新建一个js文件，index.js

const express = require('express')

// Create express instance
const app = express()

// Require API routes
const home = require('./home')

// Import API Routes
app.use(home)

// Export express app
module.exports = app

// Start standalone server if directly running
if (require.main === module) {
  const port = process.env.PORT || 3001
  app.listen(port, () => {
    global.console.log(`API server listening on port ${port}`)
  })
}
JavaScript

在nuxt.config.js文件中，新增如下内容：

// 定义api接口
  serverMiddleware: [
    // Will register file from project api directory to handle /api/* requires
    // 配置后，url请求应该是http://localhost:3000/api/home
    { path: '/api', handler: '~/api/index.js' }
  ]
JavaScript

标签：前端
下一篇 let和const

文章评论

评论列表

已有0条评论

热门文章

标签云

倾心推荐