- 博客(55)
- 收藏
- 关注
RSS订阅原创 React路由+1
React路由-执行过程切换页面时，执行过程如下：点击 Link 组件（a标签），修改了浏览器地址栏中的 url React 路由监听到地址栏 url 的变化 hashchange popstate React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配 当路由规则（path）能够匹配地址栏中的 pathname（hash） 时，就展示该 Route 组件的内容默认情况下,可以同事匹配多个路由,只要匹配成功,该路由组件对应的内容就会渲
2022-05-05 21:34:23
248
1
原创 React路由
v6版本与v5版本相比 v6有破坏性更新这里用的是v5选相关的版本1.安装使用 yarn add react-router-dom@5.3.0=2.导入Router / Route / Link3.Router包裹整个组件4.Link作为路由的入口5.Route 组件配置路由的规则和要展示的组件(出口)import { BrowserRouter as Router, Route, Link } from 'react-router-dom'const First = ()
2022-05-04 21:18:36
470
原创 Redux 中间件
为什么要用中间件默认情况下redex只能处理同步数据流,实际开发的话通常用的都是异步的操作Redux中间件的作用处理有副作用(side effect)功能,可以处理一个功能的中间环节Redux中间件的优势可以串联 组合 在一个项目中使用多个中间件Redux 中间件用来处理 状态 更新，也就是在 状态 更新的过程中，执行一系列的相应操作使用:中间件：store.dispatch()就是中间件封装处理后的 dispatch，但是，最终一定会调用 Redux 自己的 dispatch.
2022-05-03 21:37:23
380
原创 React-Redux
为什么要用React-Redux绑定库react和redux是两个独立的库,为实现在 React 中使用 Redux 进行状态管理,就要用到React-Redux绑定库怎么是用1.先安装yarn add react-redux2.导入Provider 组件3.导入创建好的redux仓库4.用Provider包裹整个应用5.配置store 导入Provider的store属性值获取状态使用useSelector获取redux中共享的状态import { useSe
2022-05-02 21:52:21
363
原创 hooks知识点积累
hooks 解释=>钩子,钩住,钓钩,是React v16.8 新增的功能hooks 作用=>①为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能②可以理解为通过 Hooks 为函数组件钩入 class 组件的特性③注意：Hooks 只能在函数组件中使用React v16.8 版本前后，组件开发模式的对比：React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容) React v16.8 及其以后： cl
2022-04-27 21:30:56
326
1
原创 React学习三
生命周期什么是声明周期,一个事物从创建到消亡经历的整个过程react类组件的生命周期只有类组件才有生命周期，分为 挂载阶段 更新阶段 卸载阶段生命周期-挂载阶段执行顺序为==>①constructor(创建组件时，最先执行)==>1. 初始化state2. 创建 Ref3. 使用 bind 解决 this 指向问题等②render(每次组件渲染都会触发)==>渲染UI③componentDidMount(组件挂载==完成DOM渲染后)==
2022-04-26 21:57:01
222
原创 React学习
类组件-受控组件了解什么是受控组件表单元素的值被React中的state管控,这个表单就是受控的组件怎么绑定表单元素如何绑定表单元素，如：input:text input:checkbox ;value等import { Component } from 'react';class App extends Component { state = { mobile: '13811112222', isAgree: true, }; changeMob
2022-04-25 21:21:54
317
原创 React学习一
React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能。react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用react特点①声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。 以声明式编写 UI，可以让你的代码更加可靠，且方便调试②组件化创建拥有各自状态的组件，再由这些组件
2022-04-23 21:06:56
1321
原创 小程序知识点积累
uniiapp微信支付的一些相关信息 methods:{ //定义好点击下单的事件 async startPay(){ //结构并且发送支付的请求 let {pay_data} = await uni.$axios.request({ url:'xxxxxxxxx',//地址 method:'get',//方式 data:{ orderId:this.query.id//传入相关的id } }) //发送
2022-04-22 22:00:57
256
原创 小程序 关于分包
1.什么是分包分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,构建的时候打包城不同的分包,按需加载2.分包的好处①可以减少小程序首次启动的下载时间②可以多人开发中更好的解耦协作3.分包前后的项目构成①分包前,小程序中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序的首次启动的时间②分包后,小程序有一个主包外加多个分包组成:主包:一般只包含项目的启页,或tabBar页面,以及所有分包都需要用到的公共资源,分包:只...
2022-04-21 21:15:15
4592
原创 微信小程序基础
自定义TabBar自定义的情况下需要三个步骤1.配置信息在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充好所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局声明确保低版本兼容以及区分哪些页面是 tab 页， tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染此时需要开发...
2022-04-19 20:54:46
201
原创 微信开发者工具
组件样式组件样式隔离性默认情况下，自定义组件的样式只对当前组件有效，不会影响组件之外的UI结构好处 防止外界的样式影响组件内部的样式防止组件的样式破坏外界的组件样式隔离的注意点app.wxss中全局样式对组件无效只有class选择器才有样式隔离效果，id选择器，属性选择器、标签选择器不受样式隔离的影响建议:在组件和引用组件的页面中建议使用class选择器,不要使用id.属性.标签选择器修改组件样式隔离选项默认情况下，自定义的样式隔离...
2022-04-18 20:37:27
617
原创 微信小程序基础
怎么进行数据绑定在data对象中定义数据在 wxml 中使用数据 插值表达是的方式进行数据的渲染 {{变量}}动态绑定属性定义数据Page({ data:{ // 图片变量 imgSrc: 'https://www.xxxx.com.png' }})页面中使用<view> <!--渲染图片--> <image src="{{ imgSrc }}" mode="aspectFit">
2022-04-17 21:23:42
59
原创 微信小程序
什么是小程序小程序是一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也 实现了用完即走的理念小程序的特点：体积小、方便获取和传播小程序的理念：用完即走与普通网页开发的区别行环境不同： 网页运行在浏览器环境中, 小程序运行在wx环境中提供的API不同：小程序中，无法调用 DOM 和 BOM 的 API， 可以调用微信环境提供的各种组件、API小程序开发流程注册小程序 在微信公众平台注册小程序，完成注册后可以同步进
2022-04-16 21:50:48
373
原创 Vue知识点积累
接之前的权限管理发现刷新和点击别的组件的时候有的会出404(没权限的时候)页面,可以使用路由重置的方法进行重置,// 重置路由export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // 重新设置路由的可匹配路径}然后调用//引入import { resetRouter } from '@/router'//对应的方法中调用
2022-04-07 20:55:19
675
原创 后台管理权限中的路由跳转的思路
思路一： 登录之后，后端根据该用户的角色查询当该用户的权限信息，这些权限信息包含的标识是和本地完整的动态路由的name是有匹配关系的。我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由，然后通过router.addRoutes方法，直接添加到路由实例中去import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 导入组件import login from '@/views/l
2022-04-06 21:58:45
1027
原创 Vue后台项目中权限管理
传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限RBAC的权限模型 基于角色的权限分配来解决,有中间层的角色 ,可以让权限管理进行多元化的处理RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可一个用户可以有多个角色创建角色的窗体<template>
2022-04-04 21:57:36
1405
原创 Vue项目之上传图片
要实现点击上传后上传图片资源到第三方服务器上利用element组件 随便搞一个上传框 和创建一个vue文件 准备一张图片 另外有第三方服务器的地址id k 这里用的是腾讯云的cos对象存储桶 第一步安装JavaScript SDKnpm i cos-js-sdk-v5 --save第二步创建文件切准备好上传的基础属性<template> <div> <!-- el-upload 组件 该组件内部会自己使用原生的xhr进行请求的发送-...
2022-04-03 22:34:46
2704
原创 Vue知识点积累
element-ui表单验证的三要素：①el-form要有model属性：要有rule属性用于校验规则 和：ref属性②el-form-item需要有prop属性③el-input需要有v-model绑定导入excel表格在数据中体现出来后时间格式不对 methods: { async success({ header, results }) { // 如果是导入员工 const userRelations = { 入职日期: "ti
2022-04-01 22:16:27
328
原创 Vue知识点积累
通用公共组件注册封装好一个组件后,进行注册,放在main.js进行全局注册//main.jsimport XXXX from "@/components";Vue.use(XXXX); // 注册自己的插件然后再components的index.js中import Axxxx from './Axxxx'export default { install(Vue) { // 注册全局的通用栏组件对象 Vue.component('Axxxx', Axxxx)
2022-03-31 22:00:54
230
原创 vue面试题
1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom 操作是非常耗费性能的， 不再
2022-03-31 18:32:16
137
原创 Vue项目知识点积累
目标:公司页面的基本结构个角色管理结构使用element-ui组件实现角色管理与公司信息用tabs标签页组件实现基本一致 引入后稍微修改即可角色管理的内容 添加的按钮 找button外加一个icon图标即可角色管理的列表项的内容用table表格 中的 自定义列模板 与其他的组件一起搭配使用角色管理下面的用Pagination 分页组件实现,方便快捷 注意引入代码的时候<el-pagination layout="prev,pager,next" /...
2022-03-29 21:56:41
309
原创 vue知识点积累
sync修饰符用法// 父组件 sync修饰符<fatherxx :showDialog.sync="showDialog" />// 子组件 update:固定写法 (update:props名称, 值)this.$emit('update:showDialog', false) //触发事件//只要用sync修饰，就可以省略父组件的监听和方法，直接将值赋值给showDialogelement-ui表单的验证 // 定义函数 目的是去找同级目录下
2022-03-28 21:49:27
53
原创 将数组数据转化成树形结构
将数组数据转化成树形结构以便于操作带有层级的下拉选项数据结构观察相对应的结构要将列表型的数据转化成树形数据，需要用到递归算法 思路找树形结构的字段id pid比较合适再发现 没有子节点的pid为空 有子节点的 pid 是父节点的id例如 当id=1 pid=''id=2 pid=1 也就是id=1的下面有子节点,id=3 pid=2 id=2下面有子节点 甚至id=4 pid=2 也就是有节点上重点...
2022-03-26 21:20:06
4595
1
原创 解决开发环境的跨域问题
开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题vue-cli的配置文件即vue.config.js,这里有我们需要的代理选项module.exports = { devServer: { // 代理配置 proxy: { // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制 // local
2022-03-24 21:02:49
337
原创 关于Promise
如何定位声明new Promise(function(resolve, reject){ })想让Promise成功执下去的话要执行resolve,失败执行下去要执行rejectnew Promise(function(resolve, reject) { resolve('success') // 成功执行}).then(result => { alert(result)})new Promise(function(resolve, reject) { .
2022-03-22 19:54:58
341
原创 Vue学习中的知识点积累
this.list = [...results, ...this.list]; // 等同与 this.list.unshift(...results);//很多的场景中 使用 this.list = [...results, ...this.list];的方法会造成添加死循环 //尝试使用 this.list.unshift(...results); 报错立马消失,父子通信的props 如果是一个 数组，我们只要不重新赋值这个props里面的数组，就都不算修改props，而可以实现父..
2022-03-17 20:30:35
857
原创 vue学习日常
知识点的积累$event的小技巧$event是用来接收子组件传过来的值在使用组件的同一个变量需要传递数据有需要修改数据当我们的父组件通过props传递某个数据给子组件，且子组件需要通过自定义事件$emit去修改该数据，也就是父子之间共同操作同一个变量数据，我们可以使用v-model指令传递 props::xxxx名='xxxx.xxxx'修改 自定义事件@xxxxx='xxxx.xxxx=$event'使用v-model简化写法传递:value='xxxx.xxxx.
2022-03-15 21:17:24
221
原创 Vue项目开发知识点
动态路由的映射props: true //动态路径参数的解耦: 将动态路径的参数映射到相对应组件的props属性中配置好路由跳转后将props的值进行调用即可调试一些带有错误的信息是的时候 不方便做一些错误的选择的时候// 手动抛出错误 测试用// if (Math.random() > 0.6) {// throw new Error("错误");// }随机生成一些错误.测试写的出错时的场景async loadArticle () { ...
2022-03-14 20:50:59
881
原创 vue开发搜索框防抖的优化和日常报错,
组件的通信,父传子,监听的事件名写错,报错了 找到组件 找到名字后直接改正确后bug消失防抖优化1-不在使用手搓的写法去实现搜索框的防抖功能实现2-下载 lodash https://lodash.com/docs/4.17.15控制台中使用任意一个命令yarn add lodashnpm i lodash2-采用按需加载的方式, 有利于打包优化.不然引入的是全部的包import { debounce } from "lodash"3-在watch中监...
2022-03-12 20:32:54
1696
原创 学习vue,项目演练的开发,各种问题
遇到的错误根据提示查询后发现是数据没有获取到 vue查询查看自己写的代码的位置, 是否有写错的地方,检查完相关的代码后找到原因,channels这个属性少打了一个s 细心很重要,不然容易出错,更改代码后报错消失,Vant Popup 弹出层弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。引入文件import { Popup } from 'vant';Vue.use(Popup);找到想要的样式, 这里是底部的弹出<.
2022-03-11 21:48:33
2122
原创 Vue开发中的知识点
1-vant中的一些css样式无法修改的问题,尝试加入自己定义的类名 id 甚至加!important都无法更改方法:在css的类名或id前面加上 /deep/ 深度递归会寻找到到相对应的标签.进行样式的更改/deep/ .channel-tabs { .van-tab { border-right: 1px solid #edeff3; min-width: 200px; font-size: 30px; color: #777777; }2-关于同一
2022-03-10 20:22:53
184
原创 Vue写项目中知识点记录
常用实用的小方法 后退上一页: $router.back() 或 $router.go(-1) 向前或在向后推几个页面数值可以为负数 @click="$router.back()" 点击后退本地存储和vuex中states存储export const getItem = (key) => { const data = window.localStorage.getItem(key); try { return JSON.parse(
2022-03-08 20:33:28
640
原创 Vue路由和组件库
vue路由1-什么是路由 --路径与组件之间的关系2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功 能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,这就是前端 路由的作用3-缺点 --开发成本高 需要学习专门的知识 首次加载的时候比较慢,不利于seo一-基本使用1--安装 ==> yarn add v...
2022-03-03 19:11:13
941
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人