求知久久编程学院

原创 【nextjs strapi】如何统一封装 fetch 请求

前端 nextjs 接入 strapi 作为后端如何封装请求呢我们使用的是浏览器的 fetch不用安装任何库。

原创 老程序员回到小地方搞团队接私活

有些人可能不懂我，我是个老程序员，之前录过一些课，现在基本上不靠卖课，去年开始做 shopify，刚开始都是自己做，也帮助过不少人，有不少人跟着我的方式做，也做成了自由职业。还有个上海的，一个单六万，首款三万，一下子打了三万（后面没做成，他不搞了，退给他了，白白浪费了时间，遇到这种人运气真差）最开始我招了两个，一个人本科的，一个专科的，本科的那个人灵活些，但做事马虎，专科的比较细心，但要教。没有把握的单不要接，之前接过一个上海的，感觉他就是来白嫖我的，我们正在做，他说不搞了，要我退他钱。

原创 【图文并茂】ant design pro 如何使用 Upload.Dragger 对接阿里云 oss 上传组件（包含后端）

在后台系统中，经常要上传图片吧我这里用的是 阿里云 oss因为还是很便宜的。想要用的，去阿里云注册 个账号开通就行，充个几毛钱，够用你好久的。

原创 【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能

但是在列表页处理的话，可以体验更好，更直接一些。首先后端是有 isOnline 这个属性的。我们经常要设置一些记录是否启用。虽然我们可以类似这样来处理。请求完会刷新列表页的数据。

原创 【图文并茂】ant design pro 技巧之如何用 EditableProTable 在抽屉式详情页里展示表格

有时候我们要显示一些操作记录，或更多详情信息，或者别的关联表格的信息。EditableProTable 里面的数据肯定是数组啦。我用到 EditableProTable 这个组件。如上图所示，如何在详情页增加一个表格呢。

原创 【图文并茂】ant design pro 如何用 Drawer 和 ProDescriptions 实现一个抽屉式详情页

我们要实现一个很好的详情页。在 index.tsx 里。在哪里点击进入详情页。

原创 【图文并茂】ant design pro 如何优雅奇妙地把 crud 的 api 单独抽出来共用

我们写后台项目，经常要写增删改查的接口。比如 角色 权限我们不可能都写一个 api比如 getRoles, getPermissions这些请求列表的，都是一样的，只是路径不同那么我们应该抽出来，放到一起，直接去调，只要传不同的路径就行比如 /api/users, /api/permissions。

原创 【图文并茂】ant design pro 如何优雅奇妙地添加修改密码的功能

如上图所示，我们要加这样的一个功能，如何做呢？首先要写好前端页面，再对接好后端，然后我们要判断当前密码是否正确，如果正确才能新密码修改好。

原创 【图文并茂】ant design pro 如何优雅奇妙地调用个人头像和用户名

如上图所示，如果拿到远程的头像和用户名信息呢。首先肯定是要登录，然后去访问个人信息接口。我们之前有提到 *这个是基础接下来我们只要去调到想要的信息就好。首先是有头像信息的，也有用户名。

原创 【图文并茂】ant design pro 如何优雅奇妙地让创建和更新页面共用一个 form

如上图所示一般来说，新建和编辑页面的内容应该是差不多的。如果分开来写，每个 form 都写一份代码，那就太复杂了。一改的话，可能要改两次如何共用呢，还要做到，有时候他们有些差异的，比如用户修改的时候可以不用填密码，但是创建时一定要有密码。

原创 【图文并茂】ant design pro 如何注入第三方 js script 脚本加个客服功能

一般第三方客服系统，你去注册账号创建项目后，都会提供 js 代码，给你注入到网站中。那么在 ant design pro 项目中如何注入呢。找到 config/config.ts 这个文件。里面的内容呢就到 content 就行了。给我们的系统加个客服功能，如何做呢。src 指的是哪个 js 文件。

原创 【图文并茂】ant design pro v6 如何开启多标签功能

