基于Bootstrap+Nodejs的Web应用（三）_功能页面

1.综述

模拟实现一般功能页面，包括：

1. 数据查询
2. 表格展示
3. 数据修改

bootstrap布局+bootstrapTable实现表格功能

2.布局

直接看代码。
查询条件：

<form class="form-horizontal" role="form">
                    <fieldset>
                        <legend>查询条件</legend>
                       <div class="form-group">
                          <label class="col-sm-2 control-label" for="ds_host">姓名</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="s_name" type="text" placeholder="张三"/>
                          </div>
                          <label class="col-sm-2 control-label" for="ds_name">年龄</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="s_age" type="text" placeholder="18"/>
                          </div>
                       </div>
                       <div class="form-group">
                          <label class="col-sm-2 control-label" for="ds_username">用户名</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_username" type="text" placeholder="root"/>
                          </div>
                          <label class="col-sm-2 control-label" for="ds_password">密码</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_password" type="password" placeholder="123456"/>
                          </div>
                       </div>
                       <div class="form-group">                          
                          <div class="col-sm-4 col-sm-offset-4">
                             <button type="button" id="btnQuery" class="btn btn-primary btn-sm">查询 </button>
                             <button type="button" id="btnQueryBoots" class="btn btn-primary btn-sm">查询Boots </button>
                             <button type="button" id="btnReset" class="btn btn-primary btn-sm">重置 </button>
                          </div>
                       </div>
                    </fieldset>                        
                    </form>

结果表格

1. html定义表格id（位置）
2. 字段由bootstrapTable(config)定义并生成。
3. 表格字段对应
4. 表格请求方法

        $("#tabUsers").bootstrapTable({
            url: '/users',                      //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'id',
                title: 'ID'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'aget',
                title: '年龄'
            },  ]
        });

2.前台触发
bootstrapTable里定义了全部信息，包括：

1. 目标url
2. 请求方法
3. 参数获取方法
4. 字段对应关系

所以加载时可以自动触发。
如果要人工点击查询按钮触发呢？
调用bootstraptable的refresh方法即可。

$('#btnQueryBoots').click(function(){
        $("#tabUsers").bootstrapTable('refresh');
    });

3.后台处理

路由

router用来定义访问入口的响应，是Express的顶级对象。

1. 路由对象定义

var express = require('express');
var router = express.Router();
//开放
module.exports = router;

2. 路由定义
   可针对url+方法定义响应方式。

\\针对所有方法、所有入口。可用来输出日志
router.all('*', function(req, res, next) {
  console.log("=========%s %s %s",req.method, req.url, req.path);
  console.log(req.session);
  console.log(req.body);
  if(!req.session.uname){
  	 console.log()
  }
  // req.cookie('time','1111',{maxAge:900000});
  next();
});
//针对/users，不同请求方式，不同处理方法
//get只打开页面；post执行查询
router.route("/users").get(function(req,res){    // 到达此路径则渲染login文件，并传出title值供 login.html使用	
	res.render("users",{title:'用户列表',
						datas:[]});
}).post(function(req,res){ 					   // 从此路径检测到post方式则进行post数据的处理操作
	 db.query(db.orm("getUsers",req.body),callFun,req,res);
});

3. 路由对象引用
   在express默认文件app.js中引用路由

var indexRouter = require('./routes/index');
app.use('/', indexRouter);

4. 数据库
   使用MySql数据库，需要：

• 引用mysql模块
• 数据库配置
• 定义orm映射：定义要执行的sql
• 定义操作接口：执行数据库操作后，需要把结果回传到browser，需要res对象。因此在数据库的回调函数被定义为了变量，方便使用res对象。

var mysql=require("mysql");
var pool=mysql.createPool({
	host:'localhost',
	user:'root',
	password:'root',
	database:'dbtest'
});


function query(sql,callback,req,res){
	console.log("111111111111111query1");
	pool.getConnection(function(err,connection){
		console.log(sql);
		connection.query(sql,function(err,rows){
			if(err){
				console.log(err);
			}
			callback(err,rows,req,res);

			connection.release();
		});
	});
}

function orm(ormid,pars){
	var sql="";
	if (ormid=="getUsers") {
    	sql="select * from users where 1=1 ";
    	if (pars.s_name){
    		sql+="and name='"+pars.s_name+"'";
    	}
    	if (pars.s_age){
    		sql+="and aget="+pars.s_age+"";
    	}
	}else if(ormid=="delUsers") {
		sql="delete from users where id in ("+pars.ids+")";
	}else if(ormid=="users_Adduser") {
		sql="insert into users values ("+pars.s_id+",'"+pars.s_name+"',"+pars.s_age+")";
	}
	return sql;
}

exports.query=query;
exports.orm=orm;

5.遗留问题：

数据库操作不支持事务。可以支持事务，暂时没时间验证。