[JavaScript知识库]动态获取教师列表

和获取标签列表基本一致.

1. 首先实现获取教师的接口

IUserService中加入抽象方法

/**
     * 获取全部解答问题的老师
     * @return 老师列表
     */
    List<User> getMaster();

实现方法

	/*
    User表中,所有type为1的是解答问题老师
     */
    @Override
    public List<User> getMaster() {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("type",1);
        List<User> masters = userMapper.selectList(queryWrapper);
        //将查询的结果集中的密码设为空. 密码传入前端不符合规范.
        masters.forEach(mastersP -> mastersP.setPassword(""));
        return masters;
    }

定义controller

@RestController
@RequestMapping("/v1/users")
public class UserController {

    @Autowired
    IUserService userService;

    @GetMapping("/master")
    public R<List<User>> master(){
        List<User> masters = userService.getMaster();
        return R.ok(masters);
    }
}

前端接收参数

let createQuestionApp = new Vue({
    el: '#createQuestionApp',
    data:{
        teachers:[],
        selectedTeachers: []
    },
    methods:{
        loadMaster:function () {
            console.log("开始获取老师列表");
            $.ajax({
                url: '/v1/users/master',
                method:'GET',
                success:function (r) {
                    console.log(r);
                    if (r.code === OK){
                        let masterList = r.data;
                        let masterName = [];
                        for(let i = 0; i<masterList.length;i++){
                            masterName.push(masterList[i].nickname);
                        }
                        console.log(masterName)
                        createQuestionApp.teachers = masterName;
                    }
                }
            });
        }
    },
    created:function () {
        this.loadMaster();
    }
});

得到参数后赋值给界面

				<div class="form-group">
                    <label>请选择老师：</label>
                    <v-select multiple required v-model="selectedTeachers"
                        v-bind:options="teachers" placeholder="请选择想要咨询的老师"></v-select>
                </div>