Koa2 SSR打造官网PC展示页 6

十六.课程搜索展示与无结果提示

1.list中建立noDataTip文件夹

index.ejs

<div class="no-data-tip">
    <h1>-没有搜索到相关数据-</h1>
</div>

2.入口文件中导入样式

import '../styles/noDataTip.scss';

3.控制器中

async list(ctx,next){
        const keyword = ctx.params.kw,
              courseTabData = await getCourseCategory(),
              courseData = await getCourseData();
        await ctx.render('list',{
            IMG_BASE_URL,
            title:'列表页',
            PAGE_CONF:PAGE_CONF.LIST,
            navData,
            linkData,
            manualData,
            qrInfomation:infomation,
            courseTabData,
            courseData: keyword ? searchData(courseData,keyword) : courseData,
            courseDataStr:JSON.stringify(courseData)
            
        })
    }

4.后端的libs下的utils

function searchData(data,keyword){
    return data.filter((item,index)=>{
        return item.courseName.toLowerCase().includes(keyword.toLowerCase());
    })
}
module.exports ={
    searchData
}

5.控制器中

const {searchData} = require('../lib/util')  

 

6.courseList下的index.ejs

<div class="course-board">
    <div class="course-list J_courseList clearfix">
        <% if(!courseData || courseData.length === 0){ %> 
            <%- include('../noDataTip/index.ejs') %> 
        <% }else{ %>     
        <% for( let i = 0; i < courseData.length; i++ ) {
             var item = courseData[i]
            %>
           <%- include('../../common/courseItem/index.ejs',{
               item,
               IMG_BASE_URL
           }) %>
        <% } %>
        <% }%>
    </div>
</div>

十七.导航切换模块编写与数据过滤

1.src下的templates中新建courseItem.tpl

<div class="course-item course-card">
    <div class="course-cover">
        <a href="{{href}}" target="_blank">
            <img 
            src="{{posterKey}} " 
            alt="{{courseName}} " 
            class="course-img">
        </a>
    </div>
    <h1 class="course-tt">
        <a href="{{href}}" target="_blank">
           {{courseName}}
        </a>
    </h1>
    <div class="course-info">
        <span
            class="{{priceClass}}" >
        
        {{price}}
        </span>
        <span class="right">
           {{studentCount}} 人正在学习
        </span>
    </div>
</div>

2.在tools中

function tplReplace(template,replaceObject){
    return template().replace(/{{(.*?)}}/g,(node,key)=>{
        return replaceObject[key]
    })
}
function filterData(data,id){
    if(id === 0 ){
        return data;
    }
    return data.filter((item,index)=>{
        return item.field === id
    })
}

3.modules文件夹下新建CourseNav.js

import {tplReplace,filterData} from '../utils/tool'
import courseItemTpl from '../templates/courseItem.tpl'
import {URL} from '../config/config'
import { index } from '../../controllers/Home';
export default($)=>{
    const $navList = $('.J_navList'),
          $courseList = $('.J_courseList'),
          $navItems = $navList.children('.nav-item'),
          courseData = $.parseJSON($('#J_courseData').html());
    const init = () =>{
        bindEvent();
    }      
    function bindEvent(){
        $navList.on('click','.nav-lk',onNavClick)
    }
    function onNavClick(){
        const $this = $(this),
              curIdx = $this.parent().index(),
              id = parseInt($this.attr('data-id')),
              data = filterData(courseData,id);
        tabChange(curIdx);
        renderList(data);      
    }
    function tabChange(index){
        $navItems.eq(index).addClass('current').siblings()
            .removeClass('current');
    }
    function renderList(data){
        let list = "";
        data.forEach((item,index)=>{
            list+= tplReplace(courseItemTpl,{
                href: item.href,
                posterKey: URL.IMG_BASE_URL + item.posterKey,
                courseName: item.courseName,
                priceClass: item.price === '0' ? 'left free' : 'left price',
                price: item.price === '0' ? '免费' : `￥${item.price}`,
                studentCount: item.studentCount
            })
        })
        $courseList.html(list)
    }
    return {init}
}

4.list入口文件中

import $ from 'jquery';

import '../styles/resets.css';
import '../styles/common.css';
import '../styles/iconfont.css';
import '../styles/ui.scss';
import '../styles/header.scss';
import '../styles/courseNav.scss';
import '../styles/courseItem.scss';
import '../styles/footer.scss';
import '../styles/noDataTip.scss';
import CourseNav from '../modules/CourseNav'
;(($)=>{
    const courseNav = CourseNav($);
    const init = () =>{
        courseNav.init();
    }
    init();
})($)

5.入口文件引入样式

import '../styles/courseList.scss'

十八.自定义错误页面

1.控制器中

 async error(ctx,next){
        await ctx.render('error',{
            title:'错误页面',
            PAGE_CONF:PAGE_CONF.ERROR,
            navData,
            linkData,
            manualData,
            qrInfomation:infomation
        })
    }

2.入口文件

import '../styles/resets.css';
import '../styles/common.css';
import '../styles/iconfont.css';
import '../styles/ui.scss';
import '../styles/header.scss';
import '../styles/error.scss';

import '../styles/footer.scss';

3.templates下建立error文件夹

index.ejs

<div class="error-board">
    <h1>404</h1>
    <p>网页走丢了~<a href="/">返回首页</a></p>
</div>

4.error根文件下

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


<div class="container">
    <%- include('template/common/header/index.ejs') %> 
    <%- include('template/error/index.ejs') %> 
  
     <%- include('template/common/footer/index.ejs',{
        linkData,
        manualData,
        qrInfomation
    }) %> 
  

</div>


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