前一段时间,公司组织了一次NodeJs的技术分享,自己有幸去听了听,第一次接触NodeJs,后来经过自己学习和探索,完成了一个很简单的Web演示项目,在这里和初学者做以分享,开发工具:WebStorm 10.04+MySql5.6;框架:Node+ExpressNode;版本:v4.2.3;视图渲染:jade模板引擎。

项目代码结构:

比较核心和关键的当然就是node开源的插件库,都可以npm命令快速的安装和卸载,这一点很像Maven,提供我们express框架和mysql的连接库,项目中这些代码库默认都在node_modules目录下;其次就是node在web项目开发中比较重要的路由中间件了,其主要功能是提供请求路由映射,有点像struts2框架的作用;再者就是views目录下存放我们需要的web展示模板,这里使用jade模板引擎;public目录存放web中用到的静态资源文件;最后为了方便代码的管理,将与数据库交互的代码单独放在dao目录下,下面分别贴出几个比较重要的源代码:

 var mysql=require("mysql");
var localConnection=mysql.createConnection({
host:"localhost",
user:"root",
password:"123456",
database:"test"
}); exports.queryCount=function(queryParam,callback){ var sql='select count(1) as total from company where 1=1';
if(queryParam.name){
sql=sql+' and name like ?';
}
if(queryParam.registNum){
sql=sql+' and registNum like ?';
}
var param=[queryParam.name,queryParam.registNum];
localConnection.query(sql,param,callback);
}
exports.queryAll=function(queryParam,callback){
var sql='select * from company where 1=1';
var param=new Array();
if(queryParam.name){
sql=sql+' and name like ?';
param[0]=queryParam.name;
}
if(queryParam.registNum){
sql=sql+' and registNum like ?';
param[1]=queryParam.registNum;
}
sql=sql+' limit ?,?';
param[2]=(queryParam.pageIndex-1)*queryParam.pageSize;
param[3]=queryParam.pageSize;
localConnection.query(sql,param,callback);
}
exports.delete=function(id,callback){
var sql="delete from company where id=?";
var param=[id];
localConnection.query(sql,param,callback);
}
exports.save=function(company,callback){
var saveSql="insert into company(id,name,address,registNum) values(?,?,?,?)";
var args=new Array();
args[0]=company.id;
args[1]=company.name;
args[2]=company.address;
args[3]=company.registNum;
localConnection.query(saveSql,args,callback);
}
exports.detail=function(id,callback){
var sql="select * from company where id=?"
var param=[id];
localConnection.query(sql,param,callback);
}
exports.update=function(company,callback){
var updateSql="update company set name=?,address=?,registNum=? where id=?";
var param=[company.name,company.address,company.registNum,company.id];
localConnection.query(updateSql,param,callback);
}
 var express = require('express');
var dao=require('../dao/dao');
var router = express.Router(); /* GET users listing. */
router._list=function(req, res, next){
var name=(req.body.name||req.query.name);
if(!name){
name="";
}else{
name=name.replace(/\t/g,"");
}
var registNum=(req.body.registNum||req.query.registNum);
if(!registNum){
registNum="";
}else{
registNum=registNum.replace(/\t/g,"");
}
var pageIndex=req.params.pageIndex;
if(!pageIndex) pageIndex=1;
var queryParam={};
queryParam.pageIndex=pageIndex;
queryParam.pageSize=15;
queryParam.name='%'+name+'%';
queryParam.registNum='%'+registNum+'%';
dao.queryCount(queryParam,function(err,count){
if(!err){
dao.queryAll(queryParam,function(err,list){
if(!err){
var num=count[0].total;
var totalPage=Math.ceil(num/15);
res.render('company/list',{dataList:list,totalCount:num,totalPage:totalPage,pageIndex:pageIndex,name:name,registNum:registNum,title:'首页'});
}
}) }
});
}
router.delete=function(req,res,next){
var id=req.params.id;
var pageIndex=req.params.pageIndex;
var name=req.body.name;
var registNum=req.body.registNum;
dao.delete(id,function(err,result){
if(err){
return next(result);
}
res.redirect('/company/list/'+pageIndex+"?name="+name+"&registNum="+registNum);
})
} router.save=function(req,res,next){
var company={};
var date=new Date();
company.id=Date.parse(date);
company.name=req.body.name;
company.address=req.body.address;
company.registNum=date.getFullYear()+""+date.getMonth()+""+date.getDay();
dao.save(company,function(err,result){
if(err){
return next(result);
}
res.redirect('/company/list/1');
})
}
router.detail=function(req,res,next){
var id=req.params.id;
dao.detail(id,function(err,r){
if(err) throw err;
r[0].success=true;
console.log(r[0]);
res.send(r[0]);
})
}
router.update=function(req,res,next){
var company={id:req.body.id,name:req.body.name,address:req.body.address,registNum:req.body.registNum};
dao.update(company,function(err,r){
if(err) throw err;
res.redirect('/company/list/1')
})
}
module.exports = router;
 var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser'); var routes = require('./routes/index');
