Giter Site home page Giter Site logo

mercyblitz / tech-weekly Goto Github PK

View Code? Open in Web Editor NEW
3.9K 359.0 711.0 19.03 MB

「小马哥技术周报」

Home Page: https://douyu.com/mercyblitz

License: Apache License 2.0

Java 100.00%
mercyblitz java live-stream douyu spring-cloud-alibaba dubbo microservice

tech-weekly's Introduction

「小马哥技术周报」

「小马哥技术周报」是小马哥的线上技术直播分享,通常每一到两周直播一次,具体通知请关注微信公众号:

  • 小马哥的时间与精神小屋

主播介绍

小马哥Java 劝退师Apache Dubbo PPMC、Spring Cloud Alibaba 项目架构师。目前主要负责集团中间件开源项目、微服务技术实施、架构衍进、基础设施构建等。通过 SUN Java(SCJP、SCWCD、SCBCD)以及 Oracle OCA 等的认证。

往期录播

开源项目

如果您爱好开源技术,并且希望得到更多的技术和知识,不妨从 star 以上工程开始。

tech-weekly's People

Contributors

mercyblitz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tech-weekly's Issues

Java 自虐题精选-第四题Java的静态变量初始化的坑的理解

小马哥,

我对昨天的第四题的分析,我觉得不是因为循环依赖导致的,因为这个让我联想到了另外一道啃爹面试题,所以有一些自己的理解,不知道你是否赞同?具体分析如下

这道面试题是这样的:

class SingleTon {
private static SingleTon singleTon = new SingleTon();
public static int count1;
public static int count2 = 1;

private SingleTon() {
    count1++;
    count2++;
}

public static SingleTon getInstance() {
    return singleTon;
}

}

public class Test {
public static void main(String[] args) {
SingleTon singleTon = SingleTon.getInstance();
System.out.println("count1=" + singleTon.count1);
System.out.println("count2=" + singleTon.count2);
}
}

这道题目的答案是: singTon.count1=1 singTon.count2=1, 而不是count1=1 和 count2=2

原因分析:

  1. 首先静态字段会进行默认顺序初始化。即 singTon=null count1=0 count2=0

  2. 然后静态字段会进行显示初始化。问题就出现这里(这里就是影响结果的地方)

3.. 首先 singTon 进行显示初始化 它会创建 实例,调用构造函数,执行完成以后 此时 count1=1 count2=1

  1. 然后才是静态变量 count1和count2进行显示初始化,因为count1没有显示初始化值,所以结果就是 count1=1 但是 count2变量进行完显示初始化后值就为 1了 (在此过程之前静态变量count1和count2还没有进行显示初始化的)

所以,综上 结果是 singTon.count1=1 singTon.count2=1

衍生到昨天那道题目:

public class Elvis {

public static final Elvis ELVIS = new Elvis();

private Elvis() {
}

private static final Boolean LIVING = true;

private final Boolean alive = LIVING;

public final Boolean lives() {
    return alive;
}

public static void main(String[] args) {
    System.out.println(ELVIS.lives() ? "Hound Dog" : "Heartbreak Hotel");
}

}

分析:

  1. 首先静态字段会进行默认顺序初始化: ELVIS = null, LIVING = null
  2. 然后静态字段会进行显示初始化, Elvis ELVIS = new Elvis(); -> alive = LIVING;
  3. 此时的LIVING还是null, 所以alive 也是null
  4. 进行LIVING 的显式初始化, LIVING = true
  5. 因此ELVIS.lives() 是null

所以,我觉得以上2道面试题基本类似,是因为静态字段在顺序初始化时候分为默认赋值和显式赋值两个阶段,导致了以上的问题。

@Autowired 的成员变量好像不是线程安全的

Hi 小马哥,
昨天你上课时说:在@RestController@Autowired的成员变量在@GetMapping方法中使用是线程安全的,我不是特别理解,就写代码测试了下,貌似不是线程安全的,这是我的测试代码,第一个request修改了Coffee,第二个request得到的是已经修改的Coffee,这说明Coffee是单例共享变量咯。如果我哪里理解得不对,望指正,谢谢。

`
@Autowired
private Coffee coffee;

private volatile int count;

@GetMapping("/testCoffee")
public Coffee testCoffee(){
    logger.info("----------------" + ++count);
    logger.info("Before coffee: " + coffee);
    logger.info("Before coffee class: " + coffee.getClass().getName());
    coffee.setPrice(Money.of(CurrencyUnit.USD, 100));
    logger.info("After coffee: " + coffee);
    logger.info("After coffee class: " + coffee.getClass().getName());
    return coffee;
}

`

Log:

2019-04-27 08:22:21.716 INFO 3500 --- [nio-8080-exec-2] com.sonic.controller.RestDemoController : ----------------1
2019-04-27 08:22:21.716 INFO 3500 --- [nio-8080-exec-2] com.sonic.controller.RestDemoController : Before coffee: Coffee{id=null, name='null', price=null}
2019-04-27 08:22:21.716 INFO 3500 --- [nio-8080-exec-2] com.sonic.controller.RestDemoController : Before coffee class: com.sonic.bean.Coffee
2019-04-27 08:22:21.723 INFO 3500 --- [nio-8080-exec-2] com.sonic.controller.RestDemoController : After coffee: Coffee{id=null, name='null', price=USD 100.00}
2019-04-27 08:22:21.723 INFO 3500 --- [nio-8080-exec-2] com.sonic.controller.RestDemoController : After coffee class: com.sonic.bean.Coffee
2019-04-27 08:22:26.727 INFO 3500 --- [nio-8080-exec-1] com.sonic.controller.RestDemoController : ----------------2
2019-04-27 08:22:26.727 INFO 3500 --- [nio-8080-exec-1] com.sonic.controller.RestDemoController : Before coffee: Coffee{id=null, name='null', price=USD 100.00}
2019-04-27 08:22:26.727 INFO 3500 --- [nio-8080-exec-1] com.sonic.controller.RestDemoController : Before coffee class: com.sonic.bean.Coffee
2019-04-27 08:22:26.727 INFO 3500 --- [nio-8080-exec-1] com.sonic.controller.RestDemoController : After coffee: Coffee{id=null, name='null', price=USD 100.00}
2019-04-27 08:22:26.727 INFO 3500 --- [nio-8080-exec-1] com.sonic.controller.RestDemoController : After coffee class: com.sonic.bean.Coffee

tech-weekly 第十五期 示例程序缺了代码

mercyblitz, 你好!
我在看B站视频, 在节目 tech-weekly 第十五期中 ,没有看到对应的例子程序,
目录是: tech-weekly\2019.01.04「小马哥技术周报」- 第十五期《Apache Dubbo 微服务系列之 Dubbo 与 Spring Cloud 整合》\dubbo-samples\dubbo-spring-cloud-samples\dubbo-spring-cloud-consumer-sample\src\main\ ,只有配置文件,几个目录都是这样。
请问是否没有上传或是在其他的地方? 请帮忙看一下,谢谢了!

【开源自荐】基于nextjs14,良好的体验、响应式、编码设计,开源了C-Shopping开源电商平台

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

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

项目在线演示地址:

项目传送门: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仓库中找到项目源码,提出建议或者一同参与开发。

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.