云瓣影音网站&&微信端(已开源)

简介: 随着该项目的发布到线上(小打小闹),即将又要开启另一段崭新的旅程。强迫自己停下来写写所学所得,个人认为总结和分享是一种很棒的学习方式。那让我们先来瞧瞧项目长的什么样。如果着急要源码的朋友,可以下拉到最后~~ 微信端部分展现                 从微信端进入网页端的效果(这部分还...

  随着该项目的发布到线上(小打小闹),即将又要开启另一段崭新的旅程。强迫自己停下来写写所学所得,个人认为总结和分享是一种很棒的学习方式。那让我们先来瞧瞧项目长的什么样。如果着急要源码的朋友,可以下拉到最后~~

微信端部分展现

              

 从微信端进入网页端的效果(这部分还需要优化(*^__^*))

       

但是这图是真的还是假的啊,特效蛮酷炫的,不会是被楼主P上去的吧?(第4副图中间那个女孩确实是云云的女同学)嘿嘿,用微信扫这个二维码(是骡子是马拿出来溜溜~~),不过测试号有100个关注名额的限制,而且云云用的是腾讯云送的主机,自然会卡的不要不要的~

PC端部分展现

由于园里只能上传10M的图片,那云云只能用外链展示PC端了;

戳我看电影     戳我看音乐

附上项目首页的帅气壁纸一张!!!喜欢海贼的别忘了右下角点个赞哟。

接着就是线上地址了,偷偷的,偷偷的放出来,为什么放这么后面呢?因为怕腾讯云送的主机爆掉!!还有呢,可能会卡。不介意的朋友等呀等,然后就可以听到云瓣音乐了~~

项目的技术栈

这个部分只是单单罗列出了所用到的一些技术栈,基本上每个知识点都足够我写篇博文的,那这艰巨的任务以后有机会的话慢慢填上吧。

1. pc后端搭建:
* 使用NodeJs的`koa`框架并使用了部分`ES6`特性完成云瓣网站后端的搭建;
* 使用`mongodb`完成数据存储,通过`mongoose`模块完成对`mongodb`数据的构建;
* 使用`jade`模板引擎完成页面创建渲染;
* 使用`Moment.js`格式化电影存储时间;

2. pc前端搭建:
* 使用`jQuery`和`Bootsrap`完成网站前端JS脚本和样式处理;
* 使用`Sass`完成云瓣项目的样式编写;
* 使用`validate.js`完成对账号登录注册的判断;
* 使用`fullpage.js`完成电影宣传页面制作;
* 前后端的数据请求交互通过`Ajax`完成;
* (音乐端部分模块、电影画廊部分)使用`React+ES6`进行组件化开发,并使用Webpack实现资源模块管理
* 使用`canvas`并调用`webAudio api`完成音乐播放界面的制作

3. 项目微信端搭建:
* 使用`weui`框架构造详情界面
* 多种api接口的实现(比如地理经纬度查询、拍照、扫码、上传素材等)
* 调用`jdk`,实现语音查询电影

4. 本地开发环境搭建:
* 使用`gulp`集成`jshint`对JS语法检查,`Sass`文件编译、压缩等功能,以及服务器的热更新等功能。

5. 一些功能模块:
* 电影首页(实现了按热度、时间、评价、分类查询以及加载更多等功能模块)
* 部分页面针对不同分辨率做了自适应;
* 具有用户注册登录及管理;
* 电影画廊页面的实现(数据从后台获得);
* 音乐播放界面实现(数据从后台获得);
* 电影(音乐)可进行叠楼评论并可删除自己的评论(管理员能删除任何人);
* 电影(音乐)及电影院信息录入和搜索;
* 电影(音乐)分类添加及删除;
* 电影(音乐)与所属分类都是一对多的关系;
* 电影(音乐)海报自定义上传;
* 电影(音乐)可以自行上传;
* 列表分页处理,访客统计;
* 微信上通过语音或文字搜电影;
* 微信上实现与网页的评论同步;
* 微信上能访问网页端;(并把电影画廊和音乐播放作为单独的菜单独立出来)

项目地址 

这是你们最爱的项目地址️哟,喜欢的话,star一下么么哒,有什么好的建议的话,欢迎提出。

 

作者:牧云云
出处:http://www.cnblogs.com/MuYunyun/"
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

目录
相关文章
|
2月前
|
人工智能 数据可视化 API
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
101 2
|
3月前
|
人工智能
10 分钟构建 AI 客服并应用到网站、钉钉或微信中简说
10 分钟构建 AI 客服并应用到网站、钉钉或微信
|
2月前
|
人工智能 运维 负载均衡
10 分钟构建 AI 客服并应用到网站、钉钉或微信中
《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案通过详尽的文档和示例代码,使具有一定编程基础的用户能够快速上手,顺利完成AI客服集成。方案涵盖高可用性、负载均衡及定制化选项,满足生产环境需求。然而,若文档不清晰或存在信息缺失,则可能导致部署障碍。实际部署中可能遇到网络、权限等问题,需逐一排查。云产品的功能、性能及操作配置便捷性直接影响解决方案效果,详尽的产品手册有助于快速解决问题。总体而言,该方案在各方面表现出色,值得推荐。
|
6月前
|
JavaScript Java 测试技术
基于小程序的微信阅读网站+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的微信阅读网站+springboot+vue.js附带文章和源代码设计说明文档ppt
39 1
|
4月前
|
缓存 前端开发 PHP
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
288 0
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的英语知识应用网站的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语知识应用网站的详细设计和实现
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的疫苗预约网站系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的疫苗预约网站系统的详细设计和实现
39 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信阅读网站的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信阅读网站的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的志同道合交友网站演示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的志同道合交友网站演示的详细设计和实现
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的相亲网站的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的相亲网站的详细设计和实现

热门文章

最新文章