哈哩哈哩官网设计

文化娱乐动漫案例ID：124488

1)1三v11_

1 年经验· 广州多益网络股份有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

1.以position定位、float浮动等方法完成全站static页面设计，CSS3媒体查询保证
界面适应多种设备，包括640px以下、640px-768px、768px-1024px、1024px-1365
px、1365px~宽度设备；
2.提取html页面关键部分，转变为ejs组件，使用express实现服务端渲染;
3.配合jQuery以及jQueryXT.lazyload实现全站图像懒加载;
4.使用gulp、gulp-cli、gulp-csso以及gulp-minify压缩css和js文件;
5.下载npm包request以及node-html-parser，分析原网站页面结构，构造爬虫文件./database/webscrap/fetch.js，设置async/await方法实现爬取队列化，利用node.js原生模块fs将数据导出为json文件；
6.通过fs模块读取json原件，并使用JSON.parse解析为array，sqlite3模块将数据以此通过async/await代码块导入数据库；
7.使用SQL Statement进行模糊搜索查询，防止sql注入；
8.利用express框架Router组件，实现全站各个路由跳转；
9.设置分类页面路径格式为/lists/[type]/[n1]_[n2]_[n3]_[index]，其中type为影视类型，n1和n2、n3分别代表影视类型的内容、年代、来源地分类，index为当前页数，实现分类检索功能；
10.预先查询所有分类页面所有类型页面总数，并导入sqlite数据库文件。当index数量超过该类型页数总量之时，使用res.redirect重定向；
11.向window对象添加mousewheel、touchmove事件，判定window.scrollY实现回到顶部组件，点击即可返回顶部。触发期间用户主动滑动超过300，将会停止滑动；
12.window.localSotrage和jQuery，新增DOM元素实现观看历史功能