- 博客(54)
- 收藏
- 关注
RSS订阅原创 第四部分【路由权限管理方案】
next('path')会跳转到这个path路径，且重新进入前端路由守卫，也就是说，路由守卫会再执行一遍。导航守卫 | Vue Router (vuejs.org)next()的话会退出前端路由守卫，进入这个路由。next()和next('path')的区别。最后，在登出按钮，需要把我们的东西都移除掉。因此，整个路由守卫方案也就结束啦！如何用前置守卫来完成最后一步判断？为了防止无线循环，需要搞好判断逻辑。首先需要明白前置守卫的路由。
2023-03-23 19:43:40
168
原创 第三部分内容【路由权限管理方案】
最后，因为axios请求是异步操作，所以这个action要返回格式化完的路由，需要通过new Promise的形式，通过resolve来返回，这就是你们所看到的这里出现了Promise。第一，方便通过vue-tool工具进行查看，第二，可以在后面讲路由守卫的判断中用到。resetRoutes这个action就不用说了把，就是把两个记录一些内容的state删除掉就行了。这里需要记录两个东西，一个是routes，这是记录这个用户所具有的访问的路由权限，只是个记录而已，关于mutation。
2023-03-23 19:16:28
145
原创 第二部分内容【路由权限管理方案】
res.data即使请求回来的路由规则，这里把这个规则先放倒了localStorage存放着。这里其实涉及到向后端发送登录请求，然后在设置cookies，接着跳转到首页。用户登录完需要做什么操作？axios如何请求路由规则？axios如何请求路由规则？用户登录需要做什么操作？
2023-03-23 18:52:21
130
原创 第一部分内容【路由权限管理方案】
假设用户已经登录了，也从后端请求到了路由规则，怎么格式化路由并且添加路由规则呢？这里不考虑记录一些内容这个步骤。这个内容好像很简单啊！不会添加路由的可以看前置知识-router。
2023-03-23 18:40:37
93
原创 ROUTER【路由权限管理方案】
route是指在Vue Router中注册路由时，使用`path`、`component`等属性来定义一个路由，具体来说就是定义路由的路径和要渲染的组件。而router则是Vue Router的实例，包含了所有的路由和相关的配置信息，同时负责监听URL的变化并且分发到不同的路由匹配上的组件中去。笔者现在做项目都是根据模板来的，看得懂代码，用模板来写代码，举一反三，效果极佳。route是路由的具体信息，而router是管理和控制路由的实例对象。通过调用router提供的addRoute方法，来添加路由。
2023-03-23 18:20:29
221
原创 VUEX【路由权限管理方案】
vuex无非就是把要共享的数据记录下来，然后通过mutations去修改定义的state，异步的操作要在通过action。然后就是如何在js文件中和vue文件中使用这些方法，和拿到这些数据。因为小项目的话，不用分模块也可以写，但是不容易维护。分模块来写，在我看来，是一个方便维护，且心情舒畅的事情。最后就是，只要定义好store对象，且vue.use（store）了，所有的东西都是在store对象里的。引入store对象就可以进行你的操作。这是我的理解。
2023-03-23 16:24:23
303
原创 css选择器(通配符、（元素、类、id）、后代（子代、所有后代）、兄弟（相邻兄弟、所有兄弟）、属性（属性、指定值的属性）、交集并集)
3. 利用 [属性名]、[属性名=属性值] 选择指定的元素。5. 利用 “+”、“~” 选择相邻兄弟或者所有兄弟的元素。4. 利用 “空格”、“>” 选择子代或者所有后代的元素。6. 利用 紧贴、“，” 选择交集或者并集的元素。2. 利用 元素、类名、id 选择出指定的元素。css选择器很重要，大家要好好学。1. 利用*选择出所有元素。
2022-09-10 14:59:49
474
原创 React83_Strapi的使用
然后选中student，开始设置student的权限，这里我设置了student的所有权限，实际开发中，可以根据实际情况设置。项目创建后会自动启动，浏览器会自动打开链接地址：http://localhost:1337/admin，由于是第一次启动项目，所以会弹出一个注册窗口，这里需要注册一个新的管理员账号。使用它的主要目的并不是将它使用到生产环境中，而是让它为我们测试React提供接口，所以它更多的功能我们暂且先放到一边，后边的课程中，我们会根据需要在对Strapi的相关知识进行扩充。，重新对项目就构建。.
2022-08-14 10:31:36
423
原创 React82_useCallback()
接上次讲到的memo，如果说将增加数量的函数从App组件传到A组件，A组件调用此函数来改变App组件的状态，那么App组件将会重新渲染。Ⅱ 如果不指定依赖数组，回调函数每次都会渲染(跟不用的一样的效果，没有意义)因此，会观察到，每次点击按钮都会在控制台显示-> App组件渲染，A组件渲染。所以，必须把用的到的东西都放到依赖项里，以至于每次变量改变后，使得函数都会被重新创建。定义的函数体里面使用外部的变量都会不改变，但是setState还是能将外面的改变？原因在于setCount。...
2022-08-14 09:51:14
270
原创 React81_React.memo
该方法是一个高阶函数，可以用来根据组件的props对组件进行缓存，当一个组件的父组件发生重新渲染，而子组件的props没有发生变化时，它会直接将缓存中的组件渲染结果返回而不是再次触发子组件的重新渲染，这样一来就大大的降低了子组件重新渲染的次数。memo只会根据props判断是否需要重新渲染，和state和context无关，state或context发生变化时，组件依然会正常的进行重新渲染。1. 当App组件发生重新渲染时，A和B组件都会发生重渲染。2. 当A组件重新渲染时，B组件也会重新渲染。......
2022-08-14 08:34:46
174
原创 简单的写一个fetch请求数据
打开浏览器一看，是个promise，熟悉promise的人知道这个对象有三个东西，第一个打开里面都是方法，第二个是状态，第三个是response，也就是响应的数据，那么就说明fetch这个函数给我们返回了带有数据的promise对象。接下来，我们调用json方法来转换，并且将数据返回，返回的结果也是个promise对象，因此，我们继续调用then方法来进行操作，把拿到数据的message属性的值赋给img的src属性。我将讲解步骤，不提供代码啦。经过一系列的操作，请求就完成了，这是一个简单的请求！...
2022-08-12 11:11:07
455
原创 [react 三篇杂乱但笔记齐全-第三篇] Hook之重生我要学习useReducer
上正题嘿嘿，我在第二篇叫读者先去看下redux的一些基础知识点，相必大家发现了，Context和redux里面的store很像！那么接下来的useReducer，就和redux里的reducer差不多啦。
2022-08-11 10:33:24
91
原创 [react 三篇杂乱但笔记齐全-第二篇] HOOK之我要学会useContext
组件之间是通过单向数据流传递信息，总是自上而下传递的。但是这样子组件一多就很麻烦，可以通过useContext来直接传递，但是一般有的我还是会逐层传递不说废话，直接上使用方法！！！当然，在上方法前，我得废话几句，可能有的读者对这个知识点不怎么理解，我建议啊，百度搜一下Redux，点开官方文档，然后了解下Store、reducer、action、midleware(中间件，初次看的读者可以忽略)，接着看下原理，我记得有张图，说明了他们之间的关系，我当时看了我就理解了。...
2022-08-11 10:24:21
111
原创 [react 三篇杂乱但笔记齐全-第一篇] 关于样式的添加 以及 CSS样式优先级
为什么css需要内联样式和外联样式以及css模块？1. 什么是内联样式和外联样式以及css模块2. 外联样式发生的惨案3. 惨案的解决办法方案选择【提升】React 动态设置样式内联样式 和 外联样式 以及 css模块[react 三篇杂乱但笔记齐全-第一篇] 关于样式的添加 以及 CSS样式优先级...
2022-08-11 10:08:59
210
原创 async_await 前身后世
关于【async_await 前身后世】的故事，涉及同步异步、回调地狱、Promise、async_await。本文将带你联系这几个知识点，让你直接进步
2022-08-10 02:09:36
142
1原创 react-实现页面跳转
Link：a标签，需设置path属性，值为路径，点击后会跳转到指定的路径Router：用来包裹整个组件Route：指定对应路径所展示的组件，Route写在哪里组件就展示在哪里路由会给组件提供history属性，在this.props里，里面有两种方法，1、push跳转到参数所指定的路径，2、go(n)跳转到历史记录的第几条路径，n可为正负import React from 'react'import ReactDOM from 'react-dom'import {BrowserRo.
2022-04-17 14:12:46
3309
原创 react-setState异步更新问题
1.setState是异步更新数据this.state={ count:1}handleSetState(){ this.setState({ count:this.state.count+1 }) console.log(this.state.count)//1}在这个函数里面使用了setState方法,这个方法会被放到异步线程,只有当这个函数的同步进程进行完后才会执行数据更细方法.所以才会出现打印的数据不变的情况2.执行多个
2022-04-16 21:01:04
1327
原创 react-高阶组件(2)-问题:props丢失解决方案
原因是高阶组件没有往下面传递props[分析] 在App组件中渲染的 <MousePosition a="1" />传递了一个a='1'的props,其实这个props是传递给了MousePosition也就是返回的Mouse组件,如果要解决问题的话就要把Mouse组件的props往下传递解决方法:渲染的时候不仅把{...state}传递给需要包装的组件,还要把{...this.props}也传递给需要包装的组件react进阶总结组件通讯是构建React应用不可缺少的一个环节
2022-04-16 15:19:26
1069
原创 react-高阶组件(2)-问题:displayname名字相同解决方案
默认情况下,react将组件名字作为displaynameconst Mouseposition=withMouse(Position)const MouseCat=withMouse(Cat)[分析]这两个代码都是调用了withMouse(wrappedComponent),返回的都是Mouse组件,返回的不同点就是Mouse组件渲染的内容不同.在这两种情况下,渲染出来的Mouse组件的展示名字都会是Mouse.这也就所谓的'默认情况下,react将组件名字作为displayname'
2022-04-16 15:06:00
1089
原创 react-高阶组件(1)-code
import React from 'react'import ReactDOM from 'react-dom'import img from'./img/cat.png'function withMouse(WrappedComponent){ class Mouse extends React.Component{ state={ x:0, y:0, } handleMouseMove=e.
2022-04-16 14:30:19
728
原创 React-rende props
import React from 'react'import ReactDOM from 'react-dom'// class Mouse extends React.Component{// state={// x:0,// y:0,// }// handlemousemove=(e)=>{// this.setState({// x:e.clientX,// y:e.clientY,// .
2022-04-15 21:58:32
48
原创 webpack
一、项目① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index.html 首页 ④ 初始化首页基本的结构 ⑤ 运行 npm install jquery –S 命令，安装 jQuery ⑥ 通过模块化的形式，实现列表隔行变色效果二、安装和配置 webpack① 运行 npm install webpack web..
2022-03-31 08:59:23
43
原创 【VUE从0到1】-模板和语法
vue文档：http://cn.vuejs.org/vz/guide/1-模板new Vue({el: ,data: ,methods: ,});new Vue(对象)，对象包含el：挂载、data：数据、methods：方法。1.1_插值表达式 {{数据名}} 作用：填充数据、简单计算、字符串拼接。2-指令 v-2.1_v-cloak解决插值表达式因为刷新多次而出现闪动的问题，原理是先隐藏 替换好后再显示。2.2_数据填充数据填充三个指令：v-text、v-
2022-03-27 08:59:42
123
原创 【完结】JS高级-总结-从0到1
学完js高级，1.学习面向对象的编程思想即万物都对象。2.Es6前后对象和类与构造函数的关系。Es6之前仿类都是通过构造函数来创建对象。Es6之后才有了类的概念。3.构造函数、原型和实例化对象三者的关系。4.闭包5.递归函数、浅拷贝和深拷贝、正则表达式和let定义变量、const定义常量。又了解到解构赋值和箭头函数，之后了解到数组的额外方法和字符串的新定义 方法和优点。最后了解到了新数据结构Set，它和数组差不多。一、类和实例化对象有了类，可以开辟很多空间创造出很多实例对象。体验类的写法。.
2022-03-27 00:29:04
183
原创 JS高级-模板字符串和数据结构Set
1-模板字符串反引号可以用来定义字符串。1.1_解析变量反引号定义的字符串可以解析变量$(变量名)以前字符都是通过引引加加的方式，ES6提供的新定义字符串的方法可以解析变量。let name='zhangsan';let a=`hello this is mobanzifuchuang user $(name)`;1.2_字符串可以换行let html=` <div> <span></span>
2022-03-26 23:24:39
1215
原创 JS高级-
1-Array方法1.from()将伪数组和对象转换为真数组。let a={ '0':1, '1':2, 'length':2};let newAry=Array.from(a);第一参数接收待转换的伪数组，第二参数对每个元素进行处理，处理完返回数组。let a={ '0':1, '1':2, 'length':2};let newAry=Array.from(a,c=>c*2);2.find()寻找数组第一
2022-03-26 22:36:58
54
原创 JS高级-剩余参数和扩展运算符
1.剩余参数1.1如果传递的参数太多，没有那么多的形参接收，可以把额外的参数接收为数组。语法是在形参前加三个点即...a。const fn=(...a)>{};sum(10,20,30);这时候a=[10,20,30]；所以说把参数用数组来接收。【练习】把传递进来的参数相加const sum(...a)=>{ let sum=0; a.forEach(b=>{sum+=b};); return sum;};数组可以用forEac
2022-03-26 21:15:33
676
原创 js高级-解构赋值和箭头函数
1.解构赋值1.1_解构数组从数组中提取值，按照对应关系，对变量赋值。如果变量没有对应关系则变量的值为undefinded。let[a,b,c]=[1,2,3];console.log(a);console.log(b);console.log(c);let arr[a,b]=[1];因为b的位置没有值，则解构失败，b的值为undefinded。1.2_解构对象let person={name:'zhangsan',age:18};let {name,age}=
2022-03-26 20:41:18
1606
原创 JS高级-let和const
1-letlet的作用域于在于块。也没有变量提升，也就是说，需要先声明后使用。暂时性死区，用let声明变量，这个变量就和块绑定。1.1_let的作用域在于块var i=1;for(let i=0;i<2;i++){}；console.log(i);上面输出的结果为1。在for循环用了let声明了变量i，i就属于for循环{}那个块。1.2_let没有变量提升for(let i=0;i<2;i++){ console.log(a); let a=2
2022-03-26 20:13:20
1401
原创 JS高级-正则表达式
正则表达式即有规律的表达式，在js中是对象。1-作用匹配、替换、提取。2-特点正则表达式灵活，逻辑性强，功能也强大，可以很简单的控制复杂的字符串，但是对于刚接触的人来说，比较晦涩难懂。虽然难懂，但是，实际开发中都是直接复制写号的正则表达式，但是要求会使用正则表达式和根据实际情况修改正则表达式。3-在js中的使用3.1_了解正则表达式一个表达式可以由简单字符或和特殊字符的组成。其中，特殊字符在表达式中是具有特殊意义的专用字符。可以特殊字符的意义参考MDN，也可以在Jq api手
2022-03-26 02:35:50
671
原创 js高级-浅拷贝和深拷贝
浅拷贝和深拷贝在类的地方有提到过，浅拷贝即拷贝表面的对象，里面的对象都是拷贝地址。而深拷贝把整个对象都拷贝。1-对象var a={ id:1, name:'zhangsan', gongneng:{ sing:function(){}, chifan:function(){} }}【分析】引擎首先开辟了一个空间，然后储存id，name，gongneng，因为gongneng的值是个对象，引擎开辟了一个新空间，储存这个对象，而原本gongne
2022-03-25 21:48:22
117
原创 js高级-递归函数
1-递归函数，即函数在自己里面调用自己。代表表示如下。function fn(){ fn();}fn();1.1_分析下面代码var num=1;function fn(){ console.log('我要打印6句话'+num) if（num===6）{return;}; num++ fn();};fn();执行fn，先打印第一句话，判断否，继续执行，num=2，继续调用函数即打印第二句话，当循环到打印第六句话时，判断条件ture，然后
2022-03-25 20:23:01
633
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人