Dark Horse] Backstage Project Episode 171

I haven't practiced for nearly a month, and after I found it, I couldn't open it and there was a problem

[Problem] After running the code to open the webpage, I found that I couldn't log in normally. At first I thought it was a wrong password, but later I found that the database was not started normally. The database in phpstudy has been in the startup state and cannot be closed.

[Solution] After restarting phpstudy, I found that the port is occupied. I remembered that the previous solution was to uninstall and reinstall, which was too troublesome. This time I tried win+r, entered services. Also stopped, and then restarted, the database is normal

1. Restart the database first

2. Enter node .\app.js to link to the background database

3. Open the code again and run npm run serve

After opening the webpage, you can log in normally

Then 171 to start learning

1. Realize the addition of product content

First add a verification of the previous text, whether it is filled in completely, and then you can enter the product content adding interface

So to get the verification object of the form, perform a verification on him

Access the reference addformref of the form through this.$refs, and then call the validation rule, validate

//添加商品
        add(){
            this.$refs.addFormRef.validate((valid) => {
                if (!valid) {
                    return this.$message.error('请填写必要的表单项！')
                }
                //执行添加的业务逻辑
            })

But I found that the form has not been completed on the page

Make up for episode 170

Second, realize the addition of rich text compiler

Enter win+r, run cmd, and execute the vue ui command

Install and run dependencies

Import the style in main

//导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
//导入富文本编辑器对应的样式
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

Then register globally

//将富文本编辑器注册为全局组件
Vue.use(VueQuillEditor)

Then use this component in add.vue

Open the official document, find the SPA file, copy the component name, and put the component name into the product content

                    <el-tab-pane label="商品内容" name="4">
                        <!-- 富文本编辑器组件 -->
                        <!-- 要把输入的文本内容，通过v-model双向绑定到data之中，文本要双向绑定到添加表单身上，在addform里新增一个节点，商品的详情描述 -->
                        <!-- 商品的详情描述对应的属性字段查看API文档叫good_introduce.默认是空文本 -->
                        <quill-editor v-model="addForm.goods_introduce"></quill-editor>
                    </el-tab-pane>

                //商品的详情描述
                goods_introduce:''

Add a minimum height to him, in the global style sheet

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

Hope to put an add button below the editor

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

In order to verify that the addition is successful, add a click event,

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

As long as the button is clicked, the add event is triggered, and the form is printed to see if there is an attribute value of the product content on the form

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

OK

Continue to go back to 171. After passing the pre-verification of the form, prepare to initiate a data request. After initiating the data request, a layer of data processing needs to be performed on the data in the form.

According to the API documentation, it is found that the data of goods_cat needs to be changed from an array to a string, but if it is directly changed with the goods_cat in the addform form, it will cause ambiguity.

So a deep copy is required.

3. How to make a deep copy

Install lodash runtime dependencies

Introduce directly in add.vue, accept with _

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

           //进行深拷贝
            const form = _.cloneDeep(this.addForm)
            form.goods_cat = form.goods_cat.join(',')
            console.log(form)
            })

In this way, no error will be reported, and the value will be successfully converted.

4. Handling dynamic parameters and static properties

By looking at the API documentation, it is found that the static and dynamic attributes also need to be converted into the attr array

In this array, each curly brace is an object, which contains two attributes, one is id, the other is value

1. First find the form data and add an array attrs

2. Process the dynamic parameter list and the static attribute list separately, loop the arrays separately, and process each item of the loop, and push the processed results to the attrs array.

But these two arrays not only contain two data, we only need to get the id and value.

this.manyTableData.forEach, get each dynamic parameter item in the dynamic array, item item, contains multiple attributes, we only need two,

attr_value:item.attr_vals.join(' ') Since it was an array before, it is now a string.

    //处理动态参数
            this.manyTableData.forEach(item =>{
                const newInfo = {
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals.join(' ')
                }
                this.addForm.attrs.push(newInfo)
            })
            //处理静态属性
            this.onlyTableData.forEach(item =>{
                const newInfo = {attr_id:item.attr_id,
                attr_value:item.attr_vals}
                this.addForm.attrs.push(newInfo)
            })

5. Send request

 //添加商品
        add(){
            // console.log(this.addForm)
            this.$refs.addFormRef.validate( async valid => {

//发起请求，添加商品
            //商品的名称，必须是唯一的
            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')
            })

6. Upload to Code Cloud