Nodejs发展迅速。目前最火的Nodejs构建框架是express,Github上32kstar就是明证。下面以Nodejs为中心搭建一个简单的demo,包括前后端。不管开发什么项目,有了脚手架之后,理解和开发都会更容易。一个简单的演示可以让您快速了解工作流程。事不宜迟,让我们开始构建吧!一、安装配置环境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.创建并初始化项目首先进入你的工作目录新建一个项目目录,通过npminit命令为你的项目打开D:\WWW>mkdirnodejs-express-mysql-jade&&cdnodejs-express-mysql-jade创建一个package.json文件。D:\WWW\nodejs-express-mysql-jade>npminit这个命令会要求你输入一些参数,包括应用名称、版本等,你可以直接回车设置默认值。需要注意的是,其中一个是entrypoint:,它的值是项目的入口文件,你可以设置成你想要的名字,比如app.js或者index.js等,这里我选择app默认情况下.js。1.3.安装express和应用生成器express-generator直接通过npm安装生成器express-generatornpminstallexpressexpress-generator-g然后使用express[name]或者直接express命令构建项目;name是你输入的文件名,不是在当前目录下填建的。express搭建好后的目录结构:然后安装所有的依赖包。如果你写的是上面的[name],那么进入[name]下的目录,运行npminstall。如果不写名字,直接在当前目录运行npminstall。npminstall1.4,运行项目,运行命令setDEBUG=myapp&npmstart,然后在浏览器中打开http://localhost:3000/网址就可以看到应用了。当然,每次更新代码都重新执行命令是很低效的。安装nodemonnpminstallnodemon-g修改package.json:"scripts":{"start":"setDEBUG=myapp&nodemon./bin/www"},之后每次更新文件,服务器都会自动更新启动,直接去页面刷新即可。到这里第一步的搭建工作就结束了。2、连接后台2.1.安装mysql并连接数据库npminstallmysql-g安装包后,在项目根目录下新建两个目录如下图红框所示。在本地建一个数据库用户,并创建一个用户表,然后添加三个字段id,name,age;whereconf.js://MySQL数据库连接配置module.exports={mysql:{host:'localhost',user:'root',password:'',database:'user',//之前建的用户表是位于此数据库端口:3306}};userSqlMapping.js:varuser={insert:'INSERTINTOuser(name,age)VALUES(?,?)',update:'UPDATEuserSETname=?,age=?WHEREid=?',delete:'DELETEFROMuserWHEREid=?',queryById:'SELECT*FROMuserWHEREid=?',queryAll:'SELECT*FROMuser'};module.exports=user;userDao.js://实现与MySQL的交互varmysql=require('mysql');var$conf=require('../conf/conf');//var$util=require('../util/util');var$sql=require('./userSqlMapping');//使用连接池提高性能varpool=mysql.createPool($conf.mysql);//返回JSON方法到前台varjsonWrite=function的简单包装器(res,ret){if(typeofret==='undefined'){res.json({code:'1',msg:'操作失败'});}else{res.json(ret);}};module.exports={add:function(req,res,next){pool.getConnection(function(err,connection){//获取前台传过来的参数varparam=req.query||req.params;//建立连接并向表中插入值//'INSERTINTOuser(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){//通过Id删除pool.getConnection(function(err,connection){console.log(req.query.id);varid=+req.query.id;connection.query($sql.delete,id,function(err,result){if(result.affectedRows>0){jsonWrite(res,result);result={code:200,msg:'清除成功'};else{result=void0;}jsonWrite(res,result);connection.release();});});},updateUser:function(req,res,next){varparam=req.body;(参数);if(param.name==null||param.age==null){jsonWrite(res,undefined);返回;}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:结果//});//第二个参数在jade中可以直接使用//}else{//res.render('fail',{//result:result//});//}jsonWrite(res,result);connection.release();});});},queryById:function(req,res,next){varid=+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:'listpage',result:result});connection.release();});});}};2.2、更新路由编辑routes/users.jsvarexpress=require('express');varrouter=express.Router();varuserDao=require('../dao/userDao');/*GET用户列表。*/router.get('/',function(req,res,next){res.send('respondwitharesource');});//添加用户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先安装bowernpminstallbower-g安装bower后,编辑.bowerrc文件,将下载的包放在相应的位置:{"directory":"public/libs"}安装bootstrap包:bowerinstallbootstrap但是bower最近好像在维护,所以使用npm安装bootstrap和jquery包。npminstallbootstrap@3--savenpminstalljquery--save安装后,由于没有使用webpack,管理包模块不是那么方便。于是使用gulp直接拉包到资源目录下publicnpminstallgulp-g在package.json同级目录下构建一个gulpfile.js文件,输入如下代码:vargulp=require('gulp');gulp.task('moveJquery',function(){returngulp.src('node_modules/jquery/*/*').pipe(gulp.dest('public/libs/jquery'));});gulp.task('moveBootstrap',['moveJquery'],function(){returngulp.src('node_modules/bootstrap/*/*/*').pipe(gulp.dest('public/libs/bootstrap/'));});在命令行输入:gulpmoveBootstrap这样就把node_modules下的包拉到public/libs下,最后在layout.jade上导入对应的文件:doctypehtmlhtmlheadtitle#{title}link(rel='stylesheet',href='/libs/bootstrap/dist/css/bootstrap.min.css')脚本(src='/libs/jquery/dist/jquery.min.js')脚本(src='/libs/bootstrap/dist/js/bootstrap.min.js')bodyblockcontent其他视图不在此处列出。完成所有工作后,在浏览器中输入localhost:3000/users/queryAll,完成所有操作如下图所示。运行结果图:添加用户:编辑用户信息:用户信息列表:过滤用户信息,这里简单写成根据id过滤,这里不重点说了:到这里就结束了。对于刚刚接触Nodejs的童鞋来说,这是一个相当不错的demo。下次继续完善前端工具的内容。webpack配置热更新等。..这样,你更新代码后,直接进入页面就可以看到效果,甚至不需要按F5。这些细节将大大提高开发效率。项目地址:Demo,只想了解过程不想搭建的童鞋直接克隆到本地即可。如果对您有一点帮助,请给个star吧!
