Koa2 SSR打造官网PC展示页 5

2021-02-01 10:01:47 阅读：172 来源： 互联网

标签：styles scss const .. list SSR PC import 官网

十三.编写搜索功能模块

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
    }) %>

标签：styles,scss,const,..,list,SSR,PC,import,官网
来源： https://blog.csdn.net/Yesterday_Tomorrow/article/details/113496846

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9