DeShui?-优快云博客

原创 ifram 优点、缺点

优点可以跨域请求其他网站，并将网站完整展示出来典型系统结构可以提高代码的复用性创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象模块分离，若多个页面引用同一个iframe，则便于修改操作实现广告展示的一个解决方案若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面缺点iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。加载了新页面，增加了css与js文件的请求，即额外增加

2021-06-15 19:03:28 188

原创项目中如何修改element-ui的默认样式（去除scoped,样式穿透＞＞＞ , less/sass : /deep/）

elementui默认样式修改的几种方法elementui默认样式修改的问题当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式：1 在样式外新增一个样式不添加scoped<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 15px;/* 这个样式起效果 */ }</style>&l

2021-06-10 21:31:26 318

原创 elemeng-ui 中el-form 表单如何校验

在开始之前需要把element-ui在vue中引入好，如果没有引入好的话，需要先跟着element-ui的文档进行操作，接下来就可以进行学习了。第一种：在el-form-item单个添加验证这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；做法：需要在el-form-item标签中加入 :rules=''直接是验证的条件 ''下面举个例子（验证用户名不能为空）<el-form-item label="用户名" :prop="userName" :rul..

2021-06-07 18:49:25 893 2

原创 vue打包上线流程，ngnix服务器配置（路由history模式白屏如何处理）

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base 1 2 // base: '/hist

2021-06-07 18:47:09 199

原创 vue-router 导航守卫

正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。...

2021-06-04 10:04:37 527

原创 vue-router 鉴权

