11_PROJECT_DAY08_1745

30. 提问页面-显示问题标签的下拉列表

关于js代码：

Vue.component('v-select', VueSelect.VueSelect);
let createQuestionApp = new Vue({
   
    el: '#createQuestionApp',
    data: {
   
        tags: [
            {
   label: 'MyBatis Plus', value: 1},
            {
   label: 'Spring Security', value: 2},
            {
   label: 'Spring Validation', value: 3},
            {
   label: 'Lombok', value: 4},
            {
   label: 'Vue', value: 5}
        ],
        selectedTags: []
    },
    methods: {
   
        loadTags: function () {
   
            $.ajax({
   
                url: '/api/v1/tags',
                type: 'get',
                success: function(json) {
   
                    let tags = [];
                    for (let i = 0; i < json.data.length; i++) {
   
                        let op = {
   
                            label: json.data[i].name,
                            value: json.data[i].id
                        };
                        tags[i] = op;
                    }
                    createQuestionApp.tags = tags;
                }
            });
        }
    },
    created: function () {
   
        this.loadTags();
    }
});

31. 提问页面-显示老师的下拉列表

查询老师列表的SQL语句：

select id, nickname, gender, phone from user where type=1 order by id;

先创建TeacherVO类：

@Data
public class TeacherVO {
   

    private Integer id;
    private String nickname;
    private Integer gender;
    private String phone;

}

在UserMapper接口中添加：

/**
 * 查询老师的列表
 *
 * @return 老师的列表
 */
List<TeacherVO> findTeachers();

在UserMapper.xml中配置映射：

<select id="findTeachers" resultType="cn.tedu.straw.portal.vo.TeacherVO">
    SELECT
        id, nickname, phone, gender
    FROM
        user
    WHERE
        type=1 AND enabled=1 AND locked=0
    ORDER BY
        id
</select>

在UserMapperTests中测试：

@Test
void findTeachers() {
   
    List<TeacherVO> teachers = userMapper.findTeachers();
    log.debug("teacher count = {}", teachers.size());
    for (TeacherVO teacher : teachers) {
   
        log.debug(">>> {}", teacher);
    }
}

在IUserService中添加：

/**
 * 获取缓存的老师的列表，如果列表为空，还会尝试从数据库查询列表数据，避免因为缓存为空导致无法获取到数据
 *
 * @return 缓存的老师的列表
 */
List<TeacherVO> findTeachers();

/**
 * 获取缓存的老师的列表，由于存在清空缓存机制，获取到的数据将不可靠
 *
 * @return 缓存的老师的列表
 */
List<TeacherVO> findCachedTeachers();

在UserServiceImpl中实现以上2个方法：

/**
 * 缓存的老师列表
 */
private List<TeacherVO> teachers = new CopyOnWriteArrayList<>();

@Override
public List<TeacherVO> findTeachers() {
   
    if (teachers.isEmpty()) {
   
        synchronized (CacheSchedule.LOCK_CACHE) {
   
            if (teachers.isEmpty()) {
   
                teachers.addAll(userMapper.findTeachers());
            }