Node+express+mogondb+html搭建简单网站

首先来说说我在搭建之前都先了解了什么：npm 包管理器、node模块、包的概念，前后端分离，模板的渲染、mongodb数据库、数据库操作，数据库的链接、用Romogondb工具可视化数据库及连接操作等。

建站目录

本次demo的练习让我理清了node开发的基本流程及前后端逻辑。

在开发之前，建好项目目录我觉得这是最重要的，在建站之前，你必须建立一些需求，我是打算写一个关于图书管理，共四个页面的网站，首页、后台数据录入页、列表数据页（用来获取数据库中的全部数据展现在页面上）、详情页（每一个id对应的数据页），然后链接数据库，实现数据库的添加、查找、修改、删除操作。下面是我的目录：

- db#用来存放启动数据库的数据
- models#用来存放对象在数据库中模型
- node_modules#用来存放项目所需的模板
- public#用来放前端的js、css、images文件
- routes#存放后端路由
- schemas#用来存放对象所需的字节信息
- views#存放视图模板的目录
- app.js#项目的入口文件
- package.json#包管理文件

具体如下：

建站实施

我用的视图模板是html，他没有自动填充后台接口数据的语法，所以我用的是传统的ajax请求实现数据的获取，下面我就直接粘代码了，很多解释我都有代码注释的，在开发中遇到的问题我也会描述的。

入口文件：app.js

var express = require('express');
var mongoose=require('mongoose');//引入模块
var path = require('path');
/*var _ = require('underscore');*///新更新的数据替换
var Book = require('./models/book');
var bodyParser = require('body-parser');
var swig = require('swig');

//创建web实例
var app = express();

var admin = require('./routes/admin');
var index = require('./routes/index');
var list = require('./routes/list');
var watch = require('./routes/watch');

//定义模板
app.engine('html', swig.renderFile);
//设置模板目录
app.set('views', './views');
//注册模板
app.set('view engine', 'html');
/*//取消模板缓存
swig.setDefaults({cache:false});*/

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//express配置静态文件
app.use(express.static(path.join(__dirname, 'public')));

//各路由
app.use('/admin', admin);
app.use('/', index);
app.use('/list', list);
app.use('/watch', watch);

app.listen(3000, function(){
console.log('app is listening at port 3000');
});

//连接数据库
mongoose.connect('mongodb://localhost:27017/book',function(err){
if(err){
console.log('数据库连接错误了哦');
}else{
console.log('数据库连接成功了！你很棒棒哦！');
app.listen();
}
});

module.exports = app;

各路由

admin.js

var express = require('express');
//创建路有对象
var  router = express.Router();
var Book =require('../models/book');

router.get('/', function(req, res){
res.render('admin/admin');
});
//统一返回格式
var responseData = null;
router.use(function(req,res,next){
responseData={
message:'',
bookInfo: ''
}
next();
});

//后台录入数据
router.post('/bookinfo', function(req, res){
/*    var id = req.body.book._id;*/
var bookname = req.body.bookname;
var username = req.body.username;
var publishtime = req.body.publishtime;
var bookinfo = req.body.bookinfo;
var _book;

if(bookname == '' || username == '' || publishtime == '' || bookinfo == ''){
responseData.message = '需要输入全部的数据！';
res.json(responseData);
return;
}

//查看所录入的书本信息是否存在
Book.findOne({
bookname: bookname
}).then(function(bookInfo){
if(bookInfo){
responseData.message = '该书已经存在，可对他进行更新';
res.json(responseData);
_book = new Book({
bookname: bookname,
username: username,
publishtime: publishtime,
bookinfo: bookinfo,
});
return _book.save();
}else{
_book = new Book({
bookname: bookname,
username: username,
publishtime: publishtime,
bookinfo:bookinfo,

});
return _book.save();
}
}).then(function(newBookInfo){
responseData.message='数据录入成功！';
responseData.bookInfo = _book;
res.json(responseData);
//res.redirect('/list.html');
});

});

module.exports = router;

index.js

var express = require('express');
//创建路有对象
var  router = express.Router();
var Book = require('../models/book');

router.get('/', function(req, res){
res.render('index');
});

//统一返回格式
var responseData = null;
router.use(function(req,res,next){
responseData={
message:'',
bookInfo: ''
}
next();
});

router.get('/index', function(req, res){
Book.find(function(err, books){
if(err){
console.log(err);
}else{
responseData.message = '所有数据查询成功';
responseData.bookInfo = books;
res.json(responseData);
return;
}
});
});

module.exports = router;

list.js

