前言由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效，比如说Angular和React。实现思路原本的正常表格的代码长这样：<tr v-for="item in items"><td width="3%">{{ $index + 1 }}</td><td width="15%">{{item.bsO_Name}}</td><td width="8%" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt ...
html: <template><el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click="handleIconClick"></el-autocomplete> </template>js: <script> import Vue from vue Vue.component(my-remote, {functional: true,render: function(h, ctx) {var item = ctx.props.item;let str = h(li, ctx.data, [h(div, { at...
在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。1、什么是 Socket.IO? Socket.IO 是一个WebSocket库，可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它包括：Node.js服务器...
上一篇讲到了javascript的节流函数和防抖函数，那么我们在实际场合中该如何运用呢？ 首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数； 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示...
前言 最近老牌日历插件fullcalendar更新了v4版本，而且添加了Vue支持，所以用最新的fullcalendar v4制作一个完整日历体验一下，效果图：安装 FullCalendar的功能被分解为“插件”。如果您需要它提供的功能，您只需要包含一个插件。 也就是说，FullCalendar v4所有插件都得单独安装引用。 npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid 引用并初始化 引用、注册FullCalendar组件，得到一个月视图...
登录&&权限流程图前言 首先我们确定的权限控制分为三大部分，其中根据粒度大小分的更细： 登录权限控制页面权限控制菜单中的页面是否可以被访问页面中的按钮 (增、删、改、查)的权限控制是否显示接口权限控制一、登录权限控制 登录访问权限控制是对用户的校验。在用户登录成功之后，后台将返回一个token，之后前端每次进行接口请求的时候，都要带上这个token。后台拿到这个token后进行判断，如果此token确实存在并且没有过期，则可...
前言 eslint是一种代码风格管理的工具，可以制定一些代码编写规范，在vue项目中经常用到，本文就给大家分享了开发项目中使用的eslint校验规范，供参考：示例代码 module.exports = {root: true,parserOptions: {parser: babel-eslint,sourceType: module},env: {browser: true,node: true,es6: true,},extends: [plugin:vue/essential, eslint:recommended],rules: {// 等级分为三级： 0-不显示；1-显示警告warning; 2-显示错误err...
指令该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive(loaded-callback, {inserted: function (el, binding, vnode) {binding.value(el, binding, vnode)} }) 安装kindeditornpm install kindeditor kindeditor组件<template><div class="kindeditor"><textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback=initKindeditor></t...
近期有一需求：前端页面点击执行任务，实时显示后端执行情况，思考一波；发现 WebSocket 最适合做这件事。 效果 测试 ping www.baidu.com 效果 点击连接建立ws连接后端实现 所需软件包 后端主要借助Django Channels 实现socket连接，官网文档链接 这里想实现每个连接进来加入组进行广播，所以还需要引入 channels-redis 。 pip channels==2.2.0 channels-redis==2.4.0引入 settings.py INSTALLED_APPS = [django.contrib.admin,dja...
原理：vue前端登录，提交账号密码给egg后端，后端比对信息后，使用jsonwebtoken对用户信息进行签名生成token，之后通过cookie返回给vue前端，前端需要使用token里的信息就使用js-base64进行token第二段解码即可。 vue前端路由跳转，进入路由前置守卫检测cookie中的token是否存在，不存在(已过期)则跳转登录，否则继续执行，然后在http拦截器里请求时存在token请求头带上token，后端未得到header则返回错误码，得到则用jsonwebtoken...
前提 对Vue全家桶有基本的认知.用有node环境了解express另外本篇只是介绍登录状态的权限验证,以及登录,注销的前后端交互.具体流程(例如:前端布局,后端密码验证等).以后有时间再对这些边边角角进行补充一丶业务分析1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax后端进行session验证,并返回信息前端axios拦截返回信息,根据返回信息进行操作进行页面切换 页面切换,触发vue-router的路由守卫路由守卫根据跳转地址...
一：在component文件夹下新建如下treeTable文件夹，里面有2个文件：eval.js:将数据转换成树形数据 /*** @Author: jianglei* @Date: 2017-10-12 12:06:49*/ "use strict"; import Vue from "vue"; export default function treeToArray(data,expandAll,parent = null,level = null ) {let tmp = [];Array.from(data).forEach(function(record) {if (record._expanded === undefined) {Vue.set(record, "_expanded", expandAll);}let...
先上代码 <body><div id="root"><div><input v-model="inputValue" /><button @click="handleClick">submit</button></div><ul><todolist v-for="(item,index) of list":key="index" :content="item":index="index"@delete="handle"></todolist></ul></div><script>Vue.component("todolist",{props: [content,index],template: <li @click="handleDelete">{{content}}</li>,methods: {handleDelete:function(){this.$emit(delete,...
G2笔记G2是蚂蚁金服的一套开源图表插件，因项目需要研究了一下，相比Echarts来说，G2文档比较难懂，网上也没有太多示例，所以在这里记录一些使用G2遇到的问题。 官方推荐在vue项目中使用Viser，它对G2进行了封装，使用起来可能更方便，又研究了一个Viser，结果Viser整个只对viser-react如何使用进行了介绍，对viser-vue一笔带过，官网是这么介绍的： 我们以 viser-react 举例写一个 chore 图为例，viser-vue 和 viser-ng 的用法类似...
实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为key,拖放到中间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据中查找数据迭代属性。 左中右三栏 左右固定 中间自适应布局首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。 左右分别float left和float right, 中间栏使用margin撑开布局，即可完成布...