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元素实现观看历史功能