- 博客(61)
- 收藏
- 关注
原创 react的应用
Electron 是基于 Node.js 和 Chromium 的开源跨平台桌面应用开发库,可以使用 web 技术(HTML、CSS 和 JavaScript)构建原生应用。React 可以和 React Native 结合使用,用于构建在移动设备上运行的原生应用。以上仅是 React 应用的一部分示例,React 还可以用于构建大型服务端渲染应用、实时数据推送应用、数据可视化应用等等。React 可以用于构建各种类型的应用,如单页应用(SPA)、多页应用(MPA)、移动应用、桌面应用等。
2023-07-21 08:47:04 397
原创 element分页如何使用
通过绑定 @current-change 事件,来监听用户翻页的动作。在该方法中,你可以编写相应的逻辑,实现分页数据的获取和显示。currentPage 表示当前页码,默认值为 1, pageSize 表示每页显示多少条数据,可以根据具体情况设置合适的值,默认值为 10, total 表示数据的总条数,需要根据实际数据总数进行绑定。在组件的 data 对象中定义分页所需的三个常用参数:currentPage(当前页码)、pageSize(每页显示的数据条数)和 total(总数据条数)。
2023-07-21 08:45:18 523
原创 用vue3封装一个符合思维且简单实用的弹出层
在平常开发中,弹出层算是一个最常用的组件了,尤其是后台的表单页,详情页,用户端的各种确认都很适合使用弹出层组件展示,但是一般组件库提供给我们的一般还是组件的形式,或者是一个简单的服务。弹出层中间展示的如果是一个表单或者一个业务很重的页面,逻辑就会跟页面混在一起不好维护,如果抽离成组件,在后台这种全是表格表单的时候,都抽离成组件太过麻烦。一个页面如果只有一个弹出层还好维护,多几个先不说放在那里,光维护弹出层的展示隐藏变量都是件头大的事情。
2023-07-21 08:39:15 413
原创 js中函数的传递参数
if(typeof a === 'number' &&a === a){ //判断数字类型时要注意NaN是数字 类型但不是数字,可以用NaN与自身不等的方法进行判断。1)js中函数传参时如果传递多个参数,需要用",",隔开,而且需要不同的变量去接 收参数,传递的参数与接收参数的变量是一一对应的。//返回的值为100,将100传递到fn()的a中。//返回的值为 先返回"s" ,再返回"课"
2023-07-21 08:37:55 1649
原创 vue3中运用组件写成获取验证码,并实现手机可以接收到验证码事例
在上述代码中,我们使用了 axios 库来发送 POST 请求到 /api/send_code 接口,并传递了用户输入的手机号码。例如,我们可以创建一个短信签名为“我的应用”,短信模板为“验证码为${code},5分钟内有效”(其中 ${code} 是一个可变参数),然后将其审核通过。在本文中,我们介绍了如何利用 Vue3 组件来实现获取验证码,并让用户的手机接收到验证码的功能。我们将创建一个名为 VerificationCode 的 Vue3 组件,该组件可以获取用户输入的手机号码并向其发送验证码。
2023-07-21 08:33:42 572
原创 前端7大常用布局方式
Web前端常用布局方式页面的布局方式是块状元素依次从上至下、从左至右进行布局布局的作用对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。适用性 ,根据不同行业情况进行不同效果的制作。吸引性,视觉效果优秀的布局效果能瞬间吸引客户。布局方式一、静态布局静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。
2023-07-21 07:58:47 1906
原创 Vue3中computed的用法
computed又被称作,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当无关值变化时,不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。
2023-07-20 15:38:54 735
原创 React简介
2·使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。3·使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。React是一个将数据渲染为HTML视图的开源JavaScript库。2·在React Native中可以使用React语法进行移动端开发。3·原生JavaScript没有组件化编码方案,代码复用率低。1·采用组件化模式、声明式编码,提高开发效率及组件复用率。1·原生JavaScript操作DOM繁琐、效率低。二、为什么要使用React。一、React是什么?
2023-07-20 15:18:12 95
原创 react项目打包
2.在项目根目录中执行命令serve -s ./build 在build目录中开启服务器。2.在package.json中的scripts标签中,添加分析打包体积命令。3.在浏览器中访问:http://localhost:3000/ 预览项目。2.在路由Router内部,使用Suspense组件包裹组件的内容。2.等待打包完成,打包生成的内容被放在根下的build文件夹中。5.通过浏览器打开的页面,分析图标中的包体积。1.在App组件中,导入Suspense组件。在package.json中。
2023-07-20 15:16:25 1375
原创 为什么react比vue更适合大型应用?
3.Fiber算法, React16提出了Fiber架构,其能够将任务分片,划分优先级,同时能够实现类似于操作系统中对线程的抢占式调度,非常强大, 对于因为JavaScript的单线程特性,单个同步任务耗时太长,出现卡顿的问题就可以得到解决, 这进一步弥补了React在组件更新机制方面的缺陷.5.结合shouldComponentUpdate等方法, 可以避免不必要的组件更新, 实现更少的cpu消耗, 程序员可以从代码的角度介入到组件更新效率的控制过程中.DOM操作(不用再像以前写。
2023-07-20 15:12:06 258
原创 uniapp 获取元素高度
中,你可以使用 wx.createSelectorQuery() 方法来获取元素的高度。这段代码会在页面渲染完成后执行,并在回调函数中输出元素的高度。
2023-07-20 15:00:03 844
原创 uni-app框架看这五款组件库就够了
FirstUI(https://www.firstui.cn/)是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序版本,兼顾高效率与高性能,让您的app、小程序开发获得百倍提质提速!uni-app的生态比较丰富,有自己的插件市场,蛮多开发者都推出了自己的组件库产品,下面整理罗列一部分,供大家开发时参考选择。uView是一款知名的开源组件库,里面的组件比较丰富,重点是开源,作者也很有情怀,大家可以关注。
2023-07-20 14:49:34 2398
原创 react上传图片
当文件上传成功之后,我们将上传结果保存在状态中的result变量中,并且展示在页面上。在React中,fetch API可以方便地进行Ajax请求,我们可以将上传的文件使用FormData API包装成一个FormData对象,然后发送Ajax请求。在Web开发中,上传图片是一个常见的需求,而React作为一种常用的前端开发框架,也支持图片上传的功能。现在,我们可以运行程序,在网页上选择一个文件并点击上传按钮,就可以将文件上传至服务器。在App.js文件中,我们引入刚刚编写的上传组件,并将其展示在页面上。
2023-07-20 14:48:15 369
原创 Vue本地存储及用法
首先是页面布局,通过双向绑定来获取input框的值,再将数据存储到对象里,将对象通过本地存储,存储起来,取出来之后,定义一个空数组,将对象添加到数组里,之后再将数据存储起来。首先是页面布局,通过双向绑定来获取input框的值,再将数据存储到对象里,将对象通过本地存储,存储起来,取出来之后,定义一个空数组,将对象添加到数组里,之后再将数据存储起来。以文件的方式存储在本地,通过把数据存在浏览器中,用户不必每次都向服务器请求。以文件的方式存储在本地,通过把数据存在浏览器中,用户不必每次都向服务器请求。
2023-07-19 22:50:53 880
原创 vue防抖节流
函数节流(throttle): 是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。防抖(debounce): 是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次。
2023-07-19 22:48:20 124
原创 Vue中 使用定时器 (setInterval、setTimeout)
开始的时候创建了一个定时器 setInterval ,时间间隔为2秒,每2秒都会调用一次函数 valChange,从而使 value 的值+1。js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout。顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉;开始时候创建一个定时器 setTimeout,只在2秒后执行一次方法。定时执行 setTimeout 是设置一个时间,等待时间到达的时候。
2023-07-19 22:44:39 5391
原创 vue3导出excel表格方式 ---XLSX文件(最快的导出方法 )
-save,//elementplus的组件库(这个可用可不用,我用的是组件的按钮所以需要使用到他)npm install xlsx --save//xlsx的插件。
2023-07-19 22:31:04 132
原创 宝塔 配置反向代理出现“伪静态/nginx主配置/vhost/文件已经存在全局反向代理
3.还有一种可能就是你的宝塔上的nginx被强制关闭造成的(我这个是开启的,关闭的样子是状态哪里显示的是红色的符号,这个时候将他开启后再试一下)可以先去伪静态把伪静态清空后保存,再去设置反向代理,反向代理设置好以后再去开启伪静态。流程关闭伪静态-开启反向代理-再次开启伪静态。中找到 “ location / ”,宝塔自动安装的NGINX不会这个,多半都是自己手动配置的,散掉这个配置就行了。2.可能是出现这种情况是因为网站开启了伪静态。配置反向代理失败的记录。
2023-07-19 22:27:31 1200
原创 vue项目上传宝塔刷新页面报404
因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。由于vue是单页面程序,当router模式设置为 history 时,直接打包上传宝塔,在页面刷新的时候会报404的错!
2023-07-19 22:23:14 353
原创 vue3制作九宫格抽奖
八个奖品和一个开始按钮,点击之后会从0-7按顺序加样式,会由慢到快,然后匀速,在由快到慢,最后定格,抽奖会有概率。效果:首先看到一个是顺时针0-7的。好,话不多,说上代码。
2023-07-19 22:20:28 151
原创 vue中引入地图插件
在这个index.html文件里写入script src路径。这里需要在 自己创建的vue 文件里写一个div设置宽高。当我们在写项目时,有时会遇见需要用到地图。现在我为大家写一个简单的获取地图的插件。这里引入这个import。在这里输入这串代码即可。
2023-07-19 22:16:37 146
原创 vue3.0 router路由跳转传参(router.push)
vue3.0取消了2.0部分api,所以路由跳转传值方式有所不同。这里主要讲编程式导航,也就是router.push(location, onComplete?, onAbort?vue3.0新增API:useRouter和useRoute一.路由跳转1.首先在需要跳转的页面引入API---useRouter2.在定义router变量3.用4.如果有参数的话,在接收页面引入API--useRoute5.在接收页面定义变量route,获取传过来的变量。
2023-07-18 08:08:23 1482
原创 vue实现登录界面
有反应不显示输入框问题的同学,需要在mian.js文件里面引入element UI组件库奥~,引入方式可见。使用Vue实现简单的用户登录界面,登录成功以后查询账号用户类型进行相应的页面。
2023-07-18 08:04:13 1084
原创 vue 路由守卫(导航守卫)及其具体使用_vue.js
所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你权限。导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现。所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查。
2023-07-18 07:59:49 225
原创 Vue上传图片使用Element组件实现(组件方法and手写方法)
action属性是要写入你的接口的上传图片,不然你是上传空白的 (切记这里是必填的)功能(组件方法),最近写到后台管理时需要用到组件上传图片(为了美观)
2023-07-18 07:57:41 106
原创 Vue3生命周期
1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method。8、onActivated(): 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行;9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;6、onBeforeUnmount(): 组件卸载之前执行的函数;4、onBeforeUpdate(): 组件更新之前执行的函数;
2023-07-18 07:50:23 1210
原创 vue中引入地图插件
在这个index.html文件里写入script src路径。这里需要在 自己创建的vue 文件里写一个div设置宽高。当我们在写项目时,有时会遇见需要用到地图。现在我为大家写一个简单的获取地图的插件。这里引入这个import。在这里输入这串代码即可。
2023-07-18 07:47:37 459
原创 vue获取当前时间(与演出时间做出状态比较)
用vue中:class方法结合if else 改变时间段的颜色(状态)如果节目正在当前时间段进行,那么时间字段为红色。用replace()方法去除时间段内的符号(:)如果节目未开始,那么时间字段为默认黑色。如果节目已结束,那么时间字段为灰色。获取到数据内节目的开始与结束时间。用slice()方法截取时间。
2023-07-18 07:45:50 108
原创 js实现传参方法
使用window.location.assign()进行页面跳转:与window.location.href类似,也可以用来进行页面跳转。在目标页面,使用localStorage.getItem()或sessionStorage.getItem()方法获取参数值。使用window.location.href进行页面跳转:在源页面使用该方法,并指定目标页面的URL来实现跳转。在源页面,构建一个包含参数的URL,并使用window.location.href进行页面跳转。
2023-07-18 07:41:28 919
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人