aliyunfe / weekly Goto Github PK

利用工作之余时间逐行剖析Vuejs源码，将Vuejs源码分为九大模块，逐个击破，希望能帮助到更多的Vue初学者。

在线阅读地址：https://nlrx-wjc.github.io/Learn-Vue-Source-Code/
项目地址：https://github.com/NLRX-WJC/Learn-Vue-Source-Code

另外，本项目也受到了阮一峰老师的肯定，已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期，同时也被多个微博大V转发，短短一个月时间内在github上star数量就已经破1.9k！

简介

AI生成可视化原型设计和编辑平台，支持2D，3D模型，结合LLM(Large Language Model) 快速编辑。

https://github.com/CloudOrc/SolidUI

核心特点

极简流程，简洁设计
多种2D图例
多种3D场景
支持webgl
支持olap
支持Large Language Model
容器化部署

共建

代码共建（前端，Java，python等等）
社区共建（内容运营）
各种贡献都可以
使用者也可以
现在正在发布0.1.0版本

个人介绍

这是个人发起社区，本人是自由职业，所以是有精力去维护发起社区，希望有兴趣的朋友参与，具体加微信聊（mengyoupanshan）

Introduction

AI-generated visual prototyping and editing platform, supports 2D and 3D models, combined with LLM (Large Language Model) for fast editing.

https://github.com/CloudOrc/SolidUI

##Core Features
Minimalist process, concise design
Various 2D legends
Various 3D scenes
support webgl
support olap
Support for large language models
containerized deployment

co-construction

Code co-construction (front-end, Java, python, etc.)
Community co-construction (content management)
All kinds of donations are available
Users can also
Now releasing version 0.1.0

##self introduction

This is, I, I am free, so free and free energy to maintain and initiate

使用 非商用-非衍生-保持署名 的方式

文章名称：解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）
文章链接：https://mp.weixin.qq.com/s/O_nzIM6vdfJfd2wKDsuZAA
文章亮点：这是大厂前端技术体系解密系列第二篇可以看到许多比较前沿的探索，对于想要了解前端发展趋势的同学非常有帮助。百度虽然最近几年在移动互联网掉队，但作为国内老牌的互联网公司，其技术积累还是相当深厚的，可以看到在应用框架、数据可视化、智能小程序、工程化等方面都有很好的沉淀。本文系统性的介绍了百度在前端技术体系的建设情况，希望能够给到前端同学帮助。

第一次点进来，只有第几期...
完全不知道是什么时候发布的，也不知道多长时间发一期

文章名称：解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）
文章链接：https://mp.weixin.qq.com/s/haSCjEOVCZSeaT2q5E2BQw
文章亮点：阿里的前端技术体系应该是国内走的比较前沿的，再加上其对开源社区的开放性，公开资料比较多，从中能够看到冰山一角，非常值得学习借鉴。本文从阿里前端团队开始介绍，整体技术体系涵盖：基础设施、服务层、应用层、UI组件层、跨平台、工程化、智能化，可以看到许多比较前沿的探索，对于想要了解前端发展趋势的同学非常有帮助。

写在前面

使用Webpack有一段时间了，但是感觉之前学的用的都比较零散，
所以在这里整理一下Webpack的使用知识，从一开始的入门到进阶。

你知道如何使用webpack打包项目吗？
你知道如何在React中使用模块化的css样式吗？

学完文本文章后，嘿嘿嘿....

什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
当我们在项目中导入了过多的外部文件是，或造成请求过程慢，错综复杂的依赖关系，以及全局变量污染等问题
那么，如何解决这些问题呢？请使用webpack
webpack 这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

webpack安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev 将webpack安装到项目依赖中

初步使用webpack打包构建列表隔行变色案例

1. 运行npm init初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构
3. 使用cnpm i jquery --save安装jquery类库
4. 创建main.js并书写各行变色的代码逻辑：

	// 导入jquery类库
    import $ from 'jquery'

    // 设置偶数行背景色，索引从0开始，0是偶数
    $('#list li:even').css('backgroundColor','lightblue');
    // 设置奇数行背景色
    $('#list li:odd').css('backgroundColor',function(){
		return "#f60"
	});

5. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
6. ** webpack最基本的使用：**运行webpack 入口文件路径 输出文件路径对main.js进行处理：

webpack src/js/main.js dist/bundle.js

** 我们每打包一次就要输入一长串的的指令，那么有没有什么办法可以简单实现打包呢，请往下看 **

使用webpack的配置文件简化打包时候的命令

1. 在项目根目录中创建webpack.config.js
2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

    // 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        }
    }

3. 这样，我们在打包的时候，输入当我们在控制台直接输入 webpack 命令执行的时候，webpack会执行以下步骤

• 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
• webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
• 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
• 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

** 我们想要解放自己的双手，可不可以我们在 ctrl + s的时候，自动打包呢？**

实现webpack的实时打包构建

1. 使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
2. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖
3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，
   来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，
   发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是为什么呢？因为webpack-dev-server将打包好的文件放在了内存中

• 把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
• 这个时候我们访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，
  此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
• 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

"dev": "webpack-dev-server --contentBase src"

同时修改index页面中script的src属性为<script src="bundle.js"></script>

4. 注意：由于最新的webpack和webpack-dev-server打包报错，这里我使用的是[email protected]和[email protected]

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

html-webpack-plugin的两个作用

• 自动在内存中根据指定页面生成一个内存的页面
• 自动，把打包好的(output输出的) bundle.js 追加到页面中去

使用步骤

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下：

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

3. 修改package.json中script节点中的dev指令如下：

"dev": "webpack-dev-server"

4. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，在CSS身上表现明显！

方式1：

• 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

1. 修改webpack.config.js文件，新增devServer节点如下：

 devServer: { // 这是配置 dev-server 命令参数的第二种方法，相对来说，这种方法麻烦一些
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时候的运行端口
    contentBase: 'src', // 指定托管的根目录
    hot: true
  },

2. 在头部引入webpack模块：

var webpack = require('webpack');

3. 在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

使用webpaack处理css文件和高级js语法

webpack 处理第三方文件类型的过程：

1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；
3. 在调用loader 的时候，是从后往前调用的；
4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去

使用webpack打包css文件

1. 运行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

1. 运行cnpm i less-loader less -D
2. 修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

1. 运行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

1. 运行cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel处理高级JS语法

1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

在React中使用模块化的css

写在最后，学过vue的同学都知道，我们可以在 <style scoped="scoped"></style> 来设置局部的css样式
那么，在react中如何实现局部的css样式呢？

