IDEA版SpringBoot全教程 08 会员管理系统（中）

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容器启动完毕后就加载。