- 博客(118)
- 收藏
- 关注
原创 vue项目中使用el-tree — 回显问题
最近实现了一个项目需求,关于权限的处理,见下图一级菜单包含多个二级菜单若二级不全选,则一级显示 半选 状态若二级全选中,则一级显示 全选 状态在下次进入编辑页面时,需要将当前选中租户的权限回显出来说明:二级下面会有多个三级菜单,以此类推整体思路很简单:初始化树 -> 递归处理所有层级菜单选中的id -> 处理 el-tree 回显初始化树...
2021-09-10 17:03:18
5440
原创 windows安装ssh服务
1、打开设置2、进入 应用3、进入 可选功能4、添加功能5、找到ssh,进行安装6、打开cmd终端,进行连接7、连接成功
2020-12-25 19:10:03
2437
原创 ubuntu安装nginx
linux 系统使用 apt-get 命令安装 nginx。安装依赖包 :apt-get install gccapt-get install libpcre3 libpcre3-devapt-get install zlib1g zlib1g-dev# Ubuntu14.04的仓库中没有发现openssl-dev,由下面openssl和libssl-dev替代#apt-get install openssl openssl-devsudo apt-get install openssl
2020-12-03 14:27:55
308
1
原创 vue-cli3.0项目中使用ttf字体
1、下载字体此处下载的字体为HYXinHaiXingKaiW.ttf2、将下载好的字体放到项目的assets下,同时新建font.css文件3、font.css中配置字体@font-face { font-family: 'HYXinHaiXingKaiW'; src: url('HYXinHaiXingKaiW.ttf'); font-weight: normal; font-style: normal;}4、main.js中引入字体5、
2020-07-02 09:30:06
2765
2
原创 vue中同时监听多个参数
vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watchdata中定义一个对象:data(){ return{ obj:{ name:'xpf', gender:'male', age:24 } }}...
2020-04-08 16:00:18
2917
原创 vue中使用vue-visibility-change监听浏览器页面之间的切换
需求:A、B两个页面,从A页面切换到B页面,在B页面做完操作再切换回A页面,A页面需要执行相关的操作A ---> B(一些操作) ---> A(执行某些操作)解决方案:使用vue-visibility-change下载:$ npm i vue-visibility-change -S导入:main.js:import visibility fro...
2020-03-10 12:20:33
7055
1
原创 vue给对象新增属性,页面不更新解决方法——四种方案
需求:点击按钮,向一个对象新增name属性,希望页面也能显示出来新增的name代码:<div id="app"> {{obj}} <div @click="add">新增name属性</div></div> <script> new Vue({ el:'#app', d...
2020-02-27 16:52:45
5503
3
原创 在element-ui的table组件与双大括号中使用时间处理函数
需求1:在双大括号中处理时间格式使用前:<div v-for='item in orders' :key='item.id'> 日期:<div>{{item.orderTime}}</div> 状态:<div>{{item.status}}</div> <br></div>使...
2020-02-26 15:42:06
1160
原创 JSON序列化与反序列化在vue中的应用
需求:A页面跳转到B页面,需要将参数携带过去,并且刷新页面也正常显示,参数格式如下:(对象嵌套数组)"data": { "page": 0, "pageSize": 100, "total": 87, "list": [ { "id": 1061, "orderTime": 1581905690803, ...
2020-02-25 14:19:17
4240
原创 vue中父组件通过props向子组件传异步值为空
问题:子组件在使用props接收父组件传值的时候,浏览器报错该对象未定义父组件:子组件:控制台:原因:当父组件通过 axios 获取数据,子组件使用 props 接收数据时,子组件执行 mounted 的时候,父组件的axios 还没有返回数据,而且 mounted只执行一次,这时 props 中接收的数据为空,所以在使用的使用自然会报错undefined...
2020-02-25 11:26:44
4796
原创 vue实现登录功能,且刷新页面不丢失数据
仅个人学习记录github:https://github.com/otatoz/login-vue预览地址:http://47.93.255.92/login项目说明:姓名: customer1或customer2或customer3 密码: 123321目录结构:大致流程:代码说明:store/modules/log...
2020-02-17 17:27:53
4380
原创 cordova环境配置,将vue项目打包成apk的详细流程
jdk下载并配置下载jdk下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载完成,一直下一步即可配置jdk1、新建 JAVA_HOME 的变量,值为jdk安装路径,此处为默认安装路径 C:\Program Files\Java\jdk1.8.0_...
2020-01-16 15:50:39
2718
原创 vue-element-admin关闭代码校验eslint
在vue.config.js中将lintOnSave设置为fasle即可设置前:设置后:
2020-01-02 15:21:46
5211
原创 vue-admin-template运行到10%时报错解决
在使用vue-admin-template时,下载完依赖之后,npm run dev,项目跑到10%时会报如下的错误一种解决方案:添加环境变量添加两个环境变量关闭vscode重启项目即可...
2019-12-31 08:12:52
1273
2
原创 vant使用iconfont图标
第一步、添加图标至项目第二步、生成代码第三步、将得到的地址复制到浏览器第四步、将该页面所有的代码复制到assets/css/icno.css中(没有的话可以新建)第五步、在App.vue导入(路径跟自己项目的路径一致即可)第六步、使用文档上推荐的自定义图标(class一定要有,可以参考下面的代码)<van-icon ...
2019-12-26 16:09:33
5003
原创 vue刷新当前页面且页面不闪烁
方式一:location.reload()方式二:在需要刷新的地方直接使用vue的路由跳转this.$router.go(0)方式三:(推荐此方式,因为此方法不会出现短暂闪烁的空白页)第一步:App.vue页面<template> <div id="app"> <div class="container"> ...
2019-12-23 15:58:46
1488
1
原创 vue-cli3.0打包页面无法加载js文件
使用 npm run build 打包后,浏览器访问dist/index.html文件时,无法加载js文件解决方案:在网上搜了很多方法,他们修改的配置文件都不适合vue-cli3.0,因为vue-cli3.0的目录结构如下:此时需要自己新建一个文件:(根目录下新建vue.config.js)module.exports = { publicPath: './',...
2019-12-11 10:58:06
3734
原创 解决remote: Permission to A.git denied to B
以vue-admin-template为例,将其克隆到本地做修改,再提交至自己的github,出现问题如下图只需要修改一处即可, .git/config 文件下的url由于.git文件默认没打开,需要手动拖至sublime或者vscode之后再次提交...
2019-12-09 19:23:00
2832
原创 vuex过滤器getters
业务需求:查询到所有的商品列表,根据商品的状态将其放入不同的表格解决方案:1、使用vue的过滤器2、使用vuex的getters目录结构:App.vue文件<template> <div id="app"> <!-- 显示所有的商品 --> <div class="listOne"> &l...
2019-11-01 14:14:02
663
原创 vueRouter携带参数
业务需求:在视频列表页面,点击任意一个视频的时候,获取到该视频的id,并跳转到视频播放页面,在视频播放页面可以通过该视频的id查询视频详情信息解决思路:1、将id存入vuex中,使用状态管理机维护起来问题:在视频播放页面刷新浏览器的时候,id丢失2、使用路由机制,在视频列表页面点击任一视频的时候,将该视频id拼接在路由上,在视频播放页面获取路由上拼接的id即可this.$rou...
2019-10-31 18:51:56
1382
原创 阿里云服务器部署前端项目架包
上传架包启动架包连接数据库创建数据库运行sql文件创建用户并添加权限访问1、将springboot项目所打包成的jar文件上传至阿里云服务器使用工具:filezilla在服务器相对应的目录查看2、启动架包执行命令(前提,在阿里云服务器已经安装并配置过java环境)$ nohup java -jar ej-0.0.1-SNAPSHOT.jar...
2019-10-09 19:27:11
637
原创 vue router 报错Object { _name: "NavigationDuplicated", name: "NavigationDuplicated“...
在使用vue router的时候,会报如下警告,但是不影响页面的跳转原因:vue-router ≥3.0版本回调形式以及改成promise api的形式,返回的是一个promise,如果没有捕获到错误,控制台始终会出现如图的警告解决方法:在mian.js文件中导入如下代码import Router from 'vue-router' const originalPus...
2019-09-23 16:12:09
374
原创 linux配置mysql
在linux系统下安装配置mysql,并且在本地使用navicat连接mysql一、安装mysql在普通用户下使用如下命令下载mysql$ sudo apt-get install mysql-server根据提示输入用户名、密码即可(都设置成root方便记忆)安装完成二、配置mysql使用如下命令行,并根据提示输入密码,登录进入mysql$ mysql -ur...
2019-09-04 19:06:33
699
原创 高级面向对象技术
封装三种方式:工厂函数模式构造函数模式构造函数模式和原型结合工厂函数模式代码示例function factory(name){ var obj = new Object(); obj.name = name; obj.sayName = function(){ console.log('my name is ' + this.n...
2019-09-03 19:06:16
325
原创 linux配置vsftpd、subversion
vsftpd与fileZilla连接,subversion与小乌龟连接vsftpd与filezilla1、安装vsftpd$ sudo apt install vsftpd2、下载完成后测试$ vsftpd -version出现版本号即可如果没有出现版本号,需要配置路径$ sudo vi /etc/profile在最后追加export PATH=$PATH...
2019-08-16 15:05:50
173
原创 浮动与绝对定位脱离文档流的区别
浮动脱离文档流先看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> *{ margin:0; padding:0; ...
2019-08-05 20:02:29
466
原创 vuex的使用
Vue中的vuex和React中的redux 都被称为状态管理机制。理解:在state中定义了一个数据之后,可以在所在项目中的任何一个组件里进行获取、进行修改,并且此次修改可以得到全局的响应变更。1、安装vuex$ npm install vuex --save2、在src下新建文件夹store,store文件夹下新建js文件index.js,如下3、在新建的inde...
2019-08-01 18:18:41
137
原创 css动画实现呼吸路灯
利用css的动画可以实现一个呼吸灯:(此处是呼吸路灯)效果如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> &...
2019-07-18 16:49:02
683
原创 js函数的执行环境和作用域链
执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为执行环境分为:全局环境、局部环境1、使用var声明的变量会自动被添加到最接近的环境中,在函数内部,最接近的环境就是函数的局部环境,在with语句中,最接近的环境是函数环境如果初始化的变量没有用var声明,该变量会自动被添加到全局环境中2、某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定...
2019-07-18 11:04:53
516
原创 this指向问题
谁调用它,this 就指向谁。但是有时候这样的判断并不准确,可以按照如下规则进行判断。全局环境中的this浏览器环境:无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象 windownode 环境:无论是否在严格模式下,在全局执行环境中(在任何函数体外部),this 都是空对象 {}是否是new绑定如果是 new 绑定并且构造函数返回值...
2019-07-17 10:34:48
197
原创 js中的迭代方法
js有五个迭代方法,分别为:every、some、filter、map、forEach此处须知:迭代,就是对数组的每一项都进行相应的操作五个方法中,此处所使用的都是箭头函数 () =>{}五个方法中,都有三个参数,此处只说两个,item为当前数据项,index为数组索引1、every()<script> var arr = [1,2,3,4,5]...
2019-07-16 15:39:37
2349
原创 axure动态面板
实现效果如下:(点击头部导航,切换到相应页面)步骤:1、将水平menu拖入右侧面板2、添加动态面板(Dynamic Panel)3、双击动态面板4、点击加号添加(头部导航有几个就添加几个state)5、修改每个新添加的state名称6、选中第一个File,在右侧添加属性(properties),选中第一个OnClic...
2019-07-15 15:18:14
960
原创 react向数组中追加值
首先,渲染一个随机数,每个一秒变换一次,效果如下:代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8" /> <title>数组追加元素</title> <script src="https://cdn.staticfile.org/rea...
2019-07-12 10:46:00
13778
原创 react渲染—基本渲染、列表渲染、条件渲染
基本渲染:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>列表渲染</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"...
2019-07-11 22:25:03
270
原创 {...this.props}是什么意思
在react中,会看到{...this.props}的代码,不知道是什么意思,现在记录一下。{...this.props}是props所提供的语法糖,可以将父组件的所有属性复制给子组件代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>.....
2019-07-11 17:40:10
20208
原创 对象的定义及判断是否相等
如何判断两个对象是否相等? 你可能会认为,如果两个对象有相同的属性,以及它们的属性有相同的值,这两个对象就是相等的,但是并不是这样。看如下案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl...
2019-07-08 22:50:05
463
原创 清除浮动的三种方法
浮动布局,float:left;会使当前元素脱离文档流,从而失去对父级元素的支撑,如果此时父级元素没有设置高度,下面的元素就会挤上去,因此需要清除浮动清除浮动的三个常用方法:给浮动元素的父级元素设置overflow:hidden; 在浮动元素的同级下添加一个空标签,并且设置clear:both; 浮动元素的父级元素使用::after{clear:both;content:'';disp...
2019-06-28 15:53:19
5762
原创 CSS选择器
选择器可分为基本选择器、层次选择器、属性选择器、伪类选择器、伪元素选择器 1、基本选择器id选择器#test{} 选中id为test的元素类选择器.test{} 选中类为test的元素标签选择器h1{} 选中h1标...
2019-06-26 17:26:36
198
原创 CSS基础
1、什么是CSS?CSS (Cascading Style Sheets)层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML)的语言,可以将文档以更优雅的形式呈现给用户2、CSS声明CSS规则主要由两个部分组成:选择器、一条或者多条声明(每个声明由属性与值构成,属性和值通过冒号隔开)h1{ font-size:10px;}3、CSS声明块...
2019-06-26 16:17:38
110
原创 消除a标签默认样式
这是a标签默认的样式。改变字体颜色<a href="#" style="color: black;">我是测试</a>去除下划线<a href="#" style="text-decoration:none;color: black;">我是测试</a>...
2019-05-09 20:36:16
26240
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人