GoldenaArcher的博客

又是一起比想象中出现的早的文章，写这一篇的初心主要是来自于 2.0 的笔记中提出了一个疑问：微前端是解决业务逻辑重复的问题吗？这里直接做个回答吧，不是 ❌，前端工程化才是解题思路，而经历过两个大版本的变更，从 1.0 的基础后端+dashboard UI，到 2.0 的 storefront UI，现在已经出现了 2 个 UI 界面，也确实迎来了更多重复代码的挑战在花了两天的时间学习和研究，自觉有了些成果，打算趁着记忆还没消退的时候，系统性地整理一下。

其实之前没想着这么快就能把 2.0 的笔记写出来的，之前的预期是，下一个阶段会一直维持到将 MERN 项目写完，毕竟后期很多东西都是 cv 了。不过没想到，一个 frontend（2C 端的商城页面）写着写着还是碰到了不少的问题。

这是最近在做的一个新的个人项目，主要是想从 B2B 转一下 B2C，自己再完整的实现一个从后端到前端的一个实现，技术栈的选择依旧是 MERN——当然，技术栈的选择其实很看个人以我来说，我主要还是写 React/JS/TS 前端的功能，后端部分以前 on bench 的时候简单的抄过一点 controller 的实现，后来自己也看了一点 express 的用法，不过一直以来都不算特别的体系化。

效果实现如下：MERN-socket.io 实现即时聊天项目使用了 MERN(MongoDB, Express, React, Node.js) + socket.io 实现即时通信功能，并且使用了进行 monorepo 的后端、前端和 socket 的模块管理用到的具体技术栈有：MongoDB实现了数据的持久化Express实现的后端，负责登陆/注册/获取聊天记录的功能React实现 UI 功能Redux实现了 UI 部分的状态管理。

记账（expenses API）类型（categories API）用户（登录/注册/更新/删除 API）整体的验证是通过 JWT Token 去实现的，没有实现管理员权限。java17docker运行方式可以直接跑根目录下的start.sh，脚本会运行指令打包 spring boot jar 文件。

前置项目是，之前的切换页面使用的是ngIf对渲染的组件进行判断，从而完成渲染。这一步的打算是添加路由，同时添加 edit recipe 的功能(同样通过路由实现)

这里主要用到的内容就是提到的前置项目在这里查看想要实现的功能是简化和recipe之间的跨组件交流层级结构相对来说还是有一点点复杂的，所以如果在app层构建一个对应的变量和事件再一层层往下传，无疑是一件非常麻烦的事情(尤其 V 层和 VM 层都要进行事件传输的对应变化)，而使用 service 就能相对而言比较简单的解决这个问题。

以上为静态页面，即不涉及到跨组件交流的内容以下涉及到组件内的沟通，从这开始数据就“活”了这篇笔记结合新学的绑定知识，盘活数据。

这是在学完了上面这三个内容后能够完成的项目，目前因为还没有学到数据在不同组件之前的传输，因此只会有一个 UI 的渲染，而不会涉及到事件的实现。

这次换了个 up 又滚完了一遍 tailwind，算是拾遗补缺了，之前的笔记：代码在：https://github.com/GoldenaArcher/tailwind，这次偷懒了就没在线效果（耸肩首先说两点我看完 up 视频，比较喜欢的点：flex 结构基本上就是用这个模板：，这个布局是小屏幕上上下分布，中型屏幕以上左右分布的常规套路。 是一个工具类名，用来控制所有子类的 margin，官方文档的例子是： 。没有多加无意义的 breakpoints，都是以 mobile first 的设计理念终于用了 d

用到的技巧 Tailwind CSS 速成 应该都提过了，我不记得这里有什么特别新的知识整体完成图大概这样：一个纯静态页面，没有做 JS 之类的特效，不过做了移动端适配，说实话我写到一半的时候改了不少……不是很喜欢这个 up 的风格，有点无意义的嵌套 div 就为了实现 CSS。整体来说可以分成这么几个部分：headingsite banner这里根据移动端进行了一些字体的修改bannercards几个 cards 重复性挺高的，基本上就是 cv 内容，除了 client 那里结构有点变，所以重新写了一下中

