qq_42401946的博客

原创 前端实现下载功能

原创 TS基本语法

1.创建tsconfig.json文件 tsc --init 生成配置文件，释放outDir改成"outDir":“./js”2.老版本vscode点击：任务->运行任务->tsc:监视-tsconfig.json然后就可以自动生成代码了。注意：如果电脑上面没有安装过cnpm，请先安装cnpm。注意：如果电脑上面没有安装过yarn，请先安装yarn。布尔类型（boolean）字符串类型（string）数字类型（number）数组类型（array）

原创 vue3表格，编辑案例

【代码】vue3表格，编辑案例。

原创 vue3知识点

文档：https://cli.vuejs.org/zh/guide/creating-a-project.html。使用create-vue创建项目。使用vue-cli创建。

原创 vue安装与脚手架搭建

Vue2前端项目模板介绍前端项目模板是基于 Vue2+ElementUI 创建的。提供了网络请求、状态管理、路由等基础功能。1.功能 集成网络请求 Axios 集成数据模拟 Mock 集成状态管理 Vuex 集成路由管理 Router Element UI 组件 实现前后端项目数据联动 提供 Demo 页面（表格、表单、目录树，下拉框）2.技术栈3.安装脚手架3.1.前提条件安装node，版本不应太新，否则安装报错 ；然后node –v npm –v查看是否安装成

原创 vue脚手架搭建

安装node.jsVue脚手架自带配置：安装Vue脚手架，通过Vue脚手架创建项目配置router路由，vuex，scss第三方ui库：配置Element-UI组件库请求接口：配置axios库一、 安装node，vscode二、 全局安装脚手架vue-cli链接：https://cli.vuejs.org/zh/guide/creating-a-project.html命令：npm install -g @vue/cli三、 选择项目存放路径，创建一个项目命令：vue crea.

原创 vue后台管理系统权限控制

vue权限控制在Web系统中，权限很久以来一直都是后端程序所控制的，为什么呢？因为Web系统的本质围绕的是数据，而和数据库最紧密接触的是后端程序，所以在很长的一段时间内，权限一直都只是后端程序需要考虑的话题，但是随着前后端分离架构的流行，越来越多的项目也在前端进行权限控制1.权限相关概念1.1权限的分类后端权限从根本上讲前端仅仅只是视图层的展示，权限的核心是在于服务器中的数据变化，所以后端才是权限的关键，后端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作1.后端如何知道该请求是哪个

原创 引入弹窗组件两种写法v-if || ￥refs

第一种：v-if方法index.vue<template> <div class="twoProcessTagContainer"> <el-row style="background: #ffffff; padding: 20px 10px 0px"> <el-col :span="24"> <el-button type="primary" size="mini" @click="handleMoreRew

原创 el-tree懒加载数据量太大的解决方案

