“This is the 25th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”
preface
In the previous article, we did a list showing the details of the navigation domain name according to the classification. Today, it is more difficult to do a list showing the details of the navigation domain name according to the classification. The key is to add a selection box in the Element-UI Dialog.
The front part
Today we have the same amount of front-end and back-end code, so there’s too much code to show only the additions, not the whole page. The first is the need to add more detailed information to the list page:
Increase the table column
el-table-columnLable is the name of the column. Lable is the name of the column.
<el-table-column label=" category ID"> <template slot-scope="scope"> {{scope.row.TypeID}} </template> </el-table-column> <el-table-column label="Url"> <template slot-scope="scope"> {{ scope.row.URL }} </template> </el-table-column>Copy the codeAdd two dialog boxes
<! Sync ="formAddVisible" width="450px" center> <el-form ref=" addForm" Inline ="true"> <el-select V-model ="add_type" placeholder=" placeholder "style="max-width:140px"> <el-option v-for="item in typelist" :key="item.ID" :value="item.ID" :label="item.Name" /> </el-select> </el-form-item> <el-form-item label=" input name" > < EL-input V-model ="addForm.name" placeholder=" Please input navigation name" /> </el-form-item> <el-form-item Label =" input domain name "> <el-input V-model =" addform. url" placeholder=" please input navigation URL "/> </el-form> </el-form> <el-button Native-type ="primary" @click="onSubmitAdd"> Sync ="formEditVisible" width="450px" center> <el-form ref=" addForm" Inline ="true"> <el-select V-model ="edit_type" placeholder=" placeholder "style="max-width:140px"> <el-option v-for="item in typelist" :key="item.ID" :value="item.ID" :label="item.Name" /> </el-select> </el-form-item> <el-form-item label=" input name" > < EL-input V-model ="editForm.name" placeholder=" Please input navigation name" /> </el-form-item> <el-form-item Url "placeholder=" please input navigation URL" /> </el-form-item> </el-form> <el-button @click="onSubmitEdit"> </el-button> </el-dialog>Copy the codeThe effect is as follows:
el-formOne is added to:inline="true"Property, so that the input and its label are displayed on the same line, but the submitted button is placed outside the form so that it is not on the same line as the last table input field.
Then, two-way binding is used. When clicking on edit, the data of the selected column will be rendered in the dialog box:
bindEdit(data) {
this.editForm.id = data.ID
this.editForm.name = data.Name
this.editForm.url = data.URL
this.editForm.type_id = data.TypeID
this.edit_type = data.TypeID
this.formEditVisible = true
},
Copy the codeThe most important option is to write down the type_id of that column of data to display in the checkbox. The add category TAB is always all, all is passed to the back end type_id is 0, and an error is reported until the value of the category ID is selected. It is important to note that all variable data needs to be defined in the data property of the VUE object, so many variables are defined in data to implement these functions:
Data () {return {add_type: 'all ', edit_type: '', typelist: [], list: [], type: 0, formAddVisible: false, formEditVisible: false, addForm: { type_id: 0, name: '', url: '' }, editForm: { id: 0, type_id: 0, name: '', url: '' } } },Copy the codeData to monitor
watch: {
type(val) {
this.fetchData()
},
add_type(val) {
this.addForm.type_id = val
}
},
Copy the codeListen for two variables, the first being the re-rendering of the conditional list from the previous article based on a checkbox selection. The second implementation is to add detail data to select the classification to change the type_id to be used when submitting the form, so the type_id obtained when adding data methods is obtained from the data listener, not from the checkbox:
onSubmitEdit() { editUrl({ id: this.editForm.id, type_id: this.edit_type, name: this.editForm.name, url: this.editForm.url }).then(res => { this.$message({ type: 'success', message: FetchData () this.formedItVisible = false})}Copy the codeThe back-end
To be brief, instead of showing all the code, the router added three lines of code: delete details, add details, and modify details
admin.POST("/DelUrl", controller.DelUrl)
admin.POST("/AddUrl", controller.AddUrl)
admin.POST("/EditUrl", controller.EditUrl)
Copy the codeValidators are required to pass values, and fields are required:
type DelUrlRequest struct {
Id int `form:"id" json:"id" binding:"required"`
}
type AddUrlRequest struct {
Name string `form:"name" json:"name" binding:"required"`
TypeID int `form:"type_id" json:"type_id" binding:"required"`
Url string `form:"url" json:"url" binding:"required"`
}
type EditUrlRequest struct {
Id int `form:"id" json:"id" binding:"required"`
Name string `form:"name" json:"name" binding:"required"`
TypeID int `form:"type_id" json:"type_id" binding:"required"`
Url string `form:"url" json:"url" binding:"required"`
}
Copy the codeThe controller adds three methods, using the validator to delete the validator can use the validator to delete the classification, but still not lazy for the sake of specification:
func DelUrl(c *gin.Context) {
var json request.DelUrlRequest
if err := c.ShouldBindJSON(&json); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
result := global.NewResult(c)
err := service.DelUrl(json)
if err != nil {
result.Error(5201, err.Error(), "删除失败")
return
}
result.Success("删除成功")
}
func AddUrl(c *gin.Context) {
var json request.AddUrlRequest
if err := c.ShouldBindJSON(&json); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
result := global.NewResult(c)
id, err := service.AddUrl(json)
if err != nil {
result.Error(5201, err.Error(), "域名获取失败")
return
}
result.Success(id)
}
func EditUrl(c *gin.Context) {
var json request.EditUrlRequest
if err := c.ShouldBindJSON(&json); err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
result := global.NewResult(c)
err := service.EditUrl(json)
if err != nil {
result.Error(5201, err.Error(), "域名修改失败")
return
}
result.Success("域名修改成功")
}
Copy the codeThe service method needs to be passed in order according to the data required by the ORM method, otherwise it will be chaotic, and needs to be returned according to the content needed by the controller. Some pass the ID of the new data, some just need to pass whether an error is reported:
func DelUrl(json request.DelUrlRequest) (err error) {
nil := model.DelUrl(json.Id)
return nil
}
func AddUrl(json request.AddUrlRequest) (id int, err error) {
id, nil := model.AddUrl(json.Name, json.Url, json.TypeID)
return id, nil
}
func EditUrl(json request.EditUrlRequest) (err error) {
nil := model.EditUrl(json.Id, json.TypeID, json.Name, json.Url)
return nil
}
Copy the codeFinally, in the model layer, note the replacement of the model object and field content. Deletion is the easiest:
Func DelUrl(id int) error {return db.delete (&urllist {}, id).error} // Add a detail func AddUrl(name string, url string, type_id int) (id int, err error) { ListData := UrlList{ Name: name, TypeID: type_id, URL: Url,} err = db.debug ().create (&ListData).Error return int(listdata.id), err} func EditUrl(ID int, type_id int, name string, url string) error { return db.Debug().Model(&UrlList{}).Where("id = ?" , id).Updates(map[string]interface{}{ "TypeID": type_id, "Name": name, "Url": url, }).Error }Copy the codeconclusion
In this article today, I think the key and difficult point is the data echo control of the single boxes. At the beginning, the single boxes in the two dialog boxes affected each other and the experience was very poor. Finally, more variables were defined and variable monitoring was added to solve this problem. All data is stored in VUE objects, which are real and can be called at any time. It is very convenient. In jQuery, some concepts are very vague, and usually many methods are written to manipulate data. Then you have to implement some slightly more complex functionality that makes the method write very long, and ultimately leads to a confusion of logic where the data is being manipulated.