將近一個(gè)月沒有練習(xí)了，找到之后果然打不開出了問題

【問題】運(yùn)行代碼打開網(wǎng)頁后，發(fā)現(xiàn)不能正常登錄，一開始還以為是密碼記錯(cuò)了，后來發(fā)現(xiàn)是數(shù)據(jù)庫沒有正常啟動(dòng)，phpstudy中的數(shù)據(jù)庫一直是啟動(dòng)狀態(tài)，關(guān)閉不了。

【解決辦法】重啟phpstudy之后發(fā)現(xiàn)端口占用情況，想起之前的解決辦法是卸載重裝，太麻煩了，這次試了一下win+r，輸入services.msc，找到MySQL80，停止之后，發(fā)現(xiàn)PHP里面的也停止了，然后重啟之后，數(shù)據(jù)庫正常

1，先重啟數(shù)據(jù)庫

2，輸入node .\app.js 鏈接上后臺(tái)數(shù)據(jù)庫

3、再打開代碼，運(yùn)行npm run serve

之后打開網(wǎng)頁可以正常登錄

接著171開始學(xué)習(xí)

一、實(shí)現(xiàn)商品內(nèi)容的添加

先添加一個(gè)之前文本的校驗(yàn)，是否都填寫完整，然后才能進(jìn)入到商品內(nèi)容添加界面

所以要拿到表單的驗(yàn)證對象，對他進(jìn)行一個(gè)驗(yàn)證

通過this.$refs訪問到表單的引用addformref，然后調(diào)用校驗(yàn)規(guī)則，validate

//添加商品add(){this.$refs.addFormRef.validate((valid) => {if (!valid) {return this.$message.error('請?zhí)顚懕匾谋韱雾?xiàng)！')}//執(zhí)行添加的業(yè)務(wù)邏輯})

但發(fā)現(xiàn)現(xiàn)在頁面里還沒有整出來表格

補(bǔ)一下170集

二、實(shí)現(xiàn)富文本編譯器的添加

輸入win+r,運(yùn)行cmd，執(zhí)行vue ui命令

安裝運(yùn)行依賴

導(dǎo)入main中樣式

//導(dǎo)入富文本編輯器
import VueQuillEditor from 'vue-quill-editor'
//導(dǎo)入富文本編輯器對應(yīng)的樣式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

然后進(jìn)行全局注冊

//將富文本編輯器注冊為全局組件
Vue.use(VueQuillEditor)

然后在add.vue中進(jìn)行使用這個(gè)組件

打開官方文檔，找到SPA這個(gè)文件，拷貝組件名稱，把組件名稱放到商品內(nèi)容里面

                    <el-tab-pane label="商品內(nèi)容" name="4"><!-- 富文本編輯器組件 --><!-- 要把輸入的文本內(nèi)容，通過v-model雙向綁定到data之中，文本要雙向綁定到添加表單身上，在addform里新增一個(gè)節(jié)點(diǎn)，商品的詳情描述 --><!-- 商品的詳情描述對應(yīng)的屬性字段查看API文檔叫g(shù)ood_introduce.默認(rèn)是空文本 --><quill-editor v-model="addForm.goods_introduce"></quill-editor></el-tab-pane>//商品的詳情描述goods_introduce:''

給他加個(gè)最小的高度，在全局樣式表中

.ql-editor{
min-height: 300px;
}

希望在編輯器的下面，放一個(gè)添加的按鈕

<!-- 添加商品按鈕 -->
<el-button type="primary" class="btnAdd">添加商品</el-button>

為了驗(yàn)證添加成功了，加一個(gè)單擊事件，

<el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>

只要點(diǎn)擊按鈕，觸發(fā)add事件，就打印表單，看表單身上是否有商品內(nèi)容的屬性值

        //添加商品add(){console.log(this.addForm)

OK

繼續(xù)回到171，通過表單的預(yù)校驗(yàn)之后，準(zhǔn)備發(fā)起數(shù)據(jù)請求，在發(fā)起數(shù)據(jù)請求之后，需要對表單里面的數(shù)據(jù)做一層數(shù)據(jù)處理。

根據(jù)API文檔發(fā)現(xiàn)，需要對goods_cat的數(shù)據(jù)由數(shù)組變?yōu)樽址?#xff0c;但若是直接用addform表單里的goods_cat更改之后會(huì)造成歧義。

所以需要進(jìn)行深拷貝。

三、如何進(jìn)行深拷貝

安裝lodash運(yùn)行依賴

在add.vue中直接引入，用_進(jìn)行接受

<script>
import _ from 'lodash'
export default {

           //進(jìn)行深拷貝const form = _.cloneDeep(this.addForm)form.goods_cat = form.goods_cat.join(',')console.log(form)})

這樣才不會(huì)報(bào)錯(cuò)，成功進(jìn)行轉(zhuǎn)變數(shù)值

四、處理動(dòng)態(tài)參數(shù)和靜態(tài)屬性

通過查看API文檔，發(fā)現(xiàn)，還需要對靜態(tài)屬性和動(dòng)態(tài)屬性進(jìn)行轉(zhuǎn)換到attr數(shù)組中

在這個(gè)數(shù)組中，每一個(gè)花括號(hào)里的都是一個(gè)對象，在這個(gè)對象中包含兩個(gè)屬性，一個(gè)是id,一個(gè)是value

1.先找到表單數(shù)據(jù)，新增一個(gè)數(shù)組attrs

2.分別處理動(dòng)態(tài)參數(shù)列表和靜態(tài)屬性列表，分別循環(huán)數(shù)組，并把循環(huán)的每一項(xiàng)做一個(gè)處理，把處理之后的結(jié)果push到attrs數(shù)組中。

但在這兩個(gè)數(shù)組中不只包含著兩個(gè)數(shù)據(jù)，我們只需要拿到id和value即可。

this.manyTableData.forEach，拿到動(dòng)態(tài)數(shù)組里面的每一個(gè)動(dòng)態(tài)參數(shù)項(xiàng)，item項(xiàng)，包含多個(gè)屬性，我們只需要兩個(gè)，

attr_value:item.attr_vals.join(' ')由于之前是一個(gè)數(shù)組，現(xiàn)在要變成字符串。

    //處理動(dòng)態(tài)參數(shù)this.manyTableData.forEach(item =>{const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals.join(' ')}this.addForm.attrs.push(newInfo)})//處理靜態(tài)屬性this.onlyTableData.forEach(item =>{const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals}this.addForm.attrs.push(newInfo)})

五、發(fā)送請求

 //添加商品add(){// console.log(this.addForm)this.$refs.addFormRef.validate( async valid => {//發(fā)起請求，添加商品//商品的名稱，必須是唯一的const {data:res} = await this.$http.post('goods',form)if(res.meta.status!==201){return this.$message.error('添加商品失敗')}this.$message.success('添加商品成功！')this.$router.push('/goods')})

六，上傳到碼云