Koa2 SSR打造官网PC展示页 4

十.获取优秀老师数据、优秀老师模板

1.service文件夹中新建teacher.js

const TeacherModel = require('../db/models/teacher');
class TeacherService{
    async getTeacherData(){
        return await TeacherModel.findAll({
            where:{status:1,isStar:1},
            attributes:{
                exclude:['tid','teacherImg','createdAt','updatedAt']
            }
        })
    }
}
module.exports = new TeacherService();

2.控制器中

const PAGE_CONF = require('../configs/page'),
      navData = require('../configs/nav'),
      {IMG_BASE_URL} = require('../configs/url');
const {getSliderData} = require('../services/slider'),
      {getRecomCourseData} = require('../services/recomcourse'),
      {getCollectionData} = require('../services/collection'),
      {getTeacherData} = require('../services/teacher');
class Home{
    async index(ctx,next){
        const sliderData = await getSliderData(),
              recomCourseData = await getRecomCourseData(),
              collectionData = await Promise.all((await getCollectionData()).map(async (item) => item)),
              starTeacherData = await getTeacherData();

        await ctx.render('index',{
            IMG_BASE_URL,
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData,
            sliderData,
            recomCourseData,
            collectionData,
            starTeacherData
            
        })
    }

3.index下建立teacher文件夹

index.ejs

<div class="teacher-board clearfix">
<% for( let i = 0; i < starTeacherData.length; i++ ) {
    var item = starTeacherData[i];
    %>
    <%- include('item.ejs',{item,i,IMG_BASE_URL})%>
<% } %>
    
</div>

item.ejs

<div class="teacher-item">
    <div
        class="<%= (i+1) %2 === 0 ? 'img-wrap last': 'img-wrap' %> "
    >
        <a href="<%= item.href %> " target="_blank">
            <img 
            src="<%= IMG_BASE_URL+item.teacherImgKey %> " 
            alt="<%= item.teacherName %> "
            class="teacher-img"/>

        </a>
        <i class="triangle-right"></i>

    </div>
    <div class="teacher-info">
        <div class="teacher-header">
            <h1 class="teacher-name">
                <a href="<%= item.href %> "
                   target="_blank" 
                >
                    <%= item.teacherName %> 
                </a>
            </h1>
        </div>
        <p class="count">
            <span>课程数:<%= item.courseCount %>门 </span>
            <i></i>
            <span>学生数:<%= item.studentCount %>人 </span>
        </p>
        <p class="intro"><%=item.intro%></p>
    </div>
</div>

index根引入

<%- include('template/index/teacher/index.ejs',{
        starTeacherData,
        IMG_BASE_URL
    }) %> 

入口文件导入样式

import '../styles/teacher.scss';

十一.获取优秀学生数据、优秀学生模板

1.service中创建student.js

const StudentModel = require('../db/models/student');
class StudentService{
    async getGoodStudentData(){
        return await StudentModel.findAll({
            where:{status:1},
            arrtibutes:{
                exclude:['sid','studentImg','createdAt','updatedAt']
            }
        })
    }
}
module.exports = new StudentService();

2.控制器中

const PAGE_CONF = require('../configs/page'),
      navData = require('../configs/nav'),
      {IMG_BASE_URL} = require('../configs/url');
const {getSliderData} = require('../services/slider'),
      {getRecomCourseData} = require('../services/recomcourse'),
      {getCollectionData} = require('../services/collection'),
      {getTeacherData} = require('../services/teacher'),
      {getGoodStudentData} = require('../services/student');
class Home{
    async index(ctx,next){
        const sliderData = await getSliderData(),
              recomCourseData = await getRecomCourseData(),
              collectionData = await Promise.all((await getCollectionData()).map(async (item) => item)),
              starTeacherData = await getTeacherData(),
              goodStudentData = await getGoodStudentData();
              let test =  await Promise.all( await getCollectionData())

        console.log(test[0].courseDataList);
        await ctx.render('index',{
            IMG_BASE_URL,
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData,
            sliderData,
            recomCourseData,
            collectionData,
            starTeacherData,
            goodStudentData
            
        })
    }

3.index中建立student文件夹

index.ejs

<div class="teacher-board clearfix">
    <% for( var i = 0; i < goodStudentData.length; i++ ) {
        var item = goodStudentData[i];
        %>
        <%- include('item.ejs',{item,i,IMG_BASE_URL})%>
    <% } %>
        
    </div>

item.ejs

<div class="teacher-item">
    <div
        class="<%= (i+1) %2 === 0 ? 'img-wrap last': 'img-wrap' %> student "
    >
       
