菜单

NodeJS+Express完成轻松的Web增加和删除改查

2019年6月1日 - LINUX

接着选用好文件类型:

  1 include ../layout
  2 body
  3     form(id='searchForm',role='form',action='/company/list',method='post')
  4         .row
  5             .panel.panel-default
  6                 .panel-body
  7                    .row.form-group.form-group-sm
  8                        .col-sm-4
  9                           .input-group
 10                               span.input-group-addon='公司名称'
 11                               .input-group.col-sm-12
 12                                   input(name='name',placeholder='请输入公司名称',class='form-control' value='#{name}')
 13                        .col-sm-4
 14                            .input-group
 15                                span.input-group-addon='注册工商号'
 16                                .input-group.col-sm-12
 17                                    input(name='registNum',placeholder='请输入公司注册工商号',class='form-control' value='#{registNum}')
 18                    .col-sm-2
 19                        button(type='button',class='btn btn-primary btn-sm',id='qryBtn') 查询
 20                        button(type='button',class='btn btn-primary btn-sm',id='resetBtn', style='margin-left:10px') 重置
 21     .row
 22         .panel.panel-default
 23             .panel-heading
 24                 .btn-group
 25                      a.btn.btn-default.btn-xs.new-btn='新建'
 26             table.table.table-bordered.table-hover.table-striped.table-condensed
 27                 thead
 28                     tr
 29                         th='编号'
 30                         th='公司名称'
 31                         th='公司地址'
 32                         th='注册工商号'
 33                         th='操作'
 34                 tbody
 35                     each rowData,index in dataList
 36                         tr
 37                             td=rowData.id
 38                             td=rowData.name
 39                             td=rowData.address
 40                             td=rowData.registNum
 41                             td
 42                                a(id='#{rowData.id}').btn.btn-default.btn-xs.btn-del='删除'
 43                                a(id='#{rowData.id}').btn.btn-default.btn-xs.btn-update='修改'
 44 include ../pageInfo
 45 
 46 script(type='text/javascript').
 47      $(".new-btn").click(function(){
 48           var opt={id:"",name:"",address:"",registNum:"",title:"新建注册公司",url:"/company/save"};
 49           createCommonWin(opt);
 50      });
 51      $(".btn-update").click(function(){
 52           var id=$(this).attr("id");
 53          $.ajax({
 54              type:"GET",
 55              async:false,
 56              dataType:"json",
 57              url:"/company/detail/"+id+"",
 58              success:function(data){
 59                  if(data.success){
 60                      var opt={id:id,name:data.name,address:data.address,registNum:data.registNum,title:"修改注册公司",url:"/company/update"};
 61                       createCommonWin(opt);
 62                  }
 63              }
 64          });
 65      });
 66      $("#qryBtn").click(function(){
 67          var queryUrl=$('form').attr('action');
 68            $("form").attr('action',queryUrl+'/'+parseInt($('span.nowPage').html()));
 69            $("form").submit();
 70      });
 71      $("#resetBtn").click(function(){
 72          $("form input").val("");
 73      });
 74      $('.btn-del').click(function(){
 75          var id=$(this).attr('id');
 76          var pageIndex=$("li").find("span.nowPage").html();
 77          bootbox.confirm({
 78              buttons: {
 79                  confirm: {
 80                      label: '确定',
 81                      className: 'btn-myStyle'
 82                  },
 83                  cancel: {
 84                      label: '取消',
 85                      className: 'btn-default'
 86                  }
 87              },
 88              message: '删除要删除本条记录?',
 89              callback: function (result) {
 90                  if (result) {
 91                      $("form").attr('action', '/company/delete/'+id+'/'+pageIndex);
 92                      $("form").submit();
 93                  }
 94              },
 95              title: "确认提示"
 96          });
 97      });
 98      function createCommonWin(opt){
 99          bootbox.dialog({
100              message: "<div class='row'>" +
101              "<div class='row form-group form-group-sm' style='text-align: center'>" +
102              "<form class='form-horizontal' id='createForm' role='form' method='post'>" +
103              '<div class="form-group form-group-sm" style="margin-left:20px"> ' +
104              '<input type="hidden" value="' + opt.id + '" name="id" id="id">' +
105              '<input type="hidden" value="' + opt.registNum + '" name="registNum" id="registNum">' +
106              '<label class="col-sm-2 control-label">*公司名称</label> ' +
107              '<div class="col-sm-4"><input id="name" type="text"  name="name"  value="'+opt.name+'" class="form-control input-md">' +
108              '</div></br></br> ' +
109              '<div class="form-group form-group-sm"> ' +
110              '<label class="col-sm-2 control-label" style="margin-left:10px;">*公司地址</label> ' +
111              '<div class="col-sm-4"><input style="width:180px" id="address" type="text" name="address"  value="'+opt.address+'" class="form-control input-md">' +
112              '</div></br></br> ' +
113              "</form>" +
114              "</div>" +
115              "</div>",
116              title: opt.title,
117              buttons: {
118                  Cancel: {
119                      label: "取消",
120                      className: "btn-default",
121                      callback: function () {
122                          return true;
123                      }
124                  },
125                  OK: {
126                      label: "保存",
127                      className: "btn-primary",
128                      callback: function () {
129                          var subForm = $("#createForm");
130                          if (subForm.find("#name").val() == "") {
131                              alert("公司名称不能为空!");
132                              return false;
133                          } else if (subForm.find("#address").val() == "") {
134                              alert("公司地址不能为空!");
135                              return false;
136                          } else {
137                              subForm.attr("action", opt.url);
138                              subForm.submit();
139                              return true;
140                          }
141                      }
142                  }
143              }
144          });
145      }