1. 在webpack.config.js中为css-loader启用模块化： css-loader?modules&localIdentName=[name]_[local]-[hash:8]
2. 在js 文件中引入样式

	import indexStyle from 'Index.css'`
	// 此时 indexStyle 是一个对象，
	// indexStyle = {
	//	title : '乱码1',
		box : '乱码2'......
	// }
	export default function App(props) {
			return (
				<div className={indexStyle.box}>
				  <h1 className={indexStyle.title}>XXXXXX</h1>
				  <h3 className={indexStyle.body}>XXXXXX</h3>
				</div>
			)
	}

注意

/* 注意：当启用 CSS 模块化之后，这里所有的类名，都是私有的，
	如果想要把类名设置成全局的一个类，可以把这个类名，用 :global() 给包裹起来 */
/* 当使用 :global() 设置了全局的 类样式之后，这个类不会被重命名 */
/* 只有私有的类才会被重命名 */

:global(.title){
  color:red;
  text-align: center;
}

老师您好，这是我第一次开源项目，有很多不足，但是是我花了晚上休息的时间，精心打磨的，希望自己能有高质量的输出，也希望能帮助到更多的人。

嗨，大家好！欢迎来到C-Shopping，这是一场揭开科技面纱的电商之旅。我是C-Shopping开源作者“继小鹏”，今天将为你介绍一款基于最新技术的开源电商平台。让我们一同探索吧！

项目在线演示地址：

• docker 部署地址：http://shop.huanghanlian.com/
• vercel 部署地址：https://c-shopping-three.vercel.app/

项目传送门：https://github.com/huanghanzhilian/c-shopping

如果你觉得有帮助，请给我一个Star，这会给我更大的鼓励。

项目背景

背景：

• 一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；
• 多设备适配的web优秀项目很少，学习和维护成本较高；
• 当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
• 随着项目复杂，样式的开发与维护变得庞大且臃肿；

意图：

改进背景中提到的问题。

目的：

打造一个完整的，适合web端的良好生态。

首先，让我们了解一下C-Shopping的技术背后。我采用了一系列最前沿的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query、JWT和Docker等。这确保了此项目不仅高效，而且具备强大的可扩展性。我们致力于解决传统电商平台的一些痛点：不美观、不适配不同设备、界面单一，等等。C-Shopping通过采用最新的技术和设计理念，为用户打造了一场全响应式技术开发体验。

C-Shopping关注用户体验。我们的界面不仅仅美观，更是响应式设计，让用户可以在任何设备上轻松愉悦地购物。个人中心和订单管理功能也让你的购物更加个性化和方便。

项目亮点

C-Shopping的亮点之一是我们采用了一系列先进的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query等，为用户提供了极致的性能和体验。不仅注重美观，更追求技术上的卓越。

Next.js 驱动的极速体验

C-Shopping采用了 Next.js，这不仅意味着网页加载速度飞快，而且还支持服务端渲染，让你体验到前所未有的流畅度。

🎨 Tailwind CSS 的时尚设计

采用 Tailwind CSS，为 C-Shopping 注入了时尚感。每一次的界面都如同艺术品般精致，让购物成为一场视觉的盛宴。

🔧 Headless UI 自由而灵活

C-Shopping 选择了 Headless UI 风格，让用户可以在购物过程中拥有更多自由。不再受限于传统的UI框架，为你打开了更多定制的大门。

🔐 JWT 安全无忧

安全至上！采用 JWT 进行用户身份验证，为你的购物行为提供了最强有力的保障，让你可以放心尽情购物。

🐳 Docker 容器化的完美部署

C-Shopping 拥抱 Docker，使得项目的部署变得前所未有的简单。容器化技术让整个项目在不同环境中都能如鱼得水地运行。

🔄 Redux Toolkit 和 RTK Query 的状态管理艺术

C-Shopping 使用 Redux Toolkit 和 RTK Query，让状态管理变得更加轻松愉快。你可以更好地追踪应用中的数据流，确保购物体验的稳定性。

功能演示

现在，让我们来看看C-Shopping的一些基本功能。从清晰的导航和商品展示，到方便的搜索和购物车功能，每一个细节都经过精心设计，为用户提供愉悦的购物体验。

用户端

模块	Desktop devices	Mobile devices
首页
二级分类
三级分类
商品详情
登录
注册
搜索
购物车
支付页
个人中心
我的订单
我的评论
地址管理
近期访问

管理端

模块	Desktop devices	Mobile devices
登录
管理中心
用户管理
分类管理
分类管理树状
规格管理
商品管理
订单管理
评论管理
滑块管理
banner管理

项目结构

🏗️ C-Shopping 项目结构：

📂 c-shopping
  ├── 📁 app
  │   ├── 📁 main
  │   │   ├── 📁 client-layout
  │   │   ├── 📁 empty-layout
  │   │   ├── 📁 admin
  │   │   ├── 📄 layout.js
  │   │   └── 📁 profile
  │   ├── 📄 StoreProvider.js
  │   ├── 📁 api
  │   │   ├── 📁 auth
  │   │   ├── 📁 banner
  │   │   ├── 📁 category
  │   │   ├── 📁 details
  │   │   ├── 📁 order
  │   │   ├── 📁 products
  │   │   ├── 📁 reviews
  │   │   ├── 📁 slider
  │   │   ├── 📁 upload
  │   │   └── 📁 user
  │   ├── 📄 layout.js
  │   └── 📄 not-found.js
  ├── 📄 commitlint.config.js
  ├── 📁 components
  ├── 📄 docker-compose.yml
  ├── 📁 helpers
  │   ├── 📁 api
  │   ├── 📄 auth.js
  │   ├── 📁 db-repo
  │   ├── 📄 db.js
  │   ├── 📄 getQuery.js
  │   └── 📄 index.js
  ├── 📁 hooks
  ├── 📄 jsconfig.json
  ├── 📁 models
  ├── 📄 next.config.js
  ├── 📄 package-lock.json
  ├── 📄 package.json
  ├── 📄 postcss.config.js
  ├── 📂 public
  ├── 📁 store
  ├── 📁 styles
  ├── 📄 tailwind.config.js
  └── 📁 utils

主要结构解释：

• 📁 app: 应用程序的主要代码

  • 📁 main: 主要应用程序组件
    • 📁 client-layout: 用户端通用布局页面
    • 📁 empty-layout: 通用空白布局页面
    • 📁 admin: 管理端页面
    • 📄 layout.js: 主要布局配置
    • 📁 profile: 用户个人资料页面
  • 📄 StoreProvider.js: 全局状态管理提供者
  • 📁 api: API 请求相关路由
    • 📁 auth: 用户认证 API
    • 📁 banner: 广告横幅 API
    • 📁 category: 商品分类 API
    • ...

• 📁 components: 可复用的 React 组件

• 📁 helpers: 辅助函数和工具

  • 📁 api: API 请求相关的辅助函数
  • 📄 auth.js: 用户认证相关的辅助函数
  • ...

• 📁 hooks: 自定义 React hooks

• 📁 models: 数据模型定义

• 📁 public: 静态资源，如图片、字体等

• 📁 store: Redux 状态管理相关配置

  • 📁 services: RTK Query
  • 📁 slices: Redux Toolkit

• 📁 styles: 样式文件

• 📁 utils: 通用工具

• ...

这个结构旨在使项目组织有序，易于维护和扩展。每个部分都按照功能和职责进行划分，使团队成员更容易理解和协作。

部署与使用

开发环境

1. 通过在终端运行以下命令克隆或下载存储库:

   git clone https://github.com/huanghanzhilian/c-shopping.git
   

2. 使用npm或yarn安装项目依赖项:

   npm install
   

   or

   yarn
   

3. 修改.env的文件，在项目根目录，定义所需的环境变量。这个步骤是重要的（图片上传OSS）:

   NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
   NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
   NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
   NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
   NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
   NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
   

4. 在本地机器上安装MongoDB

5. 运行项目

   npm run dev 
   

6. 注册一个账户

   http://localhost:3000/register
   

7. 创建帐户后，在数据库中找到您的帐户，并将root字段修改为true。role字段修改为admin，这将授予您访问所有管理仪表板功能的权限

   http://localhost:3000/admin
   

8. 操作MongoDB，创建根分类

   mongo
   

   use choiceshop
   

   db.categories.insert({
   	"name" : "精选好物",
   	"slug" : "choiceshop",
   	"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
   	"colors" : {
   		"start" : "#EF394E",
   		"end" : "#EF3F55"
   	},
   	"level" : 0
   })
   

docker 部署

项目根目录已经配置好docker compose，在安装docker环境后，直接运行部署

docker compose up -d --build

公众号

关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号。

许可证

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang

呼吁行动

C-Shopping是一个开源项目，欢迎更多的开发者加入我们的社区。你可以在我们的GitHub仓库中找到项目源码，提出建议或者一同参与开发。

如果你对项目感兴趣，欢迎加入我们的社区，一同为项目添砖加瓦。

文章名称：AntV/S2 基于Canvas的高性能多维分析表格
文章链接：https://juejin.cn/post/7081548620033425421/
文章亮点：S2 是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。

如果有 RSS 订阅就好了。

或者利用一下 GitHub 的 Watch Release Only，每周发布的同时发布一个 Release，大家也方便订阅。

⛽️

I look good you

《Node.js技术栈》，本文档是作者从事 Node.js Developer 以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予 Star 支持！在线地址：https://www.nodejs.red

无服务动态个人博客系统
https://github.com/guowenzhuang/gsbx
无须服务器部署,纯静态页面,实现文章管理,个人信息管理等
利用github issue存储数据