照例，预览地址在，git 地址：所有的 app 除了最后一个 Paypal Clone 之外都只有一个页面关于加载不同样式的 css，如果想要优化，可以用这里的一个答案去获取当前页面的 viewport 然后下载对应的 CSS：

同样也是二段式的 animation，这里背景的变化用了 clip-path，之前也有介绍过，现在的网站可以拖拽最后获取 clip-path 的角度。二者的移动轨迹是重叠的，这也就是为什么刚开始不会看到绿色的移动轨迹。这里是第 33 到 53 个，很多内容都挺重复的，所以这里解释没之前的细，如果漏了一些之前的笔记会补一下，写过的就会跳过。做出来的，所以会看到两边拉的细长，但是中间还是粗的效果，其实这违反物理了……的时候，获取当前鼠标所在的位置，创建一个新的背景颜色，过渡使用 animation 完成。

但是上面的动图很明显的可以看到，鼠标经过原本图标所在的地方时，背景变色的动画并没有被触发，这实际上是因为子类所有的 pointer-events，在没有 FOLLOW US 这段话没有被 hover 的时候，是设置成 none，也就是任何鼠标事件都不被触发。主要还是看业务需求，如果使用框架，大多数情况下总是能够找到对应的 react/vue/ang 的 slideshow/carousel，二者都是用来寻找这个类似功能的关键词，看怎么命名了，前者叫幻灯片，后者叫轮播，这里指代的就是一个东西。

预计是会跟着教程做完 53 个小项目+10 个大型的 Responsive 项目，预览地址在实用性有加备注，可以按需索取，如果有些效果不一样……十有八九可能是因为 google font 的问题。主要是以CSS实现为主，不过有些需要互动的部分会借助JS实现gif 截图的话，尽量放全……很神奇的事情就是，github上引用CSDN上的图片外链，有几张图片居然显示过大（挠头），然后READEME上就打不开……

差不多滚过的最后一个练手项目了，感觉至少直接用 JavaScript 去写 Redux Toolkit 的 AsyncThunk 感觉已经挺舒服的，下一步就直接去大刀阔斧的改公司项目了。这次选的练手项目依旧是比较简单的一个项目，没有在线预览地址……http 访问 https 失败来着，虽然尝试部署到了 github pages 上，不过 js/css 文件好像全都没加载出来，DOM 是空的。git 地址在这里。

TS 方面，因为是个很小的练手项目（主要想看看 Tailwind 这块），所以有两个地方粗暴的使用了 any—— API 返回的数据，和 PayloadAction 中的值。同时这也代表着学习曲线比较陡峭，我也挺好奇在实际项目中如果要实现重写 CSS 会不会有什么规范，毕竟如果重复定义 css 名称的话，大概率还是会导致重复 CSS 的出现。，只实现了一个简单的首页功能，API 用的是 the Movie Database，不想用 API 的也可以装一个。其中鼠标悬浮的动画的实现由。Redux 在完成了。

试玩地址：https://goldenaarcher.com/minesweeper，stroybook 的地址：https://www.chromatic.com/build?appId=63b2530f575ed5942cf105be&number=1测试主要使用 jest（mock）+ RTL 实现的，覆盖率还行：有些特别低的因为 storybook 没测试：用到的技术栈有：TypeScriptReact + Redux + React RouterJest + RTL + strykerstryke

使用 Next.js 开发个人博客的一点记录其实是要帮学校的某个 club 写官网，最终会使用学校的服务器进行部署，所以也就不考虑 hexo+GitHub 这样的实现方法了。经过一番搜索之后，最终决定使用 Next.js 作为服务端渲染，读取本地 Markdown 的，以及使用图床三管齐下结合的方式进行实现。下面解释一下为什么使用 Next.js，markdown 和 图床。Next.js可以使用 SSG 的方式进行渲染，俱乐部的文章内容等本身就不会更新的特别频繁，所以可以使用 SSG 加上重

