- 新手入门学习的项目,最原始,最简单的方式开发,代码没有参考价值。仅作为自己学习的记录。
- 抱着学习的目的,模仿每日一文。
- 所使用的文章,声音等资源均为每日一文网站所有。
- 要运行该项目,请确保你本地开启mongdb数据库,且数据库有对应的数据。
在线预览。注:服务器搭建在自己电脑上,采用花生壳内网映射到外网,不能保证每次都能点开哈。后面会自己购买服务器。
mongdb + mongoose + express + cheerio + ejs
主页面(即文章页面),声音列表页面,声音播放页面。
三个页面都有公共的头部,尾部。使用模板抽出该部分,在每个页面中包含进来,减少重复代码。
主页面,就展示一篇文章,主要是css样式的调整。
声音列表页面,中心区为定宽居中,每一个voice_item的宽度都是计算好的,一行刚好能放下三个。
每个item添加鼠标移过的遮罩层动画效果,这里是踩过坑的。
底部分页按钮的实现,还是很简单的,主要是根据服务端返回的数据进行渲染就ok,因为这里是直接采用的网页跳转的形式,没有用到ajax。
声音播放页面,就一个播放器。audio标签样式太丑了。自己重写样式,用audio的相关api实现,播放,暂停,进度更新功能。
但由于没找到定位进度的api,并没有实现点击进度条定位进度的功能。这个功能肯定是有的,后期补上。
出乎意料的简单,可能是因为页面的内容单一简单,并不需要做太多的改动,基本套用pc界面的结构.
这里只说下怎么实现的pc和移动端的处理的。没有采用响应式布局。
通过User-Agent来判断是移动端还是PC端,分别返回对应的的模板,数据没有变动。如下
if(is_mobile(req)){
res.render("m/mindex",article);
}else{
res.render("index",article);
}
这样做肯定是有坑的,原凉我是个新手。现在server.js代码也比较乱,需要整理下。
这样做肯定是有坑的,原凉我是个新手。server.js已整理。
- 后台管理,可以增删改查数据(自己给自己挖了坑,数据库的结构可能要重新设计下)。
- 响应式布局
- webapp
- 安卓原生开发