续 讲师首页复用模板

复用用户信息面板

复用用户信息面板是第一次执行

1.定义模板

2.调用模板

3.引用模板

在js文件夹中定义一个模板文件user_info_temp.js

Vue.component("user-app",{
    props:["user"],
    template:`
    <div class="container-fluid font-weight-light">
        <div class="card">
          <h5 class="card-header"
            v-text="user.nickname">陈某</h5>
          <div class="card-body">
            <div class="list-inline mb-1 ">
                <a class="list-inline-item mx-3 my-1 text-center">
                  <div><strong>10</strong></div>
                  <div>回答</div>
                </a>
                <a class="list-inline-item mx-3 my-1 text-center" href="personal/myQuestion.html">
                  <div>
                    <strong v-text="user.questions">10</strong>
                  </div>
                  <div>提问</div>
                </a>
                <a class="list-inline-item mx-3 my-1 text-center" href="personal/collect.html">
                  <div>
                    <strong v-text="user.collections">10</strong>
                  </div>
                  <div>收藏</div>
                </a>
                <a class="list-inline-item mx-3 my-1 text-center" href="personal/task.html">
                  <div><strong>10</strong></div>
                  <div>任务</div>
                </a>
            </div>
          </div>
        </div>
      </div>
    `
})

调用模板

哪里需要哪里调用

删除之前的html代码

使用我们定义的标签替换

<!--个人信息-->
<user-app id="userApp" :user="user"></user-app>

引用模板

页面尾部,在引用的列表中添加

<script src="js/user_info_temp.js"></script>
<script src="js/user_info.js"></script>

重启服务,登录讲师,显示讲师首页

正确的情况是能显示所有标签和当前登录讲师的用户信息面板

开发讲师任务列表

讲师任务列表业务分析

学生首页显示学生的问题列表

讲师首页显示讲师的任务列表

任务列表的含义是:显示哪些问题问了当前登录的讲师

也就是我们需要编写一个sql语句

实现查询哪些问题问了当前登录讲师,当然讲师如果有提问也要显示出来

确定任务列表的sql

SELECT q.* FROM question q
LEFT JOIN user_question uq ON q.id=uq.question_id
WHERE uq.user_id=3 OR q.user_id=3
ORDER BY q.createtime DESC 

编写查询任务列表的数据访问层

QuestionMapper参照上面sql语句完成数据访问层查询方法的编写:

// 根据讲师id查询讲师任务列表
@Select("SELECT q.* FROM question q\n" +
        "LEFT JOIN user_question uq ON q.id=uq.question_id\n" +
        "WHERE uq.user_id=#{id} OR q.user_id=#{id}\n" +
        "ORDER BY q.createtime DESC ")
List<Question> findTeacherQuestions(Integer userId);

编写业务逻辑层代码

学生问题列表有分页的设置

讲师任务列表也要实现分页的查询

所以IQuestionService业务逻辑层接口声明为:

// 分页查询讲师任务列表
PageInfo<Question> getTeacherQuestions(String username,
                         Integer pageNum,Integer pageSize);

QuestionServiceImpl实现代码如下

@Override
public PageInfo<Question> getTeacherQuestions(String username, Integer pageNum, Integer pageSize) {
    // 根据用户名获得用户信息
    User user=userMapper.findUserByUsername(username);
    // 设置分页条件
    PageHelper.startPage(pageNum,pageSize);
    // 查询任务列表
    List<Question> list=questionMapper
            .findTeacherQuestions(user.getId());
    // 遍历当前查询出的任务列表,将问题的tags属性赋值
    for(Question question:list){
        List<Tag> tags=tagNamesToTags(question.getTagNames());
        question.setTags(tags);
    }
    // 别忘了返回pageInfo
    return new PageInfo<>(list);
}

开发控制层代码

QuestionController类添加查询讲师任务列表的控制层方法

代码如下

