sunlizhen-CSDN博客

原创本地存储——登录记住密码 vue

HTML5中有两种本地存储（web storage），一种是会话级别的sessionStorage，这种存储方式的值一般会在浏览器窗口失效；另一种是永久有效的localStorage，除非是自动删除，不然这种的存储方式的值会一直有效。上一篇文章介绍的koa-session，这个就是后台的会话级别，和前端的sessionStorage的逻辑意思是一样的。下面介绍的是前端登录时记住密码的localStorage存储。页面如下<p style="color: #fff; text-align:

2020-12-24 11:30:30 1147 1

原创 VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面不改变的问题

<el-select :popper-append-to-body="false" popper-class="dropdown" class="screen-select" style="background: none !important;" @change="selectAllCity" size="small" clearable v-model="fromdata.city" placeholder="请选择"> <el-option style="backgro.

2020-12-21 18:42:06 626

原创 vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

路由: const routes = [ { path: '/', name: 'Home', meta:{isLogin:true,title: 'Home'},// 添加该字段，表示进入这个路由是需要登录的 component: resolve=>(require(["@/views/index.vue"],resolve)), children: [ { path: '/monitor'.

2020-12-10 10:31:56 2047 1

原创 Vue给子组件传值为空

这是没改之前的<safeassess :safetData="safetData" ></safeassess>改了之后<safeassess :safetData.sync="safetData" v-if="safeShow"></safeassess>safeShow： false 初始值为false让他有数据的时候在显示：this.$api.findDetailHealthItems({orderNo: this.$rout.

2020-12-03 15:32:12 914

原创 v-if判断el-table中按钮的显示与隐藏

<el-table-column prop="orderStatus" label="状态" width="120" > <template slot-scope="scope"> <el-button v-if="scope.row.orderStatus == 10" class="notop" type=...

2020-12-01 13:22:46 2245

原创 element的table点击选中之后设置当前行高亮

实现点击当前行样式背景高亮在element-ui.scss的样式里面添加.el-table__body tr.current-row>td{ background-color: #fdf3ea; color: #f19944;}在这里注意:row-class-name="tableRowClassName"是在渲染表格的时候就调用了，不能通过点击事件改变行的颜色实现hover前行样式背景高亮在element-ui.scss的样式里面添加.el-table--enable...

2020-12-01 13:21:29 1025 1

原创 element的table点击选中之后设置当前行高亮

2020-12-01 12:13:10 2320 1

原创 vue-router在3.0版本以上重复点击菜单报错的问题

// Push版本const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}//Replace版本const originalReplace = Router.prototype.replace;Router.prototype.repl...

2020-11-30 17:08:46 275

原创 vue使用echarts出现tab切换echarts宽度变窄问题

在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生以上问题解决方法第一种方法是我在网上找到的自己

2020-11-27 09:53:28 2703

原创 $router‘ of undefined 是什么原因？

有一个需求：后端返回数据表示token过期，前端要跳到登录页。if(response.data.message === 'token内容不符'){ Toast({ icon:'fail', message: '请重新登录', duration: 1000, forbidClick: true }); this.$router.push('/login')}提示了一句“Cannot read property '$router' of undefine

2020-11-25 19:25:58 1247

原创 iframe加载闪过白块问题

在使用iframe时，iframe背景为白块，刷新时也会闪过白块。如果刷新时间长，就会一直出现白块；以下是再vue中，再js中同样适用；<div v-else ref="iframeWanner" v-loading="loading"> <iframe style="border:none" width="100%" allowtransparency="true" :style=" { visibility:visibiShow }"

2020-11-20 11:42:37 854

原创 css 文字颜色渐变

background: linear-gradient(90deg, #F8BA02 0%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;把这几行代码放在要设置的文字的css上即可

2020-11-18 16:31:53 324

原创 vue中实现回到顶部功能

<template> <div class="home"> <span type="text" v-if="btnFlag" class="FloatWin_l FloatWin_p" @click="backTop">返回顶部</span> </div></template><script> import generalView from './component/generalView' .

2020-11-18 10:45:07 1571

原创判断 iframe 是否加载完成的完美方法

this.$nextTick( ()=> { let iframe = this.$refs.iframe let that = this; // 判断iframe是否加载完毕 if (!/*@cc_on!@*/0) { // if not IE 判断不是ie iframe.onload = function() { that.loading = false } } else { iframe.onreadystatechange = fun.

2020-11-12 15:41:24 1239

原创 vue打包报错built files are meant to be served over an HTTP server

Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.这个其实就是个提示并不是报错。其实这句话是告诉我们vue打包过后需要放在服务端才能预览打开如果不放在服务端不能正常运行的如果你想正常打开运行可以这样操作在你打包 npm run build 完成之后直接输入npm ...

2020-11-12 11:50:48 711 1

原创 vue 实现iframe跨域通信

父页面:<template> <div class="appStore"> <div> <el-row :gutter="20"> <el-col :span="6" style="text-align: center;" v-for="(item, index) in dataList"> <div class="grid-content bg-purple"> .

2020-11-11 10:51:21 1815

原创 constantRoutes 和asyncRoutes的区别

constantRoutes：代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。asyncRoutes：代表那些需求动态判断权限并通过addRoutes动态添加的页面

2020-11-04 15:28:41 5235

原创 vue-element-admin动态加载接口和报错解决

需要修改的文件只有两个：修改文件\src\router\index.js 和修改文件 src\store\modules\permission.js 接口可以放在user.js里面1.\src\router\index.js 修改为export const asyncRoutes = [ { path: '*', redirect: '/404', hidden: true }]2.src\store\modules\permission.js修改为：import {...

2020-11-03 17:49:15 1862 1

原创将vue打包移动端项目以及遇到的问题

1. 写的时候注意下移动端需要注意的事项，这里我就不多说了；2. npm run build 打包3. 在HbuilderX 中建立一个新项目4. 将vue打包的dist文件复制到这个新项目中，替代这个新项目--将新项目中的 js css img 删除即可；5.用Hbuilder X 配置--发行--原生app打包--等待打包即可；6. 等待打包成功，会有一个地址-下载即可；遇到的问题：接口访问不到：是代理的问题，打包app后代理就不起做用了，此时申请接口的时候要写...

2020-11-03 11:45:48 466

原创 js 搜索

判断数组里面是否有这个值，返回这个值的索引let arr = [ 2, 4, 6, 7, 12]; let queen = (temp)=> { let int = -1; arr.forEach( (item, index)=> { if(temp == item){ int = index return int; } else { re..

2020-11-02 14:43:27 155

原创 js 将数组对象中的数组反别放到一个数组里面

dataAll: [ { Count: [1129958, 0, 1, 0], Name: "温度极差报警" }, { Count: [1129959, 0, 0, 0], Name: "最高温度报警" }, { Count: [0, 0, 0, 0], Name: "充电升温速率报警" }, { Count: [1122596, 18, 1136, 35916], Name: "总电压报警" }, { .

2020-11-02 11:22:00 1003

原创 css3自适应布局单位vw,vh详解

视口单位(Viewport units) 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小...

2020-10-30 16:05:38 3832

原创 js 将一个数组对象分成两组

let mapArr = [ { name: 'aaa', state: 0, mark: 'au' }, { name: 'bbb', state: 1, mark: 'auu' }, { name: 'ccc', state: 2, mark: 'auuu' }, { name: 'ddd.

2020-10-30 14:48:53 8583 1

原创 js 时间加上一天

let tieml = new Date();let timeNew = new Date((tieml/1000+86400)*1000) // 选择后加一天timeNew 即为得到的加上一天的日期

2020-10-30 10:24:25 1829

原创 es6中的set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。let set = new Set();set.add({ name: 'aaa'},{job: 'it'});set.add({ job: 'it'})set.forEach( (item)=> { console.log(item)}){name: "aaa"}{job: "it"}可以用来数组去重；...

2020-10-29 15:33:26 178

原创 JS中的算法与数据结构——链表

链表(Linked-list)底层存储的数据的数据结构都是数组。但是数组不总是最佳的数据结构，因为，在很多编程语言中，数组的长度都是固定的，如果数组已被数据填满，再要加入新的元素是非常困难的。而且，对于数组的删除和添加操作，通常需要将数组中的其他元素向前或者向后平移，这些操作也是十分繁琐的。然而，JS中数组却不存在上述问题，主要是因为他们被实现了成了对象，但是与其他语言相比（比如C或Java），那么它的效率会低很多。这时候，我们可以考虑使用链表(Linked-list) 来替代它，除了对数据

2020-10-29 14:51:38 165

转载 javascript什么是堆，什么是栈？

堆和栈是用来存储变量数据的。JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。基本类型：undefined、null、string、number、boolean、symbo（ES6）普通基本类型：undefined、null、symbol（ES6）特殊基本包装类型：string、number、boolean引用类型：Object、Array、RegExp、Date、Function1、基本类型基本

2020-10-29 11:39:11 697

原创 js every()和some()和filter()

every()与some()方法都是JS中数组的迭代方法。every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。every（）let arr = [ 1, 2, 4, 6, 8, 10, 23, 34]let arrNew = arr.every( (item, index, arr)=> { return item>3}) console.l

2020-10-29 11:04:12 515

原创 vue 登录界面无法跳转问题

1.在试着用vue写一个登录页面，已经调试好了，登录成功后，跳转到主页面。但是加了拦截器后，不会跳到主页面{ path: '/', name: 'Home', meta:{isLogin:true},// 添加该字段，表示进入这个路由是需要登录的 component: Index},// 路由守卫router.beforeEach((to,from,next)=>{ if(to.matched.some(res=>res.meta.isLogin)){//判.

2020-10-27 17:02:51 7762

原创 vue-element-admin 自己项目的配置讲解

1. 将多余的页面删除剩下以下几个页面；2. 别忘了将配置路由的页面路由去掉；3.此时配置代理，用你自己的接口申请数据需要配置的如下：vue.config.js 文件；配置代理，将mock数据注释掉；4.request.js里面，更改的是接口的返回的code，你后台根据哪个判断你就写哪个就行import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '

2020-10-27 15:13:53 4332

原创 echarts 柱状图多维数组

<template> <div class="hello"> <div ref="manyBar" style="width: 600px;height:400px;"></div> </div></template><script>let seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 7.

2020-10-26 19:58:21 1569

原创 echarts渐变色实现方法

option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', ..

2020-10-26 16:55:50 1755

原创在vue项目中设置BASE_URL

1.在config文件夹中新建global.js文件const BASE_URL = 'http://60.205.251.228/rest/'export default { BASE_URL}2.在入口文件main.js中引入，设置为全局变量import global_ from '../config/global.js'Vue.prototype.GLOBAL = global_;3.在有需要的地方引入baseUrlcreated() { const bas

2020-10-26 16:32:48 10645

原创 nginx配置代理

具体操作详解：进入到nginx安装目录的配置文件中下：vim /usr/local/nginx/conf/nginx.conf编辑server { listen 80;server_name dzf1.com;index index.html index.htm index.php;root /data/html/dist; //代表html路径（存储在服务器的文件目录）if ($hos...

2020-10-26 15:45:15 237

原创 vue 中cclass得三元运算

<s :class="item.risk=='断电'?'hongse':'luese'">{{item.state}}</s><s :class="item.risk=='断电'?'hongse':item.risk=='断电或限流'?'huanse':'luese'">{{item.state}}</s>

2020-10-23 16:12:37 368

原创 vue 封装axios接口

1. 创建一个request.js文件import axios from 'axios'import { MessageBox, Message } from 'element-ui'/** * @template axios请求封装拦截 * @author daidai */const service = axios.create({ withCredentials: false, // 跨域请求时是否需要使用凭证 baseURL: '/api', timeout: 50

2020-10-22 14:03:02 137

原创 vue中的qs

后端接收参数,要把参数序列化Vue中提供了qs这个插件。进行数据序列化。1. 安装npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)2. 引入在main.jsqs import qs from 'qs'//配全局属性配置，在任意组件内可以使用this.$qs获取qs对象Vue.prototype.$qs = qs3.使用:将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）;qs.stringify()

2020-10-22 13:37:03 553

原创 vue-element-admin4.0 配置跨域

vue.config.js这个文件proxy: { "/api": { //这里是公共部分，在调用接口时后面接不相同的部分，/api就相当于http://182.92.196.41:4999/api这一段 target: 'http://182.92.196.41:4999/api', //这里写的是访问接口的域名和端口号 changeOrigin: true, // 必须加上这个才能跨域请求 ws: true, pathRewrite: { // 重命名

2020-10-22 11:38:16 1876

原创 vue-cli4.0 配置代理

文件config里面的index.js配置proxyTable: { '/api': { target: 'http://182.92.196.41:4999/api', //目标接口域名 changeOrigin: true, // 允许websockets跨域(是否跨域) //secure: false,// 如果是https接口，需要配置这个参数 ws: true, pathRewrite: { // 如果接口本身没有/api需要通过pathRe.

2020-10-22 11:08:32 1535

原创箭头函数的注意事项

箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。...

2020-10-21 14:16:03 566