12 2022 档案

Java switch case语句
摘要：最近在项目中有根据传入不同的type来进行处理不同业务的需求，所以用到了switch case，而自己又没有深刻的总结过这方面的代码，导致代码穿透了，还好自测发现了，不然搞个乌龙。 那么这个用法应该怎么用呢? 我们先来了解这个关键字的用法是什么：在菜鸟教程中定义时这样的：switch case 语句 阅读全文
posted @ 2022-12-12 11:07 程序员鲜豪 阅读(174) 评论(0) 推荐(0)
React后台管理系统11 配置项目初始化展开代码
摘要：在上一文中，我们已经配置好了，刷新默认打开选中的样式，但是如果是在/page3/1，这种的，并没有选中到/page3里面的/page3/1，这个地方来，所以我们需要解决的就是这几个问题： 思路如下： // 拿着currentRoute.pathname 跟items数组里面的每一个children来 阅读全文
posted @ 2022-12-11 15:32 程序员鲜豪 阅读(109) 评论(0) 推荐(0)
React后台管理系统10 菜单数据的整理、以及其余路径的配置、刷新时默认当前选中样式
摘要：对菜单进行数据整理 import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, } from '@ant-design/icons'; import type { MenuProps } 阅读全文
posted @ 2022-12-11 12:53 程序员鲜豪 阅读(322) 评论(0) 推荐(0)
React后台管理系统09 菜单组件的抽取
摘要：修改Home.tsx的内容：将主菜单的内容进行抽离，然后单独引入=>MainMenu import { Breadcrumb, Layout, Menu } from 'antd'; import React, { useState } from 'react'; import { Outlet } 阅读全文
posted @ 2022-12-10 23:12 程序员鲜豪 阅读(252) 评论(0) 推荐(0)
React后台管理系统08 左侧菜单栏点击事件以及设置只有一个菜单展开项
摘要：我们在Menu组件身上添加一个点击事件：对应的函数写一个回调函数：获取当前对象的e的身上的key, 这里其实不难看出e就是当前点击时的menu对象，我们这里获取的是e的key，对应上面定义的属性。 此时修改上面配置的参数为/page1 /page2 需要使用useNavigate和OutLet,Re 阅读全文
posted @ 2022-12-10 00:15 程序员鲜豪 阅读(394) 评论(0) 推荐(0)
React后台管理系统07 首页布局
摘要：注释掉App.tsx中的几个路由组件： 将Home.tsx中的代码使用ant Design网站中的布局进行替换 复制的代码如下： import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, 阅读全文
posted @ 2022-12-09 23:48 程序员鲜豪 阅读(664) 评论(0) 推荐(0)
React后台管理系统06 路由
摘要：在src目录下新建2views文件夹，用来存放组件，这里我们新建2个路由组件Home About，如下所示： 创建好这两个路由组件之后，在src目录里面我们新建一个router路由文件夹，然后命名一个index.tsx的文件，里面写上如下： 这里我们需要修改main.tsx，这里就不使用App了，这 阅读全文
posted @ 2022-12-06 22:55 程序员鲜豪 阅读(999) 评论(0) 推荐(0)
React后台管理系统05 引入UI组件库
摘要：使用命令引入UI组件库 npm install antd --save 使用命令安装ant的图标库 npm install --save @ant-design/icons ，注意这里的@后面是一个ant没有单词d! 配置Antd Design样式按需自动引入 npm install vite-pl 阅读全文
posted @ 2022-12-05 18:07 程序员鲜豪 阅读(154) 评论(0) 推荐(0)
React后台管理系统 04 配置路径别名、全局样式设置、模块化scss
摘要：ts中对于@符号指定的路径不支持，同时vite中也是不支持的，所以我们需要在vite.config.ts中进行指定配置，path是node中自带的一个模块这里爆红的原因是没有进行声明： 我们使用命令对path进行单独的声明之后就不会爆红了。 这样我们在引入的时候就可以直接使用@符号来代替点号了： 我 阅读全文
posted @ 2022-12-05 16:39 程序员鲜豪 阅读(231) 评论(0) 推荐(0)
React后台管理系统 03全局样式scss
摘要：安装scss样式依赖，使用命令 npm i --save-dev sass --dev 会将依赖安装在devDependencies=>开发环境的依赖。 我们在src目录下的assets下创建styles文件夹，然后创建文件global.scss全局的样式文件，里面写上文字选中，以及图片禁止拖动 最 阅读全文
posted @ 2022-12-05 14:00 程序员鲜豪 阅读(329) 评论(0) 推荐(0)
React后台管理系统 02样式初始化，引入reset-css
摘要：上一篇中，我们已经对项目的整体结构进行了搭建，现在需要对不需要的东西进行删除，最后留下这些东西。 现在需要对全部的样式进行清除，使用命令导入依赖：npm i reset-css 然后在main.tsx中进行引入，引入的位置必须要在这个上面 最后我们自己写的样式，以及UI组件之类的可以写的顺序必须是以 阅读全文
posted @ 2022-12-05 13:41 程序员鲜豪 阅读(215) 评论(0) 推荐(0)
React后台管理系统（TypeScript、Redux状态管理）环境搭建01
摘要：搭建环境的时候，我们必须要先确保环境有node环境和npm环境，如下使用cmd命令 确保自己有了这两个环境之后我们就可以开始搭建项目，首先找一个文件夹，这个文件夹用来初始化当前环境，例如，我这里选择的是E盘的learn-react目录下：依次敲击一下命令： 选择的时候选择React和TypeScri 阅读全文
posted @ 2022-12-05 13:27 程序员鲜豪 阅读(360) 评论(0) 推荐(0)