antd pro v6 很容易开多标签。

原创 【图文并茂】ant design pro 如何优雅地把删除和批量删除功能合并到一起，并抽出来成为组件

如上图所示，其实批量删除和删除应该算是一个功能只是删除一个或多个的区别那么接口应该用的同一个删除一个的时候呢，就传 一个对象_id 过去删除多个的时候，就传 多个 对象 _id 的数组过去。

原创 【图文并茂】ant design pro 如何用 renderFormItem 结合 TreeSelect 实现一个多层树级搜索

上一篇如上图所示比如我们经常要查一些，商品分类下的所有的商品类似这样的需求如何做。我们以菜单为例，我们可以查找某个父类下的所有子菜单当然最简单的做法，是提供一个 input text 框，让其输入菜单名称来查。但是为了更好的用户体验，我们直接让客户去选，而不是输入菜单名。

原创 【图文并茂】ant design pro 如何优雅地实现查询列表功能

如上图所示，这种查询如何去实现好呢？

原创 【图文并茂】ant design pro 如何实战使用 ProFormTreeSelect

上一节这一节的内容会利用上一篇文章的内容的。我们经常会实现一个远程数据调用的 select 框，不过有时候这个 select 是有层级的。就像我们这个分类一样，有父分类，子分类的。多层级。怎么处理呢？还是先实现后端。

原创 【图文并茂】ant design pro 如何统一封装好 ProFormSelect 的查询请求

你仔细看上面的图片吧经常有这样的需求吧。这些列表都是查询出来的。

原创 【图文并茂】ant design pro 如何使用 refresh token 可续期 token 来提高用户体验

