一个简朴express+jade+mysql+bootstrap+nodejs的demo

Nodejs迅速发展，现在最热的Nodejs构建框架非express莫属，在Github上有32k的star就可以证实。下面就以Nodejs为中间构建一个前后端都包含在内的简朴demo吧。

不论开辟什么项目，有了脚手架以后不论关于明白照样开辟都邑变得轻易。简朴的demo能让你迅速地相识到事情流程。空话不多说，最先构建吧！

1、装置和设置环境
1.1、 装置Node.js与NPM
Windows下装置 Node.js 照样比较轻易的，请自行下载并装置， 装置包及源码下载地点为： https://nodejs.org/en/download/ 。装置历程傻瓜式一向‘NEXT’就可以。装置完成后翻开敕令行输入node -v返回响应的版本号申明环境变量设置胜利了。
NPM 是伴同 Node.js 一同装置的包治理器，新版的 Node.js 已集成了 npm ，所以NPM也一并装置好了。

1.2、竖立并初始化项目
起首，进入到你的事情目次新建一个项目目次并翻开

D:\WWW>mkdir nodejs-express-mysql-jade && cd nodejs-express-mysql-jade

经由过程 npm init 敕令为你的项目竖立一个 package.json 文件。

D:\WWW\nodejs-express-mysql-jade>npm init

该敕令会要求你输入一些参数，包含运用名、版本等，可以直接按回车设置为默许值。须要注重的是，个中有一项为 entry point: ，它的值为项目的进口文件，你可以设置成你想要的称号，比方 app.js 或许 index.js 等，在这儿我就默许挑选了 app.js 。

1.3、装置express和运用生成器express-generator
经由过程npm直接装置生成器express-generator

npm install express express-generator -g

然后运用express [name]或许直接express敕令构建一个项目；name是你输入的文件名，不填就在当前目次构建。

express

构建完成后的目次构造:

然后装置一切的依靠包，假如你写了上面的[name],那末进入到[name]下目次后运转npm install，假如没有写名字，在当前目次直接运转npm install。

npm install

1.4、运转项目

运转敕令

set DEBUG=myapp & npm start

然后在浏览器中翻开 http://localhost:3000/ 网址就可以看到这个运用了。

固然每次更新代码都要重实行一次敕令显得效力低，装置nodemon

npm install nodemon -g

修正package.json：

"scripts": {
"start": "set DEBUG=myapp & nodemon ./bin/www"
},

以后每次只需更新了文件，服务器都邑自动更新并启动了，直接去页面革新即可。

到这里第一步的构建事情已完毕了。

2、衔接背景

2.1、装置mysql并衔接数据库

npm install mysql -g

装置包以后在项目根目次下新建两个目次如下图赤色框所示

在当地建一个数据库user，并建一张user表，然后到场三个字段id、name、age；

个中conf.js：

// MySQL数据库连接设置
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: '',
database:'user', // 前面建的user表位于这个数据库中
port: 3306
}
};

userSqlMapping.js:

var user = {
insert:'INSERT INTO user(name, age) VALUES(? , ?)',
update:'UPDATE user SET name = ?, age = ? WHERE id = ?',
delete: 'DELETE FROM user WHERE id=?',
queryById: 'SELECT * FROM user WHERE id=?',
queryAll: 'SELECT * FROM user'
};
module.exports = user;

userDao.js:

