- 博客(203)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 使用vite+vue3+ElementPlus+pinia搭建中后台应用-前端-1
新建文件这里可以写自己项目的样式。然后在main.ts引入比如我们这样写。#app {新建文件写一些自定义的主题控制台可能会报错，说你却少sass依赖，根据它的提示安装就好。在这里重写一些定义$colors: (),),),),'error': (),'info': (),),配置配置别名plugins: [vue(),}),}),],}),],resolve: {alias: {},
2025-10-30 22:22:14
972
1
原创 简单使用Nest+Nacos+Kafka实现微服务
其他的，比如，服务下线后，nacos是能检测到健康状态的，那么就要通过配置或者服务变化(nacos有订阅)，来通知使用者如gateway。如通过docker打包，注入环境变量port等等，应用会通过nacos注册，网关使用的时候去拿。这个时候就可以在其他服务获取到user-service的请求地址，可以使用http请求来处理。因为本地启动多个相同服务的原因，临时给nacos加了个随机数，用户服务和邮件推送服务启动的时候，通过nacos拉取配置，如。一个网关，一个用户服务，一个邮件推送服务。
2025-10-28 18:42:00
838
原创 无界微前端学习和使用
如果我们做B端，比如重构的时候，运行在新项目，但是新项目是需要时间来重构的，怎么办呢，按照官方说法，不推荐保活模式，推荐单例模式。新建一个文件夹wujie,执行下面的命令三次，主应用选择Vue,其他两个项目分别为vue和react。如果是新项目，且相当使用比较新的浏览器，可以考虑无界，开箱即用，当然无界也提供了兼容的。但是这里的话，在vue1这里，进入子应用About，刷新后会在vue子应用首页。子应用的宽高调整等等，但是最好判断下是不是无界启动，还是单独启动。和其他微前端技术一样，该有的都有。
2025-10-27 18:13:16
939
原创 nestjs简单使用nacos来做配置中心和服务发现
文档做微服务的时候，我们的应用可能会部署到多台机器或者多个容器，如何让这些服务动态的读取配置以及调用其他服务呢，这就要用到nacos。这个好像是阿里搞的。
2025-10-21 11:36:21
80
原创 VitePress学习笔记
vitepress学习-自定义主题大概就是利用useData获取运行时的数据，然后可以重写一套我们自己的布局和组件。渲染还是用vitepress 内置的markdown-it。取数据和某些渲染场景的话，看这个。
2025-07-29 18:23:52
1297
原创 VitePress学习-自定义主题
其实就是自己写一套Layout 布局，然后渲染还是借助vitepress，实际上vitepress使用的是markdown-it来渲染的。在改造主题的时候，避免使用固定设置，尽量和原组件保持一致，使用站点元数据，这样自定义的主题可以让别人也使用。components里面可以侧重关注，因为自定义组件的话，大部分都是改这里的东西。思考，既然都是vue组件，可不可以用element-plus呢，来试一试。其实就是使用了官方的组件，自定义的话，就是自己写样式，写组件。如果不想大改，可以在官方组件基础上改。
2025-07-29 14:32:52
1394
原创 vitepress-站点打开时显示加载页面
自定义Layout在vitepress的主题配置文件中配置。如果你的.vitepress目录里面没有theme/index.ts可以新建一个文件Loading.vue和MyLayout.vue文件。LoadingLoading.vue写一个加载组件，我这里让豆包帮我写的，这个看自己需求。MyLayoutMyLayout.vue
2025-06-27 16:38:26
745
原创 记录一次飞书文档转md嵌入vitepress做静态站点
需要一个富文本编辑器，富文本编辑器编辑完成后，能显示为静态站点，并且能返回自己的系统的目标路由。跑起来后是404，因为docs目录下没有index.md，默认首页为index.md。但是后面完成后，发现这个文档其实有点老旧，要看feishu-pages插件作者的最新文章。feishu-pages的作者提供了示例站点，我们可以拿过来用，也可以自己搭建。目录有了，想要切换的时候保持一致，还需要这样，中文英文的文件标题一致。我们可以手动复制一份进去，也可以每次拉docs的时候,cp一份。我复制的作者的例子。
2025-06-27 14:48:54
1266
原创 记录写一个markdown-it插件来转换视频
因为我这里md是自动生成的，视频都是这种格式[xxxxx.mp4] (/assets/ZWF2bH2sJoCCL9xm365cjMmdneb.mp4)使用方式，我这里是vitepress使用。其他的情况需还没处理。配置 markdown。
2025-06-24 18:23:08
387
原创 页面配置文件pages.json和小程序配置
先上文档，其实无论是taro的还是uni-app的，基本上都一致，常规用法是Taro.xxx,Uni.xxx方法名基本上一致，当然配置文件也是，不然怎么兼容到小程序呢，所以这里我们只讲一遍。页面内容从最顶部开始，这个时候就要处理安全区域，也就是避免被遮挡，在uni-app中，其实已经帮我们处理好了一些。一般的开发，基本上配置不到太多，主要的还是业务的开发，这些不需要理解什么的，只要有这一些配置就行了。如果你想不同的平台配置不同，当然可以，如下，微信小程序的。注意文档中标注的平台差异，有些平台不支持。
2025-06-17 15:40:11
490
原创 新建一个uni-app项目并且运行
选择uni-app选择vue3版本，我们将会用vue3-setup语法来编写。如果没有自动弹出微信开发者工具，可以手动打开，编译的小程序代码，在这个目录下面。配置小程序AppId，如果你注册完成了，可以在微信小程序后台找到。本章节没有代码，只是运行起来项目到小程序。下个章节讲述下配置文件。如果你没有登录Hbuilder X，创建项目后这里的标识会变红。选中你的项目目录下的一个 文件，点击运行。配置你的微信开发者工具路径。打开Hbuilder X。需要登录后重新获取。
2025-06-17 14:11:26
277
原创 uni-app/taro+uniCloud从入门到跑路
uni-app/taro的api，以及unicloud的使用，配套代码库和使用文档。会跟着课程的进行，不断的完善。配套代码库，每个章节末尾会标注当前进度的代码库。学完本课程，你将会入门小程序开发，跨端开发，以及服务端开发能力和数据交互。如果你对nest感兴趣可以去我专栏看看。
2025-06-17 10:42:29
185
原创 前端使用接口以及babel快速生成接口代码
我们这里不做复杂处理，比如增加注释等等，所以只用提取简单的信息即可。大致原理就是，提取路径处理成函数名，处理成请求路径，增加参数定义。由于浏览器的安全策略会有跨域，所以我们开发的时候，可以先用代理。文件，把3000代理到/api，记得运行起来user服务。现在我们就一个接口，如果有很多接口呢，就需要快速生成了。我这里用的最新版的vite生成的vue-js项目。接口数据在这个js中，这里我们用babel处理。在App.vue中，我们发起请求。简单的封装，请求携带token。我们来做个简单的封装。
2025-06-16 11:56:15
119
原创 [实战]用户系统-2-完善登录和校验以及VIP
jwt本身并不会作废，我们需要使用redis来辅助做个黑名单，需要将我们的token存到redis中一份，然后比对的时候，需要校验下redis里面是否存在。逻辑就是，我们注入vip属性，来为某个请求标记需要什么等级的vip，然后守卫拦截判断。看自己的代码优化了。我们上面已经做了登录的校验了，但是只是校验了token，如何让我们的系统能够拦截没有认证过的请求呢。之前我们模拟过用户的登录，本节将实现token的生成，校验，redis做黑名单。运行一下，发现不对了，因为我们刚刚登录的，并没有在redis中存。
2025-05-23 14:26:26
166
原创 [实战]用户系统-1-基础功能完善
此时就好了吗，并不能，因为你只是注册了模块，服务，好比我们的mongodb，你只是引入，但是没使用，我们也不需要手动使用logger。我们可以将我们的自定义的日志模块，替换到app上，让app直接操作，相当于替换下默认的logger。我们的用户系统实战，将会实现以下功能，登录，注册，登出，修改用户信息，上传头像，响应的格式化，请求拦截，vip标识。还记得我们前面几个章节讲的吗，我们的响应格式化，请求拦截，vip标识都会用到下面几个构件，忘记的小伙伴可以复习下。我们来处理下，使得支持存在数据库。
2025-05-21 18:43:37
238
原创 连接Redis数据库
完善redis.service.ts 我们引入了get,set,del的使用。如果你想用别的可以自己再写，或者通过getClient()拿到client直接调用方法。我们前面已经讲了如何连接mysql和mongodb，现在来进行Redis数据库等连接和使用。这里我们假设有获取token的方法，且已知了有效时间。会在后面的章节中带大家使用jwt来实现。我们依旧在user.service.ts中的test中来写。如果没有安装，先安装下Redis。在user.service.ts中完善逻辑。
2025-05-20 18:13:39
199
原创 prisma连接非关系型数据库mongodb并简单使用
操作mysql和mongodb使用,prisma用起来很舒服，方法都差不多，但定义的时候有些不同，后面实战的时候，会有示例。
2025-05-19 15:41:09
428
原创 prisma连接关系型数据库如mysql数据库并完善用户的增删改查
简单来说，就是让我们的数据库操作变得简单了。文档地址Prisma也支持mongodb后面我们的mongodb也会用Prismsa来操作。
2025-05-14 16:10:32
327
原创 library和配置管理
我们新建了一个lib，你可以引入一些环境变量，做额外的处理的处理等等，当然也可以不用单独写个lib，可以直接引入，或者你一样可以使用lib，将我们的配置文件都丢里面，而不是根目录新建一个configs文件夹。
2025-05-13 16:04:18
139
原创 管道-验证和转换
英雄联盟的老鼠说过一句话，条条管道通我家。管道一的脏水流到了管道二，管道二的脏水由于太脏了有杂物，堵住了去管道三的入口，所以通过不了(验证)，去了管道四净化了下(转换了下)，进入了别的管道。
2025-05-10 16:17:09
158
原创 自定义装饰器
如果你开发过spring boot项目，应该不陌生，当然现在node也支持了。有一种设计模式叫做装饰器模式，装饰器写法就是体现。Nest提供了很多的装饰器，也提供了自定义装饰器的方法。让我们来自定义一个装饰器吧。来实现如下功能，假设我们在守卫，或者拦截器中对token进行了解析，得到了用户数据，我们总不至于每一个mapping都解析下request吧，这样就很烦人了，我们来实现一个装饰器来快速的获取request中的user。其实官方的示例中已经给了，我们来结合上一节的拦截器来实现下。
2025-05-09 15:43:13
250
原创 认识拦截器
老样子，先上文档地址如果你使用过axios，你可能知道请求拦截器和响应拦截器，我们在请求拦截器里面会做一些额外的处理，如header中添加token等等，响应拦截器则会统一处理响应，如异常请求抛出异常加个提示，对业务状态码进行处理等等。那Nest的拦截器的，其实概念是类似的。如下。请求前拦截一下，追加一些操作，响应后处理下，追加一些操作。看到这句话，你是否想到了在拦截器里面也可以实现守卫类似的功能，可以尝试下实现之前守卫课程的校验操作。
2025-05-09 11:46:44
593
原创 认识守卫-以及简单的示例和装饰器
官方的介绍如下文档警卫只有一个职责。它们根据运行时存在的某些条件（如权限、角色、ACL等）来确定给定的请求是否将由路由处理程序处理。这通常被称为授权。授权（及其通常与之协作的表亲身份验证）通常由传统Express应用程序中的中间件处理。中间件是身份验证的一个不错的选择，因为令牌验证和将属性附加到请求对象等与特定的路由上下文（及其元数据）没有强连接。简单来说，把请求当个人，controller当个小区，那守卫就是小区保安，我们想要请求打进去进行处理，首先要向保安证明身份，不然保安就不让你进去。
2025-05-08 20:54:51
286
原创 认识异常过滤器-以及简单的示例
一定要养成看文档的习惯，文档下面是官方的说法。Nest内置了一个异常层，负责处理应用程序中所有未处理的异常。当应用程序代码未处理异常时，该层会捕获异常，然后自动发送适当的用户友好响应。之前我们的课程中有看到404的异常，其实就是nest本身帮我们做了处理，而nest也支持我们自己对异常进行处理。在开始前，我们先把之前中间件的引入注释掉。可以拦截异常，那么如果我们不想把一些业务异常当作真的错误，可以自定义一套异常处理。
2025-05-08 00:09:38
346
原创 认识中间件-以及两个简单的示例
官方文档中间件是在路由处理程序之前调用的函数。中间件函数可以访问请求和响应对象，以及next()应用程序请求-响应周期中的中间件函数。下一个中间件函数通常用名为 的变量表示next。类似于express的中间件。官方文档也说了。多说无益，我们来讲如何写中间件以及如何使用中间件。
2025-05-07 22:34:09
654
原创 简单的学习Post，Get，Delete等以及请求路径和传参
上一节我们新建并且运行了一个项目，但是我们的请求路径是localhost:3000，但是实际项目肯定很复杂，接口很多，路径不一致，那怎么来修改路径呢。这里在@Controller里面多了个demo2，是为了区分路径前缀，比如我们有多个demo2的模块，这里肯定不能是空的了，不然会混乱，那它帮我做了什么呢。发现少了个包，如果你也出现了，可以安装下，npm install @nestjs/mapped-types。这里面的:id什么意思呢，就是路径参数，比如我们发起一个delete请求。
2025-05-07 14:50:56
117
原创 新建一个项目以及简单CLI
module可以理解为一个模块，我们的应用可以有多个模块，模块可以引用其他模块。controller可以理解为我们暴漏的接口地址，service用来处理具体的业务逻辑。比如我们的模块在应用中注册(引用)了，前端调了一个接口controller中的，然后处理了一些逻辑(service)。我们使用CLI来创建一个Nest项目，为了不让大家创建多个项目，我们的demo和前几个实战，将会放在一起。具体为什么，我们慢慢讲。在packages.json中可以看到，初始化项目的时候帮我们写好了运行指令。
2025-05-07 14:16:08
127
原创 什么是Nest？为什么要学？
Nest是一款后端开发框架，类似于spring boot，使用nodejs进行开发，这就使得前端人员可以快速的上手，更快的实现大前端！虽然是前端，但是啥都想干。这么高的star量，不心动吗。
2025-05-07 13:41:15
181
原创 记录搭建自己的应用中心-需求看板搭建
页面比较简单，逻辑为，当新增用户的时候，会生成一个uuid存在redis有效期10分钟，然后，链接携带该uuid，用户在授权页面，输入用户名，密码，会携带uuid，redis里面，uuid对应的有用户的信息，如果页面输入的和redis存的是一样的用户，则做认证处理。做了额外的守卫，这里命名比较随意,BdGuard为新增的登录授权，下面是原先的，都能通过。admin账号为默认创建，不可用于登录，这里显示了，其实不该显示，对应的是主应用情况下，微服务引用的时候，账号的所有操作均为管理员操作。
2025-05-02 00:09:55
549
原创 记录搭建自己应用中心
结合面板，面板上线后，可选更新版本，大版本，迭代版本，补丁版本，来更新版本号。结合git来实现标签tag的创建，方便回滚，应用发布分，构建，发布两个步骤。构建一个微前端的子应用，处理当是微前端形式启动的时候，隐藏菜单栏和顶部栏目，显示的应用信息通过主应用的 共享过去。目前只展示了用户，后面计划为，应用的分析，受欢迎页面分析，来源分析，版本信息，迭代周期，以及应用告警等等。一直想做个试试，这是一个简易版的，主要是整合下知识的，依赖包构建，微服务，微前端，等等。分别是核心库，处理库，工具库。
2025-04-25 14:22:55
933
原创 记录一次无界微前端的简单使用
其他的 比如接口什么的，服务端也要放通对应的地址。或者都交给nginx。因为会跨域 所以静态资源要允许跨域，子应用添加允许主应用跨域。因为使用的是vue项目主应用和次应用都是 所以用的封装的。你可以在主应用新建一个路由。props是共享的数据。安装 选择对应的版本。
2025-04-25 10:32:44
493
原创 实现一个专注应用-后端开发(二)-微信扫码登录(小程序实现)
调用接口 =》接口调用小程序的生成二维码 =〉二维码对应一个tag，把tag存在redis中，设置一分钟到期，用户扫码跳到小程序登录授权页面，授权后将生成的token和tag绑定，同时，展示二维码的页面，每隔几秒调用一次查询，过期告知过期，如果查到token则登录成功，登录成功销毁tag和token的绑定，如果想要知道用于已经扫码状态，可以多设计tag的状态。而jwt策略返回的user。但这里其实小程序是不需要返回token的，登录成功即可，把token塞到redis中，然后让提供扫码的页面进行轮询。
2025-03-10 15:14:57
1144
原创 国产AI编辑器Trae体验(内置豆包大模型)
下载安装目前支持mac和windows和cursor一样，cursor支持导入vscode配置，trae支持两者，nice!;内置的是豆包大模型还支持掘金登录。这里可以选择模型。
2025-03-03 18:57:17
609
原创 记录封装一个请求包装函数
这里可以正确的类型推导，abort也正常执行。如果想做进一步的处理，如请求前加token，请求后的数据统一，可以使用拦截器。尝试封装一个请求记录函数，传入一个请求体，加工成页面需要的数据，还不够完善。只对 requestTask方法中的Promise部分进行修改。所以也可以考虑把公共逻辑抽离，做一个适配器？当然我们发现只有这一块代码是不一样的。让豆包帮我分析了下用到的设计模式。如果你想用axios 一样可以的。目前自用，插件市场地址。
2025-03-03 17:51:38
969
vue-flask-video.zip
2021-03-04
image-recognition-flask-uniapp.zip
2021-03-04
bandicam 2020-11-04 17-10-06-422.mp4
2020-11-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人