- 博客(8)
- 收藏
- 关注
原创 使用vue3、egg和SQLite开发通用管理后台系统
本项目的开发基于慕课网上的一套课程全栈开发后台系统,不过课程中的服务端用的koa+mongodb,我用的是egg+sqlite写的。在学习过程中遇到任何问题,欢迎在issue中留言一起探讨。
2023-07-13 18:28:44 353 1
原创 如何实现网站黑暗模式
背景互联网行业从业者,很多人喜欢在深夜工作,为此很多网站也做了夜间浏览模式,下面提供几种实现方式。探索使用CSS媒体查询,根据系统自动切换不同样式 <style> @media (prefers-color-scheme: dark) { body { color: #eee; background: #121212; } body a {
2022-03-02 09:59:11 1164
原创 如何实现一个简单的发布订阅模式
背景在业务开发中,经常会遇到要处理跨页面通信的问题,比如说用户打开了一个网站,网站的某些页面需要根据用户的登录的状态不同,显示不同的数据。显然这需要我们在登录成功的那一刻,去通知到那些需要改变的页面。为了解决类似这样的问题,发布订阅模式诞生了。思路一个简单的发布订阅模式需要事件的绑定和触发是互相隔离的,同时支持动态的添加和删除事件。基于此就有了一个思路:定义一个变量存储这些事件定义一个监听方法,用于把事件添加到事件变量中定义一个删除方法,用于把是事件从变量中移除定义一个触发方法,用于调用变
2022-02-28 13:46:44 644
原创 如何高效的处理数组映射
在处理数据的时候,经常需要对数据进行过滤和遍历,以便把数据转换成符合我们要求的格式,比如下面的场景:过滤掉名字为空的数据,如果年龄小于18,设置disabled: true,大于等于18,设置disabled: false// 原始数据[{name: '小明', age: 15}, {name: '张三', age: 18}, {name: '李四', age: 20}, {name: '', age: 30}]// 转换后数据[{name: '小明', age: 15, disabled:.
2022-02-25 09:59:00 545
原创 如何实现溢出文本省略号
背景有时候为了页面美观,对于比较长的标题或简介内容,会希望溢出的内容用省略号代替。这么做虽然降低了用户体验,但是视觉上会比较整洁。方案单行文本溢出省略 <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p> <style> .txt { white-space: nowrap; overflow: hidden; text-
2022-02-24 10:00:15 283
原创 如何在请求数据时,显示加载动画
为了优化用户体验,我们希望对于数据返回比较慢的接口,能够显示一个加载动画,但是在数据返回比较快的时候我们又不希望显示这个动画。下面提供一种方式,来解决这个问题方法的核心是Promise.race(),简单回顾下Promise.race使用方法,Promise.race(iterable) 方法接收一个可迭代对象作为参数,返回一个 promise。迭代器中的某个promise解决或拒绝,返回的 promise 就会解决或拒绝,也就是说谁先有响应就返回谁的结果。const promise1 = new Pr
2022-02-22 10:11:20 877
原创 对数组中的元素排序
背景在进行数据展示的时候,有时候后端返回我们的数据不符合我们的要求,在数据量较小的情况下,前端去处理数据的排序可能更合适,下面是几种常用的数据排序方式。字符串数组排序简单回顾下数组的sort方法,默认排序顺序是升序,也就是将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列,比如说['March', 'jan', 'Feb', 4, 3, 'dec'].sort()返回的是[3, 4, 'Feb', 'March', 'dec', 'jan'],数字的单元值 < 大写英文字母.
2022-02-19 20:20:11 1026
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人