Ubuntu 编写翻译安装Node.js
http://www.linuxidc.com/Linux/2013-10/91321.htm

正如基本和关键的本来就是node开源的插件库,都能够npm命令神速的装置和卸载,那点很像Maven,提供大家express框架和mysql的连接库,项目中那些代码库暗中同意都在node_modules目录下;其次正是node在web项目开采中比较主要的路由中间件了,其重要作用是提供请求路由映射,有一些像struts2框架的职能;再者正是views目录下存放大家须求的web体现模板,这里运用jade模板引擎;public目录存放web中用到的静态财富文件;最终为了有利于代码的治本,将与数据库交互的代码单独放在dao目录下,上面分别贴出多少个比较根本的源代码:

所需工具:Computer上要安装好nodejs(官方网站https://nodejs.org/en/),下载并安装好nodejs之后,需要在cmd中再安装好express框架:

 

到此,轻巧的应用nodejs+express+MySQL的crud小demo就完事了。每一次多学一些文化的时候,总是至关重要好同事的增派

Node.js入门付出指南国语版
http://www.linuxidc.com/Linux/2012-11/73363.htm

图片 1

 

Ubuntu 1四.04/一5.04上安装配备 Node.js v四.0.0 
http://www.linuxidc.com/Linux/2015-10/123951.htm

Node.Js入门[PDF+相关代码]
http://www.linuxidc.com/Linux/2013-06/85462.htm

默许端口号是三千,由于自家的叁仟被侵占,由此在bin/www中期维修改端口号;

 

①users.html:

 

②add.html

 1 var express = require('express');
 2 var path = require('path');
 3 var favicon = require('serve-favicon');
 4 var logger = require('morgan');
 5 var cookieParser = require('cookie-parser');
 6 var bodyParser = require('body-parser');
 7 
 8 var routes = require('./routes/index');
 9 var users = require('./routes/users');
10 
11 var app = express();
12 
13 // view engine setup
14 app.set('views', path.join(__dirname, 'views'));
15 app.set('view engine', 'jade');
16 
17 // uncomment after placing your favicon in /public
18 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
19 app.use(logger('dev'));
20 app.use(bodyParser.json());
21 app.use(bodyParser.urlencoded({ extended: false }));
22 app.use(cookieParser());
23 app.use(express.static(path.join(__dirname, 'public')));
24 app.use(favicon(__dirname + '/public/favicon.ico'));
25 
26 app.use('/', routes);
27 app.use('/company/list/:pageIndex', users._list);
28 app.use('/company/delete/:id/:pageIndex',users.delete);
29 app.use('/company/save',users.save);
30 app.use('/company/detail/:id',users.detail);
31 app.use('/company/update',users.update);
32 
33 
34 
35 // catch 404 and forward to error handler
36 app.use(function(req, res, next) {
37   var err = new Error('Not Found');
38   err.status = 404;
39   next(err);
40 });
41 
42 // error handlers
43 
44 // development error handler
45 // will print stacktrace
46 if (app.get('env') === 'development') {
47   app.use(function(err, req, res, next) {
48     res.status(err.status || 500);
49     res.render('error', {
50       message: err.message,
51       error: err
52     });
53   });
54 }
55 
56 // production error handler
57 // no stacktraces leaked to user
58 app.use(function(err, req, res, next) {
59   res.status(err.status || 500);
60   res.render('error', {
61     message: err.message,
62     error: {}
63   });
64 });
65 
66 
67 module.exports = app;

③update.html

 

Node.Js入门[PDF+相关代码]
http://www.linuxidc.com/Linux/2013-06/85462.htm

Ubuntu 编写翻译安装Node.js
http://www.linuxidc.com/Linux/2013-10/91321.htm

Node.js
的事无巨细介绍
请点这里
Node.js
的下载地址
请点这里

下边关于Node.js的内容你或许也喜爱

图片 2

末尾运维的分界面:

图片 3

图片 4

世家应该小心到了,views文件夹下的永不是平凡所见的.html文件,而是.ejs文件,于是就须求我们和煦来把它默许的斯特林发动机从EJS改成HTML,修改的操作正是开垦app.js文件,然后将里面壹段代码注释掉并修改成如下:

 

正文永世更新链接地址http://www.linuxidc.com/Linux/2016-12/138297.htm

 

create database testdb;
use testdb;
create table userinfo(
 id                                        int not null auto_increment,
 name                                  varchar(20) not null,
age                                      int not null,
primary key (id)          
)

Node.js
的详细介绍
请点这里
Node.js
的下载地址
请点这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
</head>
<body>
<form action="/users/add" method="post">
    姓名:<input type="text" name="name"><br>
    年龄:<input type="text" name="age"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>
 1 var express = require('express');
 2 var dao=require('../dao/dao');
 3 var router = express.Router();
 4 
 5 /* GET users listing. */
 6 router._list=function(req, res, next){
 7     var name=(req.body.name||req.query.name);
 8     if(!name){
 9         name="";
10     }else{
11         name=name.replace(/\t/g,"");
12     }
13     var registNum=(req.body.registNum||req.query.registNum);
14     if(!registNum){
15         registNum="";
16     }else{
17         registNum=registNum.replace(/\t/g,"");
18     }
19     var pageIndex=req.params.pageIndex;
20     if(!pageIndex) pageIndex=1;
21     var queryParam={};
22     queryParam.pageIndex=pageIndex;
23     queryParam.pageSize=15;
24     queryParam.name='%'+name+'%';
25     queryParam.registNum='%'+registNum+'%';
26     dao.queryCount(queryParam,function(err,count){
27         if(!err){
28             dao.queryAll(queryParam,function(err,list){
29                 if(!err){
30                     var num=count[0].total;
31                     var totalPage=Math.ceil(num/15);
32                     res.render('company/list',{dataList:list,totalCount:num,totalPage:totalPage,pageIndex:pageIndex,name:name,registNum:registNum,title:'首页'});
33                 }
34             })
35 
36         }
37     });
38 }
39 router.delete=function(req,res,next){
40     var id=req.params.id;
41     var pageIndex=req.params.pageIndex;
42     var name=req.body.name;
43     var registNum=req.body.registNum;
44     dao.delete(id,function(err,result){
45         if(err){
46            return next(result);
47         }
48        res.redirect('/company/list/'+pageIndex+"?name="+name+"&registNum="+registNum);
49     })
50 }
51 
52 router.save=function(req,res,next){
53     var company={};
54     var date=new Date();
55         company.id=Date.parse(date);
56         company.name=req.body.name;
57         company.address=req.body.address;
58         company.registNum=date.getFullYear()+""+date.getMonth()+""+date.getDay();
59     dao.save(company,function(err,result){
60         if(err){
61             return next(result);
62         }
63         res.redirect('/company/list/1');
64     })
65 }
66 router.detail=function(req,res,next){
67     var id=req.params.id;
68     dao.detail(id,function(err,r){
69         if(err) throw err;
70         r[0].success=true;
71         console.log(r[0]);
72         res.send(r[0]);
73     })
74 }
75 router.update=function(req,res,next){
76     var company={id:req.body.id,name:req.body.name,address:req.body.address,registNum:req.body.registNum};
77     dao.update(company,function(err,r){
78         if(err) throw  err;
79         res.redirect('/company/list/1')
80     })
81 }
82 module.exports = router;

④user.js

 1 var mysql=require("mysql");
 2 var localConnection=mysql.createConnection({
 3     host:"localhost",
 4     user:"root",
 5     password:"123456",
 6     database:"test"
 7 });
 8 
 9 
10 exports.queryCount=function(queryParam,callback){
11 
12     var sql='select count(1) as total from company where 1=1';
13     if(queryParam.name){
14         sql=sql+' and name like ?';
15     }
16     if(queryParam.registNum){
17         sql=sql+' and registNum like ?';
18     }
19     var param=[queryParam.name,queryParam.registNum];
20     localConnection.query(sql,param,callback);
21 }
22 exports.queryAll=function(queryParam,callback){
23     var sql='select * from company where 1=1';
24     var param=new Array();
25     if(queryParam.name){
26         sql=sql+' and name like ?';
27         param[0]=queryParam.name;
28     }
29     if(queryParam.registNum){
30         sql=sql+' and registNum like ?';
31         param[1]=queryParam.registNum;
32     }
33     sql=sql+' limit ?,?';
34     param[2]=(queryParam.pageIndex-1)*queryParam.pageSize;
35     param[3]=queryParam.pageSize;
36     localConnection.query(sql,param,callback);
37 }
38 exports.delete=function(id,callback){
39     var sql="delete from company where id=?";
40     var param=[id];
41     localConnection.query(sql,param,callback);
42 }
43 exports.save=function(company,callback){
44     var saveSql="insert into company(id,name,address,registNum) values(?,?,?,?)";
45     var args=new Array();
46     args[0]=company.id;
47     args[1]=company.name;
48     args[2]=company.address;
49     args[3]=company.registNum;
50     localConnection.query(saveSql,args,callback);
51 }
52 exports.detail=function(id,callback){
53     var sql="select * from company where id=?"
54     var param=[id];
55     localConnection.query(sql,param,callback);
56 }
57 exports.update=function(company,callback){
58     var updateSql="update company set name=?,address=?,registNum=? where id=?";
59     var param=[company.name,company.address,company.registNum,company.id];
60     localConnection.query(updateSql,param,callback);
61 }

二.数据库希图:

Node.js开荒指南 高清PDF普通话版 +源码
http://www.linuxidc.com/Linux/2014-09/106494.htm

Ubunru 1贰.0肆 下Node.js开荒条件的设置配置
http://www.linuxidc.com/Linux/2014-05/101418.htm

图片 5

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');

//注释掉默认的,自己手动修改默认引擎
app.set('views', path.join(__dirname, 'views'));
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');

图片 6

npm install express-generator -g

如何在CentOS
7安装Node.js
http://www.linuxidc.com/Linux/2015-02/113554.htm

图片 7

Ubunru 1二.0四 下Node.js开垦景况的设置配备
http://www.linuxidc.com/Linux/2014-05/101418.htm

图片 8

Ubuntu 1四.0四下搭建Node.js开荒条件 
http://www.linuxidc.com/Linux/2014-12/110983.htm

图片 9

Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境 
http://www.linuxidc.com/Linux/2016-09/135487.htm

作用浮现:

前壹段时间,集团协会了二遍NodeJs的本领分享,自个儿好运去听了听,第叁次接触NodeJs,后来透过和谐上学和探究,完结了2个异常粗略的Web演示项目,在这边和初学者做以分享,开荒工具:WebStorm 十.0四+MySql5.陆;框架:Node+ExpressNode;版本:v4.二.三;视图渲染:jade模板引擎。

自个儿是将代码写在users.js中,而暗许的index中就都尚未写任何代码,于是完整的代码如下:

本文永恒更新链接地址http://www.linuxidc.com/Linux/2016-12/138298.htm

Node.js入门支付指南中文版
http://www.linuxidc.com/Linux/2012-11/73363.htm

类型代码结构:

再有二个工具正是延续数据库操作的Navicat客户端(我们经常连接数据库的工具,非常好用的。)

Ubuntu 1肆.04/一伍.0四上设置配备 Node.js v四.0.0 
http://www.linuxidc.com/Linux/2015-10/123951.htm

着手demo:

接下来将原本私下认可的两个.ejs文件删掉,并创办相应的.html文件,在那一个小demo中,鉴于自身所需的,故再度建好的文件目录是酱紫滴:

在此地,笔者选用的是EJS模板引擎,这一个凭本身喜好决定。于是新建好的类型目录正是酱紫滴:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
<form action="/users/search" method="post">
    姓名:<input type="text" name="s_name" value="{{s_name}}"><br>
    年龄:<input type="text" name="s_age" value="{{s_age}}"><br>
    <input type="submit" value="查询">
</form>

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    {{each datas as value index}}
    <tr>
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.age}}</td>
        <td><a href="/users/add">新增</a></td>
        <td><a href="/users/del/{{value.id}}">删除</a></td>
        <td><a href="/users/toUpdate/{{value.id}}">修改</a></td>
    </tr>
    {{/each}}
