vue
a_passing_traveller
这个作者很懒,什么都没留下…
展开
-
node实现token验证及vue前端获取用户信息权限控制
基本思路 用户登录校验成功后服务端会根据 用户信息和时间 生成token,并将其和用户的信息一起发送给客户端。 客户端将token存到localStorage,将用户的信息挂载到vue实例下,每次发送请求或进行操作可以通过用户信息判断其是否有权限。 客户端每次发送请求都将token携带在请求头中传给服务端。 服务端每次接收请求验证token的有效性和时间是否过期,如无法验证通过,返回错误的信息给...原创 2020-03-26 11:43:37 · 1415 阅读 · 2 评论 -
vue中使用echart及常见问题
基本使用 安装 npm install echarts 创建实例(实现一个简单的柱形图) <!--为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="width: 600px;height:400px;"></div> mounted() { var myChart = echarts.init...原创 2020-03-21 11:40:42 · 392 阅读 · 0 评论 -
vue实现大文件切片上传
利用file里面的slice方法可以将文件切片,前端进行切片处理向http并发传递。等所有切片上传完成后再向服务器发送一个合并切片的请求。 <input type="file" @change="onChange" ref="fileInput" /> onChange() { let self = this; let file = this.$refs.fileInpu...原创 2020-03-15 12:34:09 · 4199 阅读 · 2 评论 -
nodejs与vue(elementui)实现图片上传
前端 这里我们利用elementui实现文件上传,利用accept限制上传文件类型,同时通过js限制上传大小,借口返回后调用uploadSuccess得到url。 <el-upload class="upload-demo" action="/api/album/upload" :on-success="uploadSuccess" :before-uploa...原创 2020-03-14 20:42:23 · 1501 阅读 · 0 评论 -
vue自定义指令
vue可以中通过Vue.directive注册一个全局的自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 实现一个拖拽的自定义指令 import Vue ...原创 2019-05-06 23:20:00 · 161 阅读 · 0 评论 -
vue组件开发
局部组件 import component1 from '../component/zl-header'; export default { name: "twoWeekReport", components: { component1 }, }; 全局组件 import component1 from './component/zl-header.vue'; Vue.com...原创 2019-04-24 12:57:22 · 177 阅读 · 0 评论 -
vuex
组件之间的通信 props,this.$emit(事件,传值) vuex 一个状态管理器,可以储存数据,实现组件之间的通信。 state 存放数据 getters 类似于计算属性 Mutations 更改 Vuex store中的状态的唯一方法 一个mutation = 一个事件类型 和 一个 回调函数 Actions 类似于 mutation,不同在于: Actions 提交的...原创 2019-03-06 15:48:08 · 102 阅读 · 0 评论 -
vue-cli 2.x和3.0正向代理跨域
vue-cli3.0 需要自己去手动添加vue.config.js文件 //vue-cli 3.0中 devServer: { port: 8080, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'ht...原创 2019-03-06 15:32:08 · 914 阅读 · 0 评论 -
vue-cli 3.0 项目创建
1. 安装node http://nodejs.cn/download/ 2. yarn安装 https://yarn.bootcss.com/docs/install/#windows-stable // 换源 国内npm比较慢 yarn config set registry https://registry.npm.taobao.org 3. webpack安装 yarn global a...原创 2019-03-03 16:52:52 · 118 阅读 · 0 评论