Koa2 SSR打造官网PC展示页 3

七.首页标题模板编写

1.common中新建mainTitle 中新建index.ejs

<div class="main-title">
    <h1 class="main-tt"><%= title %> </h1>
    <a href="<%= path %> "
         class="main-tt-lk"
         target="_blank">
        <%= linkName %> 
        </a>
</div>

2.入口文件引入样式

import '../styles/mainTitle.scss';

3.根文件引入

<%- include('layout/head.ejs', { PAGE_CONF }) %>


<div class="container">
    <%- include('template/common/header/index.ejs') %> 
    <%- include('template/index/carousel/index.ejs',{
        sliderData,
        IMG_BASE_URL
    }) %> 
    <%- include('template/common/mainTitle/index.ejs',{
        title:'官方推荐课程',
        path:'/list',
        linkName:'更多课程'
    }) %> 
    <%- include('template/index/recomCourse/index.ejs',{
        recomCourseData,
        IMG_BASE_URL
    }) %> 
    <%- include('template/common/mainTitle/index.ejs',{
        title:'精品课程集合',
        path:'/list',
        linkName:'更多课程'
    }) %> 
    <%- include('template/common/mainTitle/index.ejs',{
        title:'全网优秀讲师',
        path:'https://msiwei.ke.qq.com/#category=-1&tab=2',
        linkName:'更多信息'
    }) %> 
     <%- include('template/common/mainTitle/index.ejs',{
        title:'全网优秀学生',
        path:'https://msiwei.ke.qq.com/#tab=0&category=-1',
        linkName:'更多信息'
    }) %> 
    

</div>


<%- include('layout/foot.ejs', { PAGE_CONF }) %>

八.sequelize数据结果集、Promise.all的使用

1.service中新建collection.js

const CollectionModel = require('../db/models/collection');
class CollectionService{
    async getCollectionData(){
        const result = await CollectionModel.findAll({
            raw:true,
            where:{status:1},
            attributes:{
                exclude:['cid','createdAt','updatedAt']
            }
        })
        return result.map((item,index)=>{
            item.courseIdList = item.courseIdList.split(',')
            return item;
        })
    }
}
module.exports = new CollectionService();

2.service中新建Course.js

const CourseModel = require('../db/models/course');
class CourseService{
    async getCollectionCourseData(idList){
        return await CourseModel.findAll({
            raw:true,
            where:{
                cid:idList
            },
            attributes:{
                exclude:['cid','posterUrl','field','createdAt','updatedAt']
            }
        })
    }
}
module.exports= new CourseService();

3.collection中

const CollectionModel = require('../db/models/collection'),
      {getCollectionCourseData} = require('./course')
class CollectionService{
    async getCollectionData(){
        const result = await CollectionModel.findAll({
            raw:true,
            where:{status:1},
            attributes:{
                exclude:['cid','createdAt','updatedAt']
            }
        })
        return result.map(async (item,index)=>{
            item.courseIdList = item.courseIdList.split(',').map(item => parseInt(item));
            item.courseDataList = await getCollectionCourseData(item.courseIdList);
            return item;
        })
    }
}
module.exports = new CollectionService();

4.控制器中

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');
class Home{
    async index(ctx,next){
        const sliderData = await getSliderData(),
              recomCourseData = await getRecomCourseData(),
              collectionData = await Promise.all((await getCollectionData()).map(async (item) => item));
              console.log(collectionData);
        await ctx.render('index',{
            IMG_BASE_URL,
            title:'首页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData,
            sliderData,
            recomCourseData
            
        })
    }

九.课程集合与抽离课程卡公共模板

1.common中新建courseItem

index.ejs

<div class="course-item course-card">
    <div class="course-cover">
        <a href="<%= item.href %> " target="_blank">
            <img 
            src="<%= IMG_BASE_URL+item.posterKey %> " 
            alt="<%= item.courseName %> " 
            class="course-img">
        </a>
    </div>
    <h1 class="course-tt">
        <a href="<%= item.href %> " target="_blank">
            <%= item.courseName %> 
        </a>
    </h1>
    <div class="course-info">
        <span
            class="<%= item.price === '0' ? 'left free' : 'left price' %> " >
        
        <%= item.price === '0' ? '免费' : `￥${item.price}` %> 
        </span>
        <span class="right">
            <%= item.studentCount %> 人正在学习
        </span>
    </div>
</div>

2.index中新建collection

index.ejs

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

item.ejs

<div class="collection-item clearfix">
    <div class="course-item" 
        style="background: url(<%= IMG_BASE_URL+item.posterUrl%>) no-repeat; background-size:100% 100%;"
    >
    <h1 class="collection-tt"><%= item.title %> </h1>
    <a href="<%= item.qqQunLink %> " class="btn btn-info" target="_blank">加入学习</a>
    </div>
    <% for (let i = 0; i < item.courseDataList.length; i++) {
        const dataItem = item.courseDataList[i];
        %>  
        <%- include('../../common/courseItem/index.ejs',{
            item:dataItem,
            IMG_BASE_URL
        })%>
        <% }  %> 
</div>

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

入口文件导入样式

import '../styles/recomCourse.scss';
import '../styles/collection.scss';