Find N3入網(wǎng)：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經(jīng)正式入網(wǎng)，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
最近開源了一款基于 Next.js + Antd5.0 的管理后臺系統(tǒng)，打算持續(xù)迭代到開發(fā)者能傻瓜式開發(fā)和部署管理后臺的程度， 下面和大家分享一下最近的一些更新。
接下來會和大家分享一下具體的實現(xiàn)， 如果大家想了解 next-admin 這款開源管理系統(tǒng)。
同時也歡迎對 Next.js 感興趣的小伙伴一起共建。
Github地址：https://github.com/MrXujiang/next-admin
在線地址：http://next-admin.com
為什么會選擇PM2來部署呢？這里給大家總結幾個優(yōu)勢：
所以說如果對于 nginx 高級玩法不太熟悉， 建議直接用 pm2。
下面給大家介紹一下 Next-Admin 的 pm2 配置：
const argEnvIndex = process.argv.indexOf('--env')let argEnv = (argEnvIndex !== -1 && process.argv[argEnvIndex + 1]) || ''const RUN_ENV_MAP = { local: { instances: 2, max_memory_restart: '250M' }, dev: { instances: 2, max_memory_restart: '250M' }, prod: { instances: 4, max_memory_restart: '1000M' }}if (!(argEnv in RUN_ENV_MAP)) { argEnv = 'prod'}module.exports = { apps: [ { name: 'next-admin', script: 'node_modules/next/dist/bin/next', args: 'start -p 80', instances: RUN_ENV_MAP[argEnv].instances, exec_mode: 'cluster', watch: false, max_memory_restart: RUN_ENV_MAP[argEnv].max_memory_restart, env_local: { APP_ENV: 'local' }, env_dev: { APP_ENV: 'dev' }, env_prod: { APP_ENV: 'prod' } } ]}配置基本上可以滿足大部分node應用的部署需求，大家可以參考一下。接下來我們只需要在服務器上運行腳本即可啟動：
"deploy:local": "pnpm build:local && pm2 start pm2.config.js --env local","deploy:dev": "pnpm build:dev && pm2 start pm2.config.js --env dev","deploy:prod": "pm2 start pm2.config.js --env prod"啟動后的效果：
由于新版react在開發(fā)環(huán)境下會渲染兩次，這會導致某些庫創(chuàng)建兩個實例， 導致開發(fā)環(huán)境出現(xiàn)渲染問題， 比如我明明渲染一張圖表，結果在開發(fā)瀏覽器卻渲染了兩張。為了避免開發(fā)環(huán)境react組件渲染兩次的問題， 我寫了一個緩存函數(shù)，來解決：
const MyChart = (props: IChart) => { const chartRef = useRef<any>(null); const { type, data, id } =props; useEffect(() => { let chart:any; // 避免在開發(fā)環(huán)境渲染兩次 if(isDev) { let curCache = localStorage.getItem(id); if(!curCache) { localStorage.setItem(id, '1'); chart = createChart(chartRef.current, type, data); } }else { chart = createChart(chartRef.current, type, data); } return () => { localStorage.removeItem(id); chart && chart.destroy(); } }, [type, data, id]); return <div ref={chartRef}></div>}這樣生產(chǎn)環(huán)境和開發(fā)環(huán)境就可以優(yōu)雅的渲染圖表了：
由于目前大部分管理后臺都是針對PC端的， 移動訪問體驗不好， 所以我在 Next-Admin 管理系統(tǒng)中做了適配， 保證在PC和移動端都能有不錯的適配效果。接下來分享幾張移動端訪問 Next-Admin 的頁面：
之前寫了一個自定義的白板應用，目前也內(nèi)置進去了，大家可以參考一下：
后面會對國際化支持，搭建引擎，頁面渲染引擎做一些內(nèi)置頁面，幫助大家更高效的開發(fā)管理系統(tǒng)。
本文鏈接：http://www.tebozhan.com/showinfo-26-80874-0.htmlNext.js項目部署，跨端適配，圖表渲染優(yōu)化復盤
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C++中時間相關函數(shù)用法詳解
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號