var express = require('express');
//创建路有对象
var  router = express.Router();
var Book =require('../models/book');
//统一返回格式
var responseData = null;
router.use(function(req,res,next){
responseData={
message:'',
bookInfo: ''
}
next();
});

router.get('/', function(req, res){
res.render('admin/list');
});

//数据列表
router.get('/listnew', function(req, res){
Book.find(function(err, books){
if(err){
console.log(err);
}else{
responseData.message = '所有数据查询成功';
responseData.bookInfo = books;
/*responseData.bookInfo.id = books._id;*/
res.json(responseData);
return;
}
});
});

//更新数据
//直接去后台页面
//删除数据
router.delete('/delete', function(req, res){
var id = req.query.id;

if(id){
Book.remove({
_id: id
}, function(err,book){
if(err){
console.log(err);
}
responseData.message = '数据删除成功';
res.json(responseData);
return;
});
}
});

module.exports = router;

watch.js

var express = require('express');
//创建路有对象
var  router = express.Router();
var Book =require('../models/book');

router.get('/', function(req, res){
res.render('admin/watch');
});

//统一返回格式
var responseData = null;
router.use(function(req,res,next){
responseData={
message:'',
bookInfo: ''
}
next();
});

//详情页/展示页
router.get('/look', function(req, res) {
var id = req.query.id;

Book.findOne({
_id: id
}).then(function(book){
if(!book){
responseData.message='该id在数据库中不存在！';
res.json(responseData);
return;
}else{
responseData.message='获取当前页面成功！';
responseData.bookInfo = book;
res.json(responseData);
return;
}
});
});

module.exports = router;

上面这些是后台路由的代码，前端的请求脚本代码我不打算放了，相信我这种水平能做的，大家都能实现的，

图书数据模式schemas

//book.js
//模式
//这里面放与书相关的信息
var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var BookSchema = new Schema({
bookname: String,
username: String,
publishtime: Number,
bookinfo:String,
meta:{
createAt:{
type: Date,
default: Date.now()
},
updateAt: {
type: Date,
default: Date.now()
}
}
});

//为模式添加方法
//每次保存一个book数据之前都会调用这个方法
BookSchema.pre('save', function(next){
if(this.isNew) {
this.meta.createAt = this.meta.updateAt = Date.now();
}else{
this.meta.updateAt = Date.now();
}

next();
});

//静态方法,通过模型实例化之后才会有效
BookSchema.static = {
//取出目前数据库所有的数据
fetch: function(cb){
return this
.find({})
.sort('meta.updateAt')//通过时间顺序对数据进行排序
.exec(cb);//执行回调方法
},
findById: function(id, cb){
return this
.findOne({_id: id})
.exec(cb);
}
};

module.exports = BookSchema;

图书数据模型

//book.js
//模型
//用来初始化一个模式，成为一个有用的数据库对象
var mongoose = require('mongoose');
var BookSchema = require('../schema/book');
var Book = mongoose.model('Book', BookSchema);

module.exports = Book;

测试网站效果

开启数据库：我是使用最原始的方式，在本地下好的mogondb数据库文件下找到bin目录，打开mogond.exe文件，然后在romogondb工具下建立一个链接name，链接即可开启数据库；或是在bin目录下cmd运行下面命令

mongod --dbpath=（项目放数据库运行数据的文件目录，及这里的db文件夹目录） --port=27017 #这是链接数据库端口号，可以自己设定

开启express服务器：在项目目录下运行命令

node app.js

如果显示数据库已经链接好了，便可以在浏览器中查看效果了：

localhost:3000 #首页
localhost:3000/admin #后台管理页
localhost:3000/list #列表页

问题

查看详情页

我们通过a标签的href属性，查询字符串的形式传给后台相应的id，然后查看该ID的所以信息，在展示到页面上，请求代码如下：

$.ajax({
type: 'GET',
url: 'watch/look?id='+getSearchString('id'),
data: {
// id: getSearchString('id')
},
dataType:'json',
success: function(data){
var data = data.bookInfo;
//展示到页面。。。
},
error: function(){
console.log(err);
}
});

网站截图如下

首页



后台管理



列表页



romongodb工具使用

建站总结

学习node已经断断续续已经差不多三个月了，用心的学习效果还是很棒的，这个网站很简单，但是基本的一些功能有实现，所以会在继续添加新的功能，node学习中，我觉得最重要的是把前后端分离，逻辑分清，然后就是异步编程的使用。大概就是这些了，希望这次的练习能让自己得到一些成长，自己也会继续学习提升能力的。