- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue 导出 - element - xlsx
前言星期五，又可以熬夜了，嘻嘻嘻，当然我说的是熬夜学习，把最近项目中的导入拿了出来，写了一个小Demo，方便大家直接使用导出总结说起导出，很多的后台管理里面都有，****** 什么一键导入，一键导出啊。可怜的开发仔，小丑竟是我自己话不多说，先看电视项目业务：导入存本地，导出从本地拿这里用到了 element 的上传组件，如果你也是，直接拿走导入看上集<<<<<<<<<<安装npm install xlsx上传的页
2021-01-30 10:27:15
255
原创 vue 导入 - element - xlsx
前言星期五，又可以熬夜了，嘻嘻嘻，当然我说的是熬夜学习，把最近项目中的导入拿了出来，写了一个小Demo，方便大家直接使用导入总结说起导入，很多的后台管理里面都有，一般都是方便销售那边，才给我们前端施加压力，什么一键导入，一键导出啊。可怜的开发仔，小丑竟是我自己话不多说，先看电视项目业务：导入存本地，导出从本地拿这里用到了 element 的上传组件，如果你也是，直接拿走导出看下集<<<<<<<<<<安装npm ins
2021-01-30 00:20:45
243
1
原创 Object.assign() 忘了吗
今天看隔壁前端的代码 :const requestParameters = Object.assign({}, parameter, this.queryParam)哎呦我类，这玩意干啥用的来着，就百度查了下大概用法，顺变复习一下加深记忆基本用法Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 .
2021-01-29 15:50:53
420
2
原创 (♥∀♥)倒计时
今天写app，里有一个倒计时，效果，代码如下话不多说看图 相中直接拿走template样式就不给你了，用的quasar的内置类，给你也不一定能用<div>{{ day }}天 {{ hour }}小时：{{ min }}：{{ second }}</div>data定义 data () { return { curStartTime: '2021-01-30 17:06:00', // 定义你的结束时间 day: '00', .
2021-01-28 17:51:02
172
原创 mock数据简单应用
按以下提示，拷贝代码可、快速、直接得到一个对象数组的请求更多mock格式，请去官网查看1.安装// 安装axios请求npm install axios // 使用mock产生水机水机数据npm install mockjs// 使用json5解决json文件，无法添加注释(不写注释可忽略)npm install json52，根目录建立mock/index.js文件const fs = require("fs"); // 读取const path = require("pa
2021-01-27 09:22:09
191
原创 分享一个阿里云开源的流程图-g6
最近有个朋友问我有什么插件可以做网络拓扑图，当时我也一脸懵，在百度上找了好久，找到了这个网站，应该可以解决他们公司的需求，觉得网站图画的不赖，这里分享给大家。话不多说看图去看官网…...
2021-01-26 14:15:26
968
1
原创 Vue刷新页面
我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。1.原始方法：window.location.reload();2.vue自带的路由跳转：this.$router.go(0);用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。所以，我们选择第三种方式：3. 首先在App里面写下如下代码：<template> <div id="app"&g.
2021-01-25 14:02:10
1089
原创 在for of/in循环中使用const定义 循环的数据，数组也可以使用 indexOf
场景有时候在拿到接口反回数据的时候我们需要循环数据,就可以用for of / in当然还有好多其他的循环，这里忽略首先 先看一个循环的 数组注意区分 of in 返回结果data() { return { list: [ { name: "帅帅1", age: 11 }, { name: "帅帅2", age: 12, some
2021-01-22 13:51:57
764
原创 JavaScript 文件对象File
在浏览器中操作文件，多数情况下用到的是 File 对象，从<input type='file' />元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.File 对象继承自 Blob 对象，先看看 Blob 对象。1. Blob 对象Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。Blob构造函数 Blob(array[, options])ar
2021-01-21 15:51:45
27784
1
原创 vue.nextTick()
什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello
2021-01-18 14:29:13
91
原创 components 异步加载组件
组件的懒加载require: 运行时调用，理论上可以运用在代码的任何地方，import：编译时调用，必须放在文件开头懒加载：component: resolve => require([’@/view/index.vue’], resolve)用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js非懒加载：component: index如果用import引入的话，当项目打包时路由里的所有comp
2021-01-15 17:17:40
1149
原创 JavaScript 标准内置对象 （没事就看）
源于开发者，服务开发者。最今发现一个新网站，在里面学习到了很多知识. 分享给大家，快去变强吧…去变强…
2021-01-15 12:00:03
136
原创 Moment.js JavaScript 日期处理类库
Moment.jsMoment 被设计为在浏览器和 Node.js 中都能工作。所有的代码都应该在这两种环境中都可以工作，并且所有的单元测试都应该在这两种环境中运行。CI 系统当前使用以下的浏览器：Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，OSX 10.8 和 10.11 上最新的 Safari。安装依赖npm install moment --save # n
2021-01-15 11:00:47
122
原创 在vue中使用echarts
看图安装依赖npm install vue-echarts// 或者npm install --save echarts引入一般使用 echarts 都是按需引入（可以放在main.js里全局用，也可以放在页面里单页面使用）import Vue from "vue";import ECharts from "vue-echarts/components/ECharts.vue";// 手动引入 ECharts 各模块来减小打包体积import "echarts/lib/char
2021-01-14 13:59:33
439
原创 axios封装
安装npm install axios代码axios.js 封装import axios from 'axios'import Vue from 'vue'// import qs from 'qs' // 如果要求 参数序列化// export let ConfigBaseURL = 'http://*****' // 默认路径，这里也可以使用env来判断环境export let ConfigBaseURL = 'http://******' // 测试// 使用create方
2021-01-13 15:15:17
102
1
原创 QRcode.js 生成二维码
什么是QRCode.jsQRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系VUE里安装QRCode.js包npm i qrcodejs2VUE中引入qrcodejs2包import QRCode from 'qrcodejs2'创建DOM元素，存储二维码的位置<div id="qrcode" ref="qrcode"></div>methods
2021-01-11 17:06:24
278
原创 VUE 移动端进入页面监听滑动或点击事件后，超过规定时间没有任何操作，重置页面
类似于某银行app，时间长不操作页面，执行相应业务<template> <!--触发事件--> <div id="app" @touchend="moveEvent" @click="moveEvent"> 12321 </div></template><script>export default { name: "App", data() { return { // 用户超时定
2021-01-11 16:15:06
1043
原创 vue-lazyload实现图片懒加载
安装依赖npm i vue-lazyload -S// 或者yarn add vue-lazyloadmain.js引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsconst loadimage = require('./assets/loading.gif') //loading图const errorimage = require('./assets/error.gif')
2021-01-11 14:45:24
140
原创 深入理解Promise
ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合，因此在已经了解Promise对象的常用API基础上，更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。文章阅读前，希望读者已经对Promise的使用及相关api有了一定的了解 。[ 快速学习Promise ]一、如何对Promise异步任务进行超时监听任务描述作为一道开胃小菜，这个问题还是不难解决的。平时对于一些.
2021-01-09 12:50:03
341
原创 HTML5--使用浏览器全屏操作、退出全屏、是否全屏功能
复制即可代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <div style="background: red;width:500px;height:500px;margin: auto;">&l
2021-01-08 17:38:13
496
原创 在VueCli3项目中使用Bootsrap
在VueCli3项目中使用Bootsrap在Vue开发中，为了实现响应式效果加入了Bootstrap框架安装npm i bootstrap jquery popper.js --save配置在项目根目录下新建或修改vue.config.jsconst webpack = require("webpack");module.exports={ configureWebpack:{ plugins: [ new webpack.ProvideP
2021-01-08 17:25:02
347
原创 vue-clipboard2实现复制功能
复制代码即可在Vue中通过该模块能够实现 将内容复制到剪贴板的功能安装npm i vue-clipboard2 --save在页面或者全局-main.js引入看自己import Vue from "vue";import VueClipBoard from "vue-clipboard2";Vue.use(VueClipBoard);页面代码<template> <div> <div> <textarea
2021-01-08 17:11:24
345
原创 在WEB项目中防御XSS攻击
在WEB项目中防御XSS攻击所谓XSS攻击就是开发者在网站开发时提供了用户的输入入口中输入可执行代码或标记语言（当然本意可能只是想让用户输入文本），并且该内容能够直接在网页中执行（例如在VUE中提供的v-html指令）时，攻击者利用该漏洞，注入一些恶意代码攻击该网站的用户。有效的XSS攻击可能造成的后果一次有效的XSS攻击轻则导致网页乱码（通过注入HTML），重则为了搜集用户信息，攻击者甚至会在有漏洞的程序中插入 JavaScript、VBScript、 ActiveX或Flash以欺骗用户。一旦
2021-01-08 16:38:47
545
原创 在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭
在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。思路为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。例如当前组件现有功能是：span默认不显示，当点击button时显示span。点击非span button时span消失<template> <div> <span v-show="isShow" ref="showPanel">没点击我我就消.
2021-01-08 14:47:01
2629
原创 在Node.js中实现邮箱验证码的发送与验证
在实际开发中，可能会遇到注册时提供邮箱验证码的需求。在Node.js中是可以实现的。以下分享一些我的开发经验。开发环境Node.jsExpressMongooseMongoDB邮箱验证码思路验证码发送阶段客户端上传邮箱地址到服务端，服务端通过生成随机验证码，并将这个验证码发送到用户上传的这个邮箱中。此时服务端需要将这个邮箱和验证码保存到数据库的某张表中（后文中使用Code来称呼这个表），同时保证这条记录的唯一性。并在有效时间内将这条记录删除（此时间就是验证码的有效时间）验证码.
2021-01-08 14:24:41
3698
1
原创 Grid 最强布局
一 指定一个容器为grid布局<template> <div class="div"> <div>1</div> </div></template><script>export default { data() { return {}; }};</script><style lang="less" scoped>.div { display:
2021-01-08 14:01:42
631
原创 Vue-Router 路由构建
一、前端路由和后端路由1.1 路由路由就是通过互联的网络把信息从源地址传输到目的地址的活动。在Web的路由中，最重要的就是有一个路由映射表。这个映射表能够完整的表现出映射关系，便于路由管理。1.2 后端路由有过服务端开发经验的Coder应该知道，在服务端开发中需要专门来写一个Router,其中包括了请求路径/index和请求方法比如get/post然后再写其对应的处理方法。再后端渲染开发中，可以用这个图来简单描述。从这里可以看出，后端路由的工作就是处理一个URL对应一个页面数据的关系。1.3
2021-01-07 18:05:43
404
原创 WebPack 打包工具
一、模块化开发1.1 关于模块化模块化是现在Web前端开发的趋势，它可以解决以前Js多文件协同开发会出现的命名问题等等。再模块化下，每一个Js文件都是独立的文件，每个独立的js文件可以导入和导出数据。像在Node.js环境下用CommonJS开发流程一样，ES6也制定了一些关于模块化开发的标准以保证他们可以再浏览器上运行。1.2 ES6下的模块化在ES6制定的标准中，声明一个Js为模块化文件需要在该js文件在被HTML当中引用时加入type = "module"<script src =
2021-01-07 17:36:32
400
原创 VueCli 构建工具
一、VueCli构建工具如果我们所有的项目都像原来那样配置，难免过于繁琐。所以Vue官方提供了一个构建工具——VueCli来快速构建一个工具 。他可以帮助我们快速安装webPack的插件、loader等等配套的包。以及帮我们自动化构建配置目录等等。二、VueCli 2.x虽然在2018年8月尤雨溪发布了VueCli 3，但是由于现在还有大量的项目都是通过2.x.x版本构建的。所以在此需要记录一下VueCli 2的一些特性。安装npm i @vue/cli -g虽然是3版本，如果想像2版本那
2021-01-07 17:16:54
238
原创 Vue.js框架
一、关于Vue.jsVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 --摘自官网总体来说作为一门前端框架，Vue.js本身可以最大程度减少用户操作Dom的工作二 、数据的双向绑定Vue.js可以将简洁的模板语法来声明式的将
2021-01-07 17:03:25
268
原创 Node.js 语法
一、创建一个Node.js应用加载http核心模块var http = require("http")创建一个Web服务器，返回一个server实例var server = http.createServer()服务端接收到来自客户端的请求时"request"执行回调函数参数：request 请求对象（客户端向本服务端发送的请求对象）response 响应对象（本服务端向客户端发送的响应对象）server.on("request",function(request
2021-01-07 13:53:12
98
原创 MongoDB 非关系型数据库
一、起步MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。二、安装MongoDB官网下载地址并安装配置安装目录下的bin到环境变量中去如需进行测试可以使用：mongod -v三、打开mongodb数据库在键入mongod命令前需要改对应盘符的根目录下创建data/db目录然后键入命令D:
2021-01-07 13:22:45
773
原创 Express 框架应用
一、引入Express框架1.安装并加载Express模块npm install express -glet express = require('express')let app = express() //相当于http.createServer()module.exports = app2.编写响应和绑定端口号在Express框架下，不再需要更改响应头，其具有自动识别并更改响应头的能力。app.get('/',(req,res)=>{ console.log(req
2021-01-07 11:53:12
79
原创 JavaScript 中的异步编程
一、回调函数为了实现JS中的异步操作，主要的解决方案就是利用回调函数的方法回调函数是先调用，后定义的方式使用的。如：function d1(interval,callback){ setTimeout(()=>{ callback('hello world') },interval)}d1(1000,data=>{ console.log(data)})二、PromisePromise是ES6封装的对象,Promise对象可以化解回调
2021-01-07 11:15:23
109
原创 后台管理动态权限配置思路-笔记
视频地址：https://www.bilibili.com/video/BV11A411J7z51.后端返回路由的思路1. 登录后，后端返回路由权限api列表JSON2. 处理后端返回的JSON,转化成Vue的路由结构3. 将静态路由结构转化成动态路由4. 最后动态渲染菜单组件2.前后端可以这样定义路由规则module.exports = [ { id: 2, // 第一层是 home,就不写了 pid: 0, // pid是零，证明他是没有父
2021-01-06 18:00:27
652
原创 vuex 总结
一 、初实1.1 关于VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.x构建的
2021-01-06 17:49:18
126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人