vue.js电影网站

技术栈：Vue+Node.js+MongoDB

vue init webpack book_view  # 构建应用，一路Yes
cd book_view
npm install
npm run dev   # 启动服务
npm run build # 启动生产模式，生成dist目录

功能设计：

• 显示电影下载地址
• 电影添加、修改、删除等后台管理；
• 前端预览
• 对用户的审核、权限、评论等管理
• 文章管理

用户系统部分包括：

• 注册、登录、信息显示
• 基本权限控制
• 密码找回
• 意见反馈
• 对每个资源的评论、点赞、下载

页面设计：

数据库设计：

var Movie = new Schema({  # 电影

      movieName : String,

      movieImg: String,

      movieVideo: String,

      movieDownload: String,

      movieTime: String,

      movieNumSuppose: int,  # 点赞数

      movieNumDownload: int,

      movieMainPage: Boolean,,

});

var Comment = new Schema ({  # 电影评论

   movie_id: String,

   user_id: String,  # 评论人

   context: String,

   check: Boolean # 

});

var User = new Schema ({  # 用户信息

   username : String,

   password: String,

   userMail: String,

   userPhone: String,

   userAdmin: Boolean,

   userPower: Int,

   userStop: Boolean   # 是否被封停

})

var Recommend = new Schema ({  # 推荐

    recommendImg: String,

    recommendSrc: String,

    recommendTitle: String

})

var Mail = new Schema ({   # 站内信

   mailToUser: String,   # 接受人

   mailFromUser: String,  # 发送人

   mailTitle: String,

   mailContext: String,

   mailSendTime: String

})

var Article = new Schema ({  # 文章

     articleTitle: String

     articleContext: String,

     articleTime: String

})

服务器端设计：

$ mkdir server

$ npm init

$ npm install express --save

$ node index.js 

API设计：

路由设计：

可以使用Chrome的Postman插件测试接口。

后台代码编写：

$ npm install express-generator -g   # 生成器

$ express book_service   # 创建服务端

$ cd book_service

$ npm install

$ set DEBUG=book_service & npm start   # 启动应用

--->   http://127.0.0.1:3000/

链接数据库 $ npm install mongoose --save

$ npm install -g supervisor   # 监控代码的修改

$ supervisor bin/www

$ mkdir common   # 数据库链接db.js

$ mkdir models     # 数据库表文件

创建movieServer数据库

用户系统开发：

routes/user.js

前台API开发：文章、内容、推荐等显示

routers/index.js

后台API开发：用于后台管理

前端开发：

路由vue-router：一个路由路径对应一个*.vue文件

如/user/:id，对应user.vue，参数用冒号“:”，被设置到this.$route.params

路由导航<router-link>比<a href="...">有优势，使用HTML5的history栈

如<router-link :to="{name: 'user', params: {id: 123}}">User</router-link>

router.push({name: 'user', params: {id: 123}})

数据获取，可以在导航完成之前和完成之后两种方式，

$ vue init webpack book_view  # 创建网站项目

$ npm install

$ npm run dev

$ npm install vue-resource --save  # 安装网络请求模块

请求http

this.$http.get(url).then((data) => {
   console.log(data.body.data)
}
this.$http.post(url, send_data).then((data) => {
   console.log(data.body.data)
})

pages/index.vue 主页

完成判断用户的登录状态、文章内容的显示、电影推荐列表以及首页图内容

在index.js中建立路由

components/MovieIndexHeader.vue  主页的头部

components/CommonFooter.vue   主页的尾部

components/UserMessage.vue    主页的用户模块

components/IndexHeaderPic.vue 主页的大图推荐

componects/MoviesList.vue   主页的电影列表

componects/NewsList.vue   主页的新闻列表

pages/movieList.vue  电影列表页

在index.js中建立路由

pages/movieDetail.vue  电影详情页

在index.js中建立路由

componects/Comment.vue   评论

pages/newsDetail.vue  新闻详情页

在index.js中建立路由

pages/loginPage.vue  用户登录页

在index.js中建立路由

pages/registerPage.vue  用户注册页

在index.js中建立路由

pages/findPasswordPage.vue  用户密码找回页

在index.js中建立路由

pages/userInfo.vue  用户详情页

在index.js中建立路由

pages/sendEmail.vue  用户发送站内信页

在index.js中建立路由

componects/EmailList.vue   邮件列表

componects/SendTalkBox.vue   对话框