原理：vue前端登录，提交账号密码给egg后端，后端比对信息后，使用jsonwebtoken对用户信息进行签名生成token，之后通过cookie返回给vue前端，前端需要使用token里的信息就使用js-base64进行token第二段解码即可。 vue前端路由跳转，进入路由前置守卫检测cookie中的token是否存在，不存在(已过期)则跳转登录，否则继续执行，然后在http拦截器里请求时存在token请求头带上token，后端未得到header则返回错误码，得到则用jsonwebtoken...
1.最近在做的erp项目，有一个需求是同一个客户下的同种订单，需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo，做的很直白，不过不太符合业务。在网上找了篇文章参考了一下2.效果图如下：在动态处理从后端拿回来的数据的时候，是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。3.代码：//合并单元格 二维数组-> 根据“标识...
前言在前端开发中文件上传是经常会遇到的，并且多数情况会使用第三方平台来存储文件，腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 document.getElementById(file).onchange = function() {let file = this.files[0];let type = file.type//初...
配合上一篇文章的联系人应用(https://www.gxlcms.com/article/161160.htm)，实现配套的基于nodejs的后台增删改查接口 1. 所需工具 node.jsmongoDB2. 主要node模块 koa(https://koa.bootcss.com，一个nodejs的开发框架)，mongoose(https://mongoosejs.com，mongDB操作工具) 3. 目录结构4. 启动MongoDB 首先在MongoDB安装盘的根目录下(这里假设是D盘)新建一个文件夹data，然后在MongoDB的bin中打开终端，输入mongod --DBpath d:\data...
前提 对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,...
一. Three.js框架简介Three.js是用javascript编写的WebGL第三方库，运用three.js框架写3D程序，就如同在现实生活中观察一个3D场景一样，让人置身其中。介绍three.js必须提到它的三大组件,Scene,Camera,Render。它们是整个框架的基础，有了这三个组件才能将物体渲染到网页上，实现整个场景的搭建。场景(scene)顾名思义，就是用来放置所有的元素。var scene = new THREE.Scene(); //建立场景相机(camera)相机，我们要在哪个位置，如何...
前言 这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器，在登陆注册阶段，需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现，而且不需要PHP后台代码，完全在线调用接口实现，希望后来的你能有所收获！ 步骤步骤涉及接口（百度云）拍摄或者相册选择 并 上传比对样本照片到...
这是一个简单的点击图片预览的组件顺便记录一下写组件期间踩的vue中scope的坑~从注册全局组件开始叭！ 项目目录：模仿elementUI目录结构，目录名是组件名，src中是组件源文件（或者js服务文件），文件目录下还有一个index.js用于同一管理src中的所有文件，导出并注册，这个组件我们只有一个vue文件件 先看index.js文件里有什么： //引入了src下的vue组件文件 import starPicList from ./src/star-pic-list;/* istanbul ignore next...
前言图片是由连续的点信息组成，每个点信息包含四个长度即rgba信息，通过遍历配合处理函数实现对点个数的判断。实现思路本例子采用png格式图片，只需要判该点透明度（opacity）是否为0即可确定是否为小球上一点，如果不为0，判断上下左右方向的点是否透明度为0，不为0递归该结果，并且将该点的rgba信息置为0；结束后开始下一个主循环并计数，直至循环结束。具体步骤 创建canvas对象，加载目标图片，使用canvas的drawImage方法将该图...
需求 最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据（如地区的级联或菜单的树形结构）省掉了一层处理。换了个后台开发返回了扁平化的数组数据给到前端自己去处理如下data。突然有点慌...... const data = [{"area_id": 5,"name": "广东省","parent_id": 0,}, {"area_id": 6,"name": "广州市","parent_id": 5,},{"area_id": 7,"name": "深圳市","parent_id": 5,},{"area_id": 4,"name": "...
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撑开布局，即可完成布...