- 博客(34)
- 收藏
- 关注
原创 style-components基本使用
语法格式:export const TabsWrapper = styled.div` ` 把一个div变成了一个名为TabsDiv的组件,然后在 ` `中定义样式。直接写属性的样式就是div的样式。5.进阶用法二:根据动态样式控制 配置一个公用的万能div组件,使用的时候只需要在组件中传递参数就能达到想要的样式,如:(StyleDiv为一个基础div)样式组件内部通过props接受一个 active的属性 props.active的值为真就执行后面的样式,注意:css是一个函数需要导入。
2024-08-01 15:31:55
269
原创 react18高阶组件
高阶组件的本质上就是函数,接受一个组件作为参数,然后返回一个组件。解决了组件之间如何横向抽离公共逻辑的问题。类组件之间常使用,函数组件中也可以使用,但更多的时候使用自定义hooks。高阶组件命名一般采用with开头,它可以将普通组件内部的公用功能抽离出来,复用在其被调用的组件上。1.高阶函数内部首先return了一个组件,然后这个组件中return了视图 并且传递了props。举个例子,需求:每个组件渲染 销毁的时候打印日志。2.不要在render中使用高阶组件。3.不要在高阶组件内部更改传入的组件。
2024-07-23 16:17:02
374
原创 Redux详解
b.store.dispath() 修改store中的数据,store.dispath(action)传入一个新的action,重新触发reducer函数执行,并把新的action传到reducer的参数之中。c.store.subscribe(()=>{}) 订阅store,当store中的数据发生了变化,会自动执行回调函数。a.store.getState() 获取store中的state数据。2.rudux中所有的数据变化必须通过派发action来更新。a.store中当前保存的state。
2024-04-27 15:44:20
350
原创 Eggjs+vue3+socketIO实现实时通讯
4.创建控制器:controller文件夹下 创建一个叫chat.js的文件。此文章是我踩了n多个坑才写出来的,创作不易,如有不理解的可以私信我。函数来获取当前组件实例,并从中访问全局注册的方法或属性。3.until下创建socket.js直接复制就好。3.config.default.js中配置插件。vue3中没有this,所以通过。注册了一些全局属性和方法,将采用。2.注册plugin.js中插件。5.创建socketio路由。2.mainjs中引用依赖。
2024-04-07 14:52:18
474
原创 React18 useEffect函数使用方法
useEffect(()=>{},[]) useEffect()内部有2个参数,一个是回调函数,另一个是依赖项数组[]。第二个参数决定了useEffect的用法。,页面初始化时会执行一次回调函数,然后在每次渲染后都会执行回调函数。这个依赖项发生变化时才会再次执行回调函数。,页面初始化时执行一次回调函数,之后不再执行。,页面初始化时执行一次回调函数,然后只有在。结合的效果略有一些不同。当第二个参数不为空时,当第二个参数为空时,
2024-03-18 00:00:09
487
原创 React18函数组件实现ref获取dom实例
例:在图中,当我点击 修改按钮时,弹出编辑框。底层的列表为父组件,上面的弹出框为子组件。,父组件可以获取子组件实例的引用,并直接操作子组件的 DOM 节点或调用子组件的方法。例:useImperativeHandle(ref, () => ({1.第一步:父组件中使用useRef定义ref,并绑定在子组件身上。传递给这个包裹后的函数组件时,父组件就可以访问到子组件的实例。一、需求场景:父组件想要调用子组件的方法,状态。是一个函数组件的定义,通过。3.父组件中调用子ref方法。是React 中用于转发。
2024-03-17 20:43:30
711
原创 eggjs入门——sequelize常见方法及例子
有了这个关联关系,我们就可以使用 Sequelize 提供的查询方法来进行相关操作。有了这个关联关系,我们就可以使用 Sequelize 提供的查询方法来进行相关操作。有了这个关联关系,我们就可以使用 Sequelize 提供的查询方法来进行相关操作。,它们之间是多对多的关系,一个用户可以拥有多个角色,一个角色也可以被多个用户拥有。,它们之间是一对一的关系,一个用户只拥有一个个人资料。,它们之间是一对多的关系,一个用户可以拥有多篇文章。查询满足条件的所有记录,并返回总记录数和查询结果。
2024-01-12 15:19:35
685
原创 egg入门——引入sequelize插件创建模型,操作数据库
5.在controller下同样新建一个 名为user.js的控制器,进行user的增删改查操作。4.在app文件夹下面新建一个model文件夹用于创建模型(一个表一个模型)7.注意设置force:为true的话,每次更新model都会自动清空数据库。例如:在此我新建了一个(用户模型:文件名为user.js)3.config.default.js中配置插件。2.config/plugin.js中注册插件。6.控制器中的接口在router.js中注册。
2024-01-12 14:15:43
677
原创 eggjs入门——快速创建一个eggjs脚手架
画横线的是必有的 app里面有 controller文件夹和 router.js。这里有很多版本,选第一个就好,然后输入项目名称,作者等信息,一直回车。,"hi,egg",项目就创建成功了!2. 进入项目,安装依赖。3.正常项目骨架截图。
2024-01-12 14:04:50
384
原创 前端必备知识——new 关键字
会暂停函数的执行,直到等待的 Promise 对象的状态变为解决状态,并返回解决结果。前端开发中经常可以看见 const aa = new xxx ,aa是对象,那么 new后面跟的 xxx指的是什么?关键字声明一个函数,该函数将返回一个 Promise 对象。执行构造函数的代码:调用构造函数,并传入相应的参数,以初始化对象的属性和状态。设置对象的原型链:新创建的对象会继承构造函数的原型对象。是一个包含响应数据的普通对象,而不是一个Promise对象。关键字指向新创建的对象,使得构造函数可以操作新对象。
2024-01-02 10:34:41
801
原创 ElementUi表单验证规则
4.自定义规则:就是自定义一个函数,然后把函数放在rules中的字段名的{validator:this.xxx,trigger:'blur'}1.在<el-form ref="form" :model="form" :rules="rules">绑定rules规则。(7)手机格式验证,利用的是正则表达式。是用于返回验证结果的回调函数。3.点击提交的时候自动验证规则。是当前验证规则的配置对象,2.在data中定义规则。(2)最小长度:min。(3)最大长度:max。
2023-12-19 09:42:14
640
1
原创 解决elementui关闭子弹窗,遮罩层挡住父弹窗问题
1.在父弹窗中设置 :modal-append-to-body="false" 和 :append-to-body="true"2.在子弹窗中设置 :append-to-body="true"
2023-12-13 18:58:31
658
1
原创 js一个很牛的数组函数reduce
简介: reduce函数里面有两个 参数,第一个参数为一个回调函数,第二个参数为返回值的初始值;第一个回调函数里也有两个参数,第一个参数为返回值的初始值,第二个参数为数组的第一个元素,例如map函数的item;上图reduce的初始值为0,使用回调函数的第一个参数a的值也为0;对数组进行循环,a的值等于上一次循环a的值+当前循环b的值,最后返回a,这样就完成了累加;很巧妙地利用了初始值为一个空对象,如果第一次循环对象中没有这个值,就让这个对象的属性等于1,后面如果再次出现了,这个对象的属性就加一;
2023-10-25 21:02:53
71
1
原创 react路由简单使用
Outlet></Outlet>是嵌套路由时,用于展示跳转的页面,类似于vue的<router-view>引入模块:BrowserRouter,RouterProvider,createBrowserRouter。组件的主要作用是将这个路由实例提供给整个应用程序的组件层级,使得每个组件都能够访问和使用路由功能。2.在index.js中引入路由相关模块,并且创建路由实例。参数是router 实例,用来管理应用程序的路由功能。使用方法给元素,绑定事件,执行跳转函数。b.params传参。
2023-10-23 19:03:31
227
1
原创 Vue3中pinia的简单使用,并实现数据响应式
state类似于vue中的data属性 getters类似于vue的计算属性 actions类似于vue的methods属性。3.目录中创建一个stores的文件夹,里面创一个index.js的文件。来控制组件的显示或隐藏时,就能够根据数据的变化来自动更新组件的状态。的属性,并且当依赖的属性发生变化时,计算属性会自动重新计算并更新。用作普通的数据属性(而非计算属性),那么当。5.把pinia仓库中的数据变成相应式。4.在组件中获取pinia仓库的属性。因此,通过使用计算属性访问。
2023-10-07 20:11:51
3087
3
原创 uiapp2引入uview2教程
from后面的地址可以手动改成具体的index.js地址,有时候上面的地址不能找到。然后一直点确定,最后文件目录中有uni-modules文件夹就代表引入成功。1、在main.js文件夹引入uView主JS库,切记这两行要放在。2、在uni.scss中引入uView的全局SCSS主题文件。4.配置easycom组件模式,此配置需要在项目根目录的。工具栏中,插件安装,如果没有安装则安装。3. 在App.vue中引入uView基础样式。二、插件市场中安装uview2。
2023-10-01 12:40:01
320
1
原创 <script setup>基于elementPlus封装一个公用的表格组件
二、在父组件中引入公共表格组件标签。一、引入elementPlus。核心知识点:父子组件传值。三、公共表格组件的内容。
2023-09-24 12:37:47
150
3
原创 Express操作数据库写接口(简单版)
2.使用node ./index.js运行服务器,当服务器代码变更的时候,页面需要重新运行服务器才能更新。3.可以使用nodemon自动更新,nodemon 是一个监视文件变化并自动重新启动服务器的工具。1.连接mysql默认端口号为3306,如果不是3306,需要在port中设置。二、安装MySQL客户端库( mysql2)来连接和操作数据库。四、终端中node ./index.js 运行服务器代码。一、引入express框架,安装依赖。三、创建index.js。
2023-09-24 00:22:29
136
1
原创 简单使用axios和简单封装axios
3.封装接口 在项目里创一个api的文件夹,在里面创建相关api文件,如服务请求可以创建成service.js。2.在项目里新建一个文件夹,文件夹下创一个request.js文件。4.2具体使用封装好的problemPageList方法。1.同上安装依赖,引入axios。二、稍微复杂一点的用法 封装axios。4.1引入第3步封装好的api接口。1.npm安装aixos依赖。3.简简单单使用axios。一、简单用法使用axios。4.在具体页面组件中使用。
2023-09-19 15:08:53
172
1
原创 解决前端跨域问题(代理服务器)
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。代理服务器的请求地址:必须与浏览器的请求地址相同,使用浏览器与代理器的服务器就不会存在跨域问题。注意:设置了代理服务器后,浏览器发axios请求的地址就是 代理服务器的地址,也就是浏览器的地址。服务器与服务器之间是不会存在跨域问题,所以代理服务器与服务器之间不会存在跨域问题的。简单说就是:浏览器的地址与请求服务器的地址不同。如果你想要更多的代理控制行为,也可以使用一个。
2023-09-07 12:40:56
502
1
原创 解决vue路由跳转页面需要手动刷新才能渲染页面的问题
问题:从登录页面跳转到首页,页面不会刷新,退出按钮不会出现,需要手动刷新才会出现。解决方法在需要刷新的页面里面添加。
2023-08-30 10:25:30
1532
原创 vue路由——路由全局前置守卫
meta是routes属性里自定义的一项,如果把requiresAuth的值变成true表示这个路由需要验证才能通过 所以第一个if判断就是找出哪个路由需要跳转。这个是在router目录下的index.js下写的。
2023-08-29 16:03:56
140
1
原创 vue3路由——嵌套多级路由
1.childen里写的path路径尽量把父级路由也要写出来,routerlink标签to属性也要把父级的路由写出来。2.父级和子代的组件加载方式保持一致,要么全都使用懒加载,要么全部采用头部引入的方式。aobout里嵌套a路由嵌套 a1,a2,a3。about嵌套b路由嵌套b1,b2,b3。三级:橙子、柚子、柠檬......template里的写法:一级。二级:柑橘类水果下的目录。
2023-08-29 15:56:15
999
1
原创 React-使用父子组件传值完成TodoList功能
1.因为react是单选数据流,不能在子组件里直接删除父组件里的值,只能在父组件里定义一个删除父组件值的方法,然后把这个方法传给子组件,子组件const { del } = props 解构方法,然后再调用del方法。2.值组件接受值:const ChildComponent = (props) => { const { del } = props;1.父组件传值:在父组件里的子组件标签里自定义绑定一个属性。二、子组件里点删除按钮,删除父组件的值。在简单版基础之上的本质核心知识点。一、父组件给子组件传值。
2023-07-14 14:32:15
89
1
原创 使用React 实现简单TodoList功能
2.执行add del函数的时候要创建一个副本 newlist=[...list],因为react使用setvalue方法渲染页面时,原始数据名称不能和新的数据名称相同,否则无法更新渲染数据。2.给input标签绑定onChange事件 e.target.value会拿到input输入的值 再执行setinputvalue()更新数据,渲染页面。1.删除功能执行的时候,onClick=()记得里面绑定一个回调函数,而不是立即执行函数。四、如何将数组里的值遍历渲染到页面上(类似于vue的v-for效果)
2023-07-14 14:11:51
265
1
原创 vuex简单cdn版
Mutations 是同步的操作,用于改变状态的值。每个 Mutation 都有一个字符串类型的事件类型和一个处理函数,通过提交 Mutation 来触发状态的变更。Actions(动作):用于处理异步操作和复杂的业务逻辑。Getters(获取器):用于从状态中派生出新的数据,类似于计算属性。State(状态):用于存储应用程序的状态数据。在 Vuex 中,状态存储在一个单一的状态树中,作为唯一的数据源。3.在mutations里定义方法,可以操作state里的数据,类似于vue的 methods()
2023-07-09 07:00:00
222
1
原创 vue路由cdn简单版
3.在开始跳转的组件设置a标签(<router-link></routert-link>)4.在路由实例中配置router-link标签对应跳转的组件。1.创建一个路由实例(对象)createRouter()2.创建要跳转结束的相关组件。
2023-07-08 10:11:53
287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人