var users = require('./routes/users'); var app = express(); // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); // uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(favicon(__dirname + '/public/favicon.ico')); app.use('/', routes);
app.use('/company/list/:pageIndex', users._list);
app.use('/company/delete/:id/:pageIndex',users.delete);
app.use('/company/save',users.save);
app.use('/company/detail/:id',users.detail);
app.use('/company/update',users.update); // catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
}); // error handlers // development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
} // production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
}); module.exports = app;
 include ../layout
body
form(id='searchForm',role='form',action='/company/list',method='post')
.row
.panel.panel-default
.panel-body
.row.form-group.form-group-sm
.col-sm-4
.input-group
span.input-group-addon='公司名称'
.input-group.col-sm-12
input(name='name',placeholder='请输入公司名称',class='form-control' value='#{name}')
.col-sm-4
.input-group
span.input-group-addon='注册工商号'
.input-group.col-sm-12
input(name='registNum',placeholder='请输入公司注册工商号',class='form-control' value='#{registNum}')
.col-sm-2
button(type='button',class='btn btn-primary btn-sm',id='qryBtn') 查询
button(type='button',class='btn btn-primary btn-sm',id='resetBtn', style='margin-left:10px') 重置
.row
.panel.panel-default
.panel-heading
.btn-group
a.btn.btn-default.btn-xs.new-btn='新建'
table.table.table-bordered.table-hover.table-striped.table-condensed
thead
tr
th='编号'
th='公司名称'
th='公司地址'
th='注册工商号'
th='操作'
tbody
each rowData,index in dataList
tr
td=rowData.id
td=rowData.name
td=rowData.address
td=rowData.registNum
td
a(id='#{rowData.id}').btn.btn-default.btn-xs.btn-del='删除'
a(id='#{rowData.id}').btn.btn-default.btn-xs.btn-update='修改'
include ../pageInfo script(type='text/javascript').
$(".new-btn").click(function(){
var opt={id:"",name:"",address:"",registNum:"",title:"新建注册公司",url:"/company/save"};
createCommonWin(opt);
});
$(".btn-update").click(function(){
var id=$(this).attr("id");
$.ajax({
type:"GET",
async:false,
dataType:"json",
url:"/company/detail/"+id+"",
success:function(data){
if(data.success){
var opt={id:id,name:data.name,address:data.address,registNum:data.registNum,title:"修改注册公司",url:"/company/update"};
createCommonWin(opt);
}
}
});
});
$("#qryBtn").click(function(){
var queryUrl=$('form').attr('action');
$("form").attr('action',queryUrl+'/'+parseInt($('span.nowPage').html()));
$("form").submit();
});
$("#resetBtn").click(function(){
$("form input").val("");
});
$('.btn-del').click(function(){
var id=$(this).attr('id');
var pageIndex=$("li").find("span.nowPage").html();
bootbox.confirm({
buttons: {
confirm: {
label: '确定',
className: 'btn-myStyle'
},
cancel: {
label: '取消',
className: 'btn-default'
}
},
message: '删除要删除本条记录?',
callback: function (result) {
if (result) {
$("form").attr('action', '/company/delete/'+id+'/'+pageIndex);
$("form").submit();
}
},
title: "确认提示"
});
});
function createCommonWin(opt){
bootbox.dialog({
message: "<div class='row'>" +
"<div class='row form-group form-group-sm' style='text-align: center'>" +
"<form class='form-horizontal' id='createForm' role='form' method='post'>" +
'<div class="form-group form-group-sm" style="margin-left:20px"> ' +
'<input type="hidden" value="' + opt.id + '" name="id" id="id">' +
'<input type="hidden" value="' + opt.registNum + '" name="registNum" id="registNum">' +
'<label class="col-sm-2 control-label"><span style="color:red;font-weight: bolder">*</span>公司名称</label> ' +
'<div class="col-sm-4"><input id="name" type="text" name="name" value="'+opt.name+'" class="form-control input-md">' +
'</div></br></br> ' +
'<div class="form-group form-group-sm"> ' +
'<label class="col-sm-2 control-label" style="margin-left:10px;"><span style="color:#ff0000;font-weight: bolder">*</span>公司地址</label> ' +
'<div class="col-sm-4"><input style="width:180px" id="address" type="text" name="address" value="'+opt.address+'" class="form-control input-md">' +
'</div></br></br> ' +
"</form>" +
"</div>" +
"</div>",
title: opt.title,
buttons: {
Cancel: {
label: "取消",
className: "btn-default",
callback: function () {
return true;
}
},
OK: {
label: "保存",
className: "btn-primary",
callback: function () {
var subForm = $("#createForm");
if (subForm.find("#name").val() == "") {
alert("公司名称不能为空!");
return false;
} else if (subForm.find("#address").val() == "") {
alert("公司地址不能为空!");
return false;
} else {
subForm.attr("action", opt.url);
subForm.submit();
return true;
}
}
}
}
});
}

