ProjectDay08

续 讲师首页复用模板

复用用户信息面板

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

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<