精华内容
下载资源
问答
  • 使用vue读取本地的静态文件。 方法一:require 格式: var json = require('文件的相对地址'); 优点:可以按照你写的顺序去执行,没有任何书写方面的局限。 缺点:当你打包的时候,它很可能被打包到 js 中去,...

    使用vue读取本地的静态文件。

    方法一:require

    格式:

    var json = require('文件的相对地址');

    优点:可以按照你写的顺序去执行,没有任何书写方面的局限。

    缺点:当你打包的时候,它很可能被打包到 js 中去,出现这种情况基本就凉凉了。你的 js 超级大。网站基本无法访问。

    解决:你的 js ,很大但是你可以把它cdn加速。这样虽然很方便,但是你的流量就会消耗的很快。【钱多无视流量】
     

    方法二:ajax 

    格式:

    this.$ajax.get('http://localhost:80/static/map/province/anhui' +'.json')
    .then( response => {
        this.json = response.data;                    
    })

     

    说明:

        1、上面的ajax的请求地址,是你的服务器地址。简单来说,你复制这个地址去浏览器可以访问到你的json数据。

        2、上面的 ajax 是 axios。我只是给它重新取了个名字 

        3、缺点是,你无法控制ajax什么时候去调用的。很可能当你需要数据的时候,即使你把上面请求的代码,放在最前面都可能不行。

        4、解决办法。如果你请求的数据只有一次一个。那么你只需要把你的渲染代码。放在ajax的回调函数里面就好了。

        5、如果你是多次请求,你可以考虑一下ajax的嵌套。  所有的渲染页面,都放在ajax里面,一定确保要渲染的时候已经获取到了数据。

     

    总结:  
        虽然,require 来获取数据很简单,很容易被接受。但是js太大,这一个缺点就抹杀了它。推荐使用ajax。

     

    展开全文
  • 所有文章优先发布在个人博客上,后续更新可能会忘记同步到CSDN上。给你带来不便抱歉。...var json = require('文件的相对地址'); 优点:可以按照你写的顺序去执行,没有任何书写方面的局限。 缺点:当你...

    所有文章优先发布在个人博客上,后续更新可能会忘记同步到CSDN上。给你带来不便抱歉。
    个人博客此篇文章:https://www.xdx97.com/article/654798704103915520

     

    方法一:require

     格式:

    var json = require('文件的相对地址');

    优点:可以按照你写的顺序去执行,没有任何书写方面的局限。

    缺点:当你打包的时候,它很可能被打包到 js 中去,出现这种情况基本就凉凉了。你的 js 超级大。网站基本无法访问。

    解决:你的 js ,很大但是你可以把它cdn加速。这样虽然很方便,但是你的流量就会消耗的很快。【钱多无视流量】

     

    方法二:ajax

    格式:

    this.$ajax.get('http://localhost:80/static/map/province/anhui' +'.json')
    .then( response => {
        this.json = response.data;                    
    })

    说明:

        1、上面的ajax的请求地址,是你的服务器地址。简单来说,你复制这个地址去浏览器可以访问到你的json数据。

        2、上面的 ajax 是 axios。我只是给它重新取了个名字 

        3、缺点是,你无法控制ajax什么时候去调用的。很可能当你需要数据的时候,即使你把上面请求的代码,放在最前面都可能不行。

        4、解决办法。如果你请求的数据只有一次一个。那么你只需要把你的渲染代码。放在ajax的回调函数里面就好了。

        5、如果你是多次请求,你可以考虑一下ajax的嵌套。  所有的渲染页面,都放在ajax里面,一定确保要渲染的时候已经获取到了数据。

     

    总结:  

        虽然,require 来获取数据很简单,很容易被接受。但是js太大,这一个缺点就抹杀了它。推荐使用ajax。

    展开全文
  • 静态文件下载模板 <div> <a target='_blank' href='/static/test.xlsx' download='test.xlsx'>模板下载</a> </div> 上传文件到端及数据处理 importfxx(obj) { let _this = this; // ...

    效果演示
    在这里插入图片描述

    从静态文件下载模板

     <div>
    <a target='_blank' href='/static/test.xlsx' download='test.xlsx'>模板下载</a>
    </div>
    

    上传文件到端及数据处理

    importfxx(obj) {
        let _this = this;
        // 通过DOM取文件数据
        this.file = obj
        var rABS = false; //是否将文件读取为二进制字符串
        var f = this.file;
        var jsontarget=this.jsontarget
        // var tableData=this.tableData
        var reader = new FileReader();
        FileReader.prototype.readAsBinaryString = function(f) {
            var binary = "";
            var rABS = false; //是否将文件读取为二进制字符串
            // var pt = this;
            var wb; //读取完成的数据
            var outdata;
            var reader = new FileReader();
            /*
            在读取后,触发的事件,并获取读取文件的地址
            */
            reader.onload = function(e) {
            //返回的结果为reader.result是类型化数组
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for(var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]); //将 Unicode 编码转为一个字符:
            }
    
            var XLSX = require('xlsx');
            if(rABS) {
                wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(binary, {
                    type: 'binary'
                });
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
                this.da = [...outdata]
                console.log('入参:'+this.da+'-----'+jsontarget)
                axios.post(platformBaseUrl + "/api/modeCheck/", {jsonA:this.da,jsonB:jsontarget})
                .then(response => {
                    // debugger
                    _this.tableData = response.data.result;
                    console.log('成功了'+_this.tableData)
                    return _this.tableData
                    })
                    .catch(err => {
                    // this.tableData =response.data.result;
                    console.log('失败了')
                    });
                // return outdata
            }
            //开始读取指定的Blob中的内容,一旦完成,result属性中保存的将是被读取文件的
            reader.readAsArrayBuffer(f);
        }
    
        if(rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
      },
    
    展开全文
  • vue读取本地文件

    千次阅读 2020-03-25 19:38:06
    原理其实就是通过http请求访问项目的静态文件 vue读取本地文件

    原理其实就是通过http请求访问项目的静态文件
    vue中读取本地文件

    展开全文
  • <p>,不是上传文件后读取该文件,而是类似java那样读取本地静态文件   使用过 let fso = new ActiveXObject('Scripting.FileSystemObject'); 这种</p>
  • 第一步:static 创建文件目录 存放静态资源文件 文件包含内容 json格式(window,提供外部调用) 第二步:在src下main.js中引入 第三步: 在根目录index.html中引入 第四步:在src pages 任意.vue直接...
  • vue-cli 3.0 读取本地静态json文件-

    千次阅读 2019-06-21 17:06:12
    vue.config.js文件得配置 const express = require('express') const webpack = require('webpack') const app = express() var appData = require('./public/region.json') var apiRoutes = express.Router(); app....
  • 需要注意的是本地的xml文件最好放在静态资源文件夹中,这样webpack打包时不会将其打包到项目里。传入的url地址应该是"localhost:8080/static/文件名",前面主机名可以省略。(注意vue的根目录是src) ...
  • 首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态文件放在static目录下){"data":[{"id":1,"name": "yidong", "age": "11" },{"id":2,"name": "yidong2", "age": "12" ...
  • 静态配置文件读取: 一个json文件,我们需要将其放在src目录下才可以进去读取。在main.js中读取:import configData from './json/data.json'; 如何使用:configData.属性名 vuex的使用 npm安装:$ npm install ...
  • Vue2.0 axios 读取本地json文件

    千次阅读 2019-05-13 17:07:00
    参考:https://www.cnblogs.com/wdxue/p/8868982.html 1.下载插件 npm install axios --save 2.在main.js下引用axios ... Vue.prototype.$http=axios ...3.在static文件夹下写静态文件 home....
  • static是放置静态文件的地方,可以我们也会把json文件放在里面,但是经常我们会遇到读取josn文件内图片路径的问题,这个问题困了我两天,今天一大早就又开始研究这个问题,现在终于得到了解决,关于这个问题,我就在...
  • vue-cli3通过axios来读取本地json文件前言正题 前言 一般前端mock数据或者数据量过大且不需要考虑...我们的项目是通过vue-cli3创建的,vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)
  • 由于tomcat下的ROOT文件夹被占用,因此vue项目需要发布到webapps下的文件夹...**这个路径是ROOT目录下的文件,怎么修改为读取project/static/images下的文件啊。。。。。 请问这个问题怎么解决啊。。。愁好几天了**
  • 记录一下,网上大部分解决方案是放static文件夹,但是vue-cli3.0的静态文件是在public文件夹里,所以已经不行了。 正解是在public文件夹里放文件,然后就可以正常用this.$axios.get('/filename.json').then(res=>...
  • 在项目中安装prerender-spa-plugin$ npm ...找到bulid目录下的webpack.prod.conf.js文件,在其中写入以下内容: 在文件的上方写入:const PrerenderSpaPlugin = require('prerender-spa-plugin') 找到webpackConfig...
  • vue如何读取xml文件 注意:v-if的值如果为字符串“true/false”,不能显示或隐藏,需要转换为逻辑型。 <template> <div> <img v-if="flag" src="../../../public/img/fontTitle.png" alt=""> &...
  • vue学习

    2017-03-16 15:01:00
    1、直接写vue代码时vue的代码 window.onload = function(){ //vue代码 } ...2、用webpack打包之后的vue文件如何使用,需要调几个地方,一个是express读取静态文件的地方,一个是启动服务...
  • vue-cli 项目中src目录每个文件夹和文件的用法 assets 文件夹是放静态资源 components 是放组件 router 是定义路由相关的配置 view 视图 app.vue 是一个应用主组件 main.js 是入口文件 vuex 是什么,怎么用,哪些...
  • 在开发中,如果使用绝对路径在运行测试环境是没用任何问题的 但是在打包后,路径是回安装原来写的路径完全不改变的搬...static静态文件 build->utils.js exports.cssLoaders下的function generateLoaders if (op
  • vue 中展示PDF内容

    2018-12-29 10:59:00
    vue 中展示PDF内容 不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来...这里说下自己的实现吧,读取pdf,那么在纯静态的使用vue-cli搭建的网站中读取pdf文件是不行的,何况涉及到验证,那么只...
  • 在springBoot配置中加入上下文路径server.context-path=/csdnjs,img等静态文件无法加载,出现404的问题解决方法1,使用相对路径2,使用thymeleaf模板,动态获取上下文路径声明SpringBoot 从application&period;yml中...
  • vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件...这里说下自己的实现吧,读取pdf,那么在纯静态的使用vue-cli搭建的网站中读取pdf文件是不行的,何况涉及到验证,那么只有调用...
  • 今天打包vue项目上线后,发现背景图片未加载出来,其他图片加载正常,那个未加载出来的背景图片是在css文件中引入的,调试时发现图片的路径不对,改了build...构建后的项目, 都需要读取静态资源,静态资源分为三...
  • 这些数据基本都是静态数据,有的可能是写死在代码中,等到后端开启服务调试再替换这部分mock数据,有的可能是读取静态json、js等文件获取mock数据,实现页面效果,但是实际调用接口和读取文件获取mock数据,两种方式...
  • vue-cli是如何工作的

    2020-12-26 05:12:42
    <strong><a href="https://github.com/segmentio/metalsmith">metalsmith</a></strong>是一个插件化的静态网站生成器,它的一切都是通过插件运作的,这样可以很方便地为其扩展。 通过generate函数的代码...
  • 可以省去路由划分的时间,Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置、进一步封装Vuex等等。下面来介绍 如何将Nuxt部署到静态托管上? 云开发(Tencent CloudBase,TCB)是云端一体化的后端...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

vue读取静态文件

vue 订阅