- 博客(37)
- 收藏
- 关注
RSS订阅原创 封装antdv的仅适用于级联 TreeSelect 树型选择控件
封装antdv的仅适用于级联 TreeSelect 树型选择控件1. 效果支持多选不支持多选2. 组件<template> <a-tree-select style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :value="currentValue" :multiple="multiple" :allow-clear=
2022-03-29 10:44:13
1058
原创 优化vue 根据后台反馈状态动态显示相应字段
优化vue 根据后台反馈状态动态显示相应字段1. 只有两个状态使用三元运算符<!-- 未优化版 --><template slot="state" slot-scope="state"> <span v-if="state == 1">已上线</span> <span v-if="state == 2">未上线</span></template><!-- 优化版 --><templat
2022-03-29 10:24:50
2032
原创 antv中的TreeSelect连级选择问题
antv中的TreeSelect连级选择问题需求效果所有代码：<template> <a-tree-select show-search style="width: 100%" :tree-data="treeData" :labelInValue = 'true' // 重要 v-model="value" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
2022-03-23 14:30:03
1392
原创 vue权限管理
vue权限管理1. 整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。2. 登录 & 权限登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，
2022-03-22 10:55:13
1447
原创 GitLab的使用
GitLab的使用本地新建一个文件夹，用来存放等下要拉取的代码登录GitLab，找到要拉取的项目，复制地址在终端执行，克隆git clone 项目地址（可能Ctrl+V用不了，可以用右键选择Paste完成复制）克隆成功后，新切一个自己的分支，以后修改都在自己的分支上，不要在master上分步进行git branch # 查看当前分支git pull # 加载新分支git checkout 要切换的分支名 # 切换到新分支一并进行gi
2022-03-17 10:41:39
88
转载 实用的 CSS 技巧
实用的 CSS 技巧1. 解决 img 5px 间距的问题你是否经常遇到图片底部多出5px间距的问题？不用急，这里有4种方法可以解决。方案1：设置父元素字体大小为 0.img-container{ font-size: 0;}方案2：将 img 元素设置为 display: blockimg{ display: block;}方案3：将 img 元素设置为 vertical-align: bottomimg{ vertical-align: bottom;}解决方
2022-03-09 11:05:56
104
原创 echarts渐变色实现方法
echarts渐变色实现方法方法一1. 线性渐变color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], globalCoord: false // 缺省
2021-09-01 17:24:37
4926
1
转载 浏览器地址栏输入 URL 敲下回车后发生了什么?
浏览器地址栏输入 URL 敲下回车后发生了什么?一、简单分析简单的分析，从输入URL到回车后发生的行为如下：URL解析DNS 查询TCP 连接HTTP 请求响应请求页面渲染二、详细分析URL解析首先判断你输入的是一个合法的URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作一个url的结构解析如下：DNS查询DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器。简单来讲，DNS相当
2021-08-11 17:15:18
423
原创 javascript 原型与原型链
原型与原型链一、原型概念每一个 javascript 对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。一、prototype 和 __proto__的区别我们每创建一个函数，解析器都会向里添加一个prototype属性，该属性指向函数的原型对象。因此，prototype是函数才有的属性！！！__proto__是每个对象都有的隐含属性。var obj = {};console.log("obj.prototype:",
2021-07-20 14:06:10
76
原创 JavaScript 代码优化技巧
JavaScript 代码优化技巧1. 含有多个条件的 if 语句//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) { //logic}includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回fals
2021-07-16 09:30:08
55
原创 vue3.0中使用elementUi(element-plus的使用)
element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级版element-plus???? element-plus官方文档入口1、npm 安装npm
2021-04-06 13:40:02
13847
7
原创 vue路由详解
vue路由详解何为 router、routes、route ❗❓router → index.js 文件import Router from 'vue-router'const router = new Router({ routes: [ // 下面的对象就是路由记录 { path: "/a", name: "a", component: A, children: [ // 这也是个路由记录
2021-03-26 17:31:49
179
原创 将前端（vue）项目部署到nginx
将前端项目部署到nginx1、登录通过账号、密码登录服务器2、查看当前文件或目录的详细信息使用指令ll罗列出当前文件或目录的详细信息。3、进入首页~ cd /home4、新建文件夹并cd进去~ mkdir 自定义文件夹名~ cd 自定义文件夹名5、上传前端dist包在 /home/自定义文件夹名 下将dist压缩包扔进来6、解压dist包~ unzip dist7、进入nginx目录~ cd /usr/local/nginx8、进入配置文件目录~ cd conf/
2021-01-19 16:04:34
395
原创 vue响应式原理解析
vue响应式原理解析1、什么是响应式当修改data中的某一属性值时，调用该属性的界面视图也随着发生改变！2、灵魂拷问2.1 vue内部是如何监听数据的改变答：使用Object.defineProperty监听对象属性的改变2.2 当数据发生改变，vue是如何知道要通知哪些页面的？答：使用发布者订阅者模式3、代码解析定义一个data对象，并获取它所有的属性与属性值<script> const data = { message: "哈哈哈",
2020-12-03 14:58:41
70
原创 项目在window(nginx)下的部署
项目在window(nginx)下的部署1、下载nginx1.1 nginx官网进入官网1.2 下载稳定版1.3 解压到指定目录目录中最好不要有汉字！！！2、 运行nginx2.1 运行方法双击nginx.exe运行终端运行启动Nginx指令：nginx2.2 浏览器访问浏览器访问localhost，默认访问8080端口！！！界面出现以上内容，说明nginx运行成功！3、 部署项目3.1 替换法将项目进行打包 npm run build打包完成后，在项
2020-12-02 11:06:08
177
原创 ECMAScript 6 （3）Promise 对象
Promise 对象1、含义Promise 是异步编程的一种解决方案，所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（以失败
2020-09-14 17:51:09
271
原创 ECMAScript 6 （2）let 和 const 命令
let 和 const 命令1、let 命令1.1 基本用法ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量
2020-09-01 09:09:31
82
原创 ECMAScript 6 （1）ES6总结--思维导图
ECMAScript 61、Babel 转码器1.1 概念Babel 是ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。// 转码前arr.map(item => item + 1);// 转码后arr.map(function (item) { return item + 1;});上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 Jav
2020-08-31 10:02:28
280
原创 vue--输入框校验方法
输入框校验方法效果图：布局：<template> <div class="ff"> <input type="text" v-model="val" @input="change" maxlength="10" /> <span>*</span> <span v-show="flag">支持格式：纯数字</span> </div></template>样
2020-08-26 09:55:14
7820
1
原创 缩放页面不影响布局方法
缩放页面不影响布局1、类似百度布局（1）布局时在最外面套一层div，然后给这个div赋一个固定的长宽就可以了。<body><div id="main"></div></body>css代码：#main{ width:1000px; height:500px; MARGIN-RIGHT: auto; MARGIN-LEFT: auto;}2、类似百度布局（2）<div style="min-width:1050px;min-h
2020-08-24 11:38:44
10110
1
原创 vue中Axios的封装和Api接口的管理
vue中Axios的封装和API接口的管理1、目的简化代码、利于后期的更新维护、降低耦合度。2、下载axiosnpm i axios -S 或 npm install axios3、配置代理在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当我们需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。内容如下：module.exports = { // 配置项目基地址 // publicPath: '/abc',
2020-08-19 09:48:32
220
转载 认识JavaScript（4）JavaScript 的运算符
JavaScript 的运算符1、算数运算符1.1 所有算数运算符加法运算符：x + y减法运算符： x - y乘法运算符： x * y除法运算符：x / y指数运算符：x ** y余数运算符：x % y自增运算符：++x 或者 x++自减运算符：–x 或者 x–数值运算符： +x负数值运算符：-x赋值运算符 ：=1.2 加法运算符1、俩数值相加2 + 3 // 52、布尔值相加true + true // 2false + false // 0
2020-08-18 10:18:44
139
原创 初识Docker（了解Docker）
初识Docker1、简介Docker 是一个开源的应用容器引擎，它可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。 鲸鱼上载满了集装箱 ==> 容器技术2、Docker 架构Docker 包括三个基本概念:镜像（Image）：Docker 镜像（Image），就相当于是一个 root 文件系统（Root FileSystem，简称为rootfs）。【了解root文件系统】容器（Container）：镜像（Im
2020-08-14 17:46:43
97
原创 vuex中使用provide / inject组合刷新页面
vuex中使用provide / inject组合刷新页面本文档主要参考【坏小哥】的Vue刷新页面的三种方式的文档1、在RouterView【命令视图】组件，也就是App.vue组件中通过provide来提供变量<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template><scr
2020-08-13 15:54:06
245
原创 echarts正负条形图在一侧显示
echarts正负条形图在一侧显示效果图：修改前：官网案例去掉【支出】数据修改后：思路：1、获取数据的绝对值。var data = [-120, -132, -101, -134, -190, -230, -210];var displayData = data.map(v => Math.abs(v));// Math.abs() 返回参数的绝对值2、对原始数据做判断，如果是正数加【+】符号，如果是负数加【-】符号显示。 formatter: function (p) {
2020-08-12 13:38:41
1258
原创 认识JavaScript（3）JavaScript 的数组方法大全
数组方法大全1、join()功能： 将数组中所有元素都转化为字符串并连接在一起。使用场景： 数组转字符串。是否改变原数组: 否案例：var arr1 = [1,2,3,4,5,6];var arr2 = arr.join();console.log(arr2) // 1,2,3,4,5,6console.log(arr1) // [1, 2, 3, 4, 5, 6]2、reverse()功能： 倒序。使用场景： 数组倒序。是否改变原数组: 否案例：
2020-08-10 09:52:45
153
原创 在vue项目中使用阿里svg矢量图
在vue项目中使用阿里svg矢量图1、进入阿里svg矢量图官网：官网地址2、进入图标库 => 所有图标库3、搜索图标支持拼音、汉字、英语4、将选中图标加入购物车5、进入购物车，选择【添加至购物车】如若没有创建的项目，请先点击【加入项目】后的【添加】按钮创建新项目6、点击确定进入【我的项目】界面7、选中symbol，并下载到本地8、将iconfont.js文件解压到项目src目录下的assets文件夹下的js文件夹下(如若没有该文件目录请自行创建)文件目录表：9、在m
2020-08-07 09:39:58
1254
原创 vue自定义指令——输入框限制
输入框限制在平时开发中我们常会遇到限制输入框输入的问题，如果只是一两个输入框我们可以直接在标签上绑定input事件进行检验，如：实现输入框只能输入正整数，且不能以0开头。<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">但当我们要限制的输入框很多的时候就需要在每个标签上绑定同一方法，不论从代码的可维护性还是可读性又或者从编码量来讲都不是个好方法，因此我们可以利用vue的自定义指令来自定义一个方法。1
2020-08-04 16:17:07
793
1
原创 认识JavaScript（2）JavaScript 的数据类型
1、数据类型1.1、概念JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有八种。1.2、typeof 运算符JavaScript 有三种方法，可以确定一个值到底是什么类型。typeofinstanceofObject.prototype.toStringtypeof 123 // "number"typeof '123' // "string"typeof false // "
2020-08-03 14:21:13
192
原创 认识JavaScript（1）JavaScript 的基本语法
认识JavaScript1、什么是 JavaScript 语言？JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”。JavaScript 也是一种嵌入式语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境
2020-07-30 09:01:05
222
原创 在vue（vuex）中ref ($refs)的用法
vue（vuex）里ref ($refs)的用法在日常开发中我们都会涉及到操作（获取）Dom的情况：原生方法：getElementById() // 该方法匹配元素的id属性来访问元素节点getElementsByTagName() // 该方法匹配元素的tagName来访问元素节点getElementsByClassName() // 该方法匹配元素的className来访问元素节点Jquery方法：$("#test") //该方法匹配元素的id属性来访问元素节点
2020-07-29 14:03:35
1541
2
原创 C3的文字阴影—text-shadow
CSS3的文字阴影—text-shadow1、语法:text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]…或者text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]…2、效果3、代码 p:nth-of-type(1) { text-shadow: 0px 0 10px red; } p:nth-of-type(2) { text-shadow: 0 0 5px #fff,
2020-07-09 09:01:57
289
原创 初识webSocket（入门细解）
初始webSocket1、http与websocket 对比项 http websocket 相同点 1、都是基于tcp协议，都需要三次握手建立连接，都是可靠传输协议 2、都是应用层协议 不同点 单向通信协议 双向通信协议 缺点
2020-07-08 15:28:11
127
1
原创 vuex手册（入门细解）
vuex的使用1、概念Vuex是适用于在Vue项目开发时使用的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2、Vuex 和单纯的全局对象的不同点1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2、不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。3、适用
2020-07-06 10:45:41
610
原创 echarts双Y轴（简单明了）
本文主要实现echarts双Y轴，并在此过程中解决：echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整X/Y轴名称的分布坐标轴刻度标签数值以某一值为分界点改变颜色等问题1、 echarts双Y轴左右刻度线一致参考、借鉴文档：https://blog.csdn.net/qq_40845885/article/details/82108525https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-
2020-06-29 09:41:13
26730
原创 vue（vuex）项目中使用Echarts手册
Echarts使用手册（vue中使用）1、下载echarts~npm install echarts --save2、引入echarts(按需引入)在main.js// echarts 按需引入 let echarts = require('echarts/lib/echarts')// 引入折线图/柱状图/饼图等组件 require('echarts/lib/chart/line') require('echarts/lib/chart/bar') require('echarts/l
2020-06-28 11:01:16
1036
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人