1.综述
模拟实现一般功能页面,包括:
- 数据查询
- 表格展示
- 数据修改
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>
结果表格
- html定义表格id(位置)
- 字段由bootstrapTable(config)定义并生成。
- 表格字段对应
- 表格请求方法
$("#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里定义了全部信息,包括:
- 目标url
- 请求方法
- 参数获取方法
- 字段对应关系
所以加载时可以自动触发。
如果要人工点击查询按钮触发呢?
调用bootstraptable的refresh方法即可。
$('#btnQueryBoots').click(function(){
$("#tabUsers").bootstrapTable('refresh');
});
3.后台处理
路由
router用来定义访问入口的响应,是Express的顶级对象。
- 路由对象定义
var express = require('express');
var router = express.Router();
//开放
module.exports = router;
- 路由定义
可针对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);
});
- 路由对象引用
在express默认文件app.js中引用路由
var indexRouter = require('./routes/index');
app.use('/', indexRouter);
- 数据库
使用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.遗留问题:
数据库操作不支持事务。可以支持事务,暂时没时间验证。