React-Admin後臺管理模板|react18+arco+zustand後臺解決方案

来源:https://www.cnblogs.com/xiaoyan2017/archive/2023/10/17/17769058.html
-Advertisement-
Play Games

基於react18.x+vite4+arco-design自研中後臺管理系統解決方案ReactAdmin。 react-vite-admin 基於vite4搭建react18.x後臺管理項目。使用了react18 hooks+arco.design+zustand+bizcharts等技術實現許可權管 ...


基於react18.x+vite4+arco-design自研中後臺管理系統解決方案ReactAdmin。

react-vite-admin 基於vite4搭建react18.x後臺管理項目。使用了react18 hooks+arco.design+zustand+bizcharts等技術實現許可權管理模板框架。支持暗黑/亮色主題、i18n國際化、動態許可權鑒定、3種佈局模板、tab路由標簽欄等功能。

React18Admin管理系統是首創自研的輕量級中後臺框架，構建運行速度快，支持dark/light主題模式。

技術棧

  • 編輯器：Vscode
  • 框架技術：react18+vite4+react-router+zustand+axios
  • 組件庫：arco-design (位元組前端react組件庫)
  • 路由管理：react-router-dom^6.16.0
  • 狀態管理：zustand^4.4.1
  • 模擬數據：mockjs^1.1.0
  • 模擬請求：axios^1.5.1
  • 圖表庫：bizcharts^4.1.22
  • 編輯器組件：@wangeditor/editor-for-react^1.0.6
  • markdown編輯器：@uiw/react-md-editor^3.23.6
  • 請求進度插件：nprogress^0.2.0

react-admin採用位元組出品的react桌面端組件庫arco.design。

特性

  1. 基於vite4.x構建react18後臺，輕/快/小
  2. 使用最新前端技術棧react18、zustand、bizcharts、react-router、axios
  3. 搭配清新react組件庫arco.design
  4. 支持中英文/繁體國際化語言
  5. 支持動態路由許可權驗證
  6. 支持動態tabs標簽欄控制
  7. 內置多種模板佈局樣式

項目結構目錄

採用標準化的react目錄結構，整個項目使用react18 function語法編碼開發。

構建預覽圖

wangeditor-react圖文編輯器使用的是wangeditor的react版本，支持dark/light主題。

react-md-editor基於react的markdown編輯器，支持dark/light主題。

react18-scrollbar項目中使用的虛擬滾動條基於react18自定義組件實現功能。

// 引入滾動條組件
import RScroll from '@/components/rscroll'

<RScroll autohide maxHeight={100}>
    包裹需要滾動的內容塊。。。
</RScroll>

React18-Admin佈局模板

如上圖：支持分欄+垂直+水平3種通用佈局模板。也可以定製化模板樣式。

/**
 * 主佈局模板
 * @author Hs Q：282310962
*/

import { useMemo } from 'react'
import { appStore } from '@/store/app'

import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'

function Layout() {
    const { config: { skin, layout } } = appStore()

    // 佈局模板
    const LayoutComponent = useMemo(() => {
        switch(layout) {
            case 'columns':
                return Columns
            case 'vertical':
                return Vertical
            case 'transverse':
                return Transverse
            default:
                return Columns
        }
    }, [layout])
    
    return (
        <div className="radmin__container">
            <LayoutComponent />
        </div>
    )
}

export default Layout

主模板Main.jsx動態Permission鑒權驗證。

import './index.scss'
import { Outlet } from 'react-router-dom'
import RScroll from '@/components/rscroll'
import Permission from '@/components/Permission'
import Forbidden from '@/views/error/forbidden'
import { useRoute } from '@/hooks/useRoutes'

export default function Main() {
    const route = useRoute()

    return (
        <>
            <RScroll>
                <div className="ra__layout-main__wrapper">
                    {/* 鑒權組件 */}
                    <Permission
                        roles={route?.meta?.roles}
                        content={<Forbidden />}
                    >
                        <Outlet />
                    </Permission>
                </div>
            </RScroll>
        </>
    )
}

react-router路由配置

/**
 * @title    react-router-dom v6路由配置管理
 * @author    andy
*/

import { useRoutes, Navigate } from 'react-router-dom'

