MEAN 全栈开发 ——实现简单博客

最近在学习MEAN全栈开发的过程中，写了一个小程序就当练练手熟悉一下怎么去组合强大的功能。

废话不多说，直接上文件预览：

整体文件结构：

其中，public文件夹存放了img,js,css文件，其中的index.js文件用于配置前台路由，routes文件夹存放了后台路由的配置文件，views文件夹存放静态视图文件，app.js文件作为程序的入口，相当于main函数一样。

前台路由设置：

public/javascripts/index.js

/*前端路由处理*/
//创建服务
var blogServices = angular.module('blogServices', ['ngResource']);
//Blog代表上述服务
blogServices.factory('Blog', ['$resource',
    function($resource){
        return $resource('/api/list/:_id', {_id: '@id'},
            {
                //默认提供5种方法，在此可以自定义方法；
            }
        );
}]);

//在模板中注入模块
var app = angular.module('app', [
    'ngRoute',
    'blogServices'
]);

app.directive('focus', function () {
    return {
        restrict: 'A',//限制只可通过属性调用
        link: function (scope, element, attr) {
            element[0].focus();
        }
    }
});


app.config(function ($routeProvider) {
    $routeProvider.
        //自动忽略前面的#
        when('/', {
            templateUrl: 'posts.html',// 当打开链接为 "/", 载入posts.html
            controller: postsCtrl
        }).
        //add
        when('/api/add', {
            templateUrl: 'add.html',
            controller: postCtrl
        }).
        //read
        when('/api/list/:_id',{
            templateUrl: 'read.html',
            controller: readCtrl
        }).
        //modify
        when('/api/modify/:_id', {
            templateUrl: 'modify.html',
            controller: editCtrl
        }).
        //delete
        when('/api/del/:_id',{
            templateUrl: 'posts.html',
            controller: deleteCtrl
        });
    //otherwise({
    //    redirectTo: '/' // 其他情况，跳到链接"/"
    //});
});

/* 每个路由对应的控制器 */
// 文章列表控制器
// 注入Blog服务
function postsCtrl($scope,Blog) {
    //去后端访问route.get('/list'),返回查找的数据
    $scope.posts = Blog.query();
}

// 发布文章控制器
function postCtrl($scope, Blog, $location) {  // 注入$location服务
    $scope.form = {};   // 初始化一个数据模型
    // 提交操作函数
    $scope.form.submit = function () {
        Blog.save({}, $scope.form,function(){
            $location.url('/'); // 返回首页;
        });
    };
}

// 读取文章控制器
function readCtrl($scope, Blog, $routeParams){
    // 将获取到的数据 通过$scope绑定成NG的数据模型
    $scope.post = Blog.get({_id:$routeParams._id});
}

//删除文章控制器
function deleteCtrl($scope, Blog, $location, $routeParams){
    Blog.delete({_id:$routeParams._id},function(){
        $location.url('/'); // 返回首页;
    });
}

// 修改文章控制器
function editCtrl($scope, Blog, $routeParams, $location) {
    //向后台申请数据,写入post模型
    $scope.post = Blog.get({_id:$routeParams._id});
    // 提交操作函数
    $scope.submit = function () {
        Blog.save({_id: $routeParams._id},$scope.post,function(){
            $location.url('/'); // 返回首页
        });
    };
}

/* $http方法 */
/* 文章列表控制器
function postsCtrl($scope, $http) {    // 注入$Http服务,类似于jquery的ajax
    //去后端访问route.get('/list'),返回查找的数据
    $http.get('/api/list').success(function (data) {
        $scope.posts = data; // 将获得的数据保存到NG的数据模型posts里
    });
}
 发布文章控制器
function postCtrl($scope, $http, $location) {  // 注入$location服务
    $scope.form = {};   // 初始化一个NG数据模型
    // 提交操作函数
    $scope.form.submit = function () {
        $http.post('/api/add', $scope.form).success(function () {
            $location.url('/'); // 返回首页
        });
    };
}
// 读取文章控制器
function readCtrl($scope,$http, $routeParams){
    $http.get('/api/list/' + $routeParams._id).success(function(data){
        $scope.post = data; // 将获取到的数据 通过$scope绑定成NG的数据模型
    });
}
// 修改文章控制器
function editCtrl($scope, $http, $routeParams, $location) {  // 注入$location服务
    //向后台申请数据
    $http.get('/api/modify/' + $routeParams._id).success(function (data){
        //将数据存入post
        $scope.post = data;
    });

    $scope.form = {};   // 初始化一个NG数据模型
    // 提交操作函数
    $scope.form.submit = function () {
        $http.post('/api/modify/' + $routeParams._id, $scope.post).success(function () {
            $location.url('/'); // 返回首页
        });
    };
}

//删除文章控制器
function deleteCtrl($scope, $http, $location, $routeParams){
    $http.get('/api/del/' +  $routeParams._id).success(function () {
        $location.url('/'); // 返回首页
    });
}*/

// 启动模块
angular.bootstrap(document, ['app']);

用了两种方法去实现，开始用了$http去写路由（见注释部分），最后改为使用$resource去管理API，这里需要注意一点，只用服务端按照RESTful的方式工作的时候，才可以使用Angular资源。

服务端路由

/routes/index.js

'use strict';
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var model = require('./model');
var Demo = model.Demo;
mongoose.connect('mongodb://localhost/monkey');
/*这里的路由是用来处理访问为'xxx'的请求*/
/* 查找数据库数据.*/
router.get('/api/list',function(req,res,next){
		console.log("This is finding data!");
		Demo.find({}).sort({createTime: -1}).exec(function (err, docs) {
			res.json(docs);
		});
});

