Koa2 SSR打造官网PC展示页 6
2024-06-01 11:06:55
十六.课程搜索展示与无结果提示
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"><spanclass="{{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 }) %>Koa2 SSR打造官网PC展示页 6相关推荐
- 网页设计作业 仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...
- HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:商城网站设计--小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计 ...
- 网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示 二.文件目录 三.代码实现 四.完整源码 一.作品展示 ...
- HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
最新文章
- 3.数据类型，运算符，表达式
- flex tree 展开树节点
- 对应用程序启动时所有方法的调用顺序分析
- 中国合同环境服务行业规划可行性及运营动态分析报告2022-2028年
- 记一次Socket.IO长链服务的性能压测
- 用计算机实现智能解题,浙江省信息技术学考复习模块2——计算机功能、智能处理、字处理...
- ES6 Promise 并行执行和顺序执行
- 整数大小比较（信息学奥赛一本通-T1043）
- SQL Server列名显示无效
- java httpclient 返回xml_通过httpClient通过post向接口发送xml数据，并处理返回的xml报文...
- 【分享】具有“魔性”的通用软件开发框架
- 陈纪修老师《数学分析》 第08章：反常积分 笔记
- mysql sqlyog中文乱码_sqlyog 查询中文乱码
- 悄悄告诉你如何快速突破大厂逻辑题
- 谷歌浏览器访问网站无法加载验证码图片问题
- 鼠标不受控制一直向右移动的解决办法
- 美创解读｜《数据安全法》实施，企业数据安全合规技术能力建设
- 小巷开店问题（答案揭晓）
- 【悟空云课堂】第七期：不安全的反射漏洞（CWE-470: Use of Externally-Controlled Input to Select Classes or Code）
- PHP学习日记0_PHP、静态网页、动态网页、静态网站访问流程、动态网站访问流程