// 完成与MySQL交互
var mysql = require('mysql');
var $cOnf= require('../conf/conf');
// var $util = require('../util/util');
var $sql = require('./userSqlMapping');
// 运用衔接池，提拔机能
var pool = mysql.createPool( $conf.mysql );
// 向前台返回JSON要领的简朴封装
var jsOnWrite= function (res, ret) {
if(typeof ret === 'undefined') {
res.json({
code:'1',
msg: '操纵失利'
});
} else {
res.json(ret);
}
};
module.exports = {
add: function (req, res, next) {
pool.getConnection(function(err, connection) {
// 猎取前台页面传过来的参数
var param = req.query || req.params;
// 竖立衔接，向表中插进去值
// 'INSERT INTO user(id, name, age) VALUES(0,?,?)',
connection.query($sql.insert, [param.name, param.age], function(err, result) {
if(result) {
result = {
code: 200,
msg:'增添胜利'
};
}
// 以json情势，把操纵结果返回给前台页面
jsonWrite(res, result);
// 开释衔接
connection.release();
});
});
},
delete: function (req, res, next) {
// delete by Id
pool.getConnection(function(err, connection) {
console.log(req.query.id);
var id = +req.query.id;
connection.query($sql.delete, id, function(err, result) {
if(result.affectedRows > 0) {
jsonWrite(res, result);
result = {
code: 200,
msg:'删除胜利'
};
} else {
result = void 0;
}
jsonWrite(res, result);
connection.release();
});
});
},
updateUser: function (req, res, next) {
var param = req.body;
console.log(param);
if(param.name == null || param.age == null) {
jsonWrite(res, undefined);
return;
}
pool.getConnection(function(err, connection) {
connection.query($sql.update, [param.name, param.age, param.id], function(err, result) {
// 运用页面举行跳转提醒
// if(result.affectedRows) {
// res.render('suc',{
// title:'胜利页',
// result: result
// }); // 第二个参数可以直接在jade中运用
// } else {
// res.render('fail', {
// result: result
// });
// }
jsonWrite(res, result);
connection.release();
});
});
},
queryById: function (req, res, next) {
var id = +req.query.id; // 为了拼集准确的sql语句，这里要转下整数
pool.getConnection(function(err, connection) {
connection.query($sql.queryById, id, function(err, result) {
jsonWrite(res, result);
connection.release();
});
});
},
queryAll: function (req, res, next) {
pool.getConnection(function(err, connection) {
connection.query($sql.queryAll, function(err, result) {
// jsonWrite(res, result);
res.render('list',{
title:'列表页',
result:result
});
connection.release();
});
});
}
};

2.2、更新路由
编辑routes/users.js

var express = require('express');
var router = express.Router();
var userDao = require('../dao/userDao');
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
// 增添用户
router.get('/addUser', function(req, res, next) {
userDao.add(req, res, next);
});
router.get('/addUserMiddle', function(req, res, next) {
res.render('addUser',{
title:'增加用户页'
});
});
//检察悉数用户
router.get('/queryAll', function(req, res, next) {
userDao.queryAll(req, res, next);
});
//查询指定用户
router.get('/query', function(req, res, next) {
userDao.queryById(req, res, next);
});
//删除用户
router.get('/deleteUser', function(req, res, next) {
userDao.delete(req, res, next);
});
//更新用户信息
router.post('/updateUser', function(req, res, next) {
userDao.updateUser(req, res, next);
});
module.exports = router;

2.3、装置bootstrap增加对应的视图文件

装置bootstrap先装置bower

npm install bower -g

装置完了bower以后，编辑.bowerrc文件。可以把下载的包放在对应的位置上：

{
"directory" : "public/libs"
}

装置bootstrap包：

bower install bootstrap

不过近来bower彷佛一向在保护，如许的话就用npm装置bootstrap和jquery包了。

npm install bootstrap@3 --save

npm install jquery --save

装置完了以后，由于没用webpack，包模块治理起来没那末轻易。所以就用gulp直接把包拉到资本目次public下

npm install gulp -g

在跟package.json同目次下建一个gulpfile.js文件，输入以下代码：

var gulp = require('gulp');
gulp.task('moveJquery' , function(){
return gulp.src('node_modules/jquery/*/*')
.pipe(gulp.dest('public/libs/jquery'));
});
gulp.task('moveBootstrap' ,['moveJquery'] , function(){
return gulp.src('node_modules/bootstrap/*/*/*')
.pipe(gulp.dest('public/libs/bootstrap/'));
});

在敕令行输入：

gulp moveBootstrap

如许就把node_modules下的包拉到了public/libs下了

末了在layout.jade上引入响应的文件：

doctype html
html
head
title #{title}
link(rel='stylesheet', href='/libs/bootstrap/dist/css/bootstrap.min.css')
script(src='/libs/jquery/dist/jquery.min.js')
script(src='/libs/bootstrap/dist/js/bootstrap.min.js')
body
block content

其他的视图就不在这里一一列举了。

完成悉数事情以后，在浏览器上输入localhost:3000/users/queryAll就可以完成如下图所示的一切操纵啦。

运转结果图：

增加用户：

编辑用户信息：

用户信息列表：

过滤用户信息，这里只简朴地写了依据id过滤，这里不重点讲这个：

讲到这里，就已讲完了。关于刚打仗Nodejs的童鞋来讲，这是个蛮不错的demo。

下次继承完美前端东西方面的内容。webpack设置热更新等等。。。如许在更新完你的代码以后直接去页面就可以看到结果了，连F5都不必按，这些细节会大大地进步开辟效力。

项目地点：Demo，只想相识流程又不想构建的童鞋直接clone到当地哦。对你有丁点的协助请给个star哈！