“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

In the previous article, the interface for adding, deleting, changing and checking into the back end was implemented, which were relatively simple. Today, a new interface was added to control the rendering of detailed data according to the selection of classification list. The specific implementation is shown as follows:

The front-end implementation

It’s basically an API request method on the front end, a new page, and an interface on the back end

The main code

Change the SCR /view/index.vue file to the following:

<template> <div class="app-container"> <el-form :inline="true" class="filter-form" :show-message="false"> <el-form-item Label = "type: "> <el-select V-model ="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> <el-button Type ="primary" icon="el-icon-plus" @click="openAddFrom()"> </el-button> </el-form-item> </el-form> <el-table V-loading ="listLoading" :data="list" elemental-loading-text =" loading..." border fit highlight-current-row > <el-table-column align="center" label="ID" width="95"> <template slot-scope="scope"> {{ scope.row.ID }} </template> </el-table-column> <el-table-column label="Title"> <template slot-scope="scope"> {{ Scope.row. Name}} </template> </el-table-column> <el-table-column align="center" fixed="right" label=" operation "width="190px">  <template slot-scope="scope"> <div class="flex-btns"> <el-button :loading="scope.row.loading" type="primary" @click="bindEdit(scope.row)"> </el-button type="info" @click="deteleType(scope.row)"> </el-button> </el-button> </template> </el-table-column> </el-table> </div> </template> <script> import { getTypeList, getUrlList } from '@/api/url' export default { data() { return { filterText: '', typelist: [], list: [], type: 'all'}}, watch: {type(val) {this.listLoading = true getUrlList({id: val }).then(response => { this.list = response.data.Value this.listLoading = false }) } }, created() { this.fetchData() }, methods: { fetchData() { this.listLoading = true getTypeList().then(response => { this.typelist = response.data }) getUrlList({ id: 0 }).then(response => { this.list = response.data.Value this.listLoading = false }) } } } </script>Copy the code

SRC/API /url.js add a route:

export function getUrlList(data) {
  return request({
    url: '/admin/getUrlList',
    method: 'POST',
    data
  })
}


Copy the code

Most of the code is the same as in the previous article, with just two methods introduced, the watch listener method added

v-model ,:value,:label

Create life cycle hook function: creates life cycle hook function: creates life cycle hook function: creates life cycle hook function: creates life cycle hook function: creates life cycle hook function: creates life cycle hook function : is short for V-bind, :value and: lable are used for dynamic data binding in the Option loop of Select. Value and lable are both optional attributes of the select:

watch

Type is monitored on the page, and then provided to the getUrlList method to update the list data based on the type parameter. Very simple

The backend implementation

Route adding:

We started with GET, but found that we needed to send json strings to the front end, and finally changed to POST

admin.POST("/getUrlList", controller.GetUrlList)
Copy the code

The controller

func GetUrlList(c *gin.Context) { var json request.GetUrlListRequest if err := c.ShouldBindJSON(&json); err ! = nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } result := global.NewResult(c) list, err := service.GetUrlList(json) if err ! = nil {result.error (5201, err.error (), "failed to get domain list ") return} result.success (list)}Copy the code

The service method

func GetUrlList(json request.GetUrlListRequest) (data interface{}, err error) {

	list, nil := model.GetUrlList(json.Id)
	return list, nil
}

Copy the code

The validator

type GetUrlListRequest struct {
	Id int `form:"id" json:"id"`
}

Copy the code

The validator field cannot be set to “required”, so a ‘binding:”required”‘ is removed.

Model approach

func GetUrlList(id int) (data interface{}, err error) { var list []UrlList if id ! = 0 { res := db.Debug().Where("type_id = ?" , id).Find(&list) return res, nil } else { res := db.Debug().Find(&list) return res, nil } }Copy the code

Select * from type_list where id = 0; select * from type_list where id = 0;

conclusion

This list interface with filtering really makes me feel that VUE is simple and fast. Using bidirectional binding is very simple to solve the re-request of data. Before JQuery, we still need to read HTML tag attribute variables, set HTML tag attribute variables, and template rendering tag attribute variables, which is very tedious. The next chapter will improve the addition, deletion and modification of the detailed data under this classification.