精华内容
下载资源
问答
  • Vue 读取本地静态文件 json【很全,很详细】
    万次阅读
    2018-12-29 16:33:14

    所有文章优先发布在个人博客上,后续更新可能会忘记同步到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。

    更多相关内容
  • 使用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。

    最后为了方便大家的沟通与交流请加QQ群: 625787746

    请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140

    展开全文
  • 静态文件下载模板 <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访问本地静态资源文件

    千次阅读 2021-09-29 10:13:17
    methods: { downManual(item, index) { console.log(item, index) axios.get('static/handbook/' + item.acronymy + '.docx', { //静态资源文件夹public,根据你文件路径来,文件后缀名自取 例:public/static/...

    1、页面内

    <ul class="xzlb">

            <li v-for="(item,index) in manualList" :key="index" @click="downManual(item,index)">

              <p>{{item.fileName}}</p>

            </li>

     </ul>

    export default {

    data() {

    return {

    manualList: [{

              fileName: 'XXX',//自定义文件名称

              acronymy: 'gwglgnyhczsc' //首字母拼音

            }, {

              fileName: 'XXX',

              acronymy: 'zwxxgnyhczsc'

            }]

          }

       },

    methods: {

          downManual(item, index) {

            console.log(item, index)

            axios.get('static/handbook/' + item.acronymy + '.docx', { //静态资源文件夹public,根据你文件路径来,文件后缀名自取 例:public/static/handbook

              responseType: 'blob',

            }).then(response => {

              const url = window.URL.createObjectURL(new Blob([response.data]));

              const link = document.createElement('a');

              let fname = item.fileName + '.docx';//导出后的文件名.文件类型,文件类型同文件后缀名保持一致

              link.href = url;

              link.setAttribute('download', fname);

              document.body.appendChild(link);

              link.click();

            }).catch(error => {

              console.log('error:' + JSON.stringify(error))

            });

          }

    }

    }

    2、public文件下用数组首字母拼音创建文件,避免文件无法导出 例如:public/static/handbook/gwglgnyhczsc.docx

    展开全文
  • 主要介绍了如何配置vue.config.js 处理static文件夹下的静态文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 我想在 js 中获取一个静态文件,使用上面的写法我获取不到。我尝试了很多路径书写方式,试过绝对路径,相对路径,@ 等,但是,都不行,我的 loadJSON() 是在同级目录下的一个文件中的方法,其代码为function load...
  • <p>,不是上传文件后读取该文件,而是类似java那样读取本地静态文件   使用过 let fso = new ActiveXObject('Scripting.FileSystemObject'); 这种</p>
  • 因此许多前端会选择直接使用Nginx来帮助我们进行静态文件的资源管理,而Vue项目经过build过后,产生的静态文件(js+html+js)等文件,都可以放在nginx里面进行托管。对于history模式的vue项目,在build时,务必将 ...
  • vue读取txt文件

    千次阅读 2021-08-14 07:30:26
    vue读取txt文件 内容精选换一换读取一个OBS文件。例如读取obs://bucket_name/obs_file.txt文件内容,返回string(字符串类型)。file_str = mox.file.read('obs://bucket_name/obs_file.txt')也可以使用打开文件对象并...
  • 在public文件夹新建static文件夹 如何房static文件夹的内容直接/static/文件名,就可以了
  • Nginx部署Vue项目静态文件404解决方案

    千次阅读 2020-05-22 18:43:26
    简述:数据接口请求正常,也能正常返回数据,静态文件请求404问题解决方案;
  • vue静态文件引用注意事项

    千次阅读 2020-12-21 03:04:36
    (一)assets文件夹与static文件夹的区别区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了区别二:assets中的文件vue中的template/style下用../这种相对...
  • 主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue项目读取本地文件

    万次阅读 2020-07-31 10:35:24
    Vue项目读取本地文件 观前提示: 本文所使用的IDEA版本为ultimate 2019.1,node版本为v12.16.2,vue版本为@vue/cli 4.3.1。
  • Vue读取static文件url

    千次阅读 2020-11-24 14:02:46
    Vue项目在不同的服务器上部署时需要针对该服务器配置请求后端的url路径。 在static文件夹下配置config.js文件 window.aaa= { baseUrl: 'https://www.baidu.com/', }; 在URL.ts中 static getBaseURL() { return ...
  • 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....
  • Vue-Cli 访问静态文件

    2020-12-18 17:10:54
    版本: ...找了半天,发现根目录居然有一个/static的文件夹,事实上,vue静态文件是放在/public/static里的,这个长在根目录下的/static是怎么来的???原因未知。这下就好办了,把图片挪到/pub...
  • vue 读取txt文件内容

    千次阅读 2021-07-01 10:50:38
    这里我是用的是vue+element的upload模块 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList" > <el-button ...
  • 如何在nginx中部署静态资源就不描述了, 请看我的这篇博客将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢.1 项目中router的mode路由的mode要为history, 如下List-1.1所示...
  • vue中加载静态资源的方式,常用的方式: 1.<img :src="./static/images/logo.png" 2.动态加载组件 导入:import banner from '@/assets/imges/banner.png' 定义:在 data 中定义:banner 使用:<img :src=...
  • Django3.0和Vue前后端分离以及访问静态文件 文章目录前言一、Django创建工程(vue_Django)1.使用Pycharm二、创建Vue项目1. 在Django的工程(vue_Django)下创建Vue项目2. 将myVue项目打包三、更改Django内配置运行...
  • 一般来说都有的: 步骤二: 在public文件夹下创建test.json文件,json内容如下: { "data": [ { "name": "窝似动感超人" }, { "name": "CSDN" }, { "name": "axios获取静态文件" } ] } 步骤三: 通过axios请求获取 this...
  • 问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 “项目地址/operate.pdf ”此地址,会展示pdf文件。 描述:点击系统内的一个按钮会打开新窗口展示系统操作手册(operate.pdf)文件,以下为...
  • }, exportData(f) { const that = this // // 拿取文件对象 // 用FileReader来读取 var reader = new FileReader(); // 重写FileReader上的readAsBinaryString方法 FileReader.prototype.readAsBinaryString = ...
  • vue项目中使用本地静态JS数据文件

    千次阅读 2021-01-28 16:10:20
    1、建立JS文件 data.js let listState = [ { label: "设计中", value: "设计中" }, { lable: "重新修改", value: "重新修改" }, { label: "审阅中", value: "审阅中" }, { lable: "已审批", value: "已审批" }, ...
  • 不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败。大部分的情况中,是开发者使用了错误的写法,例如:这样写肯定是不对的,正确的写法应该使用v-bind:不过,有时候即使使用了正确...
  • vue读取本地文件

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

    2021-09-28 09:57:42
    * @param file_url 文件地址 * @return promise * / let urlToBlob = function(file_url) { return new Promise(function (resolve, reject){ let xhr = new XMLHttpRequest(); xhr.open("get", file_url, ...
  • vue3怎么获取静态资源

    2021-05-25 16:59:07
    vue3怎么获取public静态资源   vue@cli3没有static,静态资源都放在public目录下 1.定义变量获取静态资源路径process.env.BASE_URL data() { return { publicPath: process.env.BASE_URL }; }, 2.通过${}...
  • 之前是向下面直接把json文件引入,但是打包以后,调取的json文件还是未改之前的内容。所以找到了别的办法。 import api from '../../static/serverConfig.json' 然后找到了办法,引入了一个js 然后在要用的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,678
精华内容 5,871
关键字:

vue读取静态文件