登录成功后做本地存储与store存储，并进行跳转。1、Login.vue关键代码async handleLogin(e) { e.preventDefault() let parmas = { username: this.model.username, password: this.model.password } const res = await this.$http.get('/api/login', params) const {

2021-06-04 09:51:31 516

原创 webpack打包优化

性能优化的路没有穷尽，只有更快。打开页面越快越好，点击响应越快越好。在当今这个以快为主的时代，快才是王道。闲话扯完，说正事！！！该优化方案以最近做的一个hybrid webapp为实例演示。路由懒加载（1）vue-router文件中的router使用懒加载方式。如下图所示（2）在vue文件中，也采用类似方式引入其他vue组件const showImage =()=>import('@/components/common/showImage');这个优化的方式在vu...

2021-06-04 09:37:23 208

原创 vant-ui 按需引入

脚手架推荐使用 Vue 官方提供的脚手架Vue Cli 3创建项目# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目我想要在D:\WWW下创建siliao项目vue create siliao# 之后需要进入siliao目录进行插件组件安装操作cd siliao安装# 通过 npm 安装npm i vant -S引入组件采用官方推荐按需引入组件(未使用Typescript)babel-plugin-import是一款...

2021-06-03 19:15:46 129

原创 axios拦截，api统一管理

1、项目路径下，引入axios、qs依赖npm install axiosnpm install qs2、在项目的src路径下新建一个commJs文件夹，在commJs文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里request.jsimport axios from 'axios';import QS from 'qs';//自动切换环境axios.defaults.baseURL = process.

2021-06-03 17:18:22 184

转载 vue 项目的开发流程

1.$ node -v (检测node版本，node版本需要在 V4 以上)2.全局安装vue $ npm install -g vue3.安装脚手架 $ npm install -g vue-cli4.运行 vue 命令，看是否已安装完毕 $ vue / $ vue list (查看可安装的模板)5.安装模板 $ vue init webpack(模板) sell(项目名称)6.? Project namesell　? Project descriptionsell app..

2021-06-02 20:49:39 99

原创 vue项目开发流程(简述)

1.$ node -v (检测node版本，node版本需要在 V4 以上)2.全局安装vue $ npm install -g vue3.安装脚手架 $ npm install -g vue-cli4.运行 vue 命令，看是否已安装完毕 $ vue / $ vue list (查看可安装的模板)5.安装模板 $ vue init webpack(模板) sell(项目名称)6.? Project namesell　? Project descriptionsell app..

2021-06-02 20:45:21 644

原创项目开发流程（简述）

开发背景系统分析需求分析可行性分析编写项目计划书系统设计系统目标系统功能结构系统流程图开发环境文件夹组织结构搭建lamp环境数据库设计数据库分析数据库概念设计使用PowerDesigner建模创建数据库及数据表开发网站前台开发后台开发网站测试发布网站...

2021-06-02 20:42:53 10620

原创 vue多环境变量配置

vuecli3.0搭建的vue项目。配置多个环境变量新建两个或多个文件，和package.json同级；例如：.env.dev，.env.prod截图文件内容：.env.dev.env.prod在网络请求的地方设置接口环境，也可以在页面中输出console.log(process.env.VUE_APP_API_URL);请求文件最后在package.json中配置：配置打包命令：npm run build:...

2021-06-02 20:33:46 239

原创 transition

transition属性在CSS过渡中是比较常用的，本文将带你深入理解transition属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上transition的实例，希望能够对你有所帮助。transition定义和用法transition：[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]默认值：看每个独立属性适...

2021-06-01 20:14:21 147

原创 keep-alive

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现我这里利用脚手架创建项目后会生成home和about两个组件，并且通过路由进行切换home组件我在home组件中写了一个input输入框about组件同样的about组件也放了一个输入框当我们在home组件的输入框输入一些内...

2021-06-01 19:00:19 83

原创什么是闭包？

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。词法作用域请看下面的代码：<span style="color:#212121"><span style="background-color:#ffffff"...

2021-05-30 19:35:42 437

原创 var与let、const的区别

一、var声明的变量会挂载在window上，而let和const声明的变量不会：var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefined二、var声明变量存在变量提升，let和const不存在变量提升cons...

2021-05-30 19:32:34 64

原创事件委托(事件代理)

概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收

2021-05-30 18:45:20 178

原创作用域、作用域链、自由变量、变量提升

作用域(Scope)1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例子：function outFun2() { var inVariable = "内层变量2";}outFun2();//要先执行这个函数，否则根本不知道里面是啥console.log(inVariable); // Uncaught ReferenceError: inVariabl

2021-05-27 20:32:58 124

原创 JS this指向总结

js中this指向问题一直是个坑，之前一直是懵懵懂懂的，大概知道一点，但一直不知道各种情况下指向有什么区别，今天亲自动手测试了下this的指向。1.在对象中的this对象中的this指向我们创建的对象，例如：...

2021-05-27 19:57:08 151

原创 js中的new()到底做了些什么？？

要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；(3) 执行构造函数中的代码（为这个新对象添加属性）；(4) 返回新对象。new 操作符在有上面的基础概念的介绍之后，在加上new操作符，我们就能完成传统面向对象的class + new的方式创建对象，在JavaScript中，我们将这类方式成为Pseudoclassical.

2021-05-27 19:51:09 104

原创原型、原型链

javascript原型与原型链每个函数都有一个prototype属性，被称为显示原型每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 每个prototype原型都有一个constructor（啃死抓个特）属性，指向它关联的构造函数。原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原

2021-05-27 07:41:06 42

转载 call/apply/bind

1.callcall，apply，bind都是改变this指向的方法fn.call当前实例（函数fn）通过原型链的查找机制，找到function.prototype上的call方法，function call（）{[native code]}fn.call（）把找到的call方法执行，当call方法执行的时候，内部处理了一些事情首先把要操作的函数中的this关键字变为call的方法第一个传递到实参把call方法第二个以及之后的实参获取到把要操作的函数执行，并把第二个以后传递进

2021-05-26 19:18:30 58

原创 argument

归纳起来，Python中函数的定义形式和调用形式主要有如下几种形式：#函数的定义形式def func(name) #匹配positional参数或者keyword参数def func(name=value) #如果不传，有默认参数def func(*name) #将额外的positional参数转换成一个tuple，然后赋给namedef func(**name) #将额外的keyword参数转换成一个dictionary，然后赋给namedef func(*other, name)

2021-05-25 20:38:57 46

原创数据类型判断

准确判断数据类型的三种方法JavaScript中的数据类型判断一般都是使用的typeof操作符，但是这个操作符存在的问题就是他不能对Object和Array，这两种数据类型进行准确的判断，并且对于null由于历史遗留性的问题，他也会判断成为Object类型，所以在typeof操作符中只有6种数据类型了，但是实际上JavaScript中是有8种数据类型的。所以这时候就需要能够准确的判断的数据类型的方法。这样子的方法总共有三种分别是Object.prototype.toString.c

2021-05-24 21:12:28 77

原创 js数据类型

数据类型：js数据类型分为两种：基本数据类型和引用数据类型基本数据类型：Number（数值型），string（字符串型），Boolean（布尔型），Null（空），undefined（undefined），symbol（es6）。这些类型可以直接操作保存在变量中的实际值引用数据类型：object（在js中除了基本数据类型意外都是对象，数据是对象，函数是对象，正则表达式是对象）1.基本数据类型基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，他们是直接按值存放

2021-05-24 19:48:15 74

原创深拷贝（什么是深拷贝，为什么要进行深拷贝，如何进行深拷贝）

什么是深拷贝，浅拷贝深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。1.浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象只是对原对象的一个引用2.深拷贝：创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”那么怎么实现一个深拷贝呢？实现思路：检查类型，判断类型是否为引用类型，是就进行深拷贝，否则浅拷贝使用递归检查环，判断当前引用是否指向自身，避免进入死循环需要忽略原型fu.

2021-05-23 21:04:41 4158

原创 vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)、）

vue-router的两种模式URL的hashURL的hash是通过锚点（#），本质上是改变window.location的href属性。可以通过直接赋值location.hash来改变href，但是页面并不会发生刷新。可以通过改变hash改变url，此时页面是未刷新的。 vue-router其实用的就是这样的机制，改变url地址，这个url地址存在一份路由映射表里面，比如/user代表要请求用户页面，只要配置了这个路由表（路由关系），就可以前端跳转而不刷新页面，所有的数据请求都走ajax

2021-05-23 20:58:14 307

原创 vuex

vuex的五大核心1、state 所有的数据都存储在state中 state是一个对象2、mutations 可以直接操作state中的数据3、actions 只能调用mutations的方法4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作5、modules 将仓库分模块存储vuex是什么？vuex是为Vue提供的一种采用集中式状态管理模式机制。借鉴了 Flux (opens new window)、Redux (opens new window.

2021-05-23 18:53:28 64

原创 Vue生命周期函数

1.创建 beforeCreate createdbeforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用created() 最早开始使用 data和methods中数据的钩子函数2.挂载 beforeMount mountedbeforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数3.更新 beforeUpdate updated before

2021-05-20 21:07:49 48

原创 Vue组件通信

父传递子如何传递（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: ["属性名"] props:{属性名:数据类型}父组件代码：<template> <div id="container"> {{msg}} </div></template><script>expor

2021-05-19 19:42:01 54

原创 uni-app开发 (Promise封装)

1，创建文件夹在根目录里创建request文件夹在request文件夹里面创建request.js文件2，封装promise在promise.js文件中写入 const baseUrl='http://api.intewl.cn/api'//共有路径export const myRequest = (url,method,data) => { return new Promise((resolve, reject) => { uni.showLoading({

2021-05-19 07:44:35 124

原创优购商城项目分析

1，首先我们先来看一下商城的首页首先是一个搜索框接下来是一个轮播图是通过线上接口获取的数据： <swiper autoplay="true" indicator-dots="true" interval="2000" circular="true"> <swiper-item wx:for="{{swiperList}}"> <image class="img" src="{{item.image_src}}"></ima

2021-05-17 21:12:46 306

原创小程序发布流程

发布流程，大概分三个大步骤：上传代码提交审核发布版本注意：发布之前，配置服务器域名白名单1、上传代码在代码编写完毕后，在他顶部的导航条上找到【上传】输入版本号，项目备注,点击上传上传成后，的提示到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网:https://mp.weixin.qq.com2.1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填写小程序基本资料

2021-05-17 11:26:43 117

原创小程序支付流程

点击支付的时候需要：1.判断鉴权 2.获取到本地存储中的tonken 如果有的话就证明登录过了如果没有的话就木登录就去登录页面 var token = wx.getStorageSync('token') //获取本地存储的token console.log(token); var zon=this.data.zon console.log(zon); if (!token) { //没有token值就让他去登录 wx.navigateTo({

2021-05-16 23:10:31 86

原创小程序授权登陆流程

1.获取code微信获取code的方式很简单，直接使用wx.login命令就可以返回code值。2.将code传递给后台然后就需要将获取到的code传递到后台使用request来传递数据，这里的地址是我随便写的，8080后面的?code=+code是代表要传递的值，这个code就是我们在第一步获取到的code，当调用成功后在success中就可以返回一个值，注意request中method方法默认为GET，在这里我改为post方法了。3.后台返回数据，通过数据判断当前用户..

2021-05-16 23:07:04 114

原创小程序获取收货地址流程

小程序获取收货地址开发流程小程序使用API：wx.chooseAddress获取微信地址，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址流程1、获取用户对小程序是否授予获取地址的权限即scope。只用用户确认允许授权才能获取微信地址wx.getSetting({ success:(result)=>{ console.log(result); //用户点击确定授权时：authSetting 的scope.address为 true； //用户点击取消

2021-05-16 23:01:45 107

原创小程序如何写收藏、分享、客服功能

分享步骤小程序的button按钮有open-type属性，里面有一个share值，触发用户转发客服步骤小程序的button按钮有open-type属性，里面有一个contact值，打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息收藏步骤首先需要两个不同颜色的收藏icon-font图标，来显示是否加入收藏，然后声明一个变量来判断状态true或者false然后给收藏一个点击事件，获取本地存储中的商品收藏数组shouc(){

2021-05-16 22:57:21 68

原创小程序下拉刷新，上拉加载更多

下拉刷新"enablePullDownRefresh": true, "backgroundTextStyle":"dark",上拉加载更多思路：在下拉到页面的时候我们可以进行数据请求，请求到在上次加载完毕的后五条数据（举个例子），通过page(页码)，count(加载数据得条数)与start进行联接，我们可以发现：start:(page-1)*count,但是我们会发现一个问题：通过这种方法我们只能在前面获取数据的基础上获取到之后的五条数据，并没有起到上拉加载更多数据的作用，

2021-05-13 21:00:28 115

原创如何使用Promise封装wx.request()

Promise解决异步+回调地狱重新再一次封装wx.request，这里封装没用reject，而是用了resolve()，个人觉得比较方便好用。utils/request.jsconst API_URL = 'https://www.xxx.cn'; //服务器api地址function wxPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { .

2021-05-13 20:51:37 121

空空如也

空空如也