CDS007的个人博客

Redux介绍 Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行作用：通过集中管理的方式管理应用的状态 为什么要使用Redux？ 独立于组件，无视组件之间的层级关系，简化通信问题 单项数据流清晰，易于定位bug 调试工具配套良好，方便调试 Redux快速体验1. 实现计数器 需求：不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器 使用步骤： 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态） 使用createStore方法传入 reducer函数 生成一个store实例对象 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知） 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据） 使用store实例的 getState方法 获取最新的状态数据更新到视图中 代码实现： 1234567891011121314151617181920212223242526272829303132333 ...

路由快速上手1. 什么是前端路由一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染 2. 创建路由开发环境12345678# 使用CRA创建项目npm create-react-app react-router-pro# 安装最新的ReactRouter包npm i react-router-dom# 启动项目npm run start 3. 快速开始 1234567891011121314151617import React from 'react'import ReactDOM from 'react-dom/client'const router = createBrowserRouter([ { path:'/login', element: <div>登录</div> }, { path:'/article', element: ...

React表单控制受控绑定 概念：使用React组件的状态（useState）控制表单的状态 12345678910function App(){ const [value, setValue] = useState('') return ( <input type="text" value={value} onChange={e => setValue(e.target.value)} /> )} 非受控绑定 概念：通过获取DOM的方式获取表单的输入数据 123456789101112131415function App(){ const inputRef = useRef(null) const onChange = ()=>{ console.log(inputRef.current.value) } return ( <input ...

MyBatisPlus-DQL、DML、乐观锁1，MyBatisPlus入门案例与简介这一节我们来学习下MyBatisPlus的入门案例与简介，这个和其他课程都不太一样，其他的课程都是先介绍概念，然后再写入门案例。而对于MyBatisPlus的学习，我们将顺序做了调整，主要的原因MyBatisPlus主要是对MyBatis的简化，所有我们先体会下它简化在哪，然后再学习它是什么，以及它帮我们都做哪些事。 1.1 入门案例 MybatisPlus(简称MP)是基于MyBatis框架基础上开发的增强型工具，旨在简化开发、提供效率。 开发方式 基于MyBatis使用MyBatisPlus 基于Spring使用MyBatisPlus 基于SpringBoot使用MyBatisPlus SpringBoot刚刚我们学习完成，它能快速构建Spring开发环境用以整合其他技术，使用起来是非常简单，对于MP的学习，我们也基于SpringBoot来构建学习。 具体的实现步骤为: 步骤1:创建数据库及表12345678910111213create database if not exists m ...

Maven高级-模块、依赖、聚合继承、属性、多环境1，分模块开发1.1 分模块开发设计(1)按照功能拆分 我们现在的项目都是在一个模块中，比如前面的SSM整合开发。虽然这样做功能也都实现了，但是也存在了一些问题，我们拿银行的项目为例来聊聊这个事。 网络没有那么发达的时候，我们需要到银行柜台或者取款机进行业务操作 随着互联网的发展,我们有了电脑以后，就可以在网页上登录银行网站使用U盾进行业务操作 再来就是随着智能手机的普及，我们只需要用手机登录APP就可以进行业务操作 上面三个场景出现的时间是不相同的，如果非要把三个场景的模块代码放入到一个项目，那么当其中某一个模块代码出现问题，就会导致整个项目无法正常启动，从而导致银行的多个业务都无法正常班理。所以我们会按照功能将项目进行拆分。 (2)按照模块拆分 比如电商的项目中，有订单和商品两个模块，订单中需要包含商品的详细信息，所以需要商品的模型类，商品模块也会用到商品的模型类，这个时候如果两个模块中都写模型类，就会出现重复代码，后期的维护成本就比较高。我们就想能不能将它们公共的部分抽取成一个独立的模块，其他模块要想使用可以像添加第三方jar ...

SpringBoot-快速开发 激动人心的Spring Boot！ 1，SpringBoot简介SpringBoot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化 Spring 应用的初始搭建以及开发过程。 使用了 Spring 框架后已经简化了我们的开发。而 SpringBoot 又是对 Spring 开发进行简化的，可想而知 SpringBoot 使用的简单及广泛性。既然 SpringBoot 是用来简化 Spring 开发的，那我们就先回顾一下，以 SpringMVC 开发为例： 创建工程，并在 pom.xml 配置文件中配置所依赖的坐标 编写 web3.0 的配置类 作为 web 程序，web3.0 的配置类不能缺少，而这个配置类还是比较麻烦的，代码如下 编写 SpringMVC 的配置类 ​ 做到这只是将工程的架子搭起来。要想被外界访问，最起码还需要提供一个 Controller 类，在该类中提供一个方法。 编写 Controller 类 从上面的 SpringMVC 程序开发可以看到，前三步都是在搭建环境，而且这三步基本都是固定 ...

SpringMVC2-SSM整合 和 interceptor拦截器1，SSM整合前面我们已经把Mybatis、Spring和SpringMVC三个框架进行了学习，今天主要的内容就是把这三个框架整合在一起完成我们的业务功能开发，具体如何来整合，我们一步步来学习。 1.1 流程分析(1) 创建工程 创建一个Maven的web工程 pom.xml添加SSM需要的依赖jar包 编写Web项目的入口配置类，实现AbstractAnnotationConfigDispatcherServletInitializer重写以下方法 getRootConfigClasses() ：返回Spring的配置类->需要==SpringConfig==配置类 getServletConfigClasses() ：返回SpringMVC的配置类->需要==SpringMvcConfig==配置类 getServletMappings() : 设置SpringMVC请求拦截路径规则 getServletFilte ...

SpringMVC1-从Servlet到SpringMVC 之前上铁哥的课，主要还是学的SpringMVC的内容，铁哥也是从Servlet、Tomcat讲起，然后讲到MVC架构，讲到SpringMVC的，后面是模板引擎Themleaf，最后才是主流的前后端分层架构。这一期我主要总结下SpringMVC-1的相关内容，包括SpringMVC项目的搭建、常用注解、请求响应流程、Restful API等。 1，SpringMVC概述学习SpringMVC我们先来回顾下现在web程序是如何做的，咱们现在web程序大都基于三层架构来实现。 三层架构 浏览器发送一个请求给后端服务器，后端服务器现在是使用Servlet来接收请求和数据 如果所有的处理都交给Servlet来处理的话，所有的东西都耦合在一起，对后期的维护和扩展极为不利 将后端服务器Servlet拆分成三层，分别是web、service和dao web层主要由servlet来处理，负责页面请求和数据的收集以及响应结果给前端 service层主要负责业务逻辑的处理 dao层主要负责数据的增删改查操作 servlet处理请求和 ...

React介绍React由Meta公司开发，是一个用于 构建Web和原生交互界面的库 开发环境创建create-react-app是一个快速创建React开发环境的工具，底层由Webpack构件，封装了配置细节，开箱即用执行命令： 1npx create-react-app react-basic npx - Node.js工具命令，查找并执行后续的包命令 create-react-app - 核心包（固定写法），用于创建React项目 react-basic React项目的名称（可以自定义）:::warning创建React项目的更多方式https://zh-hans.react.dev/learn/start-a-new-react-project::: JSX基础什么是JSX 概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式 12345678910const message = 'this is message'function App(){ retur ...

Spring3-AOP 和 Spring事务目标 理解并掌握AOP相关概念 能够说出AOP的工作流程 能运用AOP相关知识完成对应的案例编写 重点掌握Spring的声明式事务管理 1，AOP简介1.1 什么是AOP? AOP(Aspect Oriented Programming)面向切面编程，一种编程范式，指导开发者如何组织程序结构。 OOP(Object Oriented Programming)面向对象编程 我们都知道OOP是一种编程思想，那么AOP也是一种编程思想，编程思想主要的内容就是指导程序员该如何编写程序，所以它们两个是不同的编程范式。 1.2 AOP作用 作用:在不惊动原始设计的基础上为其进行功能增强，前面咱们有技术就可以实现这样的功能即代理模式。 前面咱们有技术就可以实现这样的功能即代理模式。 1.3 AOP核心概念为了能更好的理解AOP的相关概念，我们准备了一个环境，整个环境的内容我们暂时可以不用关注，最主要的类为:BookDaoImpl 1234567891011121314151617181920212223242526@Repositorypu ...