最后运行的界面:

NodeJs+Express实现简单的Web增删改查的更多相关文章

  1. 基于nodejs+express+mysql+webstorm+html的 增删改查

    一.工具准备 Nodejs框架,WebStorm.Mysql服务.Navicat.此篇文章只讲项目的搭建过程,至于Nodejs,WebStorm.Mysql的下载.安装与配置网上资源很多,请自行查阅, ...

  2. salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  3. 【Mybatis】简单的mybatis增删改查模板

    简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...

  4. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  5. 最简单的mybatis增删改查样例

    最简单的mybatis增删改查样例 Book.java package com.bookstore.app; import java.io.Serializable; public class Boo ...

  6. node+express+mysql实现简单的数据增删改查

    前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp  新建一个以ejs为模板的expre ...

  7. SQL简单语句(增删改查)

    简单的SQL语句增删改查操作 说明: 在mysql里面亲测结果正确    用到的表(学生表:studnets) 1.创建一个学生表,(学号,姓名,性别,家庭住址) mysql> create t ...

  8. KbmMemTable的简单应用(增删改查示例)

    //kbmMemTable unit Unit1;   interface   uses   Windows, Messages, SysUtils, Variants, Classes, Graph ...

  9. Asp.net简单三层+Sqllite 增删改查

    新建项目à新建一个空白解决方案 在Model新建一个实体类 using System; using System.Collections.Generic; using System.Linq; usi ...

随机推荐

  1. installshield制作的安装包卸载时提示重启动的原因以及解决办法

    原文:installshield制作的安装包卸载时提示重启动的原因以及解决办法 有时候卸载installshield制作的安装包程序,卸载完会提示是否重启电脑以完成所有卸载,产生这个提示的常见原因有如 ...

  2. 增加 Java 有几个好习惯表现

    以下是一些参考网络资源中的摘要Java编程在一些地方尽可能做. 1. 尝试使用单个例如在合适的场合 使用单例可以减轻负荷的负担,缩短加载时间.提高装载效率,但并不是所有的地方都适合一个案例.简单的说, ...

  3. HashMap之Hash碰撞冲突解决方案及未来改进

    说明:参考网上的两篇文章做了简单的总结,以备后查(http://blogread.cn/it/article/7191?f=wb  ,http://it.deepinmind.com/%E6%80%A ...

  4. JSON解析之Json-lib

    1.Json-lib介绍 Json-lib是一个java类库,它用于把beans, maps, collections, java arrays and XML 传递给一个Json,或者返回来把Jso ...

  5. waitFor和waitForAny的实现

    waitFor和waitForAny的实现 在实现waitFor方法之前,我们先要搞明白下面这些问题: 1. waitFor方法的形参有限制吗? 没有!如果形参是Task类型,不应该启动Task,如果 ...

  6. DDD 应对具体业务场景,Domain Model 重新设计

    DDD 应对具体业务场景,Domain Model 重新设计 写在前面 上联:no zuo no die why you try 下联:no try no high give me five 横批: ...

  7. Visual Studio 2013发布Cloud Service至Azure China

    Visual Studio 2013发布Cloud Service至Azure China <Windows Azure Platform 系列文章目录> 之前有很多网友询问我如何通过VS ...

  8. 学习selenium python版最初的一个小想法

    这个还是我在刚开始学习selenium的时候做的,自己觉得有点意思,在接下来我会基于目前我对于selenium的一些深入研究,写下我对selenium的理解以及UIAutomation的一些理解,以此 ...

  9. 7.29 DFS总结

    7.29   黄昏时刻 (一) 全排列 建模: 给了数字n 代表从1-n 个数全排列 思路: 1. 输入n,如果n值为‘0’,则退出程序 2. vis[i] 保存 是否对第i个数字进行访问 3. df ...

  10. 用邻接表或vector实现存边以及具体如何调用[模板]

    存边: 对于指针实现的邻接表: struct edge{ int from,next,to,w; }E[maxn]; int head[maxn],tot=0;//head初始化为-1: void a ...