import Error from '@views/error/404'

// 批量導入modules路由
const modules = import.meta.glob('./modules/*.jsx', { eager: true })
const patchRoutes = Object.keys(modules).map(key => modules[key].default).flat()

// useRoutes集中式路由配置
export const routes = [
    {
        path: '/',
        element: <Navigate to="/home" replace={true} />,
        meta: {
            isWhite: true // 路由白名單
        }
    },
    ...patchRoutes,
    // 404模塊 path="*"不能省略
    {
        path: '*',
        element: <Error />,
        meta: {
            isWhite: true
        }
    }
]

const Router = () => useRoutes(routes)

export default Router

lazyload.jsx配置

/**
 * 延遲載入提示
*/

import { Suspense } from 'react'
import { Spin } from '@arco-design/web-react'
import NprogressLoading from './nprogress'

// 載入提示
const SpinLoading = () => {
    return (
        <Spin
            tip='loading...'
            style={{
                width: '100%'
            }}
        />
    )
}

// 延遲載入
const lazyload = LazyComponent => {
    // React 16.6 新增了<Suspense>組件，懶載入的模式需要我們給他加上一層 Loading的提示載入組件
    // return <Suspense fallback={<SpinLoading />}><LazyComponent /></Suspense>
    return <Suspense fallback={<NprogressLoading />}><LazyComponent /></Suspense>
}

export default lazyload

NProgress.jsx配置

/**
 * 載入進度條NProgress
*/

import { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default class NprogressLoading extends Component {
    constructor(props) {
        super(props)
        NProgress.set(.4)
        NProgress.start()
    }

    componentDidMount() {
        NProgress.done()
    }

    render() {
        return <div />
    }
}

主路由main.jsx配置

/**
 * 主路由配置
 * @author Hs
*/

import { lazy } from 'react'
import {
    IconHome, IconDashboard, IconLink, IconCommand, IconUserGroup, IconLock,
    IconMenu, IconSafe, IconBug, IconHighlight, IconUnorderedList, IconStop
} from '@arco-design/web-react/icon'
import Layout from '@/layouts'
import Blank from '@/layouts/blank'
import lazyload from '../lazyload'

export default [
    /*首頁模塊*/
    {
        path: '/home',
        key: '/home', // 用於Menu組件跳轉路由地址
        element: <Layout />,
        meta: {
            // icon: 've-icon-home', // 菜單圖標
            icon: <IconHome />,
            name: 'layout__main-menu__home', // i18n國際化標題
            title: '主頁',
            isAuth: true, // 需要鑒權
            isHidden: false, // 是否隱藏菜單
            isAffix: true // 固定tabview標簽欄(不可關閉)
        },
        children: [
            {
                key: '/home',
                index: true,
                element: lazyload(lazy(() => import('@views/home'))),
                meta: {
                    // icon: 've-icon-home',
                    icon: <IconHome />,
                    name: 'layout__main-menu__home-index',
                    title: '首頁',
                    isAuth: true
                }
            },
            // 工作台
            {
                path: 'dashboard',
                key: '/home/dashboard',
                element: lazyload(lazy(() => import('@views/home/dashboard'))),
                meta: {
                    // icon: 've-icon-computer',
                    icon: <IconDashboard />,
                    name: 'layout__main-menu__home-workplace',
                    title: '工作台',
                    isAuth: true
                }
            },
            // 外部鏈接
            {
                path: 'https://react.dev/',
                key: 'https://react.dev/',
                meta: {
                    // icon: 've-icon-clip',
                    icon: <IconLink />,
                    name: 'layout__main-menu__home-apidocs',
                    title: 'react.js官方文檔',
                    rootRoute: '/home'
                }
            }
        ]
    },

    /*組件模塊*/
    {
        ...
    },

    /*用戶管理模塊*/
    {
        ...
    },

    /*許可權模塊*/
    {
        ...
    },

    /*錯誤模塊*/
    {
        ...
    }
]

備註：路由菜單參數配置說明。

/**
 * @description 路由參數說明
 * @param path ==> 路由地址標識
 * @param key ==> 用於Menu組件跳轉路由地址
 * @param redirect ==> 重定向地址
 * @param element ==> 視圖頁面路徑
 * 菜單信息(meta)
 *         @param meta.icon ==> 菜單圖標
 *         @param meta.title ==> 菜單標題
 *         @param meta.name ==> i18n國際化標題
 *         @param meta.roles ==> 頁面許可權 ['admin', 'dev', 'test']
 *         @param meta.isAuth ==> 是否需要驗證
 *         @param meta.isHidden ==> 是否隱藏頁面
 *         @param meta.isAffix ==> 是否固定標簽(tabs標簽欄不能關閉)
 * */

react自定義路由菜單Menu

基於arco.design組件庫提供的Menu組件封裝三種不同的路由菜單。

  

<RouteMenu />

<RouteMenu rootRouteEnable />

<RouteMenu rootRouteEnable mode="horizontal" />

RouteMenu路由菜單模板

/**
 * 路由菜單模板
*/

import './index.scss'
import { useState, useMemo, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Menu } from '@arco-design/web-react'
import Icon from '@components/Icon'
import RouteSubMenu from './submenu'
import { routes } from '@/routers'
import { getCurrentRootRoute, findParentRoute } from '@/hooks/useRoutes'
import Locales from '@/locales'

export default function RouteMenu(props) {
    const {
        // 菜單類型(垂直vertical 水平菜單horizontal 彈出pop)
        mode = 'vertical',
        // 菜單風格('light' | 'dark')
        theme = 'light',
        // 是否開啟一級路由菜單
        rootRouteEnable = false,

        style = {}
    } = props

    const navigate = useNavigate()
    const { pathname } = useLocation()
    const t = Locales()
    const [openKeys, setOpenKeys] = useState([])
    const rootRoute = getCurrentRootRoute()
    const filterRoutes = routes.filter(item => !item?.meta?.isWhite)

    const menuRoutes = useMemo(() => {
        if(rootRouteEnable) {
            return filterRoutes
        }
        // 過濾一級菜單
        return filterRoutes.find(item => item.path == rootRoute && item.children)?.children
    }, [pathname])

    useEffect(() => {
        setOpenKeys(getKeys(pathname))
    }, [pathname])

    // 獲取選中菜單路由keys數組
    const getKeys = (key) => {
        return findParentRoute(menuRoutes, key)?.map(item => item?.key)
    }

    const handleNavigate = (key) => {
        const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
        if(reg.test(key)) {
            window.open(key)
        }else {
            navigate(key)
        }
    }

    return (
        <Menu
            className="ra__menus"
            mode={mode}
            theme={theme}
            selectedKeys={[pathname]}
            openKeys={openKeys}
            levelIndent={28}
            style={{ ...style }}
            onClickMenuItem={handleNavigate}
            onClickSubMenu={(_, openKeys) => {
                setOpenKeys(openKeys)
            }}
        >
            { menuRoutes.map(item => {
                if(item?.children) {
                    return RouteSubMenu(item, t)
                }
                return (
                    !item?.meta?.isHidden &&
                    <Menu.Item className="ra__menuItem" key={item.redirect || item.key}>
                        { item?.meta?.icon && <Icon name={item.meta.icon} size={18} style={{marginRight: 10}} /> }
                        { item?.meta?.name && <span>{t[item.meta.name]}</span> }
                    </Menu.Item>
                )
            })}
        </Menu>
    )
}

react18狀態管理zustand

Zustand新一代react狀態管理工具，內置多種插件，支持persist本地存儲服務。

/**
 * react18狀態管理庫Zustand4，中間件persist本地持久化存儲
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import { generate, getRgbStr } from '@arco-design/color'

export const appStore = create(
    persist(
        (set, get) => ({
            // 語言(中文zh-CN 英文en 繁體字zh-TW)
            lang: 'zh-CN',
            // 角色類型 roles: ['admin'] / roles: ['admin', 'dev'] / roles: ['dev', test']
            roles: ["dev"],
            // 配置信息
            config: {
                // 佈局(分欄columns 縱向vertical 橫向transverse)
                layout: 'columns',
                // 模式(亮色light - 暗黑dark)
                mode: 'light',
                // 主題色
                theme: '#3491FA',
                // 是否摺疊菜單
                collapsed: false,
                // 開啟麵包屑導航
                breadcrumb: true,
                // 開啟標簽欄
                tabsview: true,
                tabRoutes: [],
                // 顯示搜索
                showSearch: true,
                // 顯示全屏
                showFullscreen: true,
                // 顯示語言
                showLang: true,
                // 顯示公告
                showNotice: true,
                // 顯示底部
                showFooter: false
            },
            
            // 更新配置
            updateConfig: (key, value) => set({
                config: { ...get().config, [key]: value }
            }),
            // 設置角色
            setRoles: (roles) => set({roles}),
            // 設置多語言
            setLang: (lang) => set({lang}),
            // 設置主題模式
            setMode: (mode) => {
                if(mode == 'dark') {
                    // 設置為暗黑主題
                    document.body.setAttribute('arco-theme', 'dark')
                }else {
                    // 恢復亮色主題
                    document.body.removeAttribute('arco-theme')
                }
                get().updateConfig('mode', mode)
            },
            // 設置主題樣式
            setTheme: (theme) => {
                const colors = generate(theme, { list: true })
                colors.map((item, index) => {
                    const rgbStr = getRgbStr(item)
                    document.body.style.setProperty(`--arcoblue-${index + 1}`, rgbStr)
                })
                get().updateConfig('theme', theme)
            }
        }),
        {
            name: 'appState',
            // name: 'app-store', // name of the item in the storage (must be unique)
            // storage: createJSONStorage(() => sessionStorage), // by default, 'localStorage'
        }
    )
)

react18國際化配置i18n

/**
 * 國際化配置
 * @author YXY
 */

import { appStore } from '@/store/app'

// 引入語言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

export const locales = {
    'en': enUS,
    'zh-CN': zhCN,
    'zh-TW': zhTW
}

export default (locale) => {
    const appState = appStore()
    const lang = appState.lang || 'zh-CN'

    return (locale || locales)[lang] || {}
}

App.jsx引入arco.design組件庫語言包。

/**
 * 入口模板
 * @author Hs
*/

import { useEffect, useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
// 通過 ConfigProvider 組件實現國際化
import { ConfigProvider } from '@arco-design/web-react'
// 引入語言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'

import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'

// 引入路由配置
import Router from './routers'

function App() {
    const { lang, config: { mode, theme }, setMode, setTheme } = appStore()

    const locale = useMemo(() => {
        switch(lang) {
            case 'en':
                return enUS
            case 'zh-CN':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }, [lang])

    useEffect(() => {
        setMode(mode)
        setTheme(theme)
    }, [])

    return (
        <ConfigProvider locale={locale}>
            <HashRouter>
                <AuthRouter>
                    <Router />
                </AuthRouter>
            </HashRouter>
        </ConfigProvider>
    )
}

export default App

Lang.jsx配置

import { Dropdown, Menu, Button } from '@arco-design/web-react'
import Icon from '@components/Icon'
import { appStore } from '@/store/app'

export default function Lang() {
    const { lang, setLang } = appStore()

    const handleLang = val => {
        setLang(val)
    }

    return (
        <Dropdown
            position="bottom"
            droplist={
                <Menu className="radmin__dropdownLang" defaultSelectedKeys={[lang]} onClickMenuItem={handleLang}>
                    <Menu.Item key='zh-CN'>簡體中文 <span>zh-CN</span></Menu.Item>
                    <Menu.Item key="zh-TW">繁體字 <span>zh-TW</span></Menu.Item>
                    <Menu.Item key="en">英文 <span>en</span></Menu.Item>
                </Menu>
            }
        >
            <Button
                shape="circle"
                size="small"
                icon={<Icon name="ve-icon-lang" />}
            />
        </Dropdown>
    )
}

Tabs.jsx動態路由欄

項目中動態路由欄tabs採用arco.design組件庫Tabs組件自定義實現功能。

<Tabs
    activeTab={pathname}
    editable
    showAddButton={false}
    onDeleteTab={key => delTabs(key)}
>
    { tabRoutes.map(item => (
        <Tabs.TabPane
            closable={!item?.meta?.isAffix}
            key={item?.redirect || item?.key}
            title={
                <Dropdown
                    trigger='contextMenu'
                    position='bl'
                    droplist={
                        <Menu className="ra__dropdownContext" onClickMenuItem={(key, e) => handleClickMenuItem(key, e, item)}>
                            <Menu.Item key="close" disabled={item?.meta?.isAffix}><Icon name="ve-icon-close" />{t['tabview__contextmenu-close']}</Menu.Item>
                            <Menu.Item key="closeLeft" disabled={isFirstTab()}><Icon name="ve-icon-prev" />{t['tabview__contextmenu-closeleft']}</Menu.Item>
                            <Menu.Item key="closeRight" disabled={isLastTab()}><Icon name="ve-icon-next" />{t['tabview__contextmenu-closeright']}</Menu.Item>
                            <Menu.Item key="closeOther"><Icon name="ve-icon-reset" />{t['tabview__contextmenu-closeother']}</Menu.Item>
                            <Menu.Item key="closeAll"><Icon name="ve-icon-close-circle-o" />{t['tabview__contextmenu-closeall']}</Menu.Item>
                        </Menu>
                    }
                    onVisibleChange={visible=>handleOpenContextMenu(visible, item)}
                >
                    <span className="ra__tabsview-title" onClick={() => navigate(item?.redirect || item?.key)}>
                        <TabIcon path={item?.key} />
                        { t[item?.meta?.name] }
                    </span>
                </Dropdown>
            }
        />
    ))}
</Tabs>
export default function TabsView() {
    const { pathname } = useLocation()
    const navigate = useNavigate()
    const [selectedTab, setSelectedTab] = useState()
    const { config: { tabRoutes }, updateConfig } = appStore()
    const route = useRoute()
    const t = Locales()

    useEffect(() => {
        addTabs()
    }, [pathname])

    // 添加
    const addTabs = () => {
        const tabIndex = tabRoutes.findIndex(item => item?.key === pathname)
        let newTabs = tabRoutes
        if(tabIndex == -1) {
            newTabs.push(route)
        }
        newTabs.map(item => {
            item.isActive = false
            if(item?.key === pathname) {
                item.isActive = true
            }
        })
        updateConfig('tabRoutes', newTabs)
    }

    // 刪除
    const delTabs = (path) => {
        const tabIndex = tabRoutes.findIndex(item => item?.key === path)
        let newTabs = tabRoutes
        if(tabIndex > -1) {
            newTabs.splice(tabIndex, 1)
            updateConfig('tabRoutes', newTabs)
            updateTabs(newTabs)
        }
    }

    // 刪除左側標簽
    const delLeftTabs = (path) => {
        const tabIndex = tabRoutes.findIndex(item => item?.key === path)
        let newTabs = tabRoutes
        if(tabIndex > -1) {
            newTabs = newTabs.filter((item, i) => item?.meta?.isAffix || i >= tabIndex)
            updateConfig('tabRoutes', newTabs)
            updateTabs(newTabs)
        }
    }

    // 刪除右側標簽
    const delRightTabs = (path) => {
        const tabIndex = tabRoutes.findIndex(item => item?.key === path)
        let newTabs = tabRoutes
        if(tabIndex > -1) {
            newTabs = newTabs.filter((item, i) => item?.meta?.isAffix || i <= tabIndex)
            updateConfig('tabRoutes', newTabs)
            updateTabs(newTabs)
        }
    }

    // 刪除其它
    const delOtherTabs = (path) => {
        let newTabs = tabRoutes.filter(item => item?.meta?.isAffix || item?.key === path)
        updateConfig('tabRoutes', newTabs)
        updateTabs(newTabs)
    }

    // 刪除所有
    const delAllTabs = () => {
        let newTabs = tabRoutes.filter(item => item?.meta?.isAffix)
        updateConfig('tabRoutes', newTabs)
        updateTabs(newTabs)
    }

    // 更新跳轉選項卡
    const updateTabs = (tabs) => {
        const nextTab = tabs[tabs.length + 1] || tabs[tabs.length - 1]
        if(!nextTab) return
        navigate(nextTab?.redirect || nextTab?.key)
    }

    // 是否第一個標簽
    const isFirstTab = () => {
        return selectedTab?.key === tabRoutes[0]?.key || selectedTab?.key === '/home'
    }
    // 是否最後一個標簽
    const isLastTab = () => {
        return selectedTab?.key === tabRoutes[tabRoutes.length - 1]?.key
    }

    // 打開右鍵菜單
    const handleOpenContextMenu = (visible, item) => {
        if(visible) {
            setSelectedTab(item)
        }
    }

    // 點擊右鍵菜單項
    const handleClickMenuItem = (key, e, item) => {
        e.stopPropagation()
        const path = item?.key
        switch(key) {
            case 'close':
                delTabs(path)
                break
            case 'closeLeft':
                delLeftTabs(path)
                break
            case 'closeRight':
                delRightTabs(path)
                break
            case 'closeOther':
                delOtherTabs(pat
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 淺談分散式事務及解決方案
    1 背景 在講述分散式事務的概念之前，我們先來回顧下事務相關的一些概念。 1.1 事務的基本概念 就是一個程式執行單元，裡面的操作要麼全部執行成功，要麼全部執行失敗，不允許只成功一半另外一半執行失敗的事情發生。例如一段事務代碼做了兩次資料庫更新操作，那麼這兩次資料庫操作要麼全部執行成功，要麼全部回滾 ...
  • 如何使用GaussDB(DWS)的本地臨時表進行數據處理
    GaussDB(DWS) 從8.2.1版本後支持三種形式的臨時表：本地臨時表、Volatile臨時表、全局臨時表。本地臨時表特點：表定義和數據都是會話相關，其他會話看不到本會話創建的本地臨時表。 ...
  • sys用戶在sys.user$中的一些特殊現象淺析
    在Oracle資料庫中，一般我們使用sys.user或dba_users去監控/檢查用戶密碼是否快過期，另外，它還能監控新用戶的創建時間、賬號密碼過期、賬號修改時間等，dba_user其實是一個系統視圖，它的數據來源於sys.user$等基礎表。dba_user的定義如下所示： CREATE FOR ...
  • MySQL的InnoDB引擎的事務
    康師傅YYDS MySQL中只有InnoDB支持事務 1 SHOW ENGINES; 事務基礎知識 事務的ACID特性 原子性（atomicity）： 原子性是指事務是一個不可分割的工作單位，要麼全部提交，要麼全部失敗回滾。 一致性（consistency）： 根據定義，一致性是指事務執行前後，數據 ...
  • 記一次MySQL5初始化被kill的問題排查
    由於測試環境JED申請比較繁瑣，所以Eone提供了單機版Mysql供用戶使用，近期Eone搭建Mysql5的時候發現莫名被kill了，容器規格是4C8G，磁碟30G。這不科學，之前都是可以的，鏡像沒變，配置沒變，咋就不行了呢，一定不是我的問題，是機器的問題 ...
  • 記錄--怎麼寫一個可以滑鼠控制旋轉的div？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 說在前面 滑鼠控制元素旋轉在現在也是一個很常見的功能，讓我們從實現div元素的旋轉控制開始來瞭解元素旋轉的具體原理和實現方法吧。 效果展示 體驗地址 code.juejin.cn/pen/7290719… 實現步驟 畫一個div 首先我們 ...
  • ts 終於搞懂TS中的泛型啦! | typescript 入門指南 04
    大家好，我是王天~ 這篇文章是 ts入門指南系列中第四篇，主要講解ts中的泛型應用，泛型在ts中是比較重要的概念，我花挺長時間才搞明白的，希望能幫助到大家 ~ ** ts 入門指南系列 ** Ts和Js 誰更適合前端開發？| typescript 入門指南 01 詳解tsconfig.json 配置 ...
  • 小技巧 | 漸變消失遮罩的多種實現方式
    我的小冊 《CSS 技術揭秘與實戰通關》上線了，想瞭解更多有趣、進階、系統化的 CSS 內容，可以猛擊 - LINK。 在知乎看到一題比較有意思的題目。 題目大致是如何實現下述圖片的效果，如果使用 div 前置遮擋的話，會影響 div 後面的按鈕，使其無法被點擊。 本文將簡單介紹幾種這個效果的實現方 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類