基于MEAN框架的仿豆瓣电影开发实战（2）

  版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/lilythy2016/article/details/52818676。

  在上一篇帖子基于MEAN的仿豆瓣电影网站开发实战（1）中我已经详细介绍了电影数据录入功能的实现，本帖接着介绍在MEAN（Mongodb + Express + Angularjs + Node）框架下，将电影数据从数据库取出，并展示在首页的功能实现。

  我们先来看一下首页的效果图，如下图所示



  由于没有评分系统，所以这里的电影评分是在录入数据时随机生成的1.0~10.0之间的一位数，与实际会有差距，请大家不要介意^_^。

  先来看一下已经实现了录入功能的项目目录结构，如下图所示



  实现首页展示功能的思路是先在服务端定义一个方法用于获取数据库所有的电影数据，然后定义一个 url 映射到该方法，接着在前端定义一个方法请求该 url 来获取数据，最后调用该方法将数据放入首页对应的controller中即可。现在我们只需要在原来电影录入功能的基础上增加一些逻辑代码和几个前端文件就可以了，可以把上面这个目录作为参考，文章最后也会给出源代码下载链接呢。

  下面我们来看具体的实现吧。

一、服务端实现

1.添加后台逻辑代码

  我们还是从后台代码开始讲起，在controllers目录下的movies.js文件里加上从数据库取出电影数据并返回该数据的逻辑，即加上下面这段代码

//获取全部电影数据的方法
exports.list = function(req, res){
//这里直接通过MovieModel调用mongoose封装的find()方法即可
MovieModel.find(function (err, movie) {
if (err) {
return res.send(err);
}
//以json格式返回电影数据给前端
res.json(movie);
})
};

2.添加路由映射

  逻辑代码加上之后，需要设置一个 url 映射到这个获取电影的list方法上，也就是需要在路由文件movieRouter.js里加上下面这句代码

/* 设置get方法路由映射. */
router.get('/all',movies.list);

  路由编写完之后需要在项目的入口文件app.js中引用才有效，由于上一篇帖子已经在app.js里加上了引用该路由文件的代码，所以app.js文件里的内容并不用作修改，到这里服务端的代码就编写好了。

二、前端实现

1.在service里添加请求数据的方法

  接下来让我们来看一下前端部分的实现，既然要把电影信息展示出来，就必须先获取电影数据，在public目录下的movieService.js里加上一个向后台请求电影数据的方法，该方法如下

//通过请求后台接口获取所有电影数据
getAllMovies: function () {
//后台接口链接
var url = "http://localhost:3000/api/all";
//通过$q服务注册一个延迟对象 deferred，以达到异步的作用
var deferred = $q.defer();
//监听请求结果
$http.get(url).then(
//成功则返回电影数据
function success(respData) {
var movies = respData.data;
deferred.resolve(movies);
},
//失败则返回错误信息
function error(reason) {
deferred.reject(reason);
}
);
//通过deferred延迟对象，可以得到一个承诺promise，而promise会返回当前任务的完成结果
return deferred.promise;
}

2.添加页面和路由

  有了获取电影数据的方法，我们就可以在配置首页路由的时候调用该方法异步获取电影数据，然后将数据传给相应的controller，以便数据可以展示在首页，在配置路由前，我们先来看一下内嵌在首页的电影列表页面main.html，在public下的views目录下新建main.html，代码如下

main.html

<div class="wrapper">
<div class="content">
<div class="grid-16-8">
<div class="article">
<div class="screening">
<div class="screening-head">
<h2>
正在热映
<span><a href="#">全部正在热映»</a></span>
<span><a href="#">即将上映»</a></span>
</h2>
</div>
<div class="screening-body">
<ul class='ui-slide-content'>
<li class='ui-slide-item' ng-repeat="movie in movies">
<ul>
<li class='poster'><a href="#"><img src='{{dir}}{{movie.moviepic}}' alt="{{movie.moviename}}"></a></li>
<li class='title'><a href="#">{{movie.moviename}}</a></li>
<li class='rating'>
<span class='rating-star allstar allstar{{movie.starclass}}'></span>
<span class='subject-rate'>{{movie.starnum}}</span>
</li>
<li class='ticket_btn'>
<span>
<a href="#">选座购票</a>
</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="aside"></div>
</div>
</div>
</div>

  另外两个页面index.html和menu.html比较简单，我这里就不贴代码了，可以点击文章最后的源码链接查看，有了页面之后我们需要配置一下路由，使得首页可以加载main.html，在public目录下的routes.js里加上以下代码

//设置一个母版页状态为'movie'，路径为views目录下的menu.html
//abstract: true 表明此状态不能被显性激活，只能被子状态隐性激活
.state('movie', {
abstract: 'true',
templateUrl: '/views/menu.html'
})

/*设置路由状态为movie.main,表示是menu.html下的一个子页面，该子页面的路径为views文件夹下的main.html文件。
路由为'/'，即首页就会被加载，对应的控制器名称为MainController
resolve 被使用来处理异步数据调用，以下是返回所有电影数据*/
.state('movie.main', {
url: '/',
controller: 'MainController',
templateUrl: '/views/main.html',
resolve: {
'movies': function (MovieService) {
return MovieService.getAllMovies();
}
}
})

3.增加页面对应的controller文件

  然后在main.html对应的MainController里引用路由文件中异步获取到的电影数据movies，数据就可以在首页得到展示了。在public下的controller目录里新增mainController.js，代码如下

mainController.js

(function (app) {
'use strict';
app.controller('MainController', function ($scope, $rootScope, $state, movies,DIR) {
$rootScope.title = 'express_demo2';
$scope.movies = movies;
$scope.dir = DIR;
});
})(angular.module('app'));

  好了，首页展示电影列表的功能就此结束了，数据库的配置在上一篇帖子已经讲过了，现在只需要启动mongodb数据库，点击webstorm里的运行按钮，然后打开我们的浏览器，输入网址http://localhost:3000/，点击回车键后就可以看到文章顶部的首页效果图了。

  关于本帖的源代码，我已经上传至github，有需要的话请点击这里查看。