</table>
</body>
</html>

Node.js开采指南 高清PDF中文版 +源码
http://www.linuxidc.com/Linux/2014-09/106494.htm

企图好这么些工具之后,就能够起来大家的数据库操作了(记得计算机上也要装上webstroms,这么些就跳过隐瞒了)。

var express = require('express');
var router = express.Router();
//引入数据库包
var db = require("./db.js");

/* GET users listing. */
// router.get('/', function(req, res, next) {
//   res.send('respond with a resource');
// });

/**
 * 查询列表页
 */
router.get('/', function (req, res, next) {
    db.query('select * from userinfo', function (err, rows) {
        if (err) {
            res.render('users', {title: 'Express', datas: []});  // this renders "views/users.html"
        } else {
            res.render('users', {title: 'Express', datas: rows});
        }
    })
});
/**
 * 新增页面跳转
 */

router.get('/add', function (req, res) {
    res.render('add');
});
router.post('/add', function (req, res) {
    var name = req.body.name;
    var age = req.body.age;
    db.query("insert into userinfo(name,age) values('" + name + "'," + age + ")", function (err, rows) {
        if (err) {
            res.end('新增失败:' + err);
        } else {
            res.redirect('/users');
        }
    })
});

/**
 * 删
 */
router.get('/del/:id', function (req, res) {
    var id = req.params.id;
    db.query("delete from userinfo where id=" + id, function (err, rows) {
        if (err) {
            res.end('删除失败:' + err)
        } else {
            res.redirect('/users')
        }
    });
});
/**
 * 修改
 */
