• Stars
    star
    113
  • Rank 310,115 (Top 7 %)
  • Language
    JavaScript
  • Created about 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

fullstack movie & music proj(rebuilding)

云瓣影音网站 && 微信端

PC 端效果:

在线地址暂时访问不了(服务器到期),截了两张 gif 图,如下:

微信端效果:

效果展示 效果展示 效果展示
效果展示 效果展示

Usage(食用手册)

项目重构 ing,如果需要可以先使用之前的版本

mongod         // 启动数据库

npm run serve  // 浏览器输入 localhost:1234 老项目

npm run client // 浏览器输入 localhost:5678 重构项目

补充:关于如何导入数据

  • 项目目录下的 show/yunbanDB 为数据库文件,使用 mongorestore -d yunbanDB --dir=数据库目录 导入进数据库内,关于 mongodb 的使用,请参考这篇文章

  • 设置管理员账号,更改数据库,输入 db.myTable.update({name:'账号名'},{$set:{role:100}})

Introduction:

这是一个全栈的项目,包含了 PC 端、微信端、服务端、数据库,各端技术栈如下。部分技术栈已经老旧,所以进行以下重构:

重构计划第一步:

  • 升级 koa1 到 koa2
  • 增加 restful 接口
  • 将电影模块重构为 react
  • 填充数据
  • 引人 mobx

重构计划第二步:

  • 音乐模块重构
  • ...

1. pc端后端搭建:

  • 使用 koa 框架搭建云瓣网站服务端;
  • 使用 mongodb 完成数据存储,通过 mongoose 模块完成对 mongodb 数据的构建;
  • 使用 jade 模板引擎完成页面创建渲染;

2. 项目前端搭建:

  • 使用 jQueryBootsrap 完成网站前端 JS 脚本和样式处理;
  • 使用 Sass 完成云瓣项目的样式编写;
  • (音乐端部分模块、电影画廊部分)使用 React 进行组件化开发,并使用 Webpack 实现资源模块管理
  • 使用 canvas 并调用 webAudio api 完成音乐播放界面的制作

3. 项目微信端搭建:

  • 使用 weui 框架构造详情界面
  • 多种 api 接口的实现(比如地理经纬度查询、拍照、扫码、上传素材等)
  • 调用 jdk,实现语音查询电影

4. 本地开发环境搭建:

  • 使用 gulp 集成 jshint 对 JS 语法检查,Sass文件编译、压缩等功能,使用 mocha 完成用户注册存储等步骤的简单单元测试,以及服务器的自动重启等功能。

5. 一些功能模块:

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

Page:

电影界面:

  • 电影宣传页:localhost:1234
  • 电影首页:localhost:1234/movieIndex
  • 电影画廊:localhost:1234/gallery
  • 电影详情页:localhost:1234/movie/:id
  • 电影搜索页:localhost:1234/movie/results?q=xx

音乐界面:

  • 音乐首页:localhost:1234/musicIndex
  • 音乐详情页:localhost:1234/music/:id
  • 音乐播放界面:localhost:1234/musicPlay
  • 音乐搜索页:localhost:1234/music/results?q=xx

用户后台页:

  • 用户注册页面: localhost:1234/signup
  • 用户登陆页面: localhost:1234/signin
  • 用户详情列表页: localhost:1234/admin/user/list

电影后台页:

  • 后台录入页:localhost:1234/admin/movie/new
  • 列表页:localhost:1234/admin/movie/list
  • 分类录入页:localhost:1234/admin//movie/category/new
  • 分类页:localhost:1234/admin/movie/category/list
  • 电影院录入页:localhost:1234/admin/city/new
  • 电影院列表页:localhost:1234/admin/city/list

音乐后台页:

  • 后台录入页:localhost:1234/admin/music/new
  • 列表页:localhost:1234/admin/music/list
  • 分类录入页:localhost:1234/admin/music/category/new
  • 分类列表页:loclahost:1234/admin/music/category/list
  • 热门榜单列表页:localhost:1234/admin/music/programme/list

微信界面

  • 猜猜电影页:/wechat/movie
  • 微信电影界面: /wechat/movie/:id
  • 微信音乐界面:/wechat/music/:id

More Repositories

1

blog

Life is a moment 📔
JavaScript
1,613
star
2

reactSPA

combination of react teconology stack
JavaScript
931
star
3

create-react-doc

📝 Minimalistic React-powered static site generator.
JavaScript
178
star
4

diana

fe customized tools🔩
TypeScript
72
star
5

flow

Efficiency tools. Don't repeat yourself(DRY).
JavaScript
69
star
6

create

to create something
JavaScript
63
star
7

waterfall

原生JS实现的瀑布流插件
JavaScript
35
star
8

yunApp

基于RN开发的一款视频配音APP
JavaScript
33
star
9

cpreact

Build React from Scratch 🎉
JavaScript
33
star
10

todoList

在React中使用Redux
JavaScript
31
star
11

mvvm

easy Vue
JavaScript
19
star
12

MusicVisualizer

利用webAudio,canvas,CSS3制作的自适应的音乐可视化应用 PC端,移动端通用
JavaScript
14
star
13

cross-domain

跨域 demo 实验
HTML
14
star
14

repromise

say high to promise/A+
JavaScript
8
star
15

recruit

拼多多内推(急缺人手,欢迎沟通)
6
star
16

gallery-by-react

基于react打造的画廊应用
JavaScript
6
star
17

ZHITWeb

信息技术协会网站
JavaScript
6
star
18

oneForm

one for all 表单方案
JavaScript
5
star
19

advanced-typescript

TypeScript
5
star
20

MuYunyun.github.io

HTML
5
star
21

3d-piano

a 3d-piano built by ts、react
JavaScript
3
star
22

gateway

使用 TypeScript + inversify + express 搭建的网关项目
TypeScript
3
star
23

analyze-webpack-plugin

Lightweight analyze webpack4.x plugin
JavaScript
3
star
24

springFestival

h5春节贺卡
CSS
2
star
25

chart

build chart library from scratch
JavaScript
2
star
26

demos-of-node.js

node.js实现的一些小demo
JavaScript
2
star
27

Deliver-App

用vue.js实现一款外卖APP
Vue
2
star
28

datepicker

a datepicker without relying on third-modules
JavaScript
2
star
29

diagrams

it's used for https://app.diagrams.net/ .
2
star
30

doraemon-cli

A light tool to generate projects in an easy way.
JavaScript
2
star
31

bookshelf

【WIP】Personal bookshelf for collecting books.
JavaScript
2
star
32

sponsor

HTML
1
star
33

reg-highlight

玩转正则之 highlight 高亮
HTML
1
star
34

hongfei

HTML
1
star
35

stateManage

该项目为对 flux、redux、mobx、rxjs 的实践与实验项目
JavaScript
1
star
36

playground

Convenient for debugging
1
star
37

TypeScript

TypeScript
1
star
38

MuYunyun

1
star
39

RegExp

JS正则查找替换小工具
JavaScript
1
star
40

siren

UI components based React hook
TypeScript
1
star