zoukankan      html  css  js  c++  java
  • 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:

    在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加

    
    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,插入以下代码:

    
    //然后找到devSeerver,在里面添加
     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
       }) // 接口返回json数据,上面配置的数据goods就复制给data请求后调用
      }),
      app.get('/api/ratings',(reg,res) => {
       res.json({
        errno: 0,
        data: ratings
       }) // 接口返回json数据,上面配置的数据ratings就复制给data请求后调用
      })//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
     }//帮助突破技术瓶颈,提升思维能力
    

    请求访问

    
    <script>
    import header from './components/header/header.vue'
     
    const ERR_OK = 0
     
    export default {
     data () {
      return {
       seller: {}
      }
     },
     created () {
      this.$http.get('/api/seller').then((response) => {
       response = response.body; // 获取到数据
       if (response.errno === ERR_OK) {
        this.seller = response.data;
        console.log(this.seller);
       }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
      })//面向1-3年前端人员
     },//帮助突破技术瓶颈,提升思维能力
     components: {
      'v-header': header
     }
    }
    </script>
    

    最后重新启动项目即可访问npm run dev
    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    原文地址:https://segmentfault.com/a/1190000017280223

  • 相关阅读:
    [转载]Netmsg 局域网聊天程序
    [转载] VC6 STLport5.1.4 /STLport4.6.2 编译,安装
    Project Euler Problem 17
    [转载]Singleton的一个基类实现
    [翻译]进化游戏的层次结构 用组件来重构你的游戏实体
    [转载]使用 WSAAsyncSelect 的 Winsock 编程模型
    一种简单定义FourCC常量的方法 (C/C++)
    Permissions 0755 for '/data/user/lxb/.ssh/id_rsa' are too open.
    外键约束之Mysql
    parted
  • 原文地址:https://www.cnblogs.com/datiangou/p/10121714.html
Copyright © 2011-2022 走看看