您的位置：首页 > 数据库 > Mongodb

使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1

2015-06-26 12:57 1076 查看

使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1

这个实现的基础是《使用handlebars 代替Jade 使用Express》，或者可以直接下载开始的源码，根据下面的步骤进行编辑

$ git clone https://susan200893171@bitbucket.org/susan200893171/node-js-example.git $ cd node-js-exmaple ;git checkout jadeToHandlebars
$ cd node-js-example
$ npm install
$ npm start

在这篇文章中，主要是记录如何使用mongoose，添加数据，handlebars 的一些基本的使用。

为了比较清楚的了解，首先创建页面

因为这边文章主要是针对nodejs Express， mongoose讲解，你可以直接粘贴下面的代码到相应的文件里。

1、进入 views/layouts , 编辑main.handlebars,


node-js-example/views/layout/main.handlebars

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

2、在views 文件夹中创建users.handlebars


node-js-example/views/users.handlebars

<script type="text/javascript" src="/javascripts/users.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="addUserForm">
<h1>Add New User</h1>
<form role="form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="username" class="form-control" name=name>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="useremail" class="form-control" name="email">
</div>
<button type="button" class="btn btn-default" id="add" name="Add">添加</button>
</form>
</div>
<div id="showUserInfo">
<!--之后添加-->
</div>
</div>
<div class="col-sm-6">
<h1> Show the User's information</h1>
<div class="table-responsive">
<table class="table" id="usersTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>Delete?</th>
</thead>
<tbody>
{{#each users}}
<tr>
<td><a href="#" rel="{{name}}">{{name}}</a></td>
<td>{{email}}</td>
<td><a href="#" rel="{{_id}}">Delete?</a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>

3、在public/javascripts/ 文件夹中，建立users.js 文件，这个是在users.handlebars 第一行中引用的文件,因为在app.js 文件中我们引用了

app.use(express.static(path.join(__dirname, 'public')));

users.js 文件内容如下,如果没有javascripts 文件夹，直接创建：


node-js-example/public/

$ mkdir javascripts


node-js-example/public/javascripts/users.js

$(document).ready(function(){
$('#add').on('click',addUser);
});
function addUser(event){
event.preventDefault();
var newUser = {
name:$("#username").val(),
email:$("#useremail").val(),
};
console.log('new user='+newUser);
//use AJAX to post object to our adduser service
$.ajax({
type:'POST',
data: newUser,
url : '/users/adduser',
dataType:'JSON'
}).done(function(response){
console.log(response);
if(response.message === ''){
//post correct ,
//刷新数据 {{uses}}
window.location.href='/users/';
}else{
};
});
}

添加的数据格式是{name:…,email:…}

4、使用mongoose 对数据库进行操作。

在MongoDB 在mac上安装已经讲解了如何安装。

创建data文件夹启动数据库


node-js-example/

$mkdir data
$cd data
$mongod --dbpath .

我建立一个credentials.js 文件，保留一些配置文件，之后可以添加其他的一个配置,现在只是数据库的url


node-js-example/credentials.js

module.exports={
database:{
url:'mongodb://127.0.0.1:27017/blog',
},
}

因为是使用mongoose，首先安装mongoose


node-js-example/

$npm install --save mongoose

我建立一个models文件保存数据的格式


node-js-example/

$ mkdir models
$ cd models
$ touch user.js

mongodb是使用shema来确定数据库的格式，在/public/javascripts/users.js 中ajax post newUser 的格式是{name,email} ,所以models/user.js 的内容


node-js-example/models/users.js

var mongoose = require('mongoose');
var userSchema = mongoose.Schema({
name:String,
email:String,
});
var User = mongoose.model('User',userSchema);

module.exports = User;

建立完数据格式，我们需要把express 和数据库链接起来。

打开app.js 文件，添加如下代码：


node-js-example/app.js

var mongoose = require('mongoose');
var credentials = require('./credentials.js');
mongoose.connect(credentials.database.url);

5 、数据库连接之后，我们需要对路径/users 进行操作,因为在app.js 中


node-js-example/app.js

var users = require('./routes/users');
app.use('/users',users);

所以进入routes 文件夹打开 users.js 文件


node-js-example/

$ vi routes/users.js

因为在routes/users.js文件中有对数据库操作，所以添加


node-js-example/routes/users.js

var User = require('../models/user.js');

首先为了得到如图片所示的界面，首先对 get(‘/’，function(req,res)) 进行编辑


node-js-example/routes/users.js

router.get('/',function(req,res){
//因为在文件views/users.handlebars中{{#each users}} 所以需要访问数据库得到所有的users
User.find(function(err,docs){
if(err){
res.send({message:err});
}else{
res.render('users',{users:docs});
}
});
});

添加完这段之后，可以运行，之后出现如图的界面


node-js-example/

$ npm start

在添加user的是，ajax post 操作，所以需要添加 post /users/adduser ，添加如下代码


node-js-example/routes/users.js

router.post('/adduser',function(req,res){

var body=req.body;
var newUser = new User({
name:body.name,
email:body.email
});
newUser.save(function(err){
if(err){
//if there is some error ,when saving into the database
//send back to error
res.send({message:err});
}else{
//insert sucessfully, send back nothing
res.send({message:'',newUser:newUser});
}
});
});

之后运行


node-js-example/

$ npm start

完整的这部分代码：

$ git clone https://susan200893171@bitbucket.org/susan200893171/node-js-example.git $ cd node-js-example
$ git checkout mongoose
$ npm install
$ npm start

然后打开browser ，输入http://localhost:3000/users/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航