[React 实战系列] 注册功能的优化注册功能的优化获取注册状态注册流程的优化清空表单显示成功提示信息显示失败提示信息重置状态之前已经实现的内容：项目开始前的准备工作项目的搭建与配置布局、登录、注册的页面实现及 Route 的封装注册功能的实现至上一篇为止，注册的基本功能已经实现了，但是用户注册了之后 UI 没有与用户实现有意义的互动，并且当用户回到注册页面的时候，基本的注册信息被持久化在页面上。这一篇主要实现的目的就是对这些功能进行优化。注册功能的优化一般页面注册流

[React 实战系列] 注册功能的实现之前已经实现的内容：项目开始前的准备工作项目的搭建与配置布局、登录、注册的页面实现及 Route 的封装注册功能的实现注册的页面 UI 既然已经实现了，剩下的就是向里面填充功能。注册的功能会使用 Redux 去进行规范化，所以，首先需要时间 Redux 的 Action 和 Reducer。注册的 Redux回顾一下 Redux 的核心逻辑就是这样的一个轮回：#mermaid-svg-qMjdOAFn4EoH49Tq .label{

Chess案例学习，Class Diagram + 基础代码 + JUnit5学习笔记+作业笔记。Class Diagram画好的 UML 图如下：#mermaid-svg-AbDWdBUc6GcUZ9Cc .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-AbDWdBUc6GcUZ9Cc .label t

[React 实战系列] 布局、登录、注册的页面实现及 Route 的封装Layout导航栏(Menu)页头(PageHeader)重构 Routes新增 routeConfig.ts修改 Routes.tsx修改 Home.tsx修改 Shop.tsx修改 Navigation.tsx登录配置登录页面新建登录组件实现登录表单注册配置注册页面新建注册组件及组件实现之前差不多将配置都实现得差不多了，现在就开始进行页面的实现。回顾一下上一篇文章中实现的效果：这篇会从这里开始，完成 布局、注册、登录 三个

项目开始前的配置，除了新建项目的步骤之外，主要以环境和 Redux 相关为主。这里主要使用 yarn 去下载与更新依赖，主要是因为使用 npm 的命令数次都无法启动，但是使用 yarn 就没有问题。项目的分析参见：项目开始前的准备工作配置完的的代码在：React 实战系列-电商项目的搭建与配置。

[React 实战系列] 项目开始前的准备工作使用的技术栈使用的工具Nodeyarn本地服务器VSCode浏览器选择及浏览器扩展现在打算实现一个前端电商项目进行练手，之后的笔记是基于项目进行的学习笔记。 站点地图(site map)大致是这样的：每个页面上都有导航栏，可以进行页面之间的互相跳转。本章主要内容讲的还是工具的安装和配置，为项目正式开始做准备。使用的技术栈T

[项目实战，源码完整]手把手教你怎么封装功能，React 重写学成在线 IV学完这篇教程，你应该能够掌握以下知识点： 二维数组的使用 动态修改 CSS(行内 CSS) 了解到封装的优势前情回顾依旧，目前的项目进度可以在: https://goldenaarcher.com/xczx-react/#/ 上看到。在上一篇 [项目实战，源码完整]手把手教你怎么封装组件，React 重写学成在线 III 中，首页的内容可以说是完成一半了，此时的效果如下：这里的实现方法是通过调用两个循环完成的，

xczx4 二维数组 动态修改 CSS(行内 CSS)import php from '../asset/img/courses/php.png';import andriod from '../asset/img/courses/andriod.png';import angular from '../asset/img/courses/angular.png';import androidHybrid from '../asset/img/courses/andriod-hybrid.p

