当前位置: 首页 > 工具软件 > ngTable > 使用案例 >

Mac OS 的Mean环境搭建+ngTable

东典
2023-12-01

一、MongoDB 安装

     1. 安装brew

         brew的官网:http://brew.sh/

         安装方法: Mac中打开终端,输入命令

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

      2. 安装MongoDB

          2.1 终端输入命令 brew install mongodb

          2.2 安装目录为/usr/local/Cellar/mongodb/3.2.5,3.2.5为版本号,不同版本的此目录不同。

     2.3 配置文件为/usr/local/etc/mongod.conf,默认数据文件目录为/data/db,不存在须自行创建(注意设置读写权限)或设置自己的目录,如

         dbPath: /usr/local/var/mongodb, 添加此行到配置文件mongod.conf中

     2.4 启动mongodb, 终端输入命令mongod --config /usr/local/etc/mongod.conf

     2.5 开一新到终端输入客户端命令 mongo

         可以看到类似 MongoDB shell version:3.2.5

                    Connecting to: test的消息,表明服务端已启动

         用浏览器打开http://localhost:27017,看到

It looks like you are trying to access MongoDB over HTTP on the native driver port.

                    
二、NodeJS 安装

   1.下载目前稳定版6.9.5,https://nodejs.org/dist/v6.9.5/node-v6.9.5.pkg

   2.双击安装,安装完成后,终端输入 node -v,可以看到版本号

   3.安装Express,运行 npm install -g express-generator


三、创建 Express 项目

   1. 找一目录,创建 NGTableTest项目,express NGTableTest --view=ejs

   2. 安装依赖 cd NGTableTest; npm install;

   3. 安装Nodemon,Nodemon会自动重启web服务当它检测到代码文件有改动时候,npm install nodemon -g (前面加sudo如遇到权限问题)

   4. 安装读写MongoDB模块Monk, npm install monk --save

      --save表示叫monk依赖写到文件package.json

   5. 启动web服务,输入 nodemon, 访问 http://localhost:3000 可以看到 Welcome to Express


四、MongoDB工具RoboMongo

   1.访问https://robomongo.org,下载mac用到0.9.0版本,robomongo-0.9.0-darwin-x86_64-0786489.dmg

   2.工具左边导航栏,右键crate database创建数据库 testtable

   3.点击展开testtable, 选中Collections,右键Create Collection… ,创建videos

      4.右键videos,Insert Document插入数据

{
 "title" : "Terminator Genisys",
 "genre" : "SciFi",
 "description" : "When John Connor, leader of the human resistance, sends Sgt. Kyle Reese back to 1984 to protect Sarah Connor and safeguard the future, an unexpected turn of events creates a fractured timeline."
}

       双击videos,可发现多了一条记录,并且这记录多了一列自动生成的_id

      5.重复4,分别插入下面两条记录

{
 "title" : "The Lord of the Rings",
 "genre" : "Fantasy",
 "description" : "A meek hobbit of the Shire and eight companions set out on a journey to Mount Doom to destroy the One Ring and the dark lord Sauron."
}
{
 "title" : "Apollo 13",
 "genre" : "Drama",
 "description" : "NASA must devise a strategy to return Apollo 13 to Earth safely after the spacecraft undergoes massive internal damage putting the lives of the three astronauts on board in jeopardy."
}
            至此,数据准备完毕

五、访问数据

        1.创建访问数据库路由

           在routes目录下创建文件videos.js, 代码如下

            var express = require('express');
            var router = express.Router();
            var monk = require('monk');
            var db = monk('localhost:27017/testtable');

router.get('/', function(req, res) {

    var collection = db.get('videos');
    collection.find({}, function(err, videos){
        if (err) throw err;
      res.json(videos);
    });
});

module.exports = router;


    2.修改app.js

       在var users = require('./routes/users');的下一行增加var videos = require('./routes/videos');

       在app.use('/users', users);的下一行增加app.use('/videos', videos);

   3. 启动web服务,访问http://localhost:3000/videos.可以看到json格式的三条记录


六、ngTable展示数据

       1.ejs 使用html文件

          修改app.js, 删除app.set('view engine', 'ejs'); 替换为

          app.engine('html',require('ejs').renderFile);
          app.set('view engine','html');

       2.将views文件夹里到文件后缀从ejs改为html

       3.在views下创建文件table.html

           <!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'/>
        <link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css" />   
    </head>  
    <body>     
        <div ng-app="myApp" class="main_table">
        <div ng-controller="testController as vm">
        <table ng-table="vm.tableParams" class="table" show-filter="true">
        <tr ng-repeat="video in $data">
        <td title="'Title'" filter="{ title: 'text'}" sortable="'title'">
            {{video.title}}</td>
        <td title="'Gen'" filter="{ genre: 'text'}" sortable="'genre'">
            {{video.genre}}</td>
        </tr>
        </table>
        </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.js'></script>
        <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
        <script src="javascripts/test.js"></script>    
    </body>  
</html>  

           a.引入AngularJS框架

        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.js'></script>

           b.引入css框架Bootstrap

        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'/>

           c.引入ngTable

         <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

    4.创建文件test.js, 数据保存到tableParams对象

        var app = angular.module('myApp',['ngTable','ngResource']);
        app.controller('testController',['$scope','$resource','NgTableParams',
function($scope,$resource,NgTableParams){
var self = this;
                var Videos = $resource('/videos');
                       Videos.query(function(videos){
                             self.tableParams = new NgTableParams({}, { dataset: videos});
            });
       }]);

     5.修改app.js

       在app.use('/videos', videos);的下一行增加app.use('/table',index);

    6.修改index.js, 增加代码

        router.get('/table',function(req,res){
res.render('table',{title:'Table Test'});
        });

     7.启动web服务和MongoDB

        访问http://localhost/table, 可以看到三条数据



七、参考网址

1.http://ng-table.com/#/

2.https://blog.udemy.com/node-js-tutorial/







    

                



 类似资料: