- 博客(61)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端使用xlsx导出
引入工具外部链接1、 在html页面中引入https://unpkg.com/xlsx/dist/xlsx.full.min.js外部链接2，新建一个文件定义一个方法export const exportTable = (cloum,data,name)=>{ cloum//是表头 data//是数据 name//是文件名称 const sheet2blob = (sheet, sheetName)=> { sheetName = sheetName || 'sh
2021-10-19 10:47:03
682
原创 webpack和less-loader版本冲突问题报错Rule can only have one resource source
开始启动项目提示了没有less-loader的报错然后:npm install less-loader启动项目报错：然后上网查了下是webpack的版本问题，参考链接然乎执行卸载wenpack：npm uninstall webpack接着安装指定版本的webpack：npm install [email protected] --save-dev然后安装没成功就是第二个报错：感觉这个像是因为安装的webpack版本和less-loader的版本冲突了所以又执行了卸载less-loader： n
2021-07-31 15:18:51
2299
原创 iview使用过程中常见的一些问题（持续更新）
vscode编辑器打开iview代码报红 解决方法在package.json文件中加入以下代码"rules": { "vue/no-parsing-error": [ 2, { "x-invalid-end-tag": false } ], "no-console": "off" },iview tabs标签页嵌套出现异常Tabs加name TabPane加tab name和tab要
2021-02-05 11:45:14
404
原创 vue封装回到顶部
vue封装回到顶部home.vue<template> <div> <p v-for="(item, index) in 200" :key="index">{{ item }}</p> <Gotop @Gotop="click_gotop"></Gotop> </div></template><script>import Gotop from "../compon
2020-10-24 14:45:26
253
原创 vue相关知识点
vue面试总结1、vue的生命周期breforCreate()——创建前在vue被创建前el和data都没有被初始化，没有methods,data,computed等方法created()——创建后在vue被创建后，这里可以调用methods方法来改变data的值，获取computed，写一些异步的网络请求，因为这个时候data已经通过了Object.defineProperty的方法劫持和添加观察者模式，数据已经能够支持双线数据绑定了，created会在munted前执行，所以同样的请求时间的话
2020-10-24 14:44:48
124
原创 处理“start value has mixed support, consider using flex-start instead”编译警告
这个问题呢其实很简单，你先这样，再这样，再那样 然后再这样，最后就是这样了 吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼康康 你的 display:flex它的justify-content:start改为 space-between敢敢单单！
2020-10-15 18:20:52
1430
原创 vue封装回到顶部
vue封装回到顶部home.vue<template> <div> <p v-for="(item, index) in 200" :key="index">{{ item }}</p> <Gotop @Gotop="click_gotop"></Gotop> </div></template><script>import Gotop from "../compon
2020-09-29 21:44:28
176
原创 vue中封装全局组件方法
vue项目中全局注册js文件 js文件便捷添加样式vue项目中全局注册js文件首先是创建一个js文件叫Toast.jsexport const Toast = { Toast1: () => { var p = document.createElement("div") p.innerHTML = "11" //调用下面的style方法 style(p, { 'color': 'red', 'border': '1px solid
2020-09-28 22:51:51
838
原创 vue封装弹框
vue弹出框的封装和点击弹出框外部的事件触发封装主要利用vue之间的组件通信Home.vue 父组件<template> <div> <div class="box_popup"> <div class="popup_title">弹出框</div> <button @click="tan">点击弹出弹出层</button> <!-- title
2020-09-25 00:03:55
244
原创 微信小程序实现todolist
微信小程序复习第二天自己实现一个todolist的效果，首先是wxml页面布局<!--pages/home/home.wxml--><view> <view class="box_top">TODOLIST</view> <view class="box_center"> <input value="{{value}}" bindinput="changevalue" class="todolist_input"><
2020-09-23 21:14:30
1944
原创 微信小程序实现购物车，底部导航栏的配置，微信小程序实现路由跳转
微信小程序复习第一天微信小程序实现购物车首先是微信静态的页面<!--购物车页面--><view> <!-- 空状态 --> <van-empty description="购物车空空如也~" wx:if="{{cartList.length <= 0 ? !isShow :isShow}}" image="/assets/catr_details.png"> <van-button type="danger" class="bot
2020-09-22 22:01:03
1311
原创 手机H5支付流程概述
手机H5支付流程概述昨天写了一个手机微信小程序的支付流程，今天自己参考了微信小程序官方文档，找到了浏览器支付调用微信支付的方法以及支付过程，还是老样子，先来看看这个思维导图，理解了昨天的那个，今天这个也就看起来比较简单明了了，还是逐步分析1，请求下单（） 这一步是由用户在浏览器通过点击支付按钮调起来的，这一步之后会在商户的后台**保存这个订单 **2，调微信支付接口下单（） 这一步是由商户的后台来直接请求微信支付后台的，这时候微信支付后台会返回给商户后台跳转的URL商户后台收到后来返回给前端
2020-09-21 21:46:18
366
1
原创 微信小程序支付流程
微信小程序支付流程其实实现微信小程序的支付的话与微信小程序的登录有异曲同工之妙，都是客户端，与服务器和微信后台进行的交互来实现的，微信小程序的支付接口需要配置微信小程序后台的配置，这个配置是需要开发者进行商户认证的，个人是不能调用这个接口的，下图就是微信小程序需要用到的一些接口和数据准备工作做好后先来简单了解一下微信小程序的支付流程，它如何实现前后端与微信服务端进行处理的，下图是微信小程序的支付流程详解：根据这个图的话可以看到一个与小程序登录十分相似的关系图，看起来十分的复杂，让我们慢慢捋一遍这个
2020-09-20 22:08:59
644
原创 css的样式优先级，哪些情况可触发reflow，哪些方法可以用作javascript异步模式的编程？，谷歌浏览器如何显示12px下的字号
css的样式优先级<style>.main{color:blue}span{color:green}</style><div style="color:red !important"class=""main""><span>123</span></div>问题：123的颜色是！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承在这道题目：对于
2020-09-18 22:03:24
474
原创 Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C:\Users\22725\Desktop\对对对.gif)]问题描述 如图所示解决的方法也是自己在网上误打误撞找到了首先是 给el-menu定义一个class样式 <el-aside width="initial" class="home_aside"> <el-menu
2020-09-16 20:26:50
943
原创 新建文本文档 (2)
$refs中设置style时style时undefind问题由于vue特殊的生命周期机制，在vue的生命周期中 ，created不能够来拿到DOM元素，所以，this.$refs.xxx就不能取到，这个时候就需要在mounted中去设置style不能再created之前vue 官网中ref 下有一段话 “关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。”也
2020-09-15 22:06:39
890
原创 element ui中自定义选择器，this.$nextTick理解和用法
element ui中自定义选择器 怎么拿到自定的value和lable请选择分类： <el-cascader v-model="value" :props="props" :options="options" @change="handleChange"></el-cascader> //value绑定的是选择后的值 //props因为我们要用到自己的数据，二三级的数据需要进行匹配这里就是对渲染的数据进行重新定义了
2020-09-14 21:31:58
2236
原创 css中的BFC
css中的BFCBFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 4、overflow
2020-09-11 21:56:52
376
原创 element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证element UI提供了一种内部的表单验证，但是这种方法不能够来进行复杂的验证，如邮箱，手机号等的验证需要用到自定义验证首先是element UI 提供的基础表单验证 <el-form ref="addUserForm" :label-position="labelPosition" label-width="70px" :model="formLabelAlign
2020-09-09 21:48:34
5808
原创 lodash实现防抖节流，图片懒加载
net::ERR_CONNECTION_TIMED_OUT这个问题是因为，断开网络后，又继续开始vue服务时提示的报错，关闭项目服务,重新启动项目就可以了。。。。lodash实现防抖节流1，安装lodashcnpm i lodash -S第二步引入main.js中import _ from 'lodash'Vue.prototype._ = _第三步页面中引入import _ from "lodash";第四步运用方法searchUsers: _.debounce(functio
2020-09-08 23:38:12
646
原创 Mosk数据，vue后台登录的实现
Mock数据：模拟数据mockjs官网：http://mockjs.com/mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started第一步 安装mockjsnpm install mockjs第二步 创建一个mock目录生成mock数据course.jsimport Mock from "mockjs";//mock课程数据var result=Mock.mock({ code: 200, msg: "操作成
2020-09-07 23:27:42
352
原创 VUE项目总结
VUE项目总结这个每时每课的项目，用了有一个星期左右来完成的，包括了页面的布局还有功能的实现整体来说，自己功能还是有点欠缺的，不完善的功能自己下去还有继续完善以下，现在就对这个项目进行总结。首先这个项目是一个在线教育的项目类型，主要做的还是在线视频回放生成的一些效果，包括了搜索，关注，收藏，刷题的功能，自己功能未完善的也就是刷题后的解析页面，做项目时问题是必不可免的，在这个项目中自己主要遇到的问题就是刷题后的提交刷题信息到服务器时会出现一个问题----参数传参不正确，因为在要求的参数中传递的是一个数组
2020-09-04 23:02:24
873
1
原创 js原型链的理解
原型链什么是原型链每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找… 这个操作被委托在整个原型链上，这个就是我们说的原型链了接下来看一张图就会清晰一点一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。function Person(age) { t
2020-09-03 23:07:22
87
原创 闭包的理解
闭包其实我们可以这样理解，首先闭包是一个匿名函数，现在我们将它赋予了一个变量，那么他就有名字了，那么他每次执行完以后就有地方存了。但是每个变量存的地方又不一样，他们相互不关联，所以他们就是独立的个体了，所以a的值就不同了。就当是执行了不同的函数，只是恰好函数体是一样的罢了。优点：长期驻扎内存方便使用，可以隔离作用域，避免全局污染缺点：因为长期驻扎内存所以内存堆满了就会泄露出去特点：长期驻扎内存闭包的构成：闭包=函数+词法作用域（即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的
2020-09-02 23:24:21
170
原创 路由拦截，vuex数据持久化，vant样式穿透
路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta:
2020-09-01 23:26:56
267
原创 call apply bind , new的原理 ，防抖和节流
call appply bind：首先呢他们都是用来改变this指向的，但是他们也有区别区别： 1，传参不同：call通过“,”分隔的形式传递参数，前面是函数名 例：函数名.call(目标对象，参数一，参数二) apply参数使用数组进行传参 例：函数名.apply(目标对象，参数一，参数二) bind传参“,”分隔开，因为bind返回的是一个函数所以调用要加上括号 例：函数名.bind(目标对象，参数一，参数二)（） 2，函数是否执行：首先呢c
2020-08-31 21:39:35
154
原创 vant进度条框架报错,百家云移动端h5点播SDK, 二维码分享
vant进度条框架报错错误信息：Invalid prop: type check failed for prop “percentage”. Expected Number,网上查找问题原因：1，因为vant进度条中的percentage是设置百分比的，所以他不可以大于100，把这个percentage这个设置为小于100的就可以了，我设了这种方法，但是貌似不太管用，所以我就去查了第二个方法2，因为没渲染你就获取数据，所以出现的报错，加上v-if就可以了 <van-progress v-if
2020-08-28 21:02:53
634
1
原创 vue项目切换用户头像的写法
vue项目切换用户头像的写法vue程序的头像的切换，今天别人给我讲了下我今天来试了一下还不错，进行总结首先是找清楚需要用的接口1，https://www.365msmk.com/api/app/public/img向服务器上传图片2，https://www.365msmk.com/api/app/user 把服务器图片上传到头像就这两个就行了接下来就是步骤的实现主要用到的其实是表单输入中的file<template> <div id="app"> <
2020-08-27 23:16:20
758
原创 vue组件递归
vue组件递归组件递归的话可以用来做一些后台管理系统的导航列表页面 可以用于多级导航的布局，十分简单首先是一个Tree组件的话tree.vue<template> <div> <div :style="indent"> {{title}} </div> </div></template><script>export default { name: "Tr
2020-08-26 21:06:22
291
原创 新建文本文档 (2)
put请求传递参数的方式今天项目中提交用户信息修改的时候调用了接口传递了接口但是接口返回错误信息，因为put的话，它的传参方式需要将参数设置为字符串的形式来进行传递，自己上网查了一下才解决使用put和delete请求，直接指定 ajax 请求中的 type 为 put/delete(不带 _method 参数)，并且需要传递参数的时候data需要设置为json字符串var jsonstr = {"id":1,"name":"zsw"};$.ajax({ url:"/update",
2020-08-24 23:11:13
929
原创 vue项目问题
vue路由传值vue的路由传值有两种方式paramsthis.$router.push({ path:"/地址", params:{ 参数名:"参数值" }})接受this.$route.params."参数值"params的话传参刷新页面数据会消失不会保存querythis.$router.push({ path:"/地址", params:{ 参数名:"参数值" }})接受this.$route.query."参数值"query的话
2020-08-23 22:24:22
154
原创 vue的传值
vue的传值：1.父传子：在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收// 父组件<select-list :dataList="dataArr" @parentReceive="changeVal"/> // 子组件props: ['dataList'] 123452.子传父：在子组件中定义一个方法，然后在方法里面通过this.emit进行传递(emit进行传递(emit进行传递(emit有两个参数(自定义事件名
2020-08-21 23:25:10
79
原创 vue全局过滤器，vue父组件如何向子组件传递布尔值，vue父组件调用子组件方法，setInterval
vue全局过滤器的使用首先是在src目录下新建filters文件，文件里面是index.jsexport function price(num){ if(num==0){ return num ="免费" }else{ var a = num/100 return a.toFixed(2) }}配置main.js文件//先引入import * as filters from './filters'//再配置Objec
2020-08-20 22:15:13
4318
原创 vueaxios请求封装，vue过滤器和moment日期库的使用，vue组件传值，vue中利用组件方式使用SVG，vue中底部导航栏router-link样式的修改
axios请求接口封装首先是三个文件request.js，api.js和env.js文件request.js：//引入axiosimport axios from "axios"//设置专属域名const vipUrl = "/api/app/"//设置公共域名const env = require("../http/env")const Url = env.default.prod.baseUrl//创建一个axios请求const service = axios.create({
2020-08-19 23:31:30
207
1
原创 vue框架的搭建
vue框架的搭建1，安装脚手架vue install -g @vue/cli注意：安装脚手架报错时，错误代码-4058可以用以下方法解决1，配置淘宝镜像npm config set registry https://registry.npm.taobao.org2，npm info underscore （如果上面配置正确这个命令会有字符串response）3，npm --registry https://registry.npm.taobao.org info underscore最后继
2020-08-18 21:21:11
133
原创 新建文本文档 (2)
webpack手动搭建环境1,什么是webpack本质上，，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某
2020-08-17 23:07:50
667
原创 微信小程序项目总结（微信小程序传参方法，微信小程序三级联动，项目总结）
小程序学习笔记1，微信小程序的传参方法// 或者在wx.js里用wx.navigateToxi//页面跳转传参wx.navigateTo({ url: '/pages/detail/detail?productId=12345'})如果传参的话参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象let info = { a:2, b:3}let infoStr = JSON.stringfy(info);wx.
2020-08-15 21:11:13
529
原创 JS学习笔记
微信小程序学习笔记1，简单介绍下 js这个是今天早上在在听面试题的时候遇到的 感觉听了听被面试者的回答 我感觉还不够好于是自己就在网上查了一下JavaScript一种直译式脚本语言是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。组成部分javascript组成一个完整的 JavaScript 实现是由以下
2020-08-15 00:23:24
100
原创 微信小程序学习笔记（动态绑定样式，双层循环item重名，页面跳转，async/await的再次学习）
微信小程序学习笔记1，微信小程序动态绑定style样式和class今天在做项目时遇到了一个关于切换导航 切换样式的问题，自己是想用style和class动态绑定来完成 但是自己一时又记不起来怎么写了 于是上网上 查了查资料 现在来进行总结首先是遍历导航按钮的每一项并赋予index第二步是通过点击导航按钮来更改保存在data中的selectIndex通过在标签中的class样式<button class="{{ index===currentIndex? 'active':'' }}" >
2020-08-13 23:32:49
921
原创 微信小程序学习总结（async，await）
微信小程序学习总结（async，await）1，async，await和promise首先是async和await，async和await是async和await两部分组成，async是异步的意思，而await是async wait的简写，所以async用于声名function是一个异步的，await用于等待异步方法执行async:async是加在一个function之前的，它的作用是将function变为异步的操作，而这个异步操作的返回值是一个promise对象 async f
2020-08-13 01:30:48
5509
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人