React实例之完善布局菜单（一）

今天我们来用所学的知识来做一个布局菜单的组件, 针对这个组件我之前写过一个教程 React之布局菜单-CSDN博客，那个呢比较基础，这节课算是对那个教程的一个扩展和补充。这个实例讲完，这个系列就算告一段落了。先看效果在这里插入图片描述
这个教程要求对React知识的了解要求比较全面，如果你是跟着我这个系统文章一路学来的，应该就能跟得上学习进度。本教程内容很多，很详细，会分为几个章节来讲解。

安装

首先要安装MUI、 React Router、React Redux这是必不可少的。我们除了会完成在开头的动图效果示例之外，还有较完整功能添加，所以，会用到一些没有讲过的功能。

设计前的考虑
  • 为了考虑到高度自定义这个特性，我们把菜单的配置以 json数组的形式进行配置。你可以把菜单配置放在服务器上，基于权限的考虑你甚至可以在后台根据用户权限的不同返回不同的菜单配置，实现角色的功能 。
  • 我们尽可能的将与业务代码无关的东西封装在组件内部，这样调用起来代码就很简洁。
  • 根据业务逻辑尽可能的细小化、模块化。
  • 所有UI元素都要适配暗黑模式,也就是两种颜色模式。
Bootstrap

前端是绕不开Css的，但是对于一个完整的项目来说，写Css就很繁琐，我的主张是，能偷懒就偷懒，不能偷懒想办法偷懒。这不，对于布局中的Grid 和 Flex 方面，Bootstrap 就提供了相当完美的功能了，我认为这方面它比MUI强许多，既然如此，何不做个拿来主义者呢，何苦自己为难自己呢。书回正传，回到我们的项目，在源目录(src) 下新建一个本章的实例目录：SMenu , 并在这个目录下新建目录 SCSS, 我们把网上下载的Bootstrap5.3的Css文件放到这个目录里。另外，我也提供了两个其它的两个css文件，目录结构如下所示：

在这里插入图片描述

关于Bootstrap的样式，请大家自行学习，此处不做详解。

以下是 components.css 的内容

.fade-enter {
    opacity: 0;
    transform: translateX(-100%);
  }
  .fade-enter-active {
    opacity: 1;
    transform: translateX(0%);
  }
  .fade-exit {
    opacity: 1;
    transform: translateX(0%);
  }
  .fade-exit-active {
    opacity: 0;
    transform: translateX(100%);
  }
  .fade-enter-active,
  .fade-exit-active {
    transition: opacity 500ms, transform 500ms;
  }
  
  
  .my-node-enter {
    opacity: 0;
  }
  .my-node-enter-active {
    opacity: 1;
    transition: opacity 200ms;
  }
  .my-node-exit {
    opacity: 1;
  }
  .my-node-exit-active {
    opacity: 0;
    transition: opacity 200ms;
  }

  /*
  *弹窗动画
  */
  .speedx-alert-enter {
    opacity: 0;
    transform: scale(0.9);
  }
  .speedx-alert-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms, transform 300ms;
  }
  .speedx-alert-exit {
    opacity: 1;
  }
  .speedx-alert-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
  }

下面是public.css的内容

html {
  background-color:#f2f2f2;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  line-height: 1.667;
  color: #222;
  text-align: justify;
  word-wrap: break-word;
  word-break: break-word;
  -moz-hyphens: auto;
  hyphens: auto;
}

input,
textarea {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  background: #eee;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  color: #353535d9;
  overflow-wrap: break-word;
}

:not(pre) > code {
  background-color: rgb(214, 214, 214);
  border-radius: 3px;
  padding: 1px 3px;
}

img {
  max-width: 100%;
  max-height: 20em;
}

.page-container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color:white;
  min-height: 100vh;
}

.layout-content{
  margin: 10px, 0px;
  padding: 0px;
  min-height: 100%;
  flex: 1;
  text-align:justify;
}

.content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
  padding: 20px 0;
  /* box-shadow: 3px 0 5px #c9c9c9; */
}

blockquote {
  border-left: 2px solid rgb(1, 154, 192);
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
  color: rgb(150, 150, 150);
  font-style: italic;
}

