vue-cli加载本地json的方法

目前在学习vue-cli,加载json数据是我目前最上心的事,所以总结一下加载json数据的方法。(我是新手,内容多有借鉴,有错误希望指正)

(1)新建一个json文件,保存位置如下:

               

         不用好奇,确实是两个位置,我想做的是分别获取外部static静态文件夹中两种。

(2)咱们先说第一个,不是因为他排在第一个,而是因为他最废我精力,后来答案还特别简单,效果贴上。

哈哈,没错是404,因为根本就无法获取(笑哭),我弄了好久,谁如果弄出来了麻烦教我一下,多谢。

(3)咱们言归正传,看第二个static静态文件里的json读取

    先上一个效果图(控制台打印的数据),给各位定下心,数据是我自己创建的假数据。

    

具体代码在不同的文件,所以不能一把截图过来,会分几个部分,步骤如下:

     1.在webpack.dev.conf.js(之前是dev-server.js,新版本之后替换为这个文件,具体内容自行百度)文件中,红框内是我添加的,注释的部分是第一种方法的代码(失败了),有兴趣的话可以尝试。

// 加载本地json 10-22
var appData = require('../roles.json')
var roles = appData.roles;

/*const express = require('express')
var app = express()
var apiRoutes = express.Router();
apiRoutes.get('/roles01',function (req,res) {
  res.json({
    errno:0,
    data:roles
  });
});
apiRoutes.post('/roles01',function (req,res) {
  res.json({
    errno:0,
    data:roles
  });
});
app.use('/api',apiRoutes);*/

// end

   2.此时需要引入两个插件,一个是axios(用于请求),另一个是jquery(用于jquery方式请求,可不加)

       npm install axios --save-dev 与 npm install jquery --save-dev

在src文件夹下的router文件夹下的main.js内添加如下:


import axios from 'axios'
import 'jquery'

Vue.config.productionTip = false
Vue.prototype.$http = axios

同上,红框内是添加的,引用全局jquery的话略麻烦,需要在webpack.basc.conf.js内添加如下内容:

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],

依然同上。

  这时,配置已经完成,剩下的就是在页面内添加访问(切记此时要重新npm run dev一下),下面是我写的调取数据的事件,有些简陋。第二种方法也测过服务接口,可以用。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/jiangtao">出门</router-link>
    <button @click="dataRoles">获取数据</button>
    <button @click="dataRoles01">获取数据01</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '听说大壮家结婚,我去瞅瞅'
    }
  },
  methods:{
    dataRoles(){
      var url = 'http://localhost:8080/static/roles.json';
      this.$http.get(url).then(res =>{
        console.log(res)
      })
       /*$.get(url,function(data){
          console.log(data)
       })*/
    },
    dataRoles01(){
      var url01 = 'http://localhost:8080/api/roles01';
      this.$http.get(url01).then(res =>{
        console.log(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

帖子不精,至少证明自己努力了。古之成大事者,不唯有超世之才,亦必有坚韧不拔之志。(安慰一下自己)

  • 3
    点赞
  • 4
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值