这篇博客详细介绍了如何使用MEAN（Mongodb+Express+Angularjs+Nodejs）框架构建一个用户管理应用。首先，需要安装Mongodb和Nodejs。接着，创建工程并利用Sublime Text管理文件，包括视图、控制器和路由。然后，通过npm安装Express和mongojs以处理数据库操作。在server.js中设置路由，并实现CRUD操作。在客户端，Angularjs用于处理交互。最后，通过运行Mongodb服务器和web服务，完成用户管理应用的部署。
MEAN（Mongodb+Express+Angularjs+Nodejs）框架
需要安装 Mongodb Nodejs
创建一个工程 为了便于方便 我在这里使用了Sublime Text编辑器来管理文件 具体文件如下图
视图的创建 ：/public/index.html
控制器的创建： /public/controller/index.html
构建路由 ：/server.js
打开终端 在web1的路径 下面安装Express 安装指令为：
npm install express
安装Mongodb的API模块 mongojs
npm install mongojs
server.js文件的代码如下
var express = require('express');
var app=express();
var mongojs=require('mongojs');
var db=mongojs('contactList',['contactList']);
var bodyParser=require('body-parser');
app.use(bodyParser.json());
app.use(express.static(__dirname +"/public"));
app.get('/contactList',function(req,res){
db.contactList.find(function(err,docs){
console.log(docs);
res.json(docs);
});
});
app.post('/contactList',function(req,res){
db.contactList.insert(req.body,function(err,doc){
res.json(doc);
});
});
app.delete('/contactList/:id',function(req,res){
var id =req.params.id;
console.log(id);
db.contactList.remove({_id:mongojs.ObjectId(id)},function(err,doc)
{
res.json(doc);
});
});
app.get('/contactList/:id',function(req,res){
var id =req.params.id;
db.contactList.findOne({_id:mongojs.ObjectId(id)},function(err,docs)
{
res.json(docs);
});
});
app.put('/contactList/:id',function(req,res){
var id=req.params.id;
db.contactList.findAndModify(
{
query:{_id:mongojs.ObjectId(id)},
update:{$set:{name:req.body.name,
email:req.body.email,
number:req.body.number}},
new:true
},function(err,doc){
res.json(doc);
});
});
app.listen(3000);
console.log("server running on port 3000");
controller.js内容：
var myApp=angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http)
{
var refresh=function()
{
$http.get('/contactList').success(function(response)
{
console.log("I get the data from I request");
$scope.contactList=response;
$scope.contact='';
});
};
refresh();
$scope.addContact=function(){
console.log($scope.contact);
$http.post('/contactList',$scope.contact).success(function(response)
{
console.log(response);
refresh();
});
};
$scope.remove=function(id){
console.log(id);
$http.delete('/contactList/'+id).success(function(response)
{
refresh();
});
};
$scope.edit=function(id){
$http.get('/contactList/'+id).success(function(response)
{
$scope.contact=response;
});
};
$scope.update=function(){
$http.put('/contactList/'+$scope.contact._id,$scope.contact)
.success(function(response)
{
refresh();
});
};
}]);
index.html的内容：
<!DOCTYPE>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
<script src="controllers/controller.js"></script>
<title>登陆表</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>信息表</h1>
<table class="table">
<thead>
<th>用户名</th>
<th>Email</th>
<th>电话</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="contact in contactList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
<td>
<button class="btn btn-danger" ng-click="remove(contact._id)">
删除
</button>
</td>
<td>
<button class="btn btn-warning" ng-click="edit(contact._id)">
编辑
</button>
</td>
</tr>
<tr>
<td>
<input clsaa="form-control", ng-model="contact.name">
</td>
<td>
<input clsaa="form-control", ng-model="contact.email">
</td>
<td>
<input clsaa="form-control", ng-model="contact.number">
</td>
<td>
<button class="btn btn-primary" ng-click="addContact()">
添加
</button>
</td>
<td>
<button class="btn btn-info" ng-click="update()">
更新
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
启动Mongodb的服务器 打开mongodb的bin目录下的mongod.exe
启动web服务 在终端窗口 输入： node server.js
如果得到下图结果 说明成功
接着打开浏览器 输入如下地址：
http://localhost:3000
得到如下页面
对 数据库Mongodb的CRUD操作的单页面应用就 制作成功了
扫一扫
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
