达芬奇密码

除了技术，无它

439篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

分享一个使用MEAN全栈js写的包含CRUD操作的Data table

达芬奇密码2018-08-07 14:13

什么是MEAN全栈？

MEAN是指使用 MongoDB, Express, AngularJS, and Node.js开发web application，从数据库、到web服务器、再到浏览器端，全栈使用js开发，具体了解MEAN，可以查看 这篇文章

MEAN特点总结
通过这段时间对MEAN学习的总结，我觉得MEAN有以下特点
  • Mongodb的node库mongoose，使用起来非常容易上手，接口简单、功能强大
  • Express路由管理简单易用
  • Angularjs更是一个真正意义上MVC前端框架，而且完全是一个反jquery的，因为你根本不需要操作dom
  • Node服务器端的js引擎，npm的库管理工具，更加规范js
angunode
github地址：https://github.com/hcnode/angunode
最近一段时间，边学边做了一个data tabe 的demo，包含CRUD功能，这不只是一个demo，我把它做成一个通用的模块，并放到github上（因为写的比较仓促，所以代码比较乱）
使用json配置方式配置model，分别创建服务器端和浏览器端的相关配置 配置包括
服务器端配置：包括mongod数据库collection配置，默认排序字段，搜索的字段等 
 schema: {
                title: String,
                author: String,
                body: String,
                date: {type: Date, default: Date.now},
                category: String,
                recommend: Boolean
            },
            defSortField: "title",
            queryFields: ["title", "author"],
浏览器端配置： 包括 显示的title，提交的field name，是否可排序，类型（决定编辑时候显示的控件）等 
schema: [
                {
                    name: "title",
                    type: String,
                    sortable: true,
                    text: "Title"
                },
                ...
            ]
配置好model后，运行node，自动建立相关的model和routes，包括：
  • mongoose自动创建配置对应的model
  • express自动创建CRUD的routes
  • angular自动配置浏览器端的CRUD路由
  • angular会根据model的配置，自动在界面生成table和data，并支持CRUD操作界面
  • 支持自动分页，支持搜索（配置前面说的queryFields），支持设置每页记录数，是否可以排序（配置client的field的sortable属性）
如何使用
git 获取代码后，在已安装mongodb的node环境下运行
安装浏览器端js依赖库：bower install
安装node依赖库：npm install
运行node：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流程中完美流畅的数据传递细节：
浏览器段ajax获取数据后，在angular的数据显示循环里编辑的代码： 
    <tr ng-repeat="item in items">
                ...
                <td><i  ng-click="updateDialog(item)"></i>...</td>
            </tr>

然后在updateDialog里面是这样的： 
    $scope.updateDialog = function (model) {
            ...
            $scope.editModel = model;
            ...  // 显示该条记录update的modal对话框
        }
然后编辑的对话框是这样的：
<div >
                    <form >
                        <div  ng-repeat="field in appModel.schema" ng-if="field.editable!==false">                      
                            ... // 里面是各种ui控件，然后属性ng-model="editModel[field.name]"就可以了
                        </div>
                    </form>

                </div>
最后http ajax提交： 
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});
        })
    });

上面代码中，直接将req.body扔给mongoose的model，然后就可以传给mongoose

Model.statics.update = function (model, call) {
        var Model = mongoose.model(modelConf.name);
        Model.findOneAndUpdate({_id : model._id}, model, function (err) {
            call(err);
        })
    }
然后update！搞定！收工！
angular - express - mongodb 整个流程完整简单流畅，并且全程js全栈开发，爽！

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者陈志凌授权发布。


推荐博客