- 博客(146)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 nuxt3使用记录三：SSG渲染其实是混合渲染
从上一篇成功构建出静态的html文件后，我最近又折腾了一下，因为对SSG的理解还是太浅了。一直很好奇为什么SSG构建完会有这么多.js文件，昨晚找到点思路，记录一下。
2024-04-16 11:20:06
259
原创 nuxt3使用记录二：页面构建的细节（特别是SSG）
SSG渲染是会构建出包含内容的.html文件，是可以直接打开看到内容的那种！不要轻易忽视框架给出的警告，哪怕你的项目运行起来没啥问题完全不变的.vue页面也未必会被构建成包含其内容的.html文件，它还受到其他可变条件的影响，特别是，路由页面必须有这个，当有相关的警告时，不要忽视不理（就这一点，我觉得nuxt的机制仍然有问题，当然我不懂底层原理。也许确实做不到这点。
2024-04-08 22:39:58
896
原创 nuxt3使用记录一：框架摸索
之前直接用的Vue3，后面为了seo，了解到Vue3用SSR渲染很复杂，甚至衍生了出nuxt3这个框架，这个框架在github已经有50K star了，也已经是个非常成熟的框架了，不过我感觉国内的资料也不多，看来国内接受新事物的速度依然很慢，大厂估计都自研了，小公司就用老方法PHP啥的。学习nuxt3最详细的资料也就是，不过，说实话也很不详细。我研究了几天，说难其实也不难，说简单也不简单，因为整个框架按约定的自动配置的东西非常多，不了解的话，不知道框架的运作机制，都不知道哪些文件该放哪里。
2024-04-06 15:03:07
1034
原创 nuxt3 使用$fetch封装（typescript）客户端使用的http请求方法
nuxt3提供了usefetch()之类的方法来发起请求，他提供的这些方法貌似都是考虑和server端配合使用的，比如说在页面初始化前，有些数据是由后端提供，但是为了按SSR来渲染页面，就可以使用usefetch()来配合server先从后端获取数据，再渲染页面。所以我看文档，都是使用await等待，和之前我接触的异步请求非常不同。而我想要的做的是由客户端直接向后端发起http请求的方法，usefetch()好像也可以设置只由客户端发起请求来使用，但是却没法由我自己来预处理后端返回的数据。
2024-04-06 13:45:01
785
原创 使用gin 代理 web网页
业界常用的方案是nginx做代理，这个是网上最多资料的。因为我需要定制化入口，做自己的流量转发，如果再加个nginx来做第一层方向代理和网页的静态资源代理的话，那么就多了一层，哪怕都在一台服务器里，那也是多了一层性能损耗，所以我就在想，golang没有自己的网页代理方案吗？不应该呀，非要依赖nginx？网上的资料模模糊糊，提到gin框架有静态资源代理的方法。但是有写得不是很具体。我实测，是可以做到的。
2023-11-22 21:24:00
646
原创 go语言实现高性能自定义ip管理模块（ip黑名单）
对于IPV4而言，理论上有256^4个，也就是约42亿个。我想了好久，也查了挺多资料，但是，确实没有通用现成的解决方案。
2023-11-21 21:08:07
704
原创 gin 解析 formData带文件和json字符串的一起的方式
gin解析文件和json字符串多个参数一起的，需求是前端使用的形式上传文件以及需要的参数。后端使用golang 的gin 框架解析这两种参数。
2023-07-17 23:04:41
899
原创 证件照换底色实现方法（通用且效果好）
这是个很普遍的需求，很多人都会需要。但是往往这种简单的功能，却被商家包装成商品来售卖，要么会员，要么加群关注，想搞个无损的还得加钱！我曾苦苦找了一两个小时，也找不到一个免费好用的工具或网站。然而，这样普遍的一个功能，网上找到的实现方法却都还没跟上时代，还是采用捕捉背景色来进行阈值分割，二值化，然后在进行逐个像素替换。那种效果可想而知，仅能针对自己的图片慢慢调参。实践一番，我采用如下方法进行处理，可以做到功能通用，效果不错。以后背景色想换什么色就什么色，图片还能无损！
2023-06-28 20:29:17
362
1
原创 naive UI 的upload组件自定义手动上传图片的base64位
网上发现还是element plus的资料比较多，其实这些组件都大同小异，记录一下方便以后使用。// 后端返回的是base64位数据，需要按下面格式显示。// 读取图片是异步方法，成功读取后会执行里面的内容。// 自定义上传图像的方法覆盖默认方法。// 点击按钮后上传到服务器的方法。// 这就是个普通字符串。
2023-03-18 17:02:43
1901
1
原创 golang使用mongo-driver操作——删
删除指定字段：数组相关pop删除数组的第一个或者最后一个元素：pull 是删除数组中匹配条件的元素，下面是最简单的一个场景：下面是匹配多个元素：下面是删除大于等于5的元素：对于数组元素是结构体的，也可以通过下面的方式去匹配删除：还有个叫，我理解是它功能没有pull强，他的使用比pull局限性大。就用pull就好了。驱动提供了两个直接删除文档的方法，他们适用方法差不多。...
2022-07-10 14:59:23
689
原创 golang使用mongo-driver操作——改（进阶）
改的基础知识在前面几篇都涉及了的，很容易举一反三，这篇是为了记录一些还没涉及的知识。将字段设置为当前时间，可以在需要记录字段更新时间时使用该方法（如果字段不存在，则会创建字段），他有两种形式，一种是我们常见的时间格式，另一种是时间戳。默认使用常见时间格式，结果如下：当然也可以指定时间，直接使用golang的时间去赋值就好了，但是，存到mongo中都是固定的时间格式，并不会按照我们指定的时间格式去存储。也可以以指定时间戳的形式更新，时间戳是以秒为单位的，第二个参数就是表示同一秒内操作次数区别，可选，当
2022-07-07 19:28:14
871
原创 golang使用mongo-driver操作——查（进阶）
更复杂的查询一时也想不到什么场合用得着，所以以后有了再慢慢补充。and 和or组合：我认为复杂的查询往往是组合各种关键字进行查询，所以，下面将一些还未实践过的关键字给列出来，方便以后查询。...
2022-06-26 19:44:34
606
1
原创 golang使用mongo-driver操作——查（数组相关）
数组的查稍微有点不同，篇幅原因，分开来写。需要完全一样才能匹配到，包括元素的顺序。且演示输出时转化成字符串形式：用all关键字实现：查询数组中包含以下元素，且与顺序无关的查询。遍历结果时可以转化成只包含值而不包含key的数组：数组类型的字段后面对应一个值，表明是查询数组中是否包含该元素。遍历结果时转化成键值对的数组形式：多个条件的查询和我们正常的理解不太一样，结果还可以按数组下标去取：下面这种多条件查询才和我们正常的理解差不多。结果还可以用key去取值：按照数组长度查询，结果还可以用Lookup取
2022-06-26 12:09:09
1162
原创 golang使用mongo-driver操作——查（基础）
不管任何数据库，查都是最复杂的操作。基本查询，并且解析成结构体：匹配多个值，且解析成结构体数组：大于和等于的匹配查询，并遍历结果：通常我们查询条件都是隐式and关系，可以使用or关键字表示多个条件只需满足其一：嵌套字段的查询匹配:之前的查询我们都是返回所有字段，还可以选择查询指定字段:与上面相反，可以指定一个字段不要，查询剩余字段:对于嵌套的文档也同样受用,且用LookupErr遍历时，仅获取想要的key值:...
2022-06-26 11:58:39
1710
原创 naive UI 折叠面板设置折叠面板的可点击区域
我在使用naive UI 的折叠面板时，他有个特点，就是无论点击header的哪个位置，都会展开/折叠面板。且组件没有提供api设置可点击区域这个特点会带来一个问题，比如如下场景：由于我在header上设置的内容比较复杂，有按钮，导致这么一个问题，我点击自己的按钮，也会展开或折叠面板，那么就没办法友好的使用我自己的按钮了。所以，我希望，只有点击左边的箭头图标时，才会展开或折叠面板。利用naive提供的受控模式，即点击面板的header之后，是否展开由我决定，而不是组件自己决定。通过自定义那个箭头图标，并且
2022-06-05 12:42:37
1457
5
原创 golang使用mongo-driver操作增删改查
连接首先得在admin数据库中创建角色import ( "context" "fmt" "go.mongodb.org/mongo-driver/mongo" "go.mongodb.org/mongo-driver/mongo/options")func GetMongo() (*mongo.Database, error) { credential := options.Credential{ AuthMechanism: "SCRAM-SHA-256", Username
2022-05-29 22:44:46
1536
原创 golang gin http请求中断后停止后端的任务运行
一个常见的场景：有一个接口请求需要较长的时间（如5秒），那么，用户很可能等不及，直接就放弃了请求。而这个接口的任务，如果在用户放弃请求后依然继续执行，那么就是浪费服务器的资源了。所以，我们需要在得知请求中断后，主动结束耗时的任务。这里面其实都是用到go 提供的一个上下文库context。然而这个问题的核心是如何得知http的请求是否中断。这个问题在网上居然没什么资料。。。示例演示首先，我模拟了两个任务：任务taskFunc1需要执行1秒，任务taskFunc2需要执行5秒：// 该方法模拟进行
2022-05-23 21:13:42
2731
5
原创 vs code 插件推荐
一个智能代码提示工具，用了一段时间，真的不错，具有一定学习能力，都快成为tab工程师了，适用于大多数语言，刚开始给点耐心，用一两天都体验不错了：Tabnine AI Autocomplete
2022-05-14 20:40:45
119
原创 web权限管理设计（1）——设计的要点分析（4）
上篇中描述了角色id的一些基本的要求：角色id一定大于被他继承的角色，也一定小于继承他的角色角色的id：最底层从0开始，最高层从21亿开始。每层一万个位置，所以共计有21万层层次越高的角色，id值越大每次在一个新的层次增加，其id位于其继承者和被继承者的中间那一层。上面的结论在实际应用中，会有一点问题，因为权限由人设计，人的认识不可能那么完美，免不了后期需要修改。所以，角色之间的继承关系，免不了会变动，包括位于最底层的角色，说不定以后也会继承自其他角色。然后它已经位于最底层，没有空间给他拓展了
2022-05-14 11:32:19
267
原创 web权限管理设计（1）——设计的要点分析（3）
角色的id需要讲究大小，可以减少非常多的遍历。最底层的角色就是没有任何继承的，最高层就是超级管理员。
2022-05-13 16:18:21
267
原创 web权限管理设计（1）——设计的要点分析（2）
接着上文，分析到了继承给系统带来的困难。就目前而言，我想不到能够完美解决问题的方案，但是我认为还是不能抛弃继承。因为他确实能给管理者减少很大的工作量。再回到上文说的，权限管理系统该有什么的特点：管理者能够清晰的对权限进行管理，也就是那个管理界面，是符合正常人的思维的。权限校验的性能要高，不能因为这个对整个系统的性能产生太大的影响管理界面假设我们是给一个拥有10万员工的超大型公司设计权限管理系统，那么我估摸着大概会有1000个角色。那么如果不使用继承，那么我们的角色管理界面，就是一个表格[角
2022-05-11 22:22:55
289
原创 web权限管理设计（1）——设计的要点分析（1）
现在web项目基本都是前后端分离的了，所以也是基于这种架构去思考权限管理的设计。说实话，没做过很复杂的项目，所以考虑的细节有限，写这个也是为了让自己捋清楚思路，好下手写代码，而且代码的逻辑经得起推敲，不至于过段时间自己都看不懂了，还没地方找思路。一个好的权限管理模块，我觉得最重要的点是：管理者能够清晰的对权限进行管理，也就是那个管理界面，是符合正常人的思维的。权限校验的性能要高，不能因为这个对整个系统的性能产生太大的影响web 的权限大概分两块，一块时后端的接口权限，另一块是前端页面的权限常
2022-05-11 18:20:56
980
原创 神坑——后端允许了跨域但是前端（vue3+vite+axios）仍然提示跨域
这个问题坑了我整整一个晚上。·这明明是个非常常见的问题，我自己也遇到好多次了，以前都是后端允许跨域就可以了。但是这次就是不行！首先晚上最多的方案是用代理，例如这篇：https://blog.csdn.net/admin_web/article/details/121924527我一晚上也主要在按照这些方法去尝试，但是我努力一个晚上，都不行，一直怀疑是自己的姿势不对！最后在快要放弃前（12点多，不清醒了），瞎猫碰上死耗子，居然解决了。不是配置问题！PS:我的后端用go写的，这里也贴一下我的允许跨域：
2022-05-08 13:46:46
9442
12
原创 购物商城商品数据结构设计（2）——前端数据结构
基于第一篇的理论分析之后（自己都觉得写得有点乱，就看看大概的思路，然后从后面的实践中去理解细节，会更容易），下面讲讲我在前端的数据结构的具体实现。商品展示我整体的界面是这样的：祖册左侧是类别，右侧是商品，这里每个商品的高度是固定的，比如我这里设计的是80px。除了中间的滚动区域，其他区域均是使用固定尺寸。...
2022-05-01 20:38:09
2039
原创 购物商城商品数据结构设计（1）——理论分析
我这里的背景是：商品量较小，例如美团，他按照店铺分类，每家店铺拥有的商品数量有限。而淘宝那种搜索一个名字可能有上万的商品的，可能就会有性能问题了。我想到的两个可能会影响数据结构设计用户交互场景：用户购物时商品的显示以及商品规格的选择。商家增删改查商品时为什么说用户交互会影响数据结构的设计，不是前端的问题吗？虽然前端可以屏蔽数据，给用户一个良好的交互，但是如果不提前考虑进去，那么后面就可能会涉及很多恶心人的数据结构的转换，才能给用户显示一个良好的交互。这个数据结构的转换，前后端都需要做。用户购物
2022-05-01 12:00:04
2144
原创 vue3 overflow 长列表虚拟滚动的知识记录
其实我是要在手机端实现虚拟列表（web端其实有很实用的插件可以用，没必要自己实现）。找了两天资料，也没有找到一个我满意的方案。最后看到一片比较通俗易懂的文章，按照他的方案实现了基本的虚拟列表。PS:功能虽然实现了，但是还有小问题，比如快速滚动时效果一般。性能也还未测试。uniapp下的坑做虚拟列表，首先得能拿到滚动条的数据，也就是滚动监听事件。网上找了好久，基本就两个方案：基于document什么的监听“scroll”事件。这个试了，确实可以哈。但是，如果我一个页面分两边，分别有两个滚动区域呢？这
2022-04-30 20:24:20
994
原创 v-show在uniapp中的使用不生效的问题
<template> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <uni-popup ref="popup"> <view v-show="false" style="display: flex; background-color: red"> 你好 </view> <v
2022-04-23 14:15:07
5861
原创 css overflow使用总结
overflow是个很强大的样式，在非常多的场合需要用到它，比如区域滚动。下面一一列举下使用。不使用overflow我给父元素设置了固定的高度，然后添加过多的文字， <view style="height: 100px; background-color: red"> <view style="word-break: break-all; font-size: xx-large"> 测试文字测试文字测试文字测试文字测试文字测试文字测
2022-04-22 22:07:57
1262
原创 vue3组合式API下 defineProps标注自定义类型，以及设置默认值的方法
官方文档：https://staging-cn.vuejs.org/guide/components/props.html#props-declarationdefineProps默认支持常见的类型检查，在ts下，我们需要明确变量的类型，类型经常是我们的自定义类型。可以使用下面的方式：<script setup lang="ts"> interface iA { a: number; b: string; }const props = de
2022-04-22 20:34:37
13731
原创 uniapp 多选框的全选功能实现
uniapp内置的checkbox其实以及checkbox-group本来挺好的，但是有两个问题：无法依赖其事件实现全选样式固定，难以修改他们无法实现全选的原因是：我动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件。意味着无法依赖checkbox-group管理好已选项。就是说：我点了全选，界面上看着是全选了。然后此时我取消了其中一个选项，此时触发change事件，但是它反馈给我的已选列表是错的。这是不行的。
2022-04-16 21:34:50
8825
1
原创 uniapp（vue）在v-for中组件的事件中添加自己的参数
在html中给我们经常会因为数据是列表而需要用循环来展示数据。而其中有些组件是有回调事件的。这时候循环中如何知道是哪个数据在触发事件就是很重要的事，否则无法修改对应的数据。举个例子，我们在购物车中需要用到uni-number-box去修改数量，购物车的商品肯定是用循环生成的。每个商品对应着一个uni-number-box。但是uni-number-box的change事件仅仅只返回当前数量的值。在代码中我们并不知道去给具体哪个商品修改数据：而我们在html的循环中，可以有列表的下标，甚至是直接拿数据对
2022-04-16 16:21:33
1898
原创 uniapp button字体没有垂直居中
uniapp在某些场景下，它的button字体没有垂直居中：应该看的出来，上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height：80%。因为默认样式只提供了default和mini这两个选项，他们分别代表的字体大小是18px和13px。因为我是不想按钮太挨着我的上下两条边，所以设置了高度。解决办法1：放弃设置高度，改为设置字体大小，也能改变按钮的高度。这个方法应该更符合规范。解决办法2：方法1可能大家都知道，这里主要想讲一下另一个方案，虽然在这里不一定适合：造成这个现象其实是
2022-04-16 15:57:19
5531
原创 uniapp下页面布局分析三——元素垂直居中
本文继续前面的内容，App.vue采用了flex布局垂直居中还是有点难度的。但是习惯使用flex布局后，又能简单的实现。页面只有一个元素<template> <view class="center"> <view style="background-color: blue">居中文字</view> </view></template><style> .center {
2022-04-15 20:02:11
12403
tensorflow下编写CNN网络的框架
2018-06-08
oracle 计算值多处地方decode做判断该如何优化
2023-06-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人