接下来 if (decodedToken.exp * 1000 < currentDate.getTime()) { 就去判断 access token 是否过期，过期才要续只要 refresh token 不过期，总能续上新的

原创 【图文并茂】ant design pro 如何给后端发送 json web token - 请求拦截器的使用

上一节有讲过还差一个东西，去获取个人信息的时候，是要发送 token 的，不然会报 403.就是说在你登录之后才去获得个人信息。这样后端才能知道是谁的信息。token 就代码了某个人。

原创 【图文并茂】ant design pro 如何对接后端个人信息接口

我们拥有 12 年建站编程经验上一节我们有讲到如何对接登录接口的仅仅能登录是最基本的，但是我们要进入后台还是需要另一个接口。关于第二点，是很重要的，这个接口就是必须你要登录过一次，拿到 token 之后，才能访问到。如果你没有 token ，也就是说没有登录过，这个接口访问的时候就会出问题，比如你都没登录过，你觉得能拿到个人信息吗，拿谁的。所以没有登录过的，就让它跳到登录页面，就是这个接口的作用。有没有登录过，就只看浏览器有没有存好 token.

原创 【图文并茂】ant design pro 如何对接登录接口

ant design pro 如何去对接登录呢。

原创 ant design pro 的环境变量的使用

如上图所示，定义好环境变量后，整个应用的名字就发生的变化。

原创 ant design pro 技巧之实现列表页多标签

后端的参数是叫 isOnline ，要对上 key 和 value。在 index.tsx 中的 protable 里加上这个就好。其实 ant design pro 是支持的。每次点击的时候要发请求，得到不同的数据。主要是上面的 menu 的选项处理，还有。像上图那样，我们经常给列表页做分类的，要把 activeKey 传给后端。我们拥有 12 年建站编程经验。肯定是要得到动态数据对吧。然后是请求列表里比较重要，这种多标签如何处理呢？其它的都没啥的问题。

原创 ant design pro 技巧之自制复制到剪贴板组件

但是如何同时用上了 render 或 renderText, 这个 copyable 就会无效的。ant design pro 中 的 protable 是有一个选项可以控制是否能复制到剪贴板的。CopyToClipboard 这个组件是自己写的，我把源码分享出来，有需要的人可以拿一下。所以我自己写了一个组件来实现一样的效果。我们拥有 12 年建站编程经验。

原创 ant design pro 如何处理权限管理

name 是显示出来给看的，主要是 path action 这两个结合起来，来标明一个唯一的权限。ant design pro 的前端去处理权限好处理的，弄个增删改查。最后才是在所有角色里找到权限来判断，依据的标准是 path action 这两个。刚好这两个我们是能取到的，在请求里取到值，跟用户存的数据库的数据匹配即可。这是个中间件，只要在路由里先用上就行，就是先检查一下是否有权限。主要是后端，如何存权限的信息，要存什么信息，如何验证。然后再判断是否有角色的，角色都没有，肯定没有权限了。

原创 ant design pro 的表分层级如何处理

当然你要两边都存也行，但是每次修改都要操作就比较麻烦，但胜在读取数据，得到 children 比较简单。一般我存一个 parent ，指向父级就好，这样能通过 parent 找到所有的 children.如上图这样，经常我们要加一些分类表，但是这些表是有层次的，比如父级，这种应该如何来表达得更好呢。这里是没有存 children 的。但是需要把 children 返回给前端的。多加了个循环，但胜在数据不会太多，没啥问题。这块仍然跟编辑的时候有关，可以填上它的值。我们拥有 12 年建站编程经验。

原创 ant design pro 如何实现动态菜单带上 icon 的

主要是 name children 这些比较重要，name 是显示出来的，children 是层级结构。当然还有 icon 之类的 还有 path ，也是要的，毕竟菜单要有路径的。如上图所示，这里的菜单是从后端动态得到的。只要你的后端能返回出这样的数据就行。我们拥有 12 年建站编程经验。

原创 stripe Element 如何使用

这个 elements 是 stripe 自带的，要利用到里面的一些组件，比如你开了 wechat 就要自动显示。这个东西一般是放后端，因为有个 secrets key，原则 nextjs 的 api 也算是后端。这个 接口你自己写，可以写在后端中，也可以放到 nextjs 的 api 中。返回的信息是给前端用的，一个 client secret key.要传入的参数呢，只有一个是金额，一个是 secret key ，一旦进入这个下单界面，就要去调下单的接口的，用 post,首先说的是这个下单接口。

原创 ant design pro 中用户的表单如何控制多个角色

之前有分享过 useQueryList 的源码的。也就是说是个数组，数组中的对象，要有 name 和 _id.当创建或编辑一个用户时，如何让它可以选择多个角色呢？所以首先第一步是要准备好一个角色列表的 api 的。你只要填充好默认值即可。是个数组，由 _id 组成。name 是显示出来的，_id 才是最终传给后端的。所以你的用户列表，一定要有 roles.创建时简单，找到相应的组件放上去即可。但是角色的数据是从后端拉取的。主要还是 roles 的数据。就是这里的代码发挥的作用。要让编辑的时候选中。

原创 ant design pro access.ts 是如何控制多角色的权限的

permission 里面是有 “path”: “/permissions/:id”,看上面的图片，在前端中如何控制这些权限，比如控制按钮的显示，还有菜单的显示。假如你没用动态菜单，只要在 access 加上定义的权限就行。所以要根据这个是去匹配，因为它们是跟程序相关的，一般不会变化。当然你的后端可以任意来实现，只要返回出的数据匹配就对了。access 是这样引入的。这些在它的官网都有吧。“action”: “PUT”, 的。再讲一下，它的原理和搞法。先来讲讲如何应用它。

原创 ant design 的 tree 如何作为角色中的权限选择之二

主要是这个 initialValues ，permissions 是 那个 name ，对上了就好。但是提交的时候要把 permissions 带上。我是权限组是有层级的，然后权限组下面有权限。为什么编辑的时候会填充上选中的状态？大约是这样的情况，希望对大家有所帮助。后端的话可以参考我的设计，

原创 ant design 的 tree 如何作为角色中的权限选择之一

主要是这个 permissionGroups 的数据从哪里来。name children ，这些要跟组件的参数对上。组件好办，主要是后端这个数据结构，要对上。编辑的时候要让权限能选中哦。首先这个地方，你要使用。

原创 ant design pro v6 如何做好角色管理

先上图：整个角色管理是如何做的吗？首先你要处理后端，要先把角色存到用户那。这是用户管理部分的内容：可以看到一个用户是有多个角色的。看到没有，存的是数组数组的是一个 role 对象role 对象是这样：主要是存一个 name 就好。permissions 是权限列表。import { Request, Response } from 'express';import Role from '../models/role';import handleAsync from '../

原创 ant design pro 如何去保存颜色

后端是这样的，这个颜色肯定是存到字符串里的。

原创 年关将近，2024 失业程序员何去何从？

1. 不搞大众太多人搞过的事2. 不搞过时的事，不吃别人剩菜剩饭3. 搞些偏国外冷门有些市场的事，不跟国内的人卷4. 要有技术门槛，低门槛，别人做过，过于简单的不做5. 可以做资源整合，只是简单地把一些东西搬过去，没改造整合应该不行6. 要做直接能变现，或快速变现的事，而不是缺产品，又缺市场的事

原创 开工作室了

原创 程序员副业接单做私活，成功路上的不二选择

然而，在这一旅程中，程序员们需要时刻保持警惕，以避免常见的坑和陷阱。首先，确保你明确自己的目标。通过明确目标，定价明智，建立专业形象，管理时间和持续学习，你可以避免常见的陷阱，取得成功。副业工作可以成为实现财务自由和专业成长的有效途径，只要你谨慎行事并积极发展自己的技能。与客户保持积极的沟通，尽力满足他们的需求，提供出色的客户服务，这将有助于建立长期关系并获得口碑宣传。确保你的定价合理，充分考虑到项目的复杂性和你的技能水平。低价可能吸引客户，但如果你的工作质量很高，你应该受到相应的报酬。

原创 Shopify 真实案例技术赚钱营销课视频教程

无论你是一名初学者还是有一定经验的网店经营者，本课程都将为你提供实际案例和技术指导，从而帮助你成功创建和运营一个盈利的电子商务企业。无论你是初学者还是有一定经验的电子商务从业者，本视频课程将帮助你提高自己的技能和知识，以在Shopify平台上成功创业和运营一家盈利的网店。技术指导：课程将深入介绍Shopify平台的功能和工具，帮助学员了解如何搭建和定制自己的网店。这些工具和资源将帮助学员监测和评估销售情况，制定增长策略，并提供有关优化用户体验和提高转化率的建议。掌握有效的市场营销策略，促进网店的销售增长；

原创 深入探索Ant Design Pro V6：提升前端开发效率的终极利器

在当今数字化时代，前端开发的需求与日俱增。不仅如此，我们还为您准备了一门深入探索Ant Design Pro的精心设计的课程，帮助您快速掌握这一框架并在实际项目中取得优秀的成果。无论您是刚入门前端开发还是希望提升现有技能，我们的Ant Design Pro V6课程都能够满足您的需求。我们的课程内容丰富、系统化，通过视频教程、实例演示和练习项目，帮助您从零开始掌握Ant Design Pro V6的使用技巧，并在实践中获得经验。，注册我们的课程，开始您的Ant Design Pro V6之旅！

原创 ant design vue & vue-vben-admin 从零开始实战企业级视频教程（14 个视频）

通过学习本课程，学员可以掌握Vue框架的基本知识和Vue-Vben-Admin的使用方法，为后续的前端开发工作打下坚实的基础。本课程适合已经掌握基本的HTML、CSS、JavaScript编程知识，对Vue有一定了解的前端开发人员，也适合有一定开发经验的后端开发人员和Web开发爱好者。为了让学习者更好地掌握知识，本课程采用了理论讲解与实战演练相结合的教学模式，通过实例演示和项目实战，帮助学习者深入理解Vue技术栈的应用和开发流程。