router.get('/toUpdate/:id', function (req, res) {
    var id = req.params.id;
    db.query("select * from userinfo where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改页面跳转失败:' + err);
        } else {
            res.render("update", {datas: rows});       //直接跳转
        }
    });
});
router.post('/update', function (req, res) {
    var id = req.body.id;
    var name = req.body.name;
    var age = req.body.age;
    db.query("update userinfo set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改失败:' + err);
        } else {
            res.redirect('/users');
        }
    });
});
/**
 * 查询
 */
router.post('/search', function (req, res) {
    var name = req.body.s_name;
    var age = req.body.s_age;

    var sql = "select * from userinfo";

    if (name) {
        sql += " and name='" + name + "' ";
    }

    if (age) {
        sql += " and age=" + age + " ";
    }
    sql = sql.replace("and","where");
    db.query(sql, function (err, rows) {
        if (err) {
            res.end("查询失败:", err)
        } else {
            res.render("users", {title: 'Express', datas: rows, s_name: name, s_age: age});
        }
    });
});


module.exports = router;

此前,向来利用的是nodejs+thinkjs来成功自个儿所需的等级次序要求,而对此nodejs中其它一中应用框架express却了然的少之又少,那二日就简单的询问了刹那间怎么使用express来做一些数据库的增加和删除改查。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
</head>
<body>
<form action="/users/update" method="post">
    <input type="hidden" value="{{datas[0].id}}" name="id">
    姓名:<input type="text" name="name" value="{{datas[0].name}}"><br>
    年龄:<input type="text" name="age" value="{{datas[0].age}}"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

