1.CodeWave是什么？
CodeWave是一款智能低代碼開發(fā)平臺(tái)，基于網(wǎng)易自研擁有大規(guī)模參數(shù)和深度學(xué)習(xí)能力的智能模型底座產(chǎn)品架構(gòu)，為企業(yè)級(jí)應(yīng)用提供更加智能化研發(fā)的軟件生產(chǎn)方式。IT人員可以輕易實(shí)現(xiàn)從“智能生成”到“可視化拖拽調(diào)整”的全棧低代碼應(yīng)用搭建，讓復(fù)雜應(yīng)用開發(fā)更加高效，加快企業(yè) 。
2.搭建CodeWave低代碼應(yīng)用
三步：1.創(chuàng)建應(yīng)用 2.數(shù)據(jù)建模 3.頁面設(shè)計(jì)與邏輯開發(fā)
創(chuàng)建應(yīng)用倆種方式1.空創(chuàng)建 2.模板創(chuàng)建
空創(chuàng)建點(diǎn)擊創(chuàng)建即可
然后就會(huì)進(jìn)入到可視化開發(fā)界面
實(shí)體與枚舉
首先需要數(shù)據(jù)模型設(shè)計(jì)（我理解為數(shù)據(jù)庫里面的表）
1.選擇數(shù)據(jù) 2.在實(shí)體下右擊添加實(shí)體
3.在實(shí)體中右擊添加屬性（注意：默認(rèn)系統(tǒng)屬性是有四條的，如果不需要不勾選即可）
就是跟Navicat 的操作類似
這里有一個(gè)注意點(diǎn)枚舉類型需要在數(shù)據(jù)中右擊添加枚舉
然后雙擊進(jìn)去新增的屬性，設(shè)置值
創(chuàng)建父子頁面
其實(shí)就是spu單界面的操作，這里低代碼將他圖形化了? ? ? ?
1.創(chuàng)建父界面? ? ? ? ? ??
頁面右擊新增頁面
輸入頁面的名稱和標(biāo)題，點(diǎn)擊確定即可
其中自由模式（頁面上組件可自由拖拽擺放位置，無需設(shè)置布局組件）
右擊添加子頁面
輸入子頁面名稱和標(biāo)題 點(diǎn)擊確定即可
拖拽導(dǎo)航欄
雙擊父界面，在右邊組件中直接拖拽導(dǎo)航欄到頁面上
如果我們需要修改導(dǎo)航欄的背景顏色，只需要選中導(dǎo)航欄，然后在樣式中修改即可
這里一定要注意選中導(dǎo)航欄，不要選錯(cuò)。選中會(huì)出現(xiàn)藍(lán)色邊框?
此時(shí)我們想要將文本修改為下拉框。先在選中文本，然后上方點(diǎn)擊刪除
然后將下拉菜單拖拽到刪除空白的部分
選擇樣式
?輸入相應(yīng)的文字，效果如上
實(shí)現(xiàn)導(dǎo)航欄跳轉(zhuǎn)
1.先選下拉菜單，在右邊的屬性中找到交互屬性，選擇頁面跳轉(zhuǎn)。單擊鏈接地址
在彈出的鏈接地址頁面中，點(diǎn)擊鏈接到你需要的地址。然后在點(diǎn)擊返回上級(jí)即可
到效果預(yù)覽發(fā)現(xiàn)，點(diǎn)擊跳轉(zhuǎn)，導(dǎo)航欄下去了
問題出在這塊子頁面呈現(xiàn)占位符，這部分的含義為（當(dāng)父頁面存在子頁面時(shí)，子頁面就會(huì)在父頁面的這部分位置展示，而導(dǎo)航欄在這個(gè)下方，當(dāng)我們點(diǎn)擊時(shí)，導(dǎo)航欄就會(huì)移動(dòng)到下方了），因此我們只需將這塊移動(dòng)到下方即可
頁面布局?
就是以前的display:flex這種布局方式，然后改成了圖形的方式
在右側(cè)的組件當(dāng)中
首頁布局設(shè)計(jì)
一個(gè)彈性布局16.8 然后右側(cè)在三等分?
我們發(fā)現(xiàn)首頁當(dāng)中都是有邊框的因此需要使用面板組件（區(qū)域中明顯感覺有邊框感覺）
面板組件直接拖進(jìn)來就可以了
我們明顯發(fā)現(xiàn)下面是日歷，然后去組件中尋找日歷組件
?然后設(shè)計(jì)右邊，用flex布局設(shè)計(jì)
第二部分用6個(gè)線性布局設(shè)計(jì)
?第三部分注意的就是幻燈片組件（輪播圖）?
幻燈片組件主要通過添加子幻燈片的方式。想要看這個(gè)結(jié)構(gòu)可以去結(jié)構(gòu)樹看（頁面的旁邊）
這里需要注意的是幻燈片組件如果需要添加第二張幻燈片，需要先返回幻燈片的最高級(jí)?
找到結(jié)構(gòu) 單擊這個(gè) 添加新的圖片? 這樣就能通過左右箭頭進(jìn)行切換了
調(diào)整整個(gè)畫面的間距
找到最外部，調(diào)整外邊距即可
自定義主題樣式?
發(fā)現(xiàn)設(shè)計(jì)的樣式和參照的不一樣 在開發(fā)中更符合用戶的需求，我們可以使用自定義樣式
點(diǎn)擊更多 的 自定義主題樣式
調(diào)整你需要的主題樣式，點(diǎn)擊保存即可
然后發(fā)現(xiàn)跟主題相關(guān)的樣式都發(fā)生了修改
子頁面跳轉(zhuǎn)邏輯?
在鏈接中選擇鏈接地址即可
子頁面還需要有返回父頁面的面包屑
供應(yīng)商實(shí)現(xiàn)效果如上
直接引入面包屑組件即可
刪除不需要的面包屑內(nèi)容，并把狀態(tài)改為禁用?
完成面包屑后，快速實(shí)現(xiàn)其他頁面的面包屑效果?？梢酝ㄟ^復(fù)制這個(gè)線性布局，完成多個(gè)頁面的面包屑導(dǎo)航效果
變量及變量作用域
低代碼中的變量
?頁面中右擊添加局部變量?
實(shí)現(xiàn)加法運(yùn)算？
?點(diǎn)擊值進(jìn)行局部變量的綁定
然后在這個(gè)界面當(dāng)中把需要的變量拖出來，同理綁定第二個(gè)變量。而最后的文本需要顯示倆個(gè)相加的和，因此需要綁定這倆個(gè)
點(diǎn)擊上方的編輯表達(dá)式，然后在點(diǎn)擊下面的括號(hào)進(jìn)入要表達(dá)式界面
右邊為邏輯表達(dá)式，拖出來就可以使用了
?效果實(shí)現(xiàn)
如果要?jiǎng)?chuàng)建全局變量，只需在下方前端全局變量中右擊即可創(chuàng)建
前端邏輯與服務(wù)器邏輯
觸發(fā)邏輯的事件類型
界面會(huì)自動(dòng)的是事件邏輯中生成該事件
?只需要在有右邊拖動(dòng)響應(yīng)組件，就能完成一個(gè)事件。例如我這就是點(diǎn)擊按鈕，彈出倆個(gè)數(shù)相加的和的message
我們也可以調(diào)用邏輯
1.先選擇彈出框組件
2.在彈出框組件中設(shè)計(jì)相應(yīng)的邏輯
3.最后在點(diǎn)擊事件中調(diào)用這個(gè)頁面邏輯model_1的open事件
效果如下
也可以直接在頁面下創(chuàng)建頁面邏輯（用來描述頁面中要完成的業(yè)務(wù)功能，可以搭配事件邏輯共同使用）?
組件的事件邏輯只能自己使用，而頁面邏輯當(dāng)前下面的所有組件都能使用?
快速創(chuàng)建供應(yīng)商管理頁面下的數(shù)據(jù)表格
找到數(shù)據(jù)下實(shí)體，直接拖拽到頁面中，就會(huì)自動(dòng)生成表格了?
選擇模板
效果如上
數(shù)據(jù)太多了，我們可以是實(shí)體中對(duì)這些數(shù)據(jù)進(jìn)行設(shè)置，比如那些數(shù)據(jù)是顯示的，那些不顯示
其中的顯示在表單的意思如上
內(nèi)部邏輯已經(jīng)寫好，拿來用即可
數(shù)據(jù)表格優(yōu)化
寬度先改為小
?修改表格的順序，注意：如果需要移動(dòng)表格列的順序，首先要選中這個(gè)表格列，在進(jìn)行拖拽。（選中，可以先單擊外面，但單擊要拖拽的內(nèi)容）
先寫這個(gè)點(diǎn)擊刷新事件（查詢）
這個(gè)filter變量是專門用來存儲(chǔ)輸入的查詢內(nèi)容的
?先用內(nèi)置函數(shù)clear進(jìn)行數(shù)據(jù)情況，然后調(diào)用函數(shù)reload重新加載
將供應(yīng)商等級(jí)修改為星星，采用評(píng)分組件
評(píng)分值為current下的level
修改供應(yīng)商狀態(tài) 供應(yīng)商新增時(shí)會(huì)自動(dòng)將狀態(tài)設(shè)置為啟動(dòng)，在修改時(shí)可對(duì)狀態(tài)進(jìn)行修改
設(shè)定一個(gè)只在狀態(tài)顯示的條件
新增時(shí)狀態(tài)為啟用 到立即創(chuàng)建按鈕中事件中
?不同的顏色顯示供應(yīng)商狀態(tài),給啟用禁用設(shè)置顯示條件
?直接將事件復(fù)制到按鈕中即可
表單項(xiàng)修改
這里文件上傳注意點(diǎn)，需要把格式轉(zhuǎn)換為url字符串，因?yàn)榇嫒氲綌?shù)據(jù)庫中的是url地址
點(diǎn)擊刪除，先出彈窗
這個(gè)警告圖標(biāo)是在彈窗組件的屬性提示圖標(biāo)當(dāng)中
?這個(gè)刪除事件復(fù)制到這個(gè)確定當(dāng)中，發(fā)現(xiàn)下面報(bào)錯(cuò)，說沒有被定義。雙擊錯(cuò)誤進(jìn)去
沒有把id傳進(jìn)來，重新回到之前刪除按鈕中的事件進(jìn)行修改
1.刪除之前的代碼，定義一個(gè)局部變量deleteId 并把current.id的值賦值給他??
2.調(diào)用彈窗的事件
3.回到彈窗的事件當(dāng)中，把id傳進(jìn)去
最后還要把取消事件也寫進(jìn)去?
效果實(shí)現(xiàn)如上?
批量操作供應(yīng)商信息
先表格下方，放倆個(gè)次要按鈕
這里我們需要使用到表格的值字段（當(dāng)我們選中數(shù)據(jù)的時(shí)候，需要獲取數(shù)據(jù)中哪個(gè)字段的值，也就是需要獲取哪一個(gè)屬性的數(shù)據(jù)，這里為了獲取到不重復(fù)的值，因此懸著了主鍵）這個(gè)屬性?
多選值和單選值我們需要設(shè)置一個(gè)變量來接收多選或單選后返回的ID信息
?然后讓多選綁定這個(gè)變量，上面的提示框的意思需不需雙向綁定，這里點(diǎn)開啟
測(cè)試一下這里要注意把序號(hào)類的類型改為多選列
拿到id保存到了idList當(dāng)中?
之前遇到了一個(gè)問題拿不到id值？
用表達(dá)式那id是錯(cuò)誤的
這個(gè)才是正確的
解決方案就是
倆個(gè)按鈕開始隱藏的，點(diǎn)擊復(fù)選框之后為顯示
?
idList的長(zhǎng)度不等于0的時(shí)候才顯示
實(shí)現(xiàn)批量禁用邏輯
在邏輯當(dāng)中可以直接使用batchUpdate邏輯 但是需要傳入的是一個(gè)list<實(shí)體>但是我們的idList是list<整形>因此要先拿到實(shí)體
我可以通過寫服務(wù)端邏輯來實(shí)現(xiàn)
創(chuàng)建輸入輸出? 輸出寫一個(gè)數(shù)據(jù)查詢（拖進(jìn)來）
?數(shù)據(jù)源
篩選 左邊的是要從數(shù)據(jù)庫中篩選的內(nèi)容 右邊是傳入的東西
數(shù)據(jù)查詢的輸出信息屬性設(shè)置為list? 然后回到按鈕事件當(dāng)中
創(chuàng)建一個(gè)variable1來接收到查詢到的信息
循環(huán)每一項(xiàng)然后里面的狀態(tài)改為禁用然后賦值給?variable2
然后調(diào)用全局更新邏輯把?variable2傳進(jìn)去 最后刷新表格
發(fā)現(xiàn)多選類還是選中的狀態(tài)，因此需要點(diǎn)禁用按鈕后應(yīng)該恢復(fù)為原樣
就是在刷新后，調(diào)用clear清空表格即可
批量刪除操作
批量刪除就比較簡(jiǎn)單，直接拖進(jìn)邏輯。然后查看類型跟我們的idList相符直接拖進(jìn)來用即可
快速創(chuàng)建聯(lián)系人管理表格
先去實(shí)體中勾選需要顯示在表格和表單的信息
然后按照之前的操作創(chuàng)建表格
這里有一個(gè)操作后面也可以使用到
把下拉框改為多選框
就是把實(shí)體拖進(jìn)來，然后下來中找到選擇框
還有一種更快的方法，就是在實(shí)體中進(jìn)行操作
?這樣就發(fā)現(xiàn)聯(lián)系上了供應(yīng)商信息
輸入框輸入自動(dòng)篩選邏輯
?直接加入一個(gè)調(diào)用邏輯刷新即可
?但是發(fā)現(xiàn)所屬輸入框沒有東西不會(huì)變化
只需要將事件改為改變后即可?
為表單項(xiàng)添加驗(yàn)證規(guī)則并導(dǎo)出表格數(shù)據(jù)
要做一個(gè)這樣的效果
第一種方法
在實(shí)體上勾選必填
第二種方法手動(dòng)添加
?打開必填標(biāo)記
選擇必填表達(dá)式
?
?驗(yàn)證手機(jī)號(hào)為中國(guó)大陸 zh-CN
效果實(shí)現(xiàn)
?導(dǎo)出數(shù)據(jù)
寫一個(gè)按鈕點(diǎn)擊導(dǎo)出
調(diào)用系統(tǒng)自帶的邏輯即可
?效果實(shí)現(xiàn)
搭建供應(yīng)商詳情界面
?這個(gè)是選項(xiàng)卡組件
這個(gè)是詳情列表組件
?總占據(jù)數(shù)為3
詳情頁新建一個(gè)輸入?yún)?shù)supplierID?
那么在供應(yīng)商頁面跳轉(zhuǎn)中就需要supplierID 了 當(dāng)前行的id 也就是current.id
頁面進(jìn)入時(shí)觸發(fā)supplier進(jìn)入賦值 通過get 方式?
然后返回頁面進(jìn)行綁定
數(shù)據(jù)網(wǎng)格的形式，只需要把實(shí)體拖進(jìn)來，向下選模板即可
還需要這個(gè)對(duì)這個(gè)數(shù)據(jù)進(jìn)行篩選，只顯示這個(gè)供應(yīng)商的聯(lián)系人??
傳進(jìn)來的ID
?篩選條件當(dāng)聯(lián)系人的供應(yīng)商Id等于傳入的供應(yīng)商id時(shí)數(shù)據(jù)才符合條件
搞定
主營(yíng)產(chǎn)品展示及權(quán)限管理
自由布局組件 可以發(fā)現(xiàn) 組件在內(nèi)部可以自由拖拽
調(diào)整玩布局后對(duì)組件進(jìn)行值的綁定
文本組件也可以當(dāng)做插值語法使用
新增的產(chǎn)品默認(rèn)為這個(gè)供應(yīng)商
最后對(duì)數(shù)據(jù)網(wǎng)格進(jìn)行數(shù)據(jù)的篩選
新建一個(gè)輸入id
傳入id
篩選條件
效果如上
開啟等比縮放
開啟權(quán)限控制流程
選中采購管理父頁面
開啟權(quán)限，則父頁面下面的所有子頁面默認(rèn)都開啟
此時(shí)預(yù)覽發(fā)現(xiàn)需要登錄了
我們可以把采購管理界面當(dāng)作首頁
homePage 當(dāng)作默認(rèn)跳轉(zhuǎn)界面
總結(jié)
應(yīng)用調(diào)試
假如應(yīng)用中數(shù)據(jù)在創(chuàng)建或修改時(shí)出現(xiàn)問題
點(diǎn)擊登錄進(jìn)入數(shù)據(jù)庫
平臺(tái)提供斷點(diǎn)調(diào)試功能
開啟斷點(diǎn)
文章來源：http://www.zghlxwxcb.cn/news/detail-809046.html
邏輯中右擊添加斷點(diǎn)即可文章來源地址http://www.zghlxwxcb.cn/news/detail-809046.html
到了這里，關(guān)于CodeWave學(xué)習(xí)筆記--采購管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
