十三.编写搜索功能模块

1.moudels下写headerSearch.js

tools下写功能函数

function trimSpace(str){
    return str.replace(/\s+/g,'')
}

import {trimSpace} from '../utils/tool';
export default($)=>{
    const $headerSearch = $('.J_headerSearch'),
          $searchInput = $headerSearch.children('input'),
          $searchBtn = $headerSearch.children('button');
    const init = () =>{
        bindEvent();
    }      
    function bindEvent(){
        $searchBtn.on('click',onSearchAction)
    }
    function onSearchAction(){
        const val = trimSpace($searchInput.val());
        if(val.length === 0){
            return
        }
        window.open('/list/'+val);
        $searchInput.val('')
    }
    return {
        init
    }
}

2.入口文件导入

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/carousel.scss';
import '../styles/mainTitle.scss';
import '../styles/recomCourse.scss';
import '../styles/collection.scss';
import '../styles/courseItem.scss';
import '../styles/teacher.scss';
import '../styles/footer.scss';
import Carousel from '../modules/Carousel';
import HeaderSearch from '../modules/HeaderSearch'
;(($)=>{
    const headerSearch = HeaderSearch($);
    const init = () =>{
        new Carousel().init()
        headerSearch.init();
    }
    init();
})($);

十四.选项卡模板拆分与编写

1.修改list.js入口文件

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/courseItem.scss';

import '../styles/footer.scss';
;(($)=>{
    const init = () =>{

    }
    init();
})($)

2.控制器中

async list(ctx,next){
  

        await ctx.render('list',{
            IMG_BASE_URL,
            title:'列表页',
            PAGE_CONF:PAGE_CONF.LIST,
            navData,
            linkData,
            manualData,
            qrInfomation:infomation
            
        })
    }

3.list根文件

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


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

</div>


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

4.在service中新建courseTab.js

const CourseTabModel = require('../db/models/courseTab');
class CourseTabService{
    async getCourseCategory(){
        return await CourseTabModel.findAll({
            attributes:{
                exclude:['cid','createdAt','updatedAt']
            }
        })
    }
}
module.exports = new CourseTabService();

5.控制器中调用

 async list(ctx,next){
        const keyword = ctx.params.kw,
              courseTabData = await getCourseCategory();

        await ctx.render('list',{
            IMG_BASE_URL,
            title:'列表页',
            PAGE_CONF:PAGE_CONF.INDEX,
            navData,
            linkData,
            manualData,
            qrInfomation:infomation,
            courseTabData
            
        })
    }

6.在templates下建立list文件夹

list下新建nav文件夹

index.ejs

<div class="nav-board">
    <div class="nav-inner">
        <ul class="nav-list J_navList clearfix">
            <%- include('item.ejs',{
                item:{
                    title:'全部课程',
                    id:0
                },i:0
            }) %> 
            <% for( let i = 0; i < courseTabData.length; i++ ) { 
                var item = courseTabData[i];
                %>
                <%- include('item.ejs',{
                    item,
                    i:i+1
                })%>
            <% } %>
        </ul>
    </div>
</div>

ltem.ejs

<li class="<%= !i ? 'nav-item current' : 'nav-item' %> ">
    <a href="javascipt:;" class="nav-lk" data-id="<%= item.id %> ">
        <%= item.title %> 
    </a>
</li>

7.根文件下引入

 <%- include('template/list/nav/index.ejs',{
        courseTabData
    }) %> 

8.入口文件引入样式

import '../styles/courseNav.scss'

十五.课程列表模板与静态数据缓存机制

1.views中新建datas文件夹中新建courseData.ejs

<div id="J_courseData" style="display: none;">
    <%= courseDataStr %> 
</div>

2.list.ejs中导入

<%- include('datas/courseData.ejs') %> 

3.courseService中

async getCourseData(){
        return await CourseModel.findAll({
            where:{
                status:1
            },
            order:[
                ['id','DESC']
            ],
            attributes:{
                exclude:['cid','posterUrl','createdAt','updatedAt']
            }
        })
    }

4.控制器中

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,
            courseDataStr:JSON.stringify(courseData)
            
        })
    }

5.看源代码是否写入

6.list中建立courseList

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

7.根文件下导入

<%- include('template/list/courseList/index.ejs',{
        courseData
    }) %>