精华内容
下载资源
问答
  • 工作中经常会有下载文件的功能,一般后台会以返回url或者流文件的形式,url直接打开就好,不多说,下面是流文件的下载方式。 直接上代码 this.$http({ url: 'xx/xx', method: 'get', responseType: 'blob', ...

    工作中经常会有下载文件的功能,一般后台会以返回url或者流文件的形式,url直接打开就好,不多说,下面是流文件的下载方式。
    直接上代码

    this.$http({
              url: 'xx/xx',
              method: 'get',
              responseType: 'blob',
              params: {}
            }).then(({data}) =>{
              const content = data
              const blob = new Blob([content], {type: 'application/pdf'})
              var name = 'pdf.pdf'
              const elink = document.createElement('a')
              elink.download = name
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
              this.loadpdf=false
            })
    

    本段代码最最最重要的是不使用封装好的接口访问方式,改为上述代码形式,刚开始找到的时候我也是直接复制接口返回成功里面的代码,结果各种不对,后来发现 responseType: ‘blob’ 这段是最致命的。

    展开全文
  • Vue直接读取服务器文件并显示

    千次阅读 2020-08-20 11:59:19
    这里我们的想法是点开页面,自动读取服务器某个文件,然后在文本框显示出来 HTML代码 <textarea id = "div1" style="width:1650px; height:740px" readonly> </textarea> JS代码 这里试用了两种方法都...

    这里我们的想法是点开页面,自动读取服务器某个文件,然后在文本框显示出来

    HTML代码

    <textarea id = "div1"  style="width:1650px; height:740px" readonly>
    </textarea>
    

    JS代码

    这里试用了两种方法都可以

    1.ajax

        mounted() { 
            document.getElementById('div1').innerHTML = '读取中...';
            $(document).ready(function(){
    	        $.ajax({async: true, url:"dhcpdlog",success:function(result){
                    $("#div1").html(result);
    		    }});
    	    });
        }
    

    2.load

       mounted() {
        // this.getInfo()	
        document.getElementById('div1').innerHTML = '读取中...';
        $(document).ready(function(){
        $("#div1").load("/arplog");
        });
      }
    

    然后效果如图所示

    读取中
    在这里插入图片描述
    读取完毕
    在这里插入图片描述
    本来是采用load的方法,后来发现在读取文档的过程中,光标会变成白色小手,然后点击其他事件不会立即触发,直到读取完毕才会执行。于是试着采取能异步操作的ajax方法,但结果还是出现这种情况。然后看Network发现这里读取数据用的是get方法,而且数据量较大约5w行,所以该原子操作必须一次性执行完。

    在这里插入图片描述

    展开全文
  • vue项目访问顺序

    万次阅读 2019-08-20 16:53:12
    1.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ...

    1.vue项目访问顺序

    访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。

    2.main.js(项目开始展示内容)

    import Vue from 'vue'
    import App from './App'  //App.vue
    import router from './router'//前3个导入自带的vue
    
    import MuseUI from 'muse-ui'
    import 'common/style/muse-ui.css'
    import fastclick from 'fastclick'//导入第三方封装好的vue
    fastclick.attach(document.body)
    
    Vue.use(MuseUI)
    Vue.use(materialicons)//使用第三方封装好的vue
    
    //app这个vue的实例会接管app这个
    // dom里面的内容,会分析<div id="app"> </div>这个dom里面所有的内容,并显示出来
    new Vue({
      el: '#app',  //创建的vue实例负责处理的区域
      router, //路由处理vue页面的跳转,相当于路径导航
      render: h => h(App)
    })
    template:‘<app/>’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果
    前者识别<template>标签,后者直接解析template下的id为app的div(忽略template的存在)
    
    

    3.App.vue

    <template>
      <div id="app">   //  vue实例渲染出的内容挂载的目标
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data () {
        return {
        }
      }
    }
    </script>
    
    <style lang="less">
    </style>
    

    4.index.js(项目开始展示内容)

    import Vue from 'vue'
    import Router from 'vue-router'//导入内部vue文件
    import Auth from '@/views/Auth'
    import FuelFill from '@/views/FuelFill'//导入自定义vue文件,@代表src目录
    
    Vue.use(Router)//vue使用Router路由
    
    export default new Router({  
      routes: [
        {
          path: '/',   //打开浏览器的第一个页面的路径,根路径
          redirect: '/auth'//将根路径重定向到/auth路径下
        },
        {
          path: '/auth',
          name: 'Auth',
          component: Auth //路径/auth的页面加载Auth组件,这里路径是指浏览器地址路径
        },
        {
          path: '/fuelfill',
          name: 'FuelFill',
          component: FuelFill //路径/FuelFill的页面加载Auth组件,这里路径是指浏览器地址路径
        }
      ]
    })
    //例如:http://localhost:8080/#/auth   这个界面就是Auth组件布局的        
      http://localhost:8080/#/fuelfill    这个界面就是fuelfill组件布局
    

    5.Auth.vue

    //vue组件有3部分组成
    // 1.模板:布局页面框架(html)
    <template>
      <div>
        <mu-container>
          <mu-dialog width="85%" :open.sync="openSimple" :overlay-close="false">
    
            <span style="text-align: center">
              <img class="authImg" :src="titleImg"/>
              <p class="authTitle">授权</p>
              <p class="authSubTitle1">已为您绑定手机号:</p>
              <p class="authSubTitle2">未绑定手机号</p>
            </span>
            <mu-button slot="actions" :flat="false" color="#43b79c" l @click="fuelFilling">我知道了</mu-button>
    
          </mu-dialog>
        </mu-container>
    
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          openSimple: true,
          titleImg: require('common/image/cnpc.png')
        }
      },
      methods: {
        fuelFilling: function () {
          this.$router.push({path: '/fuelfill'})
        }
      }
    }
    </script>
    <style scoped lang="stylus" rel="stylesheet/stylus">
      @import "~common/stylus/variable"
      .authImg
        width: 5em
        height: 5em
      .authTitle
        font-size: 1.2em
        color: white
        margin-top: 2em
      .authSubTitle1
        font-size: 1.0em
        color: white
        margin-top: 2em
      .authSubTitle2
        font-size: 1.0em
        color: #878787
        margin-top: 1em
    </style>
    

    6.配置文件webpack.base.conf.js

     resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src'),//相当于替换
          'src': resolve('src'),//相当于替换
          'common': resolve('src/common'),//相当于替换
          'components': resolve('src/components')//相当于替换
        }
      },
    
    在文件中
    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}.
    
    

    注意点:

    1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。

    2.h是creatElement的别名,vue生态系统的通用管理

    3.template:‘’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果,前者识别标签,后者直接解析template下的id为app的div(忽略template的存在)

    展开全文
  • 什么是vue-cli : 官方提供的一个脚手架,用于快速创建一个vued的模板; 预先定义好目录结构及基础代码;使开发更加快捷 统一目录结构 本地调试 热部署 单元测试 集成打包上线。 一个新的电脑创建vue...

     

    什么是vue-cli :

    官方提供的一个脚手架,用于快速创建一个vued的模板;

    预先定义好目录结构及基础代码;使开发更加快捷

    统一目录结构

    本地调试

    热部署

    单元测试

    集成打包上线。

     

     

     

    一个新的电脑创建vue工程的步骤:

    vue工程依赖node.js

    第一步:安装node.js,官网下载无脑安装, 配置环境变量

    安装 淘宝镜像(全局安装:npm install cnpm -g): 国内镜像快;

    第二步: 安装vue-cli (cnpm install vue-cli -g ) 【有的全局安装在用户的appdata目录下,可以修改默认全局安装路径】

     

    查看是否安装成功

    查看可以基于那些模板创建vue应用程序 命令:vue list

     

    第一个vue-cli应用程序:

    1、建立一个存放项目的文件夹

    2、创建一个基于webpack模板的vue应用程序

    命令:vue init webpack 项目名(l例如:vue init webpack myvue)

    一路都选择no即可;

    项目名称 :Project name 默认回车即可

    项目描述:Project description: 默认回车即可

     

    初始化并运行:

    cd 项目目录: (例如:cd myvue)

    npm install (根据项目中的package.json文件中的依赖下载东西,相当于maven的pom.xml文件)

    执行完之后项目中目录多了很多依赖(node_modules),如果执行过程有警告,错误,按照提示进行修复。

     

    运行项目:npm run dev (启动时中有打包的过程,vue.js是基于ES6规范的,打包之后降级为ES5,因为目前大部分浏览器只支持ES5规范,提高了代码的兼容性)

     

    通过访问地址进行访问

     

     

    webpack

    配置: 创建webpack.config.js 配置文件(一般使用vue-cli脚手架创建的项目都自动生成了这个文件)

    配置的内容:

    entry:入口文件:指定Webpack用那个文件作为项目的入口

    output:输出,指定webPack 把处理完成的文件放置到指定路径。

    module:模块,用于处理各种类型的文件

    plugins 插件,用于热更新,代码重用等

    resolve: 设置路径指向

    watch: 监听, 用于设置文件改动后直接打包。

     

     

    打包之后,如果想实现热部署,

    可以运行指令:webpack --watch

     

     

    Vue的组件安装使用:

    vue-router 组件

    安装 vue-router 插件

    进入项目所在的包

    执行:npm install vue-router --sava-dev

    命令解释: --save-dev 保存包config包下的相关的dev文件。

     

    怎么用?

    安装路由,在src目录下,新建一个文件夹:router 专门存放路由,创建一个index.js主的路由配置文件

    路由有两种模式:

    一种是hash 路径带# ,默认的

    一种是history: 路径不带#

    可以在index.js中通过mode属性设置,值是字符串

    例如:

    export default new Router({

    mode: 'history'

    routes:[

     

    ]

    })

    编写index.js的内容:

    第一步:

    导入路由插件 import VueRouter from 'vue-router'

    导入Vue import Vue form 'vue'

    导入组件, import Content from ‘../components/Content ’

    <--显示的使用,安装路由-->

    Vue.use(VueRouter,router)

    第二步骤:配置路由规则

    export default new VueRouter({ //这里的VueRouter和上边导入的一致即可。

     

    routes:[

    {

    path: '/content', //路由路径

    name:'Content', // 路由名称

    component:Content //跳转到组件,前提是需要导入这个组件

    },

    {

    path: ''

    name:''

    component:'' //注意:这里是componet 没有s 否则路由失效。

    }

    ]

     

    })

     

    第三步:

    在main.js中配置路由:

    //导入上边创建的路由配置目录,会定位到index.js路由配置文件

    import router from ‘./router’

    import Vue from 'vue'

    import App from './APP'

     

    new Vue({

    el:‘#app’,

    router, //配置路由

    components:{

    App,

    }

    template:'<App/>'

    });

     

    第四步:

    在组件中使用:

    例如在App.vue使用路由

    <template>

    <div id=“app”>

    <router-link to="/main">首页</route-link>

    <router-link to="/content">首页</route-link>

    <router-view></router-view> //路由视图,配置这个的目的就是当点击路由之后,跳转到路径对应的组件的内容会在这里显示。

    </div>

    </template>

    <script>

    export default{

    name: 'App'

    }

    </script>

    路由传参,路由嵌套;

    路由传参例子:

     

    变化1 to属性需要绑定, to的值传递的是一个对象。规定对象里包含路径和 参数。语法如下:

    <router-link :to="{name:'配置的组件路由路径',prams:{id:1}}">

    变化2:

    router的 index.js 中对应的路由,

    {

    path: "/路径/:id",

    name: ‘组件名’

    componnent:组件,

    props: true,

    }

     

    变化3, 接收参数的组件的修改,修改后就可以在template便签中使用了。

    <template>

    <div>

    <!--所有的属性不能直接在template这个跟节点下使用-->

    <h1>{{id}}<h1>

    <div>

    </template>

    export default{

    props:['id','其他传递的参数'] , //修改的位置

    }

     

     

    路由定义重定向:

    {

    path: '/tohome'

    redirect: '/main'

    }

     

     

     

    如有需要,可以在这个组件的export default{

     

    }中添加一些钩子函数

    例如:export default{

    name: 'UserList',

    beforeRouteEnter:(to,from, next)=>{

    console.log("进入路由之前")

    next();

    },

    beforeRouteLeave:(to,from, next)=>{

    console.log("离开路由之前")

    next();

    }

    }

     

    路由钩子函数的参数说明:

    to: 路由将要跳转的路径信息

    from :路径跳转前的路径信息

    next: 路径的控制参数

    next():跳转下一个页面

    next(‘/path’)改变路由的跳转方向,使其跳转到另外一个路由;

    next(false) 返回原来的页面;

    next((vm)={} )仅在beforeEnter中可用。Vm是组件的实例

     

     

     

     

     

    如果需要创建一个新的组件配置路由,在路由router中的index.js中导入该组件,并配置一下它的路由规则就好了。 就可以在其他组件中用<router-link to='/该组件路径'>指向他就好了。 如果要显示,需要使用<router-view> 标签 //这个标签是用来显示路由对应的内容的。

     

    在项目中引入其他组件,插件

    进入项目的目录;

    此处cmd

    安装element-ui

    npm i element-ui -s

    如果还没有安装依赖,安装一下

    npm install

    安装 SASS加速器 【Css需要】

    npm install sass-loader node-sass --save--dev

    如果项目编码要用,在入口文件import导入该组件。并显示的使用它。

    编写代码;

    #启动测试

    npm run dev

     

    注意:如果npm安装失败了,就根据提示解决, 如果还是解决不了就用 cnpm安装,前提已经安装了国内的淘宝镜像。

     

    npm命令解释:

    npm install moduleName 安装到项目目录下

    npm install -g moduleName: -g意思是将模块安装到

    全局目录下,具体在磁盘的哪里要看 npm的安装目录配置文件怎么配置的。也有默认位置

    npm install -save moduleName: --save 将模块安装到项目目录下,并在package文件的dependencies节点写入依赖, -S为该命令的缩写

    npm install --save-dev moduleName --save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖, -D为该命令的缩写。

     

    ps: 如果启动的时候sass相关的东西报错,就可能是因为sass的版本太高了,先通过命令卸载当前版本(npm uninstall sass-loader),在package.json 找到sass-loader 对应的版本,修改成更低的版本,然后重新 npm install, 运行 就好了 ,

    其实在开始安装的时候也可以指定版本 npm install sass-loader@7.3.1 --save-dev

     

    vue脚手架工程 的static文件夹下的静态资源外界浏览器可以直接访问到不用配置路由。

    如果访问的资源路由没有配置,static文件夹下静态资源也没有,应该给前端响应一个404的提示。要实现这个功能,可以定义一个NotFound的组件, 然后在路由中配置这个组件的路由为

    {

    path : ' * '

    componet: NotFound

    }

    意思就是如果访问的路径,在路由中没有配置或静态资源中也没有,则这个路由接管,跳转到NotFound 页面,提醒用户。

     

     

     

    1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)

     

    2. 安装express-generator生成器

    执行  $ npm install express-generator -g  进行安装

    3. 创建一个express项目

    执行  $ express expressDemo (expressDemo是项目名)

    4. 进入expressDemo目录,安装项目依赖

     

    $ cd expressDemo

     

    $ npm install

     

    5. 把dist目录下的所有文件复制到express项目的public文件夹下

     

    然后运行 $ npm start 启动expressDemo

    打开浏览器,输入 http://localhost:3000 , 就可以看到效果了(如果想改变端口 可以在./bin/www这个文件中修改)

     

    另外一种有效的方法:

    官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)

     

    展开全文
  • 这里我们的想法是点开页面,自动读取服务器某个文件,然后在文本框显示出来 HTML代码 &lt;textarea id = "div1" style="width:1650px; height:740px" readonly&gt; &lt;/...
  • 修改webpack.base.conf.js 文件 要把json文件放在static文件下 在resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '/src': resolve('src'), '/libs': path.resolve...
  • vue打包后copy一些静态资源文件到dist,可通过url直接访问 若打包后的dist文件里没有static文件,有些需求会想要访问到项目中的某些静态资源文件,而vue打包并没有把static文件打包进去,这就需要在打包后copy目标...
  • 在组件实例中,Vue提供了相应的属性,包括$parent、$children、$refs和$root,这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问,需要的朋友可以参考下
  • 1. VUE访问本地json文件,会产生跨域的报错,导致数据无法显示报错问题的图示这边的系统,设备,和编辑器首先把项目引入到sublime中第一步 Ctrl+Shift+P打开命令面板,输入Package Control: Install Package第二步 ...
  • vue文件直接在浏览器中运行

    千次阅读 2021-02-15 16:01:13
    Vue 原生支持在浏览器中直接运行 .vue 文件,这才符合“渐进式框架”的定位!webpack 学不好或者不想学或者嫌麻烦,就可以使用插件在浏览器中直接编译运行 .vue 文件!这样...
  • 2.在main.js加入访问路径 Vue.prototype.$publicURL = './'; 3.在vue组件中使用跳转 <a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》...
  • vue cli3.0访问本地JSON文件

    千次阅读 2019-06-19 20:26:29
    vue cli3.0访问本地JSON文件 最近练习axios发起数据请求,模拟后台访问数据,发现请求地址一直报错404,查阅了相关资料才知道vue-cli3.0中静态资源要放在static文件夹下。我是通过引入jQuery发起ajax请求,然后地址...
  • 主要介绍了vue项目中在外部js文件直接调用vue实例的方法比如说this,需要的朋友可以参考下
  • 众所周知我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们在本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要在dist 外层目录新建一个 server.js 文件 ...
  • vue.config.js文件直接修改: module.exports = { publicPath: './', }
  • Vue 前端显示文件流图片

    千次阅读 2020-08-07 15:17:53
    通过前端vue发送用户图片,后端flask进行处理后返回以文件流形式的图片。 前端代码 <template> <v-container> // 注意一个vue文件中只能有一个lable,否则npm run serve 会卡死 <input class=...
  • Vue文件直接在浏览器中运行

    千次阅读 2021-02-10 14:31:20
    首先说,Vue自创的单文件组件这个太好用了,封着性好,开发组件没什么学习成本,好用! 但是,Vue虽然号称“渐进式框架”,但如果【不想】只使用基本语法做点小玩意,【想】使用组件搞Vue开发,却必须依赖Webpack这...
  • 主要介绍了解决.vue文件url引用文件的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • assets中资源会webpack构建压缩到你代码中,而static文件直接引用。 static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。 ...
  • vue项目打包在本地直接访问

    千次阅读 2018-09-26 10:53:02
    找到config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”。   2.router文件下面的index.js路由配置文件不要配置mode: "history"(不用配置这个属性)   3.修改...
  • VUE跨域上传文件VUE+Element-ui+Java)

    千次阅读 2017-11-15 15:45:51
    VUE跨域上传文件VUE+Element-ui+Java)项目前端用vue+element-ui1.37,后台使用java完成图片(文件)上传, 问题:element前端通过node.js部署,访问到Tomcat部署的文件上传,造成跨域问题。解决过程中遇到很多...
  • tornado+vue实现上传文件

    千次阅读 2018-11-19 11:39:00
    要用tornado+vue写一个后台管理系统,记录一下遇到文件上传时候的步骤: 1.Form表单里的代码:(这里是使用的饿了么表单组件) &lt;el-form-item label="头像"&gt; &lt;el-upload class=&...
  • vue打包后直接打开文件index.html

    千次阅读 2018-08-01 15:58:52
    vue打包,不用http server,本地运行,比如 file:///D:/desktop/dist/index.html 1、首先 ... 参考这个进行打包 ...把资源文件拷贝处理,放到对应层次,这样就能正常访问 开发时注意事项,层次分明,结构以2层为...
  • Vue中 实现文件流下载

    千次阅读 2020-07-19 23:54:06
    当后台返回的直接文件流形式,js 在浏览器环境中是不能像其他语言一样对文件进行操作的。由于文件在网络中传输都是以二进制流形式传输的,所以我们要借助一个特殊的对象(Blob),表示一个不可变的, 原始数据的...
  • OSS Browser.js SDK文档: ...OSS设置路径:权限管理-跨域设置 将来源设置成 * 将Method设置成 GET, POST, PUT, DELETE, HEAD 将Allowed Header设置成 * ...oss文件上传 let OSS = require("ali-oss"); //
  • 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中读取本地文件

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

    千次阅读 2020-08-21 23:58:04
    我在根目录下建立了css文件夹用来装样式文件 但是在引入的时候,我认为他已经在static文件夹下了(因为运行时它会被安排在那里) 你看,它还在提示,找不到bootstrap.css,因为它现在确实不在static下,但是当运行
  • vue通过url下载文件直接预览问题

    千次阅读 2020-12-27 14:51:31
    // url是文件地址 fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址 const a = document.createElement('a') a.href = URL.createObjectURL(blob) console.log...
  • [Vue一]:新建Vue项目、Vue项目文件...要想在电脑上新建和运行Vue项目,第一步要安装node.js,可以直接官网下载,建议安装推荐版本,相较于最新版本稳定,且最新版本可能存在一些未知的bug。安装node.js会默认自动安...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,860
精华内容 17,944
关键字:

vue直接访问文件

vue 订阅