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条评论