            <img 
            src="<%= IMG_BASE_URL+item.studentImgKey %> " 
            alt="<%= item.studentName %> "
            class="teacher-img"/>

        <i class="triangle-right"></i>

    </div>
    <div class="teacher-info student">
        <div class="teacher-header">
            <h1 class="teacher-name">
               
                    <%= item.studentName %> 
               
            </h1>
        </div>
        <p class="count">
            
            <span>正在学习:
                <a href="<%= item.courseLink %> " target="_blank">
                    <%= item.courseName %> 
                </a>

            </span>
           
        </p>
        <p class="intro"><%=item.intro%></p>
    </div>
    <!-- <i class="xxx"></i> -->
</div>

4.根文件中引入

<%- include('template/index/student/index.ejs',{
        goodStudentData,
        IMG_BASE_URL
    }) %> 

十二.footer模板拆分分析

1.home中引入

const PAGE_CONF = require('../configs/page'),
      navData = require('../configs/nav'),
      {IMG_BASE_URL} = require('../configs/url'),
      linkData = require('../configs/link'),
      manualData = require('../configs/manual'),
      {infomation} = require('../configs/qr');
const {getSliderData} = require('../services/slider'),
      {getRecomCourseData} = require('../services/recomcourse'),
      {getCollectionData} = require('../services/collection'),
      {getTeacherData} = require('../services/teacher'),
      {getGoodStudentData} = require('../services/student');
class Home{
    async index(ctx,next){
        const sliderData = await getSliderData(),
              recomCourseData = await getRecomCourseData(),
              collectionData = await Promise.all((await getCollectionData()).map(async (item) => item)),
              starTeacherData = await getTeacherData(),
              goodStudentData = await getGoodStudentData();
              let test =  await Promise.all( await getCollectionData())

        console.log(test[0].courseDataList);
        await ctx.render('index',{
            IMG_BASE_URL,
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData,
            sliderData,
            recomCourseData,
            collectionData,
            starTeacherData,
            goodStudentData,
            linkData,
            manualData,
            qrInfomation:infomation
            
        })
    }

2.common中建立footer文件夹

index.ejs

<footer class="footer">
    <div class="footer-inner">
        <%- include('top/index.ejs',{
            linkData,
            manualData,
            qrInfomation
        }) %> 
        <%- include('bottom.ejs') %> 
    </div>
</footer>

bottom.ejs

<div class="footer-bottom">
    <p>Copyright © 2020 Tencent. All Rights Reserved.</p>
</div>

3.footer文件夹下建立top文件夹

index.ejs

<div class="footer-info clearfix">
    <div class="info-item">
        <h1 class="info-tt">官方手册集合</h1>
        <ul class="manual-list clearfix">
            <% for( let i = 0; i < manualData.length; i++ ) {
                var item = manualData[i]
                %>
            <%- include('manualItem.ejs',{
                item
            })%>
            <% } %>
        </ul>
    </div>
    <div class="info-item">
        <h1 class="info-tt">合作平台链接</h1>
        <ul class="link-list clearfix">
            <% for( let i = 0; i < linkData.length; i++ ) {
                var item = linkData[i]
                %>
            <%- include('linkItem.ejs',{
                item
            })%>
            <% } %>   
        </ul>
    </div>
    <div class="info-item">
        <h1 class="info-tt">联系作者</h1>
        <img src="<%= qrInfomation%>" alt="联系作者" class="qr-img">
    </div>
</div>

linkItem.ejs

const { like } = require("sequelize/types/lib/operators");

<li class="link-item">
    <div class="link-item-wrap">
        <a href="<%= item.link %> " class="link-lk" target="_blank">
            <img 
            src="<%= item.logoUrl %> "
            alt="<%= item.title%>"
            class="link-img"/>
        </a>
        <p class="item-tt">
            <a href="<%= item.link %> ">
                <%= item.title %> 
            </a>
        </p>
    </div>
</li>

manualItem.ejs

<li class="manual-item">
    <div class="manual-item-wrap">
        <a href="<%= item.link %> " 
            target="_blank"
            class="manual-lk"
            style="
                background: url(<%= item.logoUrl%>);
                background-size: <%= item.bgSize%>;
                background-position: <%= item.bgPosition%>;
            "
            ></a>
            <p class="item-tt"> <%= item.title %> </p>
    </div>
</li>

根文件引入

<%- include('template/common/footer/index.ejs',{
        linkData,
        manualData,
        qrInfomation
    }) %>