return params;
}
做一个整理,我们需要的参数有:
userName,createTime,ipAddr,lastLoginTime,nickName,password
其中加粗的部分是从前台传过来的,其他字段需要我们自己想办法来组装。
createTime:创建时间
lastLoginTime:上次登录时间 (额,搞错了,这个不用管,创建用户的时候还没有登录时间呢)
先看创建时间,这个用户是当前这个时间点创建的,所以我们直接想办法获取当前时间就行了。
找到我们的老朋友:Hutool,在pom.xml中添加:
cn.hutool
hutool-all
5.6.3
然后这样写:
params.put(“createTime”, DateUtil.now());
DateUtil是Hutool里面关于时间处理的工具类。
ipAddr是IP地址的意思,如果是用户注册的时候调用了这个方法,那么是可以获取用户当前网段的IP地址的
params.put(“ipAddr”, request.getRemoteAddr());
为了让前台能够知道方法的调用结果,我们需要设置返回信息,一般分为错误码和错误信息,如果错误码不是00000(返回成功),那么就需要对错误信息进行展示处理。
//设置返回信息
Map<String, Object> resultMap = new HashMap();
resultMap.put(“errCode”,0); //错误码
resultMap.put(“errMsg”,null);//错误信息
最终代码
@PutMapping(“saveUser”)
@ResponseBody
public Map<String, Object> saveUser(HttpServletRequest request){
//拼装请求参数
Map<String, Object> params = handleParamToMap(request);
//设置返回信息
Map<String, Object> resultMap = new HashMap();
resultMap.put(“errCode”,0); //错误码
resultMap.put(“errMsg”,null);//错误信息
params.put(“createTime”, DateUtil.now());
params.put(“ipAddr”, request.getRemoteAddr());
int update = jdbcTemplate.update("INSERT INTO vipmgr
.user
(user_name
, create_time
, header_pic
, ip_addr
, is_delete
, is_logined
, is_vip
, last_login_time
, nick_name
, password
, role_id
, amt
, last_sign_date
) " +
“VALUES (:userName, :createTime, NULL, :ipAddr, ‘0’, ‘0’, ‘0’, :lastLoginTime, :nickName, :password, ‘1’, 0, NULL)”,params);
if(update != 1){
resultMap.put(“errCode”,11111); //错误码
resultMap.put(“errMsg”,“系统异常,请联系管理员!”);//错误信息
}
return params;
}
教程写到这,没有进行测试,上面的代码是我一气呵成的。
如果有问题再说吧。
页面增加一个按钮
设计保存窗口
在页面中添加
用户名:
密 码:
昵 称:
这就创建了一个EasyUI风格的窗口。
新增按钮点击事件
这个窗口默认是关闭着的,所以我们要添加这个属性
然后,给按钮添加点击事件,点击按钮才显示这个窗体:
function openAddWin() {
$(‘#win’).window(‘open’);
}
保存方法
给提交按钮添加点击事件
save方法
function save() {
$.ajax({
url: ‘user/saveUser’,
data: $(“#userForm”).serialize(),
type: ‘put’,
dataType: ‘json’,
success: function (data) {
data = eval(“(” + data + “)”);
if (data.errCode != ‘00000’) {
alert(data.errMsg);
return;
}
alert(“保存成功!”);
$(‘#win’).window(‘close’);
}
});
}
测试:
报错了:
java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0).
错误分析:应该是sql语句写错了,参数个数不匹配导致的。
不要慌,调试一下
这是请求参数
这是SQL语句
INSERT INTO vipmgr
.user
(user_name
, create_time
, header_pic
, ip_addr
, is_delete
, is_logined
, is_vip
, last_login_time
, nick_name
, password
, role_id
, amt
, last_sign_date
) VALUES (:userName, :createTime, NULL, :ipAddr, ‘0’, ‘0’, ‘0’, :lastLoginTime, :nickName, :password, ‘1’, 0, NULL)
可以看到,具名的参数有
:userName, :createTime,:ipAddr,:lastLoginTime, :nickName, :password,
一共6个,可是Map里面只有5个,少了谁呢?
少了lastLoginTime!
好吧,现在我们改一下sql,lastLoginTime设置为null
在运行,还是报这个错:
java.sql.SQLException: Parameter index out of range (1 > number of parameters, which is 0).
看来还有问题,emmm,错误信息说,我输入了一个参数,但实际上只有0个。
知道了,应该是方法没调对。
这是部分update方法的重载,竟然没有第二个参数是Map的。
我大意了啊,没有闪!
==========
原来,具名的写法得用另一个对象,叫做namedParameterJdbcTemplate
引入:
@Autowired NamedParameterJdbcTemplate namedParameterJdbcTemplate;
然后修改saveUser的方法,保存的地方是这样的
int update = namedParameterJdbcTemplate.update("INSERT INTO
vipmgr.
user (
user_name,
create_time,
header_pic,
ip_addr,
is_delete,
is_logined,
is_vip,
last_login_time,
nick_name,
password,
role_id,
amt,
last_sign_date) " + "VALUES (:userName, :createTime, NULL, :ipAddr, '0', '0', '0', NULL, :nickName, :password, '1', 0, NULL)",params);
这下就对了,可是前台又报错了。
eval有点问题,为什么呢?
这是因为,我们用ajax请求,已经设置了dataType是json,就不需要eval了。
去掉这一行代码即可。
再保存,就可以了。
咦?中文乱码。。。
**解决方案:**数据库连接时加上?characterEncoding=utf-8,问题解决。
把alert代码换成这个
$.messager.show({
title : ‘提示’,
msg : “保存成功!”,
timeout : 3000,
showType : ‘slide’
});
查询与分页
======
后台简单实现(不分页)
@RequestMapping(“queryUsers”)
@ResponseBody
public Map<String, Object> queryUsers(HttpServletRequest request){
//设置返回信息
Map<String, Object> resultMap = new HashMap();
resultMap.put(“rows”,jdbcTemplate.queryForList(“select * from user”));
return resultMap;
}
返回参数需要有一个rows,这边就全部查出来再返回。
data-grid代码
EasyUI的数据表格是(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。
数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
下面是用户列表的代码:
pagination=“true” rownumbers=“true” url=“user/queryUsers” >
用户名 昵称 角色编号 创建时间 是否VIP 上次登录时间 用户状态启动项目,刷新页面就会访问后台的接口
easyUI本地化
这时候你会发现,为啥下面的分页模块是英文的?
这是因为我们还没有做本地化,方法如下
找到原来的easyUI下载包,里面有个local,复制到static
引入中文模块:
就变成这样啦:
后台分页原理
按照easyUI的套路,如果你要做分页,就得告诉他当前的列表数据,还有总条数。
至于当前查询的是第几页page,还有每页多少条,在发送查询接口的时候,easyui就会帮我们自动带上。
验证:
@RequestMapping(“queryUsers”)
@ResponseBody
public Map<String, Object> queryUsers(HttpServletRequest request){
//拼装请求参数
Map<String, Object> params = handleParamToMap(request);
System.out.println(params);
//设置返回信息
Map<String, Object> resultMap = new HashMap();
resultMap.put(“rows”,jdbcTemplate.queryForList(“select * from user”));
return resultMap;
}
{page=1, rows=10}
所以,我们要做的就是根据page和rows,获取总条数和当前查询的数据。
总条数
总条数简单,一句sql解决了。
Integer total = jdbcTemplate.queryForObject(“select count(1) from user”, Integer.class);
MySQL分页
limit分页公式:curPage是当前第几页;pageSize是一页多少条记录。
代码就写成了这样:
@RequestMapping(“queryUsers”)
@ResponseBody
public Map<String, Object> queryUsers(HttpServletRequest request){
//拼装请求参数
Map<String, Object> params = handleParamToMap(request);
int page = Integer.parseInt(params.get(“page”).toString()) ;
int pageSize = Integer.parseInt(params.get(“rows”).toString()) ;
//设置返回信息
Map<String, Object> resultMap = new HashMap();
//拿到总条数
Integer total = jdbcTemplate.queryForObject(“select count(1) from user”, Integer.class);
List rows = jdbcTemplate.queryForList(“select * from user limit ?,?”,(page-1)*pageSize,pageSize);
resultMap.put(“total”,total);
resultMap.put(“rows”,rows);
return resultMap;
}
查询按钮控制列表刷新
之前的查询按钮方法为:
$(‘#search’).click(function(){
$(‘#ff’).form(‘submit’, {
url:‘loadUsers’,
//提交前可以额外添加参数
onSubmit: function(param){
//这边只是模拟一下
param.search = true;
}
});
});
当时只是测试一下form的表单提交,实际上不应该这么做。
单独写一个查询方法:
function search(){
$(‘#dg’).datagrid(‘load’,{
userName:$(‘#ff’).get(0).userName.value,
nickName:$(‘#ff’).get(0).nickName.value,
isVip:$(‘#ff’).get(0).isVip.value,
});
}
然后查询按钮就调用这个方法即可。
$(‘#search’).click(function(){
search();
});
请求报文如下:
条件查询(重难点)
欢迎来到本项目最难的点:条件查询,先给出代码:
@RequestMapping(“queryUsers”)
@ResponseBody
public Map<String, Object> queryUsers(HttpServletRequest request){
//拼装请求参数
Map<String, Object> params = handleParamToMap(request);
int page = Integer.parseInt(params.get(“page”).toString()) ;
int pageSize = Integer.parseInt(params.get(“rows”).toString()) ;
//拼接where条件
StringBuffer sb = new StringBuffer(" where 1=1 ");
List injectors = new ArrayList<>();
if(!StrUtil.isEmptyIfStr(params.get(“userName”))){
sb.append(“and user_name like ?”);
injectors.add(“%”+params.get(“userName”)+“%”);
}
if(!StrUtil.isEmptyIfStr(params.get(“nickName”))){
sb.append(“and nick_name like ?”);
injectors.add(“%”+params.get(“nickName”)+“%”);
}
if(!StrUtil.isEmptyIfStr(params.get(“isVip”))){
sb.append(“and is_vip = ?”);
injectors.add(params.get(“isVip”).toString());
}
//设置返回信息
Map<String, Object> resultMap = new HashMap();
//拿到总条数
Integer total = jdbcTemplate.queryForObject(“select count(1) from user” + sb, injectors.toArray(), Integer.class);
injectors.add((page-1)*pageSize);
injectors.add(pageSize);
List rows = jdbcTemplate.queryForList(“select * from user” + sb +" limit ?,?", injectors.toArray());
resultMap.put(“total”,total);
resultMap.put(“rows”,rows);
return resultMap;
}
思路是根据查询的参数是否为空,来拼接对应的where条件。这边用到了一个List,这是为了防止sql注入而采取的必要措施。
这个方法非常重要,请务必好好消化一下。
新增用户后立刻触发刷新
字典翻译
相信你也发现了,就是有些字段显示是数字,这一点其实是不科学的。比如,是否vip,显示一个0,用户怎么知道你这个0是什么意思?解决办法就是用字典翻译。
字典翻译有前台翻译,也有后台翻译,一般我们会单独维护一张字典表,然后做后台翻译的。相关的知识点我们在下一章做讲解。
字典(重要)
======
这是一款非常经典的教程,我直接挪用了企业里面真实项目的编程技巧。
VipMgrApplication是我们的启动类,加一个容器启动完成的listener
public class VipMgrApplication implements ApplicationListener {
}
实现onApplicationEvent方法
/**
-
容器启动完成事件
-
@param applicationReadyEvent
*/
@Override
public void onApplicationEvent(ApplicationReadyEvent applicationReadyEvent) {
ConfigurableApplicationContext applicationContext = applicationReadyEvent.getApplicationContext();
JdbcTemplate jdbcTemplate = (JdbcTemplate) applicationContext.getBean(“jdbcTemplate”);
//System.out.println(jdbcTemplate);
//加载所有启动状态的字典数据
List<Map<String, Object>> dicts = jdbcTemplate.queryForList(“select * from t_dict where is_on = 1”);
dictMap = new HashMap<>();
//为了转换效率,给字典列表加索引
for (int i = 0; i < dicts.size(); i++) {
dictMap.put(dicts.get(i).get(“dict_code”).toString() + dicts.get(i).get(“dict_no”).toString(),dicts.get(i));
}
System.out.println(“数据字典加载完毕!” + dictMap);
}
dictMap是我设计的一个静态Map变量
public static Map<String, Map<String, Object>> dictMap = null;
这玩意会在SpringBoot容器启动完毕后就加载。