图片 10

接着就是将项目和此数据库连接起来——在刚刚新建的db.js中,来兑现延续数据库:

一.开发webstroms,新建三个express项目:

1.刚张开页面包车型地铁时候,由于数据库相当的少,因而页面效果是酱紫滴:

其间,新扩张、删除以及修改也是足以健康使用的。

图片 11

图片 12

Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境 
http://www.linuxidc.com/Linux/2016-09/135487.htm

设置收尾之后,检查一下是不是安装成功:

如何在CentOS
7安装Node.js
http://www.linuxidc.com/Linux/2015-02/113554.htm

诸如此类大家所需的数据库就有了。

开拓Navicat客户端,新建3个数据库,脚本如下:

Ubuntu 14.0四下搭建Node.js开拓景况 
http://www.linuxidc.com/Linux/2014-12/110983.htm

图片 13

//db.js


/**
 * Created by Administrator on 2016/7/19.
 */
// 连接MySQL
var mysql = require('mysql');
var pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'testdb'
});

function query(sql, callback) {
    pool.getConnection(function (err, connection) {
        // Use the connection
        connection.query(sql, function (err, rows) {
            callback(err, rows);
            connection.release();//释放链接
        });
    });
}
exports.query = query;

下边关于Node.js的剧情你恐怕也喜欢

计划干活:

2.1体化的页面效果是酱紫滴:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图