一、找到路径：node_modules => element-ui => packages => tree ,然后把tree这个文件夹拷贝下来，放到自己项目文件价里，比如，我放到了components文件夹里。二、打开node.js文件，找到doCreateChildren方法，把这段代码加上if (array && array.length > 2000) { let arr = array.splice(60, array.length - 6

原创 删除对象数组中，其中一列为空的数据

const list = [ { VALUE_DATE: "滴滴出行", F1_01464: "1", F3_01464: "", F2_01464: "", }, { VALUE_DATE: "滴滴出1行", F1_01464: "", F3_01464: "", F2_01464: "4", }, {

原创 循环添加el-form表单，并加校验； 循环a-form表单

<template> <div> <el-form :model="formData" :inline="true" ref="formData" label-width="65px" size="medium" > <el-row v-for="(item, index) in formData.loopFormList" :key="ite

原创 el-table可编辑，加校验

一、点击保存对整个table校验<template> <div> <el-button type="success" @click="handleAdd()">添加一条数据</el-button> <el-form :model="ruleForm" ref="ruleForm"> <el-table :data="ruleForm.tableData" style="width: 100%">

原创 复制excel里的数据，渲染到el-table中

案例一、<template> <div class="book"> <el-input type="text" v-model="paster" @paste.native="pasteMe" placeholder="请输入粘贴的内容" /> <el-table :data="tableData" border stripe> <el-table-column

原创 webpack

webpack是什么webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。webpack五个核心概念1.Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。2.Output输出（Output）指示webpack打包后的资源bundles输出到哪里去，

翻译 js数组怎么把多个对象合并成一个对象[{},{},{}]-[{}]

let arrOne = [{ name: "xiaoming",happy:"玩",color:"red" },{ age: 18,font:"pingfang" },]var newArr = arrOne.reduce(function (result, current) { for (var key in current) { if (current.hasOwnProperty(key)) { result[key] = current[key]; } }

原创 vue高度或表格自适应屏幕一屏显示

一、el-card自动适配屏幕高度//template部分<el-card class="box-card card-height" :style="conheight"></el-card>//script部分data(){ return{ conheight: { height: "", }, }}//created部分created() { window.addEventListener("resize", thi

原创 微信小程序-如何访问未备案的 API ｜ 云开发

一、在cloudfunctions里右键新建search文件夹 =》Node.js云函数，右键在终端打开，安装gotnpm install --save got@9二、在index.js里编写接口代码const got = require('got')// 云函数入口函数exports.main = async (event, context) => { const response = await got(`http://1.101.100.211/xxx/xxx?query=${

原创 el-table-column行拖拽列拖拽

一、代码<template> <div style="width: 800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop

原创 vue全局防抖实现

一，在utils文件夹下export function debounce(fn, delay) { let timer = null return function(){ let content = this; let args = arguments; if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(content,args) }, delay) }}二、在页面中

原创 Fork使用

1.先把代码提交到本地2.pull一下代码3.push到远程分支

原创 vue前端用计算属性实现搜索功能

一、template部分<template> <div id="app"> <input v-model="search" /> <el-table :data="searchData" height="300" highlight-current-row> <el-table-column label="值"> <template slot-scope="scope">

翻译 JavaScript知识点

一、语法1.语句：每一行就是一个语句。2.变量**2.1概念：**例：var a = 1；a是变量，1为数值，把1赋值给a;2.2变量提升：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造 成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。console.log(a); //undefined 表示变量已经声明，但还未赋值var a = 1;相当于如下代码var a;conso

原创 Vue + Element tree树形控件的懒加载使用

一、效果展示二、视图<el-tree accordion lazy :load="loadNode" :props="props" @node-click="handleNodeClick" ></el-tree>三、data定义props: { label: "nodeCname", children: "zones",},四、script方法//懒加载 loadNode(node, resolve) {

原创 vue 子传父、父传子、ref、bus事件总线(两个组件传参)、后代传值privide和inject、Vue父子组件间传值 之$parent/$children

##父传子父组件定义一个mytitle=“首页”,子组件用props:[“mytitle”]接收，子组件接受：第一种方式：props:[“mutitle”]第二种方式：props:{mytitle:{type:String,//类型default:“默认值”//如果传了就显示传了的值，没传就显示default默认值}}父组件：子组件:##子传父先在父组件中自定义一个@jieshouHandle事件，然后绑定一个函数，函数里的data值就是子组件传过来的参数，在子组件里用this

原创 ajax获取header里的参数

$.ajax({ url: '/api/market_login', type: 'post', contentType: "application/json", complete: function (xmlHttpRequest) { setLocalStorage('token', xmlHttpRequest.getResponseHeader('token')); }, data:

原创 C端或B端怎么用rem

在public-index文件夹下定义适配规则，代码如下：<script> function changeFontSize(width) { // 区分设备和浏览器 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS.

原创 普通文件上传&&表格里的文件上传

普通文件上传template部分：<a-upload-dragger name="file" :multiple="false" //是否支持一次上传多个文件 :accept="accept" //接受上传的文件类型 :data="fileData" //上传所需参数或返回上传参数的方法 :before-upload="beforeUpload" //上传之前的处理 @change="handleFile" //上传文件改变时的状态 :file-list="fileLi

原创 echarts X轴显示不全 显示完全以及换行

echarts X轴显示不全 如下图：如何处理 设置 interval: 0，代码如下：xAxis: { type: "category", axisLabel: { show: true,//x轴文字的配置 interval: 0,//使x轴文字显示全 }}效果图如下：明显重叠解决：使用formatter 换行显示，处理如下：axisLabel: { //x轴文字的配置 show: true, interval: 0,//使x轴文字显示全

原创 Ant Design 表格a-table怎么加事件？

antd的表格点击表格整行添加点击或者鼠标划过事件需要给table表格增加一个customRow属性<a-table :columns="columns" id="mySpecialTable" :data-source="data" :pagination="pagination" @change="handleTableChange" :customRow="rowClick"></a-table>methods: { rowClick(recor

原创 浏览器的记住密码，autocomplete= “new-password“解决

例：直接加autocomplete= “new-password”<a-form-model-item prop="userPassword" class="explain-long"> <a-input-password v-model="form.userPassword" autocomplete="new-password" :maxLength="20" placeholder="请输入密码" :style="styleO

原创 事件监听、事件委托

一、事件监听1、可以根据事件监听实现捕获或冒泡现象2、可以为同一个元素添加多次同样的事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ height: 1000px; } </style> <b

原创 拖拽

参考网站https://github.com/gorkys/vue-draggable-resizable-gorkys一、安装引入1.安装$ npm install --save vue-draggable-resizable-gorkys2.在main.js中引入//main.jsimport Vue from 'vue'import vdr from 'vue-draggable-resizable-gorkys'// 导入默认样式import 'vue-draggable-re

原创 VUEX

state第一种方法：this.$store.state.count接收数据；第二种方法：1.引入import { mapState } from ‘vuex’ ; 2.映射到当前组件的计算属性中…mapState([ ‘count’ ]MutationMutation用于变更Store中的数据，state是state中的数据，step是参数；第一种方法：this.$store.commit(‘add’,2)接收数据；第二种方法：1.引入import { mapMutations

原创 父传子，子传父

1.父传子2.子传父子传父：顾名思义子组件向父组件传值，它属于 事件传值 。我们来边看代码边注释：先看一下，子组件 -》注释：如图中所示，我们点击button这个按钮，触发了buttonDianji()这个事件，this.$emit() 该机制会向父组件传一个事件helloButton，其内容为逗号之后。并且去父组件-》找这个事件。下面，看一下父组件：到此，子传父，就完成了。：）...

原创 正则

手机号：let patternTel = /^1[3456789]\d{9}$/;patternMob.exec(value)或：phoneReg = /^1(3|4|5|7|8|9)\d{9}$/;邮箱：let patternEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;patternEmail.exec(value)ip地址，多个地址使用于鉴权使用半角逗号’,'分割：let

原创 git操作指南

1、安装安装包下载网址https://github.com/git-for-windows/git/releases/download/v2.14.1.windows.1/Git-2.14.1-64-bit.exe可参照此链接进行安装 http://www.cnblogs.com/tuhooo/p/7497233.html(建议安装在 C 盘)点开安装包点 next 之后安装路径保持默认选项，然后继续下一步点击下一步提示你创建开始菜单，我们继续下一步上图默认的是第二项，但是我

原创 git提交代码、拉取代码

注：git冲突解决办法（只有一个分支master）1.先git add .（先把文件存到暂存区）2.git commit -m ‘第一次提交’（先提交自己的代码）3.git push origin master (提交自己的代码，如果冲突的会报错，不冲突就直接push上去了不用问)4.git pull origin master(拉下最新代码):wq5.git status(查看一下哪个文件冲突了)---------然后在编辑器里解决冲突6.git add .(把解决好的冲突再提交到暂存区)

原创 md5、rsa、base64前端加密

md5加密md5加密最大的特点是不能逆解析，就是数据经过md5加密后，传给后台，后台不可以解密//md5安装npm install --save js-md5//或import md5 from 'js-md5';//md5使用：md5('holle') // bcecb35d0a12baad472fbe0392bcc043rsa加密1.安装：或者直接去jsencrypt下载链接去下载js文件npm i jsencrypt2.main.js引入：import JsEncryp

原创 git代码统计

统计该项目的每个人的代码量：git log --since='XXXX-XX-XX' --until='XXXX-XX-XX' --format='%aN' | sort -u | while read name; do echo -en "$name\t"; git log --author="$name" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added li

原创 严格模式

"use strict"说明：写在哪个作用域下，在哪个作用域下生效；注意：尽量注意不要严格模式写在全局用了严格模式，会有什么变量：1.全局变量声明时，必须加var；2.this无法指向全局对象；3.函数内重名属性；4.arguments对象不允许被动态改变；5.新增保留字：implements，interface，let，package，private，protected，public，static，yield；...