Mac OS 的Mean环境搭建+ngTable

最新推荐文章于 2021-11-27 22:29:17 发布

myepicure888

最新推荐文章于 2021-11-27 22:29:17 发布

阅读量597

点赞数

文章标签： nodejs ngTable

本文链接：https://blog.csdn.net/myepicure/article/details/55805197

版权

一、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>