/*跳转到添加页面,创建新纪录*/
router.post('/api/list',function(req, res){
	var demo = new Demo(req.body);
	demo.save(function(err,doc){
		if (err) {
			console.log(err);
			res.send(err);
		}
		else {
			console.log('create');
			console.log(doc);
			res.json({status: 'done'});
		}
	});
});

//根据id查找相应的记录
router.get('/api/list/:_id',function(req,res){
	var id = req.params._id;
	console.log(id);
	console.log('Now start to read!');
	if(id) {
		//返回文档
		Demo.findOne({_id: id}).exec(function (err, docs) {
			console.log(docs);
			res.json(docs);
		});
	}
});

// 根据id删除相应的记录
router.delete('/api/list/:_id',function(req, res){
	var id = req.params._id;
	console.log('delete');
	console.log(id);
	if(id) {
		console.log('delete id = ' + id);
		Demo.findByIdAndRemove(id, function(err, docs) {
			console.log(docs);
			res.json(docs);
		});
	}
});

/*查询对应修改记录，并跳转到修改页面
router.get('/api/modify/:_id',function(req, res) {
	var id = req.params._id;
	console.log('id = ' + id);
	console.log('Now start to modify!');
	Demo.findOne({_id: id}).exec(function (err, docs) {
		console.log(docs);
		res.json(docs);
	});
});*/

//修改相应的值
router.post('/api/list/:_id',function(req, res) {
	var demo = new Demo(req.body);
	var id = req.params._id; //因为是post提交，所以不用query获取id
	if(id) {
		console.log('----update');
		console.log(demo);
		Demo.findByIdAndUpdate(id, demo,function(err, docs) {
			res.json({status: 'done'});
		});
	}
});

module.exports = router;

　　这里的作用是来处理对应URL的前台访问，作为对应的处理函数。

定义数据库

/routes/model.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var demoSchema = new Schema({
	uid : {
		required:true,
		type:String,
		unique:true,
		trim:true
	},
	title: {
		type:String,
		required:true
	},
	content: {
		type:String,
		required:true
	},
	createTime : {
		type: Date,
		default: Date.now
	}
});

Demo = mongoose.model('Demo',demoSchema);
exports.Demo = Demo;

视图文件

views//index.html

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>MAEN BLOG</title>
    <link rel="stylesheet" href="stylesheets/common.css" />
    <link rel="stylesheet" href="stylesheets/index.css" />
</head>
<body>
    <header>
        <h1 id="logo"><a href="#">BLOG List</a></h1>
    </header>

    <div id="main">
        <!-- 路由区域 -->
        <ng-view />
    </div>

	<!-- javascript-->
	<script src="javascripts/plugins/angular/angular.min.js" type="text/javascript"></script>
	<script src="javascripts/plugins/angular-route/angular-route.min.js" type="text/javascript"></script>
    <script src="javascripts/plugins/angular-resource/angular-resource.js" type="text/javascript"></script>
    <script src="javascripts/index.js"></script>
</body>
</html>

views/add.html

<form id="post" ng-submit="form.submit()">
    <input ng-model="form.uid" focus type="text" placeholder="文章ID" />
    <input ng-model="form.title"  type="text" placeholder="标题" />
    <textarea ng-model="form.content" placeholder="正文"></textarea>
    <div>
        <button class="btn btn-danger pull-right" type="submit">提交发布</button>
    </div>
</form>

views/modify.html

<form id="modify" ng-submit="submit()">
    <div>
        <div>{{post.createTime|date: 'yyyy-MM-dd HH:mm:ss'}}</div>
        <input ng-model="post.title" focus type="text">
        <textarea ng-model="post.content"></textarea>
        <div>
            <button class="btn btn-danger pull-right" type="submit">save</button>
        </div>
    </div>
</form>

views/posts.html

<table>
    <tr>
        <th>题目 -
            <button class="btn btn-danger"><a href="/#/api/add">发表文章</a></button>
        </th>
        <th>时间</th>
        <th></th>
        <th></th>
    </tr>
    
    <!-- ng-repeat可以根据NG数据模型遍历数据，相当于forEeach -->
    <tr ng-repeat="post in posts">
        <td><a href="/#/api/list/{{post._id}}">{{ post.title }}</a></td>
        <!-- 用filter过滤器，转换了显示的时间格式 -->
        <td class="text-muted">{{ post.createTime|date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td><a href="/#/api/modify/{{post._id}}">修改</a></td>
        <td><a href="/#/api/del/{{post._id}}">删除</a></td>
    </tr>

   <!-- ng-hide表示，当文章列表有内容，将不显示这里 -->
    <tr ng-hide="posts.length">
        <td colspan="2" class="text-muted text-center">没有文章哦</td>
    </tr>
</table>

views/read.html

<form id="read" ng-submit="form.submit()">
    <div>
        <div>
            {{post.createTime|date: 'yyyy-MM-dd HH:mm:ss'}}
        </div>
        <div>
            <input ng-model="post.title" focus type="text">
        </div>
        <textarea ng-model="post.content"></textarea>
        <div>
            <a href="#" class="pull-right">back</a>
        </div>
    </div>
</form>

引导文件

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var ejs = require('ejs');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html',ejs.__express);

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'views')));
app.use('/',routes);
app.use('/users',user.list);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});
module.exports = app;

　　

现在的程度只能做到这样子，希望以后的学习中会不断优化。