有 React 項(xiàng)目：JSON 低代碼搭管理后臺(tái)的完整指南)
把 amis 快速接入現(xiàn)有 React 項(xiàng)目JSON 低代碼搭管理后臺(tái)的完整指南【免費(fèi)下載鏈接】amis前端低代碼框架通過(guò) JSON 配置就能生成各種頁(yè)面。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/am/amis老板甩來(lái)一句話一周內(nèi)要一個(gè)后臺(tái)用戶列表、表單、彈窗一個(gè)都不能少。你翻了一下現(xiàn)有項(xiàng)目React TypeScript人手緊沒(méi)人有空手寫頁(yè)面。這就是 amis 最能打的那種場(chǎng)景——用 JSON 低代碼配置生成頁(yè)面直接塞進(jìn)你現(xiàn)有的 React 工程里跑。下面不講大而全的知識(shí)點(diǎn)就按我們?cè)趺窗阉芷饋?lái)、跑順、跑快的順序走一遍。先判斷你的項(xiàng)目適不適合上 amis React上不上 amis先別看教程先過(guò)一遍這張表。對(duì)號(hào)入座能幫你省掉一周的折騰。你的情況判斷為什么增刪改查密集的管理頁(yè)面列表、搜索、表單、彈窗? 推薦CRUD、form 是 amis 打磨最深的兩塊配置即所得需要快速驗(yàn)證的頁(yè)面、臨時(shí)需求? 推薦改 JSON 就能看到效果不用等組件開(kāi)發(fā)排期團(tuán)隊(duì)會(huì)寫 JSON、前端人手少? 推薦頁(yè)面邏輯沉在配置里前端只維護(hù)一層薄薄的接入代碼一兩個(gè)頁(yè)面趕工期其余頁(yè)面穩(wěn)定 部分使用別全盤替換趕工期的頁(yè)面用 amis和 React 代碼共存C 端頁(yè)面交互復(fù)雜、動(dòng)效多? 不建議配置會(huì)跟你的需求互相打架手寫 React 更直接像素級(jí)定制視覺(jué)、深度換膚? 不建議主題靠 CSS 變量定制成本可能比自研還高一句話amis 管標(biāo)準(zhǔn) CRUD 后臺(tái)React 繼續(xù)管有特殊要求的頁(yè)面。兩者不沖突可以混著用。在現(xiàn)有 React 項(xiàng)目里跑通 amis 第一屏跑通比什么都重要。先把第一屏渲染出來(lái)再談別的。1. 安裝并對(duì)齊版本npm i amis版本有硬要求React16.8.6mobx 需要^4.5.0React 17 要求 amis1.6.5。這條后面坑點(diǎn)里還會(huì)再提一次因?yàn)檎娴暮苋菀追嚒?. 寫一個(gè)最薄的渲染組件amis 暴露的render函數(shù)收三個(gè)參數(shù)schema頁(yè)面圖紙、props初始數(shù)據(jù)、env環(huán)境能力如請(qǐng)求器。最小寫法// AmisPage.tsx import React from react; import {render as renderAmis} from amis; import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; export default function AmisPage({schema}: {schema: any}) { return renderAmis(schema, {}, { fetcher: async ({url, method, data}) (await fetch(url, {method, body: JSON.stringify(data)})).json() }); }fetcher是必填項(xiàng)先糊一個(gè)能用的。schema 可以簡(jiǎn)單到這種程度{ type: page, title: 用戶管理, body: { type: crud, api: /api/users, columns: [ {name: name, label: 姓名}, {name: email, label: 郵箱} ] } }把它傳給AmisPage schema{schema} /刷新頁(yè)面——列表出來(lái)了翻頁(yè)、加載態(tài)都是現(xiàn)成的。schema 就是給頁(yè)面畫的圖紙type聲明節(jié)點(diǎn)是什么組件body聲明它里面放什么靠樹(shù)形結(jié)構(gòu)一層層拼出整頁(yè)。更完整的 CRUD 配置含編輯彈窗表單可以參考docs/zh-CN/components/crud.md。跑通之后補(bǔ)上三件事第一屏只是能看。要能用把下面三件事挨個(gè)勾掉。數(shù)據(jù)接入把 fetcher 接到項(xiàng)目統(tǒng)一的請(qǐng)求層路由打通跳轉(zhuǎn)走你自己的 Router主題與樣式確定用哪套皮膚數(shù)據(jù)接入寫一個(gè)正經(jīng)的 fetcher別用fetch糊弄長(zhǎng)期方案。把 fetcher 接到項(xiàng)目已有的 axios 實(shí)例上登錄態(tài)、統(tǒng)一報(bào)錯(cuò)、埋點(diǎn)一次全帶上const env { theme: cxd, fetcher: async ({url, method, data, headers}) { const res await request({ // request 是你們項(xiàng)目的統(tǒng)一請(qǐng)求封裝 url, method, data, headers }); return res.data; } };amis 里所有api字段的請(qǐng)求都會(huì)走這個(gè)函數(shù)。它拿得到url、method、data、headers返回 Promise 即可。路由打通jumpTo 接你的 Routeramis 不關(guān)心你用什么路由它把跳轉(zhuǎn)交給你實(shí)現(xiàn)。在 env 里補(bǔ)一個(gè)jumpTojumpTo: to navigate(to) // navigate 來(lái)自你們的 react-router配置里actionType: link、url之類的跳轉(zhuǎn)動(dòng)作最終都落到這個(gè)方法。頁(yè)面內(nèi)導(dǎo)航、左側(cè)菜單配合app渲染器就能組織起來(lái)參考docs/zh-CN/components/app.md。主題兩套皮膚二選一主題樣式文件env.theme云舍默認(rèn)amis/lib/themes/cxd.csscxd仿 Antdamis/lib/themes/antd.cssantdCSS 引進(jìn)來(lái)、env.theme對(duì)上就完了。二次換膚不用改 CSS 文件主題色這類都走 CSS 變量說(shuō)明見(jiàn)docs/zh-CN/style/css-vars.md。amis 自定義組件怎么注冊(cè)很多人對(duì) amis 的誤解是只能寫配置插不進(jìn)來(lái)代碼。不是的。它有三種插法從臨時(shí)到正式配置里內(nèi)聯(lián)給某個(gè)節(jié)點(diǎn)加children一個(gè)返回 JSX 的函數(shù)asFormItem: true當(dāng)場(chǎng)就能用但只在當(dāng)前配置生效不可復(fù)用。注冊(cè)普通渲染器用Renderer裝飾器或Renderer(opts)(Comp)函數(shù)式寫法把組件掛進(jìn) amis之后任何 schema 里寫type: 你的類型名就能渲染。注冊(cè)表單項(xiàng)用FormItemlabel、校驗(yàn)、三種表單布局全部免實(shí)現(xiàn)你只管回顯值和改值兩件事。注冊(cè)一個(gè)普通渲染器import {Renderer} from amis; Renderer({type: user-card, autoVar: true}) class UserCard extends React.Componentany { render() { const {name, title} this.props; return div{name} · {title}/div; } }注冊(cè)一個(gè)表單項(xiàng)import {FormItem} from amis; FormItem({type: my-color}) class MyColor extends React.Componentany { render() { const {value, onChange} this.props; return ( input typecolor value{value || #f00} onChange{e onChange(e.target.value)} / ); } }兩個(gè)實(shí)用細(xì)節(jié)autoVar: true讓組件參數(shù)自動(dòng)解析${xxx}變量需要渲染子節(jié)點(diǎn)時(shí)props 里的render(body, node)就是口子。注冊(cè)完的組件還會(huì)出現(xiàn)在可視化編輯器里非開(kāi)發(fā)人員也能拖——注冊(cè)實(shí)現(xiàn)可以看packages/amis-core/src/factory.tsx完整寫法見(jiàn)docs/zh-CN/extend/custom-react.md。懶加載與 schema 緩存兩個(gè)不疼的工程化動(dòng)作點(diǎn)到為止夠用就行。懶加載整包。amis 本身體量不小別打進(jìn)首屏 chunk。用一個(gè)lazy包一層const AmisPage lazy(() import(./AmisPage)); // Suspense fallback{Spin /}AmisPage schema{s} //Suspense緩存 schema。如果配置是后端下發(fā)的前端按 key 緩存一份發(fā)布時(shí)再失效避免每次進(jìn)頁(yè)面都拉一遍 JSONconst cache new Map(); const loadSchema key cache.get(key) || fetch(/schemas/${key}.json).then(r { cache.set(key, r); return r.json(); });大列表提速。CRUD 有個(gè)lazyRenderAfter配置默認(rèn) 100意思是超過(guò)這個(gè)行數(shù)的延遲渲染。數(shù)據(jù)量大時(shí)調(diào)小它首屏?xí)煲唤匾?jiàn)docs/zh-CN/start/faq.md。踩坑實(shí)錄我踩過(guò)的坑和繞法都是真實(shí)場(chǎng)景里會(huì)撞上的按踩坑頻率排??裝完就報(bào)錯(cuò)白屏或運(yùn)行時(shí)報(bào)錯(cuò)。九成是 mobx 版本。amis 依賴 mobx^4.5.0mobx 5/6 肯定掛。檢查package.json里實(shí)際裝上的版本必要時(shí)用 overrides 鎖住。CRUD 分頁(yè)突然沒(méi)了。因?yàn)?api 里帶了變量比如/api/users/${id}——這種情況 amis 不會(huì)自動(dòng)拼page、perPage參數(shù)。手動(dòng)拼上/api/users/${id}?page${page}perPage${perPage}。頂部工具欄和你們已有的吸頂元素疊一起了。渲染前設(shè)置 CSS 變量--affix-offset-top留出間距或者在 CRUD 上配affixHeader: false關(guān)掉固頂。別包 StrictMode。amis 目前不支持React.StrictMode的雙調(diào)用把它從包裹 amis 那棵子樹(shù)上去掉。樣式?jīng)_突。別圖省事在容器上寫all: initialamis 的樣式會(huì)全沒(méi)。正確姿勢(shì)獨(dú)立容器包一層主題色用 CSS 變量微調(diào)。配置里 URL 環(huán)境不一致。開(kāi)發(fā)用localhost、線上用域名用 env 的replaceText做整體替換schema 里寫占位符即可。前后對(duì)比收益到底有多大拿用戶管理這一個(gè)頁(yè)面列表 搜索 新建/編輯表單 刪除確認(rèn)做對(duì)比數(shù)字是我們項(xiàng)目里的真實(shí)體感維度手寫 React 組件接入 amis 后工期4~5 人日0.5~1 人日大頭花在接 fetcher需要維護(hù)的代碼約 2000 行組件與狀態(tài)代碼約 200 行 JSON 配置 一層接入代碼改一個(gè)字段展示改組件、調(diào)樣式、回歸測(cè)試配置里改一個(gè)字段頁(yè)面風(fēng)格一致性取決于誰(shuí)寫的內(nèi)置組件風(fēng)格統(tǒng)一上手門檻得熟 React 和組件庫(kù)會(huì)寫 JSON 就能改頁(yè)面當(dāng)然要說(shuō)句公道話提速主要在頁(yè)面層。接口沒(méi)有的話聯(lián)調(diào)時(shí)間一分不會(huì)少。一句話結(jié)論上不上 amis如果你的頁(yè)面主體是列表 搜索 表單 彈窗上 amis一周的后臺(tái)變一周能收尾如果頁(yè)面主體是重交互、重視覺(jué)定制手寫 React別硬塞配置。兩個(gè)頁(yè)面類型在同一個(gè)工程里各干各的才是最省心的用法?！久赓M(fèi)下載鏈接】amis前端低代碼框架通過(guò) JSON 配置就能生成各種頁(yè)面。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/am/amis創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 把 amis 快速接入現(xiàn)有 React 項(xiàng)目：JSON 低代碼搭管理后臺(tái)的完整指南
把 amis 快速接入現(xiàn)有 React 項(xiàng)目JSON 低代碼搭管理后臺(tái)的完整指南【免費(fèi)下載鏈接】amis前端低代碼框架通過(guò) JSON 配置就能生成各種頁(yè)面。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/am/amis老板甩來(lái)一句話一周內(nèi)要一個(gè)后臺(tái)用戶列表、表單、彈窗一個(gè)都不能少。你翻了一下現(xiàn)有項(xiàng)目React TypeScript人手緊沒(méi)人有空手寫頁(yè)面。這就是 amis 最能打的那種場(chǎng)景——用 JSON 低代碼配置生成頁(yè)面直接塞進(jìn)你現(xiàn)有的 React 工程里跑。下面不講大而全的知識(shí)點(diǎn)就按我們?cè)趺窗阉芷饋?lái)、跑順、跑快的順序走一遍。先判斷你的項(xiàng)目適不適合上 amis React上不上 amis先別看教程先過(guò)一遍這張表。對(duì)號(hào)入座能幫你省掉一周的折騰。你的情況判斷為什么增刪改查密集的管理頁(yè)面列表、搜索、表單、彈窗? 推薦CRUD、form 是 amis 打磨最深的兩塊配置即所得需要快速驗(yàn)證的頁(yè)面、臨時(shí)需求? 推薦改 JSON 就能看到效果不用等組件開(kāi)發(fā)排期團(tuán)隊(duì)會(huì)寫 JSON、前端人手少? 推薦頁(yè)面邏輯沉在配置里前端只維護(hù)一層薄薄的接入代碼一兩個(gè)頁(yè)面趕工期其余頁(yè)面穩(wěn)定 部分使用別全盤替換趕工期的頁(yè)面用 amis和 React 代碼共存C 端頁(yè)面交互復(fù)雜、動(dòng)效多? 不建議配置會(huì)跟你的需求互相打架手寫 React 更直接像素級(jí)定制視覺(jué)、深度換膚? 不建議主題靠 CSS 變量定制成本可能比自研還高一句話amis 管標(biāo)準(zhǔn) CRUD 后臺(tái)React 繼續(xù)管有特殊要求的頁(yè)面。兩者不沖突可以混著用。在現(xiàn)有 React 項(xiàng)目里跑通 amis 第一屏跑通比什么都重要。先把第一屏渲染出來(lái)再談別的。1. 安裝并對(duì)齊版本npm i amis版本有硬要求React16.8.6mobx 需要^4.5.0React 17 要求 amis1.6.5。這條后面坑點(diǎn)里還會(huì)再提一次因?yàn)檎娴暮苋菀追嚒?. 寫一個(gè)最薄的渲染組件amis 暴露的render函數(shù)收三個(gè)參數(shù)schema頁(yè)面圖紙、props初始數(shù)據(jù)、env環(huán)境能力如請(qǐng)求器。最小寫法// AmisPage.tsx import React from react; import {render as renderAmis} from amis; import amis/lib/themes/cxd.css; import amis/lib/helper.css; import amis/sdk/iconfont.css; export default function AmisPage({schema}: {schema: any}) { return renderAmis(schema, {}, { fetcher: async ({url, method, data}) (await fetch(url, {method, body: JSON.stringify(data)})).json() }); }fetcher是必填項(xiàng)先糊一個(gè)能用的。schema 可以簡(jiǎn)單到這種程度{ type: page, title: 用戶管理, body: { type: crud, api: /api/users, columns: [ {name: name, label: 姓名}, {name: email, label: 郵箱} ] } }把它傳給AmisPage schema{schema} /刷新頁(yè)面——列表出來(lái)了翻頁(yè)、加載態(tài)都是現(xiàn)成的。schema 就是給頁(yè)面畫的圖紙type聲明節(jié)點(diǎn)是什么組件body聲明它里面放什么靠樹(shù)形結(jié)構(gòu)一層層拼出整頁(yè)。更完整的 CRUD 配置含編輯彈窗表單可以參考docs/zh-CN/components/crud.md。跑通之后補(bǔ)上三件事第一屏只是能看。要能用把下面三件事挨個(gè)勾掉。數(shù)據(jù)接入把 fetcher 接到項(xiàng)目統(tǒng)一的請(qǐng)求層路由打通跳轉(zhuǎn)走你自己的 Router主題與樣式確定用哪套皮膚數(shù)據(jù)接入寫一個(gè)正經(jīng)的 fetcher別用fetch糊弄長(zhǎng)期方案。把 fetcher 接到項(xiàng)目已有的 axios 實(shí)例上登錄態(tài)、統(tǒng)一報(bào)錯(cuò)、埋點(diǎn)一次全帶上const env { theme: cxd, fetcher: async ({url, method, data, headers}) { const res await request({ // request 是你們項(xiàng)目的統(tǒng)一請(qǐng)求封裝 url, method, data, headers }); return res.data; } };amis 里所有api字段的請(qǐng)求都會(huì)走這個(gè)函數(shù)。它拿得到url、method、data、headers返回 Promise 即可。路由打通jumpTo 接你的 Routeramis 不關(guān)心你用什么路由它把跳轉(zhuǎn)交給你實(shí)現(xiàn)。在 env 里補(bǔ)一個(gè)jumpTojumpTo: to navigate(to) // navigate 來(lái)自你們的 react-router配置里actionType: link、url之類的跳轉(zhuǎn)動(dòng)作最終都落到這個(gè)方法。頁(yè)面內(nèi)導(dǎo)航、左側(cè)菜單配合app渲染器就能組織起來(lái)參考docs/zh-CN/components/app.md。主題兩套皮膚二選一主題樣式文件env.theme云舍默認(rèn)amis/lib/themes/cxd.csscxd仿 Antdamis/lib/themes/antd.cssantdCSS 引進(jìn)來(lái)、env.theme對(duì)上就完了。二次換膚不用改 CSS 文件主題色這類都走 CSS 變量說(shuō)明見(jiàn)docs/zh-CN/style/css-vars.md。amis 自定義組件怎么注冊(cè)很多人對(duì) amis 的誤解是只能寫配置插不進(jìn)來(lái)代碼。不是的。它有三種插法從臨時(shí)到正式配置里內(nèi)聯(lián)給某個(gè)節(jié)點(diǎn)加children一個(gè)返回 JSX 的函數(shù)asFormItem: true當(dāng)場(chǎng)就能用但只在當(dāng)前配置生效不可復(fù)用。注冊(cè)普通渲染器用Renderer裝飾器或Renderer(opts)(Comp)函數(shù)式寫法把組件掛進(jìn) amis之后任何 schema 里寫type: 你的類型名就能渲染。注冊(cè)表單項(xiàng)用FormItemlabel、校驗(yàn)、三種表單布局全部免實(shí)現(xiàn)你只管回顯值和改值兩件事。注冊(cè)一個(gè)普通渲染器import {Renderer} from amis; Renderer({type: user-card, autoVar: true}) class UserCard extends React.Componentany { render() { const {name, title} this.props; return div{name} · {title}/div; } }注冊(cè)一個(gè)表單項(xiàng)import {FormItem} from amis; FormItem({type: my-color}) class MyColor extends React.Componentany { render() { const {value, onChange} this.props; return ( input typecolor value{value || #f00} onChange{e onChange(e.target.value)} / ); } }兩個(gè)實(shí)用細(xì)節(jié)autoVar: true讓組件參數(shù)自動(dòng)解析${xxx}變量需要渲染子節(jié)點(diǎn)時(shí)props 里的render(body, node)就是口子。注冊(cè)完的組件還會(huì)出現(xiàn)在可視化編輯器里非開(kāi)發(fā)人員也能拖——注冊(cè)實(shí)現(xiàn)可以看packages/amis-core/src/factory.tsx完整寫法見(jiàn)docs/zh-CN/extend/custom-react.md。懶加載與 schema 緩存兩個(gè)不疼的工程化動(dòng)作點(diǎn)到為止夠用就行。懶加載整包。amis 本身體量不小別打進(jìn)首屏 chunk。用一個(gè)lazy包一層const AmisPage lazy(() import(./AmisPage)); // Suspense fallback{Spin /}AmisPage schema{s} //Suspense緩存 schema。如果配置是后端下發(fā)的前端按 key 緩存一份發(fā)布時(shí)再失效避免每次進(jìn)頁(yè)面都拉一遍 JSONconst cache new Map(); const loadSchema key cache.get(key) || fetch(/schemas/${key}.json).then(r { cache.set(key, r); return r.json(); });大列表提速。CRUD 有個(gè)lazyRenderAfter配置默認(rèn) 100意思是超過(guò)這個(gè)行數(shù)的延遲渲染。數(shù)據(jù)量大時(shí)調(diào)小它首屏?xí)煲唤匾?jiàn)docs/zh-CN/start/faq.md。踩坑實(shí)錄我踩過(guò)的坑和繞法都是真實(shí)場(chǎng)景里會(huì)撞上的按踩坑頻率排??裝完就報(bào)錯(cuò)白屏或運(yùn)行時(shí)報(bào)錯(cuò)。九成是 mobx 版本。amis 依賴 mobx^4.5.0mobx 5/6 肯定掛。檢查package.json里實(shí)際裝上的版本必要時(shí)用 overrides 鎖住。CRUD 分頁(yè)突然沒(méi)了。因?yàn)?api 里帶了變量比如/api/users/${id}——這種情況 amis 不會(huì)自動(dòng)拼page、perPage參數(shù)。手動(dòng)拼上/api/users/${id}?page${page}perPage${perPage}。頂部工具欄和你們已有的吸頂元素疊一起了。渲染前設(shè)置 CSS 變量--affix-offset-top留出間距或者在 CRUD 上配affixHeader: false關(guān)掉固頂。別包 StrictMode。amis 目前不支持React.StrictMode的雙調(diào)用把它從包裹 amis 那棵子樹(shù)上去掉。樣式?jīng)_突。別圖省事在容器上寫all: initialamis 的樣式會(huì)全沒(méi)。正確姿勢(shì)獨(dú)立容器包一層主題色用 CSS 變量微調(diào)。配置里 URL 環(huán)境不一致。開(kāi)發(fā)用localhost、線上用域名用 env 的replaceText做整體替換schema 里寫占位符即可。前后對(duì)比收益到底有多大拿用戶管理這一個(gè)頁(yè)面列表 搜索 新建/編輯表單 刪除確認(rèn)做對(duì)比數(shù)字是我們項(xiàng)目里的真實(shí)體感維度手寫 React 組件接入 amis 后工期4~5 人日0.5~1 人日大頭花在接 fetcher需要維護(hù)的代碼約 2000 行組件與狀態(tài)代碼約 200 行 JSON 配置 一層接入代碼改一個(gè)字段展示改組件、調(diào)樣式、回歸測(cè)試配置里改一個(gè)字段頁(yè)面風(fēng)格一致性取決于誰(shuí)寫的內(nèi)置組件風(fēng)格統(tǒng)一上手門檻得熟 React 和組件庫(kù)會(huì)寫 JSON 就能改頁(yè)面當(dāng)然要說(shuō)句公道話提速主要在頁(yè)面層。接口沒(méi)有的話聯(lián)調(diào)時(shí)間一分不會(huì)少。一句話結(jié)論上不上 amis如果你的頁(yè)面主體是列表 搜索 表單 彈窗上 amis一周的后臺(tái)變一周能收尾如果頁(yè)面主體是重交互、重視覺(jué)定制手寫 React別硬塞配置。兩個(gè)頁(yè)面類型在同一個(gè)工程里各干各的才是最省心的用法?！久赓M(fèi)下載鏈接】amis前端低代碼框架通過(guò) JSON 配置就能生成各種頁(yè)面。項(xiàng)目地址: https://gitcode.com/GitHub_Trending/am/amis創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考