blockquote[dir='rtl'] {
  border-left: none;
  padding-left: 0;
  padding-right: 10px;
  border-right: 2px solid #ddd;
}

input {
  box-sizing: border-box;
  font-size: 0.85em;
  width: 100%;
  padding: 0.5em;
  border: 2px solid #ddd;
  background: #fafafa;
}

input:focus {
  outline: 0;
  border-color: blue;
}

iframe {
  width: 100%;
  border: 1px solid #eee;
}

[data-slate-editor] > * + * {
  margin-top: 1em;
}
  
#root{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color:#f2f2f2;
} 

.alignCenterVH{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.mainBoxPosition{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: top;
}

.titleInput {
  display: block;
  width: 100%;
  font-weight: bold;
  min-height: 50px;
  font-size: 22px;
  border:none;
  border-bottom: 1px;
  border-color: rgb(190, 190, 190);
  outline:none;
}

.selectElement {
  display: block;
  max-width: 100%;
  max-height: 20em;
}

.imgsubstring {
  display: block;
  color:rgb(116, 116, 116);
  font-weight: 500;
  font-size: medium;
  padding: 5px;
  text-align: center;
}

.mayi-select {
  width: 400px; height: 200px;line-height: 200px;text-align: center;margin:auto;
  border: 1px solid #ccc;
  background: linear-gradient(#efefef,#ccc) padding-box,
  linear-gradient(135deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(1, 1, 1, 1) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size:100% 100%, 8px 8px;
  animation: bg 1s linear infinite;
}

.mayi-select:hover{
  cursor: pointer;
  border: 1px dashed transparent;
}

@keyframes bg {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 8px 0;
  }
} 

.alignCenter {
  display: table-cell;
  /*垂直居中 */
  vertical-align: middle;
  /*水平居中*/
  text-align: center;

  /* text-align: center;
	background-color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%); */
}

.site-layout-background{
  background-color: white;
}

.check-background {
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg"\
        width="100" height="100" fill-opacity=".25">\
    <rect x="50" width="50" height="50"></rect>\
    <rect y="50" width="50" height="50"></rect>\
    </svg>');
    background-size:50px 50px;
}

设计一个样式组件，在App中引入一下就可以了，就可以保证我们的所有组件就能够应用到我们的样式。在STheme文件夹中创建 AdapterCss.jsx

import CssBaseline from '@mui/material/CssBaseline';
import '../SCSS/public.css';
import '../SCSS/components.css';
import '../SCSS/bootstrap5.3.0/bootstrap-utilities.min.css';
import '../SCSS/bootstrap5.3.0/bootstrap-grid.min.css';
// import '../SCSS/bootstrap5.3.0/bootstrap.min.css';

export default function AdapterCss() {
  return <CssBaseline />
}

我们只要在根组件中引入一次这个样式适配器就好了。

颜色模式

因为我们要为App适配暗模式，所以在设计之初就要考虑好这个问题。首先，MUI所有的组件就已经适配了两种颜色模式，Bootstrap也是一样。还有一个就是我们自己封装的组件也要适配到暗模式中，就这要求我们自己设计的组件元素应用的颜色模式要么来处MUI, 要么采用Bootstrap，要么我们自己提供一个双模式的颜色体系。也就是说这三种不同框架之间的颜色体系是共存的。下面我们分别来说一说：

MUI的Theme模式

MUI 中提供了两个工具，让我们能构获取和设置颜色模式。

  • ThemeProvider 这个很好理解，就是一个颜色模式厂，就是一个Context;
  • createTheme 创建一个颜色模式。我们这里只是用它来改变MUI的颜色模式;

下面我们用示例说明用法：

import { createTheme } from '@mui/material/styles';

function createMuiTheme(mode) {
    const themeMode = mode === "light" ? "light" : "dark";
    return createTheme({
        palette: {
            mode: themeMode,
        },
    });
}

上面的函数根据我们传入的模式关键字来创建相应的MUI颜色模式。

Bootstrap的颜色模式

这就简单了，我们只要改变顶层包裹组件的data-bs-theme属性值就可以切换颜色模式。

<div data-bs-theme="light"> 这是 light 模式 <div>
  
<div data-bs-theme="dark"> 这是 dark 模式 <div>

很简单吧。

自定义颜色模式

自定义颜色模式就有点技术含量了。也是最繁琐的一环。首先我们要定义的每种颜色要有两个模式下的颜色值。这就要一个标准，由于我没有采用 TS 设计模式，所以就要用其它的办法来约束定义的行为，比如一个函数就是一个很好的办法。

我们在STheme目录中创建一个工具函数库，把所有的我们自定义的工具函数放到其中统一导出就好了。

// SThemeUtils.jsx

import SThemeCodors from "./SColors";

// 生成基本颜色，lightColor为浅色，darkColor为深色
export function sColor(lightColor, darkColor) {
    return {
        light: lightColor,
        dark: darkColor,
    }
}

/**
 * 生成主题模型
 * @param {} mode 
 * @returns 
 */
export default function createSTheme(mode = "light") {
    const themeMode = mode === "light" ? "light" : "dark";
    const sTheme = {mode: themeMode};

    Object.keys(SThemeCodors).forEach(key => {
        sTheme[key] = SThemeCodors[key][themeMode];
    }
    );
    return sTheme;
}

/**
 * 生成MUI系统主题
 * @param {*} mode 
 * @returns 
 */
export function createMuiTheme(mode) {
    const themeMode = mode === "light" ? "light" : "dark";
    return createTheme({
        palette: {
            mode: themeMode,
        },
    });
}
  • 我们通过sColor函数生成一个颜色对象，这样行为就统一了。每个颜色对象中都有一个 light 色 和一个 dark 色。所以我们设计之初就要把每种不同模式下的颜色配置好。这关系到我们整体的App风格。你看，我们设计一个App其实没那么简单对不对，对不同技术技能都要些要求的。
  • createSTheme根据自定义颜色模式生成基于自定义颜色的 theme`

现在就是定义颜色了，在相同的目录下，创建颜色库文件

// sColors.jsx

import { sColor } from "./SThemeUtils";

/**
 * 定义主题颜色模型
 */
const SThemeColors = {
  bgColor: sColor("#edf3f2", "#1D1D1D"), //背景色

  /**
   * 菜单色配置
   */
  badge: sColor("red", "red"), //小红点色
  menuBgcolor: sColor("#EEEEEE", "#0D2745"),//菜单栏的背景色
  hoverMenuBgcolor: sColor("#FFEACC", "#091C32"), //菜单栏背景色Hover

  iconColorNormal: sColor("#1c2322", "#EEEEEE"), //图标色
  iconColorSquare: sColor("#363c3b", "#CCCCCC"), //无图标时的替代色

  menuNomalColor: sColor("#333333", "#07172A"), //菜单栏正常字体色
  activeMenuBgcolor: sColor("#FFEACC", "#1C54AD"), //活动菜单背景色
  activeBorderColor: sColor("#007AFF", "#1C54AD"), //活动菜单边框色

  menuSpliderColor: sColor("#DDDDDD", "#143C6A"), // 菜单栏分隔色

  menuSubitemColor: sColor("#545a59", "#B8B8B8"), //子菜单字体色
  hoverSubitemColor: sColor("#9fa2a1", "#3C628B"), //hover时的子菜单字体色
  hoverMenuSubitemBgcolor: sColor("#FFEACC", "#123862"), //子菜单的hover背景色
  activeMenuSubitemBgcolor: sColor("#FFBF66", "#0E2C4D"),//活动子菜单的背景色

  activeQuickMenuBgcolor: sColor("#FFBF66", "#2266B5"),//活动快捷菜单的子菜单
}

export default SThemeColors;

这就是我们的颜色系统，根据需要自行定义。

创建 ThemeProvider

现在我们向App提供三种 provider, 还要提供 切换 模式的方法，最好的办法当然就是 Context了，我们来设计这几个Provider : 创建 SThemeContext.jsx文件：

// SThemeContext.jsx

import { createContext } from 'react';

/**
 * 创建自定义主题上下文
 */
export const SThemeContext = createContext(null);

export function CusThemeProvider({ theme, children }) {
    return (
        <SThemeContext.Provider value={theme}>
            {
                children
            }
        </SThemeContext.Provider>
    )
}


/**
 * 创建切换主题上下文
 */
export const ToggleSThemeContext = createContext(null);

export function ToggleSThemeProvider({ handler, children }) {
    return (
        <ToggleSThemeContext.Provider value={handler}>
            {
                children
            }
        </ToggleSThemeContext.Provider>
    )
}

/**
 * 创建Bootstrap主题上下文
 * @param {*} param0 
 * @returns 
 */
export function BootstrapThemeProvider({ mode, children }) {
    return (
        <div data-bs-theme={mode}>
            {
                children
            }
        </div>
    )
}

文件里已经备注的很清楚了，就是创建两个上下文就OK了。

现在三种颜色的框架都有了。接下来我们就是要把这三个模式合并成一个Provider就完美了。我们来创建这个文件。在STheme目录下创建 SThemeProvider.jsx文件

// SThemeProvider.jsx

import { useState } from 'react';
import { ThemeProvider } from '@mui/material/styles';
import AdapterCss from './AdapterCss';
import createSTheme, { createMuiTheme } from './SThemeUtils';
import { BootstrapThemeProvider, CusThemeProvider, ToggleSThemeProvider} from './SThemeContext';

/**
 * 项目的皮肤供应器
 * @param {} param0 
 * @returns 
 */
function SThemeProvider({ children }) {  
    const [theme, changeTheme] = useState({ custom: createSTheme("light"), muiTheme: createMuiTheme("light")});
    const toggleThemHandler = () => {
        const muiThemeMode = theme.muiTheme.palette.mode === "light" ? "dark" : "light";
        changeTheme({
            custom: createSTheme(muiThemeMode),
            muiTheme: createMuiTheme(muiThemeMode),
        })
    }

    return (
        <ThemeProvider theme={theme.muiTheme}>
            <CusThemeProvider theme={theme.custom}>
                <BootstrapThemeProvider mode={theme.custom.mode}>
                    <ToggleSThemeProvider handler={toggleThemHandler}>
                        <AdapterCss />
                        {
                            children
                        }
                    </ToggleSThemeProvider>
                </BootstrapThemeProvider>
            </CusThemeProvider>
        </ThemeProvider>
    )
}

export default SThemeProvider;

现在层次很清晰了吧。是不是清爽了许我，这样，我们在根组件中用 SThemeProvider包裹就好了。是不是很优雅。我们只需要在项目入口文件 main.jsx 中这样写就行了。

import React from 'react'
import ReactDOM from 'react-dom/client'
import SThemeProvider from './SMenu/STheme/SThemeProvider.jsx';
import App from './SMenu/App.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <SThemeProvider>
      <App />
    </SThemeProvider>
  </React.StrictMode>,
)
编写主题切换Hook

这是主题最后一个环节，我们要提供一个 Hook 供我们的组件使用，要不然，设计主题有什么意义呢。

在 STheme目录中创建 文件 useToggleThemeHook.jsx

import { useContext } from 'react';
import { ToggleSThemeContext } from './SThemeContext';

// 获取切换主题的功能函数。
const useToggleTheme = () => {
    return useContext(ToggleSThemeContext)
}

export default useToggleTheme;

是不是太完美了。 是相当的完美啊。（未完待续）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/368857.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++集群聊天服务器 数据模块+业务模块+CMake构建项目 笔记 （上）

C++集群聊天服务器 数据模块+业务模块+CMake构建项目 笔记 （上）

跟着施磊老师做C项目&#xff0c;施磊老师_腾讯课堂 (qq.com) 本文在此篇博客的基础上继续实现数据模块和业务模块代码&#xff1a; C集群聊天服务器 网络模块业务模块CMake构建项目 笔记 &#xff08;上&#xff09;-CSDN博客https://blog.csdn.net/weixin_41987016/article…
阅读更多...
NFTScan 与 Merlin Protocol 共同推出 BRC20 Indexer Oracle，于今日正式上线！

NFTScan 与 Merlin Protocol 共同推出 BRC20 Indexer Oracle，于今日正式上线！

近日&#xff0c;NFT 数据基础设施 NFTScan 与 Merlin Protocol 进行战略合作&#xff0c;联合推出了比特币网络原生资产 Indexer Oracle 服务&#xff0c;现在该服务已在 NFTScan 开发者平台上线&#xff0c;任何开发者都可以注册使用&#xff01; Merlin Protocol 是一个专用…
阅读更多...
【学习笔记】详解换根法(换根DP)

【学习笔记】详解换根法(换根DP)

一.换根DP的概念 1.换根DP是什么&#xff1f; 换根DP&#xff0c;又叫二次扫描&#xff0c;是树形DP的一种。 2.换根DP能解决什么问题&#xff1f; 换根DP能解决不指定根结点&#xff0c;并且根节点的变化会对一些值产生影响的问题。例如子结点深度和、点权和等。如果要 暴力…
阅读更多...
使用JDBC连接mysql

使用JDBC连接mysql

JDBC:Java DataBase Connectivity,Java数据库连接。 使用Java语言操作关系型数据库的一套API。 原理&#xff1a;官方&#xff08;sun公司&#xff09;定义出一套操作所有关系型数据库的规则&#xff0c;即接口&#xff1b;所有的数据库厂商去实现这套接口&#xff0c;提供数据…
阅读更多...
[word] word小数点对齐怎么设置 #微信#其他#其他

[word] word小数点对齐怎么设置 #微信#其他#其他

word小数点对齐怎么设置 使用Word编辑文档的时候&#xff0c;如果有小技巧的话&#xff0c;可以解决很多遇到的问题&#xff0c;也让工作更高效的完成&#xff0c;下面给大家分享word小数点对齐怎么设置的小技巧。 1、设置格式 选中内容&#xff0c;点击段落一一制表符&#…
阅读更多...
2024.2.3 寒假训练记录（17）

2024.2.3 寒假训练记录（17）

补一下牛客&#xff0c;菜得发昏了&#xff0c;F搞了两个小时都没搞出来&#xff0c;不如去开H了 还没补完 剩下的打了atc再来 文章目录 牛客 寒假集训1A DFS搜索牛客 寒假集训1B 关鸡牛客 寒假集训1C 按闹分配牛客 寒假集训1D 数组成鸡牛客 寒假集训1E 本题又主要考察了贪心牛…
阅读更多...
react 使用react-seamless-scroll实现无缝滚动

react 使用react-seamless-scroll实现无缝滚动

文章目录 1. 实现无缝滚动效果2. react-seamless-scroll 无缝滚动案例介绍3. react 项目集成3.1 项目引入 cssSeamlessScroll 滚动组件3.2 完整代码3.2.1 newBet.tsx 代码3.2.2 index.module.scss 1. 实现无缝滚动效果 实现单步向下滚动点击更多展开&#xff0c;收起&#xff0…
阅读更多...
Python爬虫urllib详解

Python爬虫urllib详解

前言 学习爬虫&#xff0c;最初的操作便是模拟浏览器向服务器发出请求&#xff0c;那么我们需要从哪个地方做起呢&#xff1f;请求需要我们自己来构造吗&#xff1f;需要关心请求这个数据结构的实现吗&#xff1f;需要了解 HTTP、TCP、IP 层的网络传输通信吗&#xff1f;需要知…
阅读更多...
Java八大常用排序算法

Java八大常用排序算法

1冒泡排序 对于冒泡排序相信我们都比较熟悉了&#xff0c;其核心思想就是相邻元素两两比较&#xff0c;把较大的元素放到后面&#xff0c;在一轮比较完成之后&#xff0c;最大的元素就位于最后一个位置了&#xff0c;就好像是气泡&#xff0c;慢慢的浮出了水面一样 Jave 实现 …
阅读更多...
RabbitMQ_00000

RabbitMQ_00000

MQ的相关概念 RabbitMQ官网地址&#xff1a;https://www.rabbitmq.com RabbitMQ API地址&#xff1a;https://rabbitmq.github.io/rabbitmq-java-client/api/current/ 什么是MQ&#xff1f; MQ(message queue)本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中…
阅读更多...
Jmeter 基于Docker 实现分布式测试

Jmeter 基于Docker 实现分布式测试

基于Docker 实现分布式测试 制作Jmeter基础镜像制作工作节点镜像启动工作节点启动控制节点遇到的问题 使用Docker 部署Jmeter非常方便&#xff0c;可以省略软件的安装以及配置&#xff0c;比如jdk、jmeter。需要部署多个工作节点可以节省时间。 制作Jmeter基础镜像 下载jmeter…
阅读更多...
Kubernetes集群搭建

Kubernetes集群搭建

一、概述 Kubernetes是一个Google开源的全新的分布式容器集群管理系统&#xff0c;由于从第一个字母到字母s中间有8个字母&#xff0c;所以简称K8s。 二、准备 ip角色内存192.168.187.130master4G192.168.187.131node2G192.168.187.132node2G 小提示&#xff1a; 设置静态i…
阅读更多...
【课程作业_01】国科大2023模式识别与机器学习实践作业

【课程作业_01】国科大2023模式识别与机器学习实践作业

国科大2023模式识别与机器学习实践作业 作业内容 从四类方法中选三类方法&#xff0c;从选定的每类方法中 &#xff0c;各选一种具体的方法&#xff0c;从给定的数据集中选一 个数据集&#xff08;MNIST&#xff0c;CIFAR-10&#xff0c;电信用户流失数据集 &#xff09;对这…
阅读更多...
TCP TIME_WAIT 过多怎么处理

TCP TIME_WAIT 过多怎么处理

文章目录 1.什么是 TCP TIME_WAIT&#xff1f;2.为什么要 TIME_WAIT?3.TIME_WAIT 过多的影响4.解决办法4.1 调整短连接为长连接4.2 调整系统内核参数 5.小结参考文献 1.什么是 TCP TIME_WAIT&#xff1f; TCP 断开连接四次挥手过程中&#xff0c;主动断开连接的一方&#xff…
阅读更多...
ctfshow——文件包含

ctfshow——文件包含

文章目录 web 78——php伪协议第一种方法——php://input第二种方法——data://text/plain第三种方法——远程包含&#xff08;http://协议&#xff09; web 78——str_replace过滤字符php第一种方法——远程包含&#xff08;http://协议&#xff09;第二种方法——data://&…
阅读更多...
游戏被DDOS攻击无法访问时该如何处理

游戏被DDOS攻击无法访问时该如何处理

游戏行业随着时代的发展有着突飞猛进的变化&#xff0c;尤其是互联网时代智能手机的普及&#xff0c;让游戏行业发展上了一个新的台阶。因为游戏带来的巨大利润&#xff0c;游戏行业一直是DDoS攻击的首选目标。 DDoS是Distributed Denial of Service的缩写&#xff0c;即分布式…
阅读更多...
学习Android的第二天

学习Android的第二天

目录 Android User Interface 用户界面 UI Android View与ViewGroup的概念 Android View android.view.View android.view.View XML 属性 android:id 属性 Android ViewGroup android.view.ViewGroup ViewGroup.LayoutParams ViewGroup.MarginLayoutParams ViewGr…
阅读更多...
Redis核心技术与实战【学习笔记】 - 19.Pika：基于SSD实现大容量“Redis”

Redis核心技术与实战【学习笔记】 - 19.Pika：基于SSD实现大容量“Redis”

前言 随着业务数据的增加&#xff08;比如电商业务中&#xff0c;随着用户规模和商品数量的增加&#xff09;&#xff0c;就需要 Redis 能保存更多的数据。你可能会想到使用 Redis 切片集群&#xff0c;把数据分散保存到不同的实例上。但是这样做的话&#xff0c;如果要保存的…
阅读更多...
java社区养老年人服务系统springboot+vue

java社区养老年人服务系统springboot+vue

为了帮助用户更好的了解和理解程序的开发流程与相关内容&#xff0c;本文将通过六个章节进行内容阐述。 第一章&#xff1a;描述了程序的开发背景&#xff0c;程序运用于现实生活的目的与意义&#xff0c;以及程序文档的结构安排信息&#xff1b; 第二章&#xff1a;描述了程序…
阅读更多...
uniapp 高德地图显示

uniapp 高德地图显示

1. uniapp 高德地图显示 使用前需到**高德开放平台&#xff08;https://lbs.amap.com/&#xff09;**创建应用并申请Key   登录 高德开放平台&#xff0c;进入“控制台”&#xff0c;如果没有注册账号请先根据页面提示注册账号   打开 “应用管理” -> “我的应用”页面…
阅读更多...
最新文章

Copyright @ 2022~2023