本文共 5217 字，大约阅读时间需要 17 分钟。

1.综述

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

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

bootstrap布局+bootstrapTable实现表格功能

2.布局

直接看代码。

   
                    
    
                        
     
查询条件
                       
     
                          
      姓名                          
      
                             
                                 
      
                          
      年龄                          
      
                             
                                 
      
                       
     
                       
     
                          
      用户名                          
      
                             
                                 
      
                          
      密码                          
      
                             
                                 
      
                       
     
                       
     
                                                    
      
                             
       查询                              
       查询Boots                              
       重置                           
      
                       
     
                    
    
                                            
   

结果表格

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.前台触发

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

所以加载时可以自动触发。

$('#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.遗留问题：

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