技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类

技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类

相关文章：
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-3.接收json数据
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-4.连接mongodb数据库
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-5.跨域并跨域传输数据
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-6.GO语言做通用CRUD接口-1
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-7.GO语言做通用CRUD接口-2
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.管理员及登录注册功能的实现
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-10.生产环境编译

1.修改admin端添加分类页面

CategorySet.vue：

<template>
    <div>
        <h1>创建分类</h1>
        <el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
            <!-- submit事件中使用提交方法save，native是找到js原生表单，prevent是指阻止提交时默认跳转页面 -->
            <el-form-item label="上级分类">
                <!-- 使用select获取分类名name和该分类的id,后期如果修改分类名自动更新子分类的上级分类 -->
                <!-- 其中label获取分类名，发送到数据库的值为该分类的id————以id为分类寻找依据 -->
                <el-select v-model="model.parent">
                    <el-option v-for="item in parentOptions" :key="item._id" :label="item.name" :value="item._id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类名">
                <el-input v-model="model.name"></el-input>
                <!-- 双向绑定model -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        id: {}
    },
    data(){
        return {
            model: {},
            parentOptions: {}
        }
    },
    methods: {
        // 使用async..await异步请求方法
        async save(){
            let res
            // 这里放axios方法，用来提交数据
            if(this.id){
                // 传id值，表明修改哪一条数据
                res = await this.$http.put('rest/category/' + this.id, this.model)
            }else{
                res = await this.$http.post('rest/category', this.model)
            }
            console.log('保存结果：', res)
            this.$router.push('/categories/list')
            // 提示信息，使用vue中自带的$message实例
            this.$message({
                type: 'success',
                message: '保存成功'
            })
        },
        async fetch(){
            const res = await this.$http.get('rest/category/' + this.id)
            this.model = res.data
        },
        async fetchParentOptions(){
            const res = await this.$http.get('rest/category')
            this.parentOptions = res.data
        }
    },
    created(){
        this.id && this.fetch()
        this.fetchParentOptions()
    }
}
</script>

其中我们用到的 fetchParentOptions() 接口方法，就是连接到后端查询category表中所有数据的接口GET()。修改页面后，点击下拉列表就可以成功获取分类数据，当作上级分类：

虽然成功获取到了上级分类的数据，也可以通过model.parent传值到服务器，但是后端方法还无法接收并保存到数据库。

2.修改后端插入数据接口，获取上级分类

在分类模型中添加父级分类字段，保存数据为字符串类型的父级分类id：

至此，后端就可以接收到传来的父级分类id，编译启动测试：


传值成功，此时点击编辑按钮再次进入gin框架分类的页面，根据查询到的id直接生成了分类名：

到此，二级分类就成功了。如果在“gin框架”分类下再建立分类，就实现了三级分类，一直至无限层级的分类。

3.新建（修改）分类过程解释：

大家或许会迷惑，这么简单就实现了？？
下面给大家截图讲解过程：

所以我们并不需要多个接口进行id的查找、识别过程，直接就可以通过原定义好的逻辑过程获取我们想要的数据。
由于修改分类功能复用了新增分类的模板组件，所以一样可以运行。

4.列表页面的分类数据

此时，数据中有了上级分类的数据，所以可以在CategoryList.vue中的表格中新增一栏上级分类：

页面出现了分类的内容，但不是分类名，而是分类id：

新建（修改）数据页面中的上级分类可以自动将id识别转化为分类名，其原因是查询到了全部分类数据，得以遍历渲染。
但是此时获取到的分类列表页面就只获取到了id，同时遍历过程也无法找出id对应的分类名，所以在到这一步之前，我们需要再次修改后端接口函数，获取到上级分类的全部信息。
（2）修改模型，关联上级分类模型
category.go:

（2）修改上传的接口函数
上传接口函数中需要后端方法获取上级分类的所有信息，包括id和name：

编译启动，测试：

下一步，修改admin端分类列表CategoryList.vue页面，将parent改为上级分类的分类名topCategory.name：

功能编写成功：

结语

mgo.v2的go语言包网上中文手册不是很多，原英文手册不太符合我的思维逻辑，看不懂，无法做到像node.js中mongoose包一样完善功能，实现.populate()自动查询上级分类数据的功能。所以我做的可能比较繁琐，大家可以尝试深入研究mgo.v2，可能有更加简单的数据关联功能方法。
下篇文章开始做注册登录功能。

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————