Vue 配置请求本地Json数据

zxhaaa 发布于2019-08-22 16:12 / 2281人阅读

摘要：文件里的修改在后添加加载本地的文件然后找到，在他的里面插入一下代码接口返回数据，上面配置的数据就复制给请求后调用请求访问文件里的调用这里要使用箭头函数，使用的写法是最后重启项目即可参考链接

build/webpack.dev.conf.js 文件里的修改

在const portfinder = require("postfinder")后添加

const express = require("express")
const app = express()
const appData = require("../data.json")//加载本地的json文件
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use("/api",apiRoutes)

然后找到devServer，在他的里面插入一下代码：

before(app){
    app.get("/api/seller",(reg,res)=>{
        res.json({
            errno: 0,
            data: seller
        })//接口返回json数据，上面配置的数据seller就复制给data请求后调用
    }),
    app.get("/api/goods",(reg,res) => {
        res.json({
            errno: 0,
            data: goods
        })
    }),
    app.get("api/ratings",(reg,res) => {
        res.json({
            errno: 0,
            data: ratings
        })
    })
}

请求访问(.vue 文件里的调用)

this.$axios.get("/api/home", {
     params: {
         categoryId: categoryId
     }
})
.then(response => {     //这里要使用箭头函数，使用ES5的写法  this是undefined
    console.log(response);
 })
 .catch(error => {
     console.log(error)
     console.log(this);
 })

最后重启项目即可 npm run dev

参考链接：https://my.oschina.net/lpcysz...

GPU云服务器云服务器 json数据请求网址 json数据请求地址 ajax请求json数据 js发送请求 json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94128.html

vue开发请求本地JSON数据

摘要：开发请求本地数据的配置配置本地数据访问在之后加加载本地数据文件获取对应的本地数据找到在里面添加接口返回数据，上面配置的数据就赋值给请求后调用文件目录及内容新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条目新闻条新闻条新闻条新闻 VUE开发请求本地数据的配置.webpack.dev.conf.js 1.webpack.dev.conf.js配置本地数据访问a.在const ...

TerryCai 2019-08-26 18:27 评论0 收藏0
WEBPACK+VUE2.0开发请求本地模拟数据的配置方法

摘要：在其的下面增加以下代码代码为在根目录下创建存放模拟的数据文件我命名为，名字可以根据自己口味定义，但是要跟第一步的配置依赖要一样。数据存放文件也需要更改为为请求的地址，为查询数据的入口请求请求欧了早期在vue构建工程文件在build里面有dev-server.js，但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。在项目制作过程中，作为一个前...

galaxy_robot 2019-08-22 11:22 评论0 收藏0
vue项目接入mock&& axios 通用配置

摘要：前言兵马未动粮草先行同理项目开发过程中经常会出现接口未出前端页面已搭建完毕的情况此时为了提高前端的开发效率解放生产力我们可以按照预定的接口文档做一些接口模拟的工作等等后端小伙伴开发完接口后我们只需要替换一个接口基地址即可初始准备这里已项目为前言兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE...

Ilikewhite 2019-08-26 10:33 评论0 收藏0
VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0