云瓣影音网站&&微信端(已开源)
<p> 随着该项目的发布到线上(小打小闹)，即将又要开启另一段崭新的旅程。强迫自己停下来写写所学所得，个人认为总结和分享是一种很棒的学习方式。那让我们先来瞧瞧项目长的什么样。如果着急要源码的朋友，可以下拉到最后~~</p><h4>微信端部分展现</h4>
<p><img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115023942513-221433808.png" alt="" width="286" height="510"> <img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115024103592-1206975094.png" alt="" width="287" height="511"> <img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115024027435-1631282980.png" alt="" width="286" height="509"></p>
<p> 从微信端进入网页端的效果(这部分还需要优化(*^__^*))</p>
<p><img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115024417451-1830532247.png" alt="" width="290" height="516"> <img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115024842154-71732708.png" alt="" width="289" height="515"></p>
<p>但是这图是真的还是假的啊，特效蛮酷炫的，不会是被楼主P上去的吧？（第4副图中间那个女孩确实是云云的女同学）嘿嘿，用微信扫这个二维码(是骡子是马拿出来溜溜~~)，不过测试号有100个关注名额的限制，而且云云用的是腾讯云送的主机，自然会卡的不要不要的~</p>
<p><img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115025609826-1354378203.png" alt="" width="294" height="294"></p>
<h4>PC端部分展现</h4>
<p>由于园里只能上传10M的图片，那云云只能用外链展示PC端了；</p>
<p><strong>戳我看电影 戳我看音乐</strong></p>
<p>附上项目首页的帅气壁纸一张！！！喜欢海贼的别忘了右下角点个赞哟。</p>
<p><img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115031535170-2147343990.jpg" alt="" width="962" height="541"></p>
<p>接着就是<strong>线上地址</strong>了，偷偷的，偷偷的放出来，为什么放这么后面呢？因为怕腾讯云送的主机爆掉！！还有呢，可能会卡。不介意的朋友等呀等，然后就可以听到云瓣音乐了~~</p>
<h4>项目的技术栈</h4>
<p>这个部分只是单单罗列出了所用到的一些技术栈，基本上每个知识点都足够我写篇博文的，那这艰巨的任务以后有机会的话慢慢填上吧。</p>
<p>1. pc后端搭建:<br>* 使用NodeJs的`koa`框架并使用了部分`ES6`特性完成云瓣网站后端的搭建;<br>* 使用`mongodb`完成数据存储,通过`mongoose`模块完成对`mongodb`数据的构建;<br>* 使用`jade`模板引擎完成页面创建渲染;<br>* 使用`Moment.js`格式化电影存储时间;</p>
<p>2. pc前端搭建:<br>* 使用`jQuery`和`Bootsrap`完成网站前端JS脚本和样式处理;<br>* 使用`Sass`完成云瓣项目的样式编写;<br>* 使用`validate.js`完成对账号登录注册的判断;<br>* 使用`fullpage.js`完成电影宣传页面制作;<br>* 前后端的数据请求交互通过`Ajax`完成;<br>* (音乐端部分模块、电影画廊部分)使用`React+ES6`进行组件化开发，并使用Webpack实现资源模块管理<br>* 使用`canvas`并调用`webAudio api`完成音乐播放界面的制作<br><br>3. 项目微信端搭建:<br>* 使用`weui`框架构造详情界面<br>* 多种api接口的实现（比如地理经纬度查询、拍照、扫码、上传素材等）<br>* 调用`jdk`，实现语音查询电影 <br><br>4. 本地开发环境搭建:<br>* 使用`gulp`集成`jshint`对JS语法检查，`Sass`文件编译、压缩等功能，以及服务器的热更新等功能。<br><br>5. 一些功能模块:<br>* 电影首页(实现了按热度、时间、评价、分类查询以及加载更多等功能模块)<br>* 部分页面针对不同分辨率做了自适应；<br>* 具有用户注册登录及管理;<br>* 电影画廊页面的实现(数据从后台获得)；<br>* 音乐播放界面实现(数据从后台获得)；<br>* 电影（音乐）可进行叠楼评论并可删除自己的评论(管理员能删除任何人);<br>* 电影（音乐）及电影院信息录入和搜索;<br>* 电影（音乐）分类添加及删除;<br>* 电影（音乐）与所属分类都是一对多的关系；<br>* 电影（音乐）海报自定义上传;<br>* 电影（音乐）可以自行上传;<br>* 列表分页处理，访客统计;<br>* 微信上通过语音或文字搜电影;<br>* 微信上实现与网页的评论同步;<br>* 微信上能访问网页端；(并把电影画廊和音乐播放作为单独的菜单独立出来)</p>
<h4>项目地址 </h4>
<p>这是你们最爱的💖项目地址❤️哟，喜欢的话，star一下么么哒，有什么好的建议的话，欢迎提出。</p>
<p><img src="https://images2015.cnblogs.com/blog/958489/201611/958489-20161115034812670-1437055147.gif" alt=""></p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<p style="background: #fcfaa9; padding: 10px; font-family: 微软雅黑; font-size: 13px; border: 1px dashed rgb(224,224,224);">
作者：牧云云
<br>
出处：http://www.cnblogs.com/MuYunyun/"
<br>本文版权归作者和博客园所有，欢迎转载，转载请标明出处。
<br>如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！</p><br><br>
来源：https://www.cnblogs.com/MuYunyun/p/6064207.html
頁:
[1]