vue+jsonserver

woochon

于 2018-11-13 15:47:22 发布

阅读量625

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue+jsonserver vue jsonserver 前端数据模拟前端工具

本文链接：https://blog.csdn.net/woochon/article/details/84030171

本文介绍了如何利用json-server和axios在前端进行数据模拟。首先，通过npm安装json-server，创建db.json数据文件。接着配置json-server，并设置代理以避免跨域问题。在数据操作部分，说明了如何通过POST、PUT、PATCH和DELETE请求更新数据，并强调了请求体和Content-Type的重要性。最后提到了vue-cli项目与git的集成，如何将代码提交到GitHub。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jsonserver+axios模拟数据

安装(前提是安装有node环境)

npm install --save json-server

提供json数据文件

在项目根目录下，新建一个 JSON 文件db.json

配置json-server

在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。

/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
  console.log('JSON Server is running')
})

访问数据(修改配置文件一定要重新启动项目)

配置完成后，要npm dev run 重启项目，然后再地址栏输入http://localhost:3000 就可以访问到数据

设置代理

浏览器代理设置，在 config/index.js中

/*代理配置表，在这里可以配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNew

最低0.47元/天解锁文章

200万优质内容无限畅学