数据mock

前端 2020-07-24 721

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)  

在main.js中

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

在组件中调用:

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

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  

在新建一个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}`)  
  })  
}  

在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' }  
  ]  

标签:前端

文章评论

评论列表

已有0条评论