原创:分享一个使用MEAN开发的包含CRUD操作的data table
发布于 10 年前 作者 hcnode 5415 次浏览 最后一次编辑是 8 年前 来自 分享

最近迷上MEAN(Mongodb, express, angular, node),使用MEAN开发web应用,代码写起来非常快而爽 MEAN特点

  • Mongodb的node库mongoose,使用起来非常容易上手,接口简单、功能强大
  • Express路由管理简单易用
  • Angularjs更是一个真正意义上MVC前端框架
  • Node这个就不用说了
  • 以上四个模块都是基于js全栈开发,各个模块之间无缝连接

angunode github地址:https://github.com/hcnode/angunode 最近一周,边学边做了一个data tabe,包含CRUD功能,这不只是一个demo,我把它做成一个通用的模块,下面是其中的特点:

  • 使用json配置方式配置model,分别创建服务器端和浏览器端的相关配置 配置包括
  1. 服务器端配置:mongod数据库字段配置,默认排序字段,搜索字段默认每页记录数
			schema: {
				title: String,
				author: String,
				body: String,
				date: {type: Date, default: Date.now},
				category: String,
				recommend: Boolean
			},
			defSortField: "title",
			queryFields: ["title", "author"], 
  1. 浏览器端配置:显示的title,提交的field name,是否可排序,类型等
			schema: [
				{
					name: "title",
					type: String,
					sortable: true,
					text: "Title"
				},
				...
			] 
  • 配置好model后,运行node,自动建立相关的model和routes,包括:
  1. mongoose自动创建配置好的model
  2. express自动创建CRUD的routes
  3. angular自动配置浏览器端的CRUD路由
  • angular会根据model的配置,自动在界面生成table和data
  • 支持自动分页,支持搜索(配置前面说的queryFields),支持设置每页记录数,排序(配置client的field的sortable属性)

如何使用 git 获取代码后,在已安装mongodb的node环境下运行 npm install npm start 使用chrome打开:http://localhost:3000/html/datatable.html#blog 即可看到已经配置好的blog model demo,默认会生成100条数据

需要优化的功能 因为时间不够,还有很多功能想做但是没时间做,以后有时间再慢慢做,包括:

  • 丰富编辑控件,暂时只支持text、textarea、date、checkbox、简单的select这几种控件
  • 多表之间的关联(比如select的数据是另外一个表)
  • 没有加上数据验证
  • model配置把server和client合成一份
  • http接口做成restful标准

一些代码细节的分享 分享一个在MEAN流程中无缝连接的细节:

  • 在angular的数据显示循环里编辑的代码:
	<tr ng-repeat="item in items">
                ...
                <td><i class="fa fa-gear fa-lg" ng-click="updateDialog(item)"></i>...</td>
            </tr>
  • 然后在updateDialog里面是这样的:
	$scope.updateDialog = function (model) {
            ...
            $scope.editModel = model;
            ...
        }
  • 最后http提交
		add : function($scope, $http, call){
			$http.post(update url, $scope.editModel).success(function (data) {
				call(data);
			}).error(function (data, status) {
				call('get data error!');
			});
		},

在上面的流程上,从显示代码到编辑代码,再到提交代码,没有写过一条拼凑数据、访问dom、数据转换,是不是觉得很赞! 这只是angular部分,再来到express路由和mongoose:

	router.post('/api/update', function(req, res, next) {
		...
		var model = new Model(req.body);
		Model.update(model, function (err) {
			res.json({err : err});
		})
	});
	Model.statics.update = function (model, call) {
		var Model = mongoose.model(modelConf.name);
		Model.findOneAndUpdate({_id : model._id}, model, function (err) {
			call(err);
		})
	}

上面代码中,直接将req.body扔给mongoose的model,然后update!搞定! angular - express - mongodb 整个流程完整无缝!

4 回复

不错,我这儿招人,考虑不?

@i5ting 你开多少薪水啊?

呵呵,暂时不考虑了,node也只是最近才可以学,以前在公司写js前端,所以现在学MEAN觉得得心应手。

回到顶部