很多同学刚刚毕业在准备面试的时候，经常会碰到一些问题：明明已经准备好了腹稿，但是面试的时候却想不起来提起自己完成的一些炫酷功能；想让面试官看到自己实现的功能，却不知道应该怎么部署；用 CSS 写了一些很炫酷的功能，但是却因为不是一个完整的项目不知道怎么展现给面试官看；做项目的时候买了云服务器，找工作续费的时候发现太贵了，有点超出预算；如果你也有这样的烦恼，不妨考虑白嫖 Git Pages 去渲染自己的页面，然后将 url 放到简历，让面试官看看你究竟有多优秀。

看完这篇教程，你应该就能掌握了以下知识点： 知道 react-router-dom 的 useLocation 这个钩子函数 在 React 中动态添加类名 知道父子组件之间怎么信息 使用依赖包实现轮播图效果 利用绝对定位解决元素叠加问题

看完这篇教程，你应该可以：使用 React 脚手架新建一个项目了解 React 的项目结构编写 React 代码使用 React 渲染一个静态页面原生的项目是之前使用 HTML/CSS 完成的学成在线页面，视屏展示在这里：学成网首页 - 静态页面展示本篇主旨就是使用 React 去重构整个静态页面，达成一样的实现效果。另外，虽然字数有2w5，但是很大一部分是代码。

学成在线 静态页面终结版完整页面的展示： 学成网首页 - 静态页面展示 四个页面都做了超链接的联动，整个流程大概是这样的，当然，首页是最先做的，所以超链接没放上去。另外首页的导航的 cursor 改成了 pointer，但是不知道为什么视频上看不出来……总结以纯 HTML+CSS 完成的静态页面这部分就做完了，布局的部分是都已经完成了，缺失的部分是一些最后两个页面中，例如说字体大小

在美好的礼拜天，正好我们不调休，把最后一个页面给完成了。和其他用浮动座位布局方式比起来，课程类表页面最终还是使用了flexbox去布局，一来主要内容最下面的 分页 部分用浮动+绝对定位做出来挺麻烦的，二来也想多尝试一下flexbox布局。依旧源码在 github 上，新写完的页面也在 v2 文件夹里。

先把剩下两个页面中比较复杂的，也许要超链接的页面做掉了。大部分布局上的功能都实现了，就剩下一些细节上的：例如说没有补上的注释，以及字体大小颜色上的细节方面。div都分了，class 也取名了，但是因为刚开始的时候CSS没有设计好，导致现在要重复写CSS就感觉很懈怠……依旧源码在 github 上，新写完的页面也在 v2 文件夹里。

学成在线 职业规划 页面为什么这么赶呢，主要是PS白嫖期快过了1/3了，总得赶在试用期之前做完嘛……之前的进度第一版跟着视频做的，也写了步骤分解，详情可以看这个：学成在线 制作分解版。完整的页面之前做完了，效果图看着里：学成在线首页完整版源码在 github 上，新写完的在 v2 文件夹里。职业规划页面的实现做的还是挺像的（点头），对比图如下：PSD完成图和首页比起来这个其实做的很快了，原因有以下几点：Overflow 的部分没写，这个部分下个礼拜会补上

跟着 PSD 切图做完了，把 promo-nav，左边浮动的边框等都补充完成了。当然，值目前都是写死的，移动端还没适配——书和视频都还没看到那里。第一版跟着视频做的，也写了步骤分解，详情可以看这个：学成在线 制作分解版。源码在 github 上，新写完的在 v2 文件夹里。PSD与完成版与第一版之间的对比：PSD完成版第一版具体的变化如下：头部改用 flex 完成……本来想用 position + float 写的，后面折腾了很久没有折腾出来，就干脆偷懒

资源在 github 上放了，在最下面，有 psd 有切图，需要的自取。依旧是来自来自 黑马程序员 pink 老师前端入门视频教程 HTML5+CSS3+移动端布局-flex 布局 rem 布局响应式布局摹客蓝湖使用-简单有趣好玩 的教程。其实感觉从黑马视频里面学到蛮多的，特别是工具啊，Emmet 语法啊，但是感觉身边培训班出来的同事……根据页面布局分成 5 个大模块，每个大块里面还有对应的子模块。

博客项目计划通过HTML、CSS、JavaScript完成一个博客项目。