otatoz-CSDN博客

原创 vue项目中使用el-tree — 回显问题

最近实现了一个项目需求，关于权限的处理，见下图一级菜单包含多个二级菜单若二级不全选，则一级显示半选状态若二级全选中，则一级显示全选状态在下次进入编辑页面时，需要将当前选中租户的权限回显出来说明：二级下面会有多个三级菜单，以此类推整体思路很简单：初始化树 -> 递归处理所有层级菜单选中的id -> 处理 el-tree 回显初始化树...

2021-09-10 17:03:18 5084

原创 windows安装ssh服务

1、打开设置2、进入应用3、进入可选功能4、添加功能5、找到ssh，进行安装6、打开cmd终端，进行连接7、连接成功

2020-12-25 19:10:03 2414

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 284 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 2733 2

原创 vue中同时监听多个参数

vue使用watch同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性computed与监听watchdata中定义一个对象：data(){ return{ obj:{ name:'xpf', gender:'male', age:24 } }}...

2020-04-08 16:00:18 2878

原创 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 6967 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 5112 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 1127

原创 JSON序列化与反序列化在vue中的应用

需求：A页面跳转到B页面，需要将参数携带过去，并且刷新页面也正常显示，参数格式如下：(对象嵌套数组)"data": { "page": 0, "pageSize": 100, "total": 87, "list": [ { "id": 1061, "orderTime": 1581905690803, ...

2020-02-25 14:19:17 4086

原创 vue中父组件通过props向子组件传异步值为空

问题：子组件在使用props接收父组件传值的时候，浏览器报错该对象未定义父组件：子组件：控制台：原因：当父组件通过 axios 获取数据，子组件使用 props 接收数据时，子组件执行 mounted 的时候，父组件的axios 还没有返回数据，而且 mounted只执行一次，这时 props 中接收的数据为空，所以在使用的使用自然会报错undefined...

2020-02-25 11:26:44 4643

原创 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 4268

原创 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 2665

原创 vue-element-admin关闭代码校验eslint

在vue.config.js中将lintOnSave设置为fasle即可设置前：设置后：

2020-01-02 15:21:46 5125

原创 vue-admin-template运行到10%时报错解决

在使用vue-admin-template时，下载完依赖之后，npm run dev，项目跑到10%时会报如下的错误一种解决方案：添加环境变量添加两个环境变量关闭vscode重启项目即可...

2019-12-31 08:12:52 1241 2

原创 vant使用iconfont图标

第一步、添加图标至项目第二步、生成代码第三步、将得到的地址复制到浏览器第四步、将该页面所有的代码复制到assets/css/icno.css中（没有的话可以新建）第五步、在App.vue导入（路径跟自己项目的路径一致即可）第六步、使用文档上推荐的自定义图标（class一定要有，可以参考下面的代码）<van-icon ...

2019-12-26 16:09:33 4970

原创 vue刷新当前页面且页面不闪烁

方式一：location.reload()方式二：在需要刷新的地方直接使用vue的路由跳转this.$router.go(0)方式三：（推荐此方式，因为此方法不会出现短暂闪烁的空白页）第一步：App.vue页面<template> <div id="app"> <div class="container"> ...

2019-12-23 15:58:46 1395 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 3530

原创解决remote: Permission to A.git denied to B

以vue-admin-template为例，将其克隆到本地做修改，再提交至自己的github，出现问题如下图只需要修改一处即可， .git/config 文件下的url由于.git文件默认没打开，需要手动拖至sublime或者vscode之后再次提交...

2019-12-09 19:23:00 2787

原创 vuex过滤器getters

业务需求：查询到所有的商品列表，根据商品的状态将其放入不同的表格解决方案：1、使用vue的过滤器2、使用vuex的getters目录结构：App.vue文件<template> <div id="app">  <div class="listOne"> &l...

2019-11-01 14:14:02 628

原创 vueRouter携带参数

业务需求：在视频列表页面，点击任意一个视频的时候，获取到该视频的id，并跳转到视频播放页面，在视频播放页面可以通过该视频的id查询视频详情信息解决思路：1、将id存入vuex中，使用状态管理机维护起来问题：在视频播放页面刷新浏览器的时候，id丢失2、使用路由机制，在视频列表页面点击任一视频的时候，将该视频id拼接在路由上，在视频播放页面获取路由上拼接的id即可this.$rou...

2019-10-31 18:51:56 1362

原创阿里云服务器部署前端项目架包

上传架包启动架包连接数据库创建数据库运行sql文件创建用户并添加权限访问1、将springboot项目所打包成的jar文件上传至阿里云服务器使用工具：filezilla在服务器相对应的目录查看2、启动架包执行命令（前提，在阿里云服务器已经安装并配置过java环境）$ nohup java -jar ej-0.0.1-SNAPSHOT.jar...

2019-10-09 19:27:11 617

原创 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 362

原创 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 694

原创高级面向对象技术

封装三种方式：工厂函数模式构造函数模式构造函数模式和原型结合工厂函数模式代码示例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 297

原创 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 163

原创浮动与绝对定位脱离文档流的区别

浮动脱离文档流先看代码：<!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 458

原创 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 128

原创 css动画实现呼吸路灯

利用css的动画可以实现一个呼吸灯：（此处是呼吸路灯）效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> &...

2019-07-18 16:49:02 660

原创 js函数的执行环境和作用域链

执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为执行环境分为：全局环境、局部环境1、使用var声明的变量会自动被添加到最接近的环境中，在函数内部，最接近的环境就是函数的局部环境，在with语句中，最接近的环境是函数环境如果初始化的变量没有用var声明，该变量会自动被添加到全局环境中2、某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定...

2019-07-18 11:04:53 447

原创 this指向问题

谁调用它，this 就指向谁。但是有时候这样的判断并不准确，可以按照如下规则进行判断。全局环境中的this浏览器环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象 windownode 环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部），this 都是空对象 {}是否是new绑定如果是 new 绑定并且构造函数返回值...

2019-07-17 10:34:48 187

原创 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 2312

原创 axure动态面板

实现效果如下：（点击头部导航，切换到相应页面）步骤：1、将水平menu拖入右侧面板2、添加动态面板（Dynamic Panel）3、双击动态面板4、点击加号添加（头部导航有几个就添加几个state）5、修改每个新添加的state名称6、选中第一个File，在右侧添加属性（properties），选中第一个OnClic...

2019-07-15 15:18:14 809

原创 react向数组中追加值

首先，渲染一个随机数，每个一秒变换一次，效果如下：代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8" /> <title>数组追加元素</title> <script src="https://cdn.staticfile.org/rea...

2019-07-12 10:46:00 13674

原创 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 261

原创 {...this.props}是什么意思

在react中，会看到{...this.props}的代码，不知道是什么意思，现在记录一下。{...this.props}是props所提供的语法糖，可以将父组件的所有属性复制给子组件代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>.....

2019-07-11 17:40:10 20091

原创对象的定义及判断是否相等

如何判断两个对象是否相等？你可能会认为，如果两个对象有相同的属性，以及它们的属性有相同的值，这两个对象就是相等的，但是并不是这样。看如下案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl...

2019-07-08 22:50:05 423

原创清除浮动的三种方法

浮动布局，float:left;会使当前元素脱离文档流，从而失去对父级元素的支撑，如果此时父级元素没有设置高度，下面的元素就会挤上去，因此需要清除浮动清除浮动的三个常用方法：给浮动元素的父级元素设置overflow:hidden; 在浮动元素的同级下添加一个空标签，并且设置clear:both; 浮动元素的父级元素使用::after{clear:both;content:'';disp...

2019-06-28 15:53:19 5705

原创 CSS选择器

选择器可分为基本选择器、层次选择器、属性选择器、伪类选择器、伪元素选择器 1、基本选择器id选择器#test{} 选中id为test的元素类选择器.test{} 选中类为test的元素标签选择器h1{} 选中h1标...

2019-06-26 17:26:36 163

原创 CSS基础

1、什么是CSS？CSS (Cascading Style Sheets)层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户2、CSS声明CSS规则主要由两个部分组成：选择器、一条或者多条声明（每个声明由属性与值构成，属性和值通过冒号隔开）h1{ font-size:10px;}3、CSS声明块...

2019-06-26 16:17:38 100

原创消除a标签默认样式

这是a标签默认的样式。改变字体颜色<a href="#" style="color: black;">我是测试</a>去除下划线<a href="#" style="text-decoration:none;color: black;">我是测试</a>...

2019-05-09 20:36:16 26166 2

空空如也

空空如也