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

不管开发什么项目,有了脚手架之后不管对于理解还是开发都会变得容易。简单的demo能让你迅速地了解到工作流程。废话不多说,开始构建吧!

1、安装和配置环境
1.1、 安装Node.js与NPM
Windows下安装 Node.js 还是比较方便的,请自行下载并安装, 安装包及源码下载地址为: 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 Idpool.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
htmlheadtitle #{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')bodyblock content复制代码

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

完成全部工作之后,在浏览器上输入localhost:3000/users/queryAll就可以完成如下图所示的所有操作啦。

运行结果图:

添加用户:

编辑用户信息:

用户信息列表:

过滤用户信息,这里只简单地写了根据id过滤,这里不重点讲这个:

讲到这里,就已经讲完了。对于刚接触Nodejs的童鞋来说,这是个蛮不错的demo。

项目地址:Demo,只想了解流程又不想构建的童鞋直接clone到本地。对你有丁点的帮助请给个star哈!

一个简单express+jade+mysql+bootstrap+nodejs的demo相关推荐

  1. php简单的mysql类_一个简单的php mysql操作类

    本文分享一个简单的php.mysql操作类,很简单,主要是数据的连接.查询等.有需要的朋友参考下吧. 分享一段php.mysql操作类的代码,供初学的朋友参考. 一个简单的类使用php和mysql数据 ...

  2. 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

    简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...

  3. 神经进化学的简介和一个简单的CPPN(Compositional Pattern Producing Networks)DEMO

    近期迷上神经进化(Neuroevolution)这个方向,感觉是Deep Learning之后的一个非常不错的研究领域. 该领域的一个主导就是仿照人的遗传机制来进化网络參数与结构.注意,连网络结构都能 ...

  4. 一个简单的WebService调用天气预报接口的demo

    很长一段时间没更新博客了,最近刚跳槽成功,工作也慢慢稳定下来了,后面也会陆陆续续更新. 现在的公司用到了WebService,以前没用过,所以学习一下记录下来. 什么是WebService? 首先附上 ...

  5. 一个简单的 jQuery 图片裁剪插件----cropper

    浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...

  6. 用nodejs搭建一个简单的服务器

    使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安 ...

  7. 一个简单的学籍信息管理系统,基于PHP和Bootstrap的实现

    下载地址:https://download.csdn.net/download/aav123/20814646 项目介绍 一个简单的学籍信息管理系统,基于PHP和Bootstrap的实现 系统说明 适 ...

  8. express+node+mysql简单博客系统(一):登录接口

    今年一直想学一下node,现在马上就到年底了,赶紧安排! 准备 使用node.express和mysql开发简单的博客系统: 1.先安装node.express和mysql: 2.创建node项目,也 ...

  9. NodeJS 搭建一个本地的服务,实现一个简单的公屏发消息

    本 Chat 主要是写关于 Node.js 如何搭建一个本地的服务,然后做一个简单的可以发消息的功能. 安装 Express 安装 Nodemon 使用 Nodemon 安装 socket.io so ...

最新文章

  1. BYOD安全保护的“原生态”方法
  2. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]
  3. struts2 从 action 到 jsp 页面
  4. 手动生成token_手动设计简单的Token验证
  5. 数据结构和算法设计专题之---判断单链表中是否有环,环的长度,环的入口节点...
  6. 最详细的 IDEA调试教程
  7. java数据类型和运算优先级
  8. 浅谈MVC、MVP、MVVM架构模式的区别和联系
  9. 关于caffe-ssd训练时smooth_L1到底参与运算与否的问题
  10. 断路器之一:Hystrix 使用与分析
  11. 西电计算机考研数学,西安电子科技大学21考研数学高分上岸学长经验分享
  12. 【winRAR去广告弹窗】
  13. Githup上第三方控件的地址收藏
  14. 电脑操作实用技巧60招(转)
  15. 【FPGA教程案例10】基于Verilog的复数乘法器设计与实现
  16. 万德L2接口是什么?
  17. 艾永亮:打造超级产品做到这五点,有效提高用户对企业的印象
  18. pwm原理与stm32控制
  19. SDNU-1183.纪念品分组
  20. 代理、网关与隧道傻傻分不清

热门文章

  1. AI一分钟 | 特朗普以国家安全为由否决博通收购高通;阿里发起时尚AI算法大赛
  2. MySQL 性能优化的 9 种姿势,面试再也不怕了!
  3. 21 款 yyds 的 IDEA插件
  4. 大文件上传服务器:支持超大文件HTTP断点续传的实现办法
  5. delete后加 limit是个好习惯么 !
  6. 用Python实现深度学习框架
  7. GNN教程:Weisfeiler-Leman算法!
  8. Deep learning调参经验
  9. 西湖大学全是“天坑”?校长施一公直播回应:不必过于关注就业收入
  10. 这位北大CS硕士小老弟,简直是“卷怪”!