// 查询讲师任务列表
@GetMapping("/teacher")
// 我们需要限制当前登录用户必须是讲师身份,才能查询任务列表
// 使用Spring-Security提供的权限\角色的验证功能,实现限制效果
// @PreAuthorize注解设置当前用户必须包含ROLE_TEACHER角色
// 否则会发生没有权限访问的错误(403错误)
@PreAuthorize("hasRole('ROLE_TEACHER')")
public PageInfo<Question> teacher(
        @AuthenticationPrincipal UserDetails user,
        Integer pageNum){
    Integer pageSize=8;
    if(pageNum==null){
        pageNum=1;
    }
    // 调用业务逻辑层
    PageInfo<Question> pageInfo=questionService
      .getTeacherQuestions(user.getUsername(),pageNum,pageSize);
    return pageInfo;
}

重启服务

发送同步测试localhost:8080/v1/questions/teacher

注意分别测试登录讲师和学生

验证我们的@PreAuthorize注解是否生效

编写讲师任务列表的Vue和js代码

讲师任务列表显示问题的内容和学生问题列表是一样的

我们可以直接复制学生问题列表的内容,到讲师任务列表

index_student.html的id为questionsApp的div直接复制到index_teacher.html页面的相同位置

学生首页的js文件也和讲师首页的js文件基本一致

复制index.js更名为index_teacher.js文件

在index_teacher.js文件中axios的路径修改为

16行附近

axios({
    //                   ↓↓↓↓↓↓
    url: '/v1/questions/teacher',
    method: "GET",
    params:{
        pageNum:pageNum
    }
})

最后讲师首页末尾添加index_teacher.js文件的引用即可

<script src="js/index_teacher.js"></script>

重启复习,登录讲师,观察首页任务列表

显示任务列表则一切正常

显示问题详情

讲师要想进行回答\回复

必须在问题详情页中进行

但是现在任务列表中点击问题的标题链接,报404错误,原因是连接的地址根本不存在

我们必须将它指定为存在的页面

跳转讲师问题详情页

我们需要修改讲师首页中显示问题标签的超链接

链接地址修改为显示讲师问题详情的页面

index_teacher.html的212行附近

<a class="text-dark" href="question/detail.html"
   v-text="question.title"
   :href="'/question/detail_teacher.html?'+question.id">
    <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
  eclipse 如何导入项目？
</a>

这样我们就实现了页面的正确跳转

而且还传递了当前点击问题的id

这样就可以在问题详情页获得这个id来查询这个问题的内容来显示在页面上了

开发业务逻辑层

我们要根据id查询当前问题的详情并显示在页面上

但是根据id查询对象的方法由MybatisPlus提供了

我们只需从业务逻辑层开始编写查询即可

IQuestionService接口添加根据id查询问题对象的方法

// 根据问题id 查询问题详情
Question getQuestionById(Integer id);

QuestionServiceImpl实现代码如下

@Override
public Question getQuestionById(Integer id) {
    // 根据MybatisPlus提供的方法来查询Question对象
    Question question=questionMapper.selectById(id);
    List<Tag> tags=tagNamesToTags(question.getTagNames());
    question.setTags(tags);
    // 别忘了返回question
    return question;
}

开发控制层代码

QuestionController完成调用业务逻辑层查询根据id返回Question对象的控制层方法

// 根据id查询问题详情的控制器方法
// "/{id}"是SpringMvc框架支持的一种占位符赋值的写法
// 它可以匹配路径赋值的内容
// localhost:8080/v1/questions/149
// 那么这个{id}就会被149赋值
@GetMapping("/{id}")
// 使用控制器方法参数的特殊写法获得路径中的149
public Question question(
        // 要想获得路径中{id}占位符的值
        // 1.必须编写 @PathVariable注解
        // 2.参数的名称必须和{}中的内容一致
        @PathVariable Integer id
){
    Question question=questionService.getQuestionById(id);
    return question;
}