前端
1.给模糊查询添加功能
<div role="tabpanel" class="tab-pane active" id="userPanel">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline">
<div class="btn-group" role="group" aria-label="角色">
<button type="button" class="btn btn-default">讲师</button>
<button type="button" class="btn btn-default">学员</button>
<button type="button" class="btn btn-default">管理员</button>
<button type="button" class="btn btn-default active">全部</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">搜索</button>
</span>
</div><!-- input-group -->
</form>
2.给搜索按钮添加点击事件
这里我们可以看到搜索按钮是在一个div中所以我们可以定位
userPanel from button eq(5)//因为搜索按钮是from表单中的第五个,也是最后一个
所以我们可以写成,userPanel from button :last
js
$(function(){
findUsersByPage(1);
//给模糊查询按钮添加click事件
$("#userPanel form button:last").click(function(){
findUsersByPage(1);
});
});
function findUsersByPage(currentPage){
//获取用户的模糊关键字
var userkeyword=$("#userPanel form input[type=text]").val();
if(userkeyword==""){
userkeyword="nochar";
}
//发送ajax异步请求
$.ajax({
url:basePath+"user/findUsersByPage",
type:"get",
data:{
"currentPage":currentPage,
"userkeyword":userkeyword,
"roleType":roleType
},
dataType:"json",
success:function(result){
if(result.status==1){
//查询数据成功
var page=result.data;
var users=page.data;
//清空table表格中的原有的假的数据
$("#userPanel table tbody").html("");
//循环遍历users对象
$(users).each(function(index,user){
//首先要处理角色
var roleString="";
var roles=user.roles;
//循环遍历所有的角色,多个角色名字用逗号间隔
$(roles).each(function(n,role){
roleString+=role.name+",";
});
if(roleString.length>0){
//从0开始取到末尾-1;
roleString=roleString.substring(0,roleString.length-1);
//从0开始取,取多少个
//roleString=roleString.substr(0,roleString.length-1);
}else{
roleString="无角色";
}
//其次要给table表格中添加tr
var tr=`<tr id="${user.id}">
<td>${index+1}</td>
<td><a href="javascript:findUserById('${user.id}','${user.loginName}','${user.loginType}','${user.nickName}','${user.sex}',${user.age},${user.score},'${new Date(user.regDate).toLocaleDateString().replace("/","-").replace("/","-")}','${user.isLock}','${roleString}','${user.head}')">${user.loginName}</a></td>
<td>${user.nickName}</td>
<td>${user.loginType}</td>
<td>${user.score}</td>
<td>${new Date(user.regDate).toLocaleDateString().replace("/","-").replace("/","-")}</td>
<td>${user.isLock}</td>
<td>${roleString}</td>
<td>
<a onclick="updateClick('${user.id}','${user.loginName}','${user.password}','${user.nickName}',${user.age},'${user.sex}','${roleString}','${user.head}')" href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
<a onclick="deleteClick('${user.id}')"href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
</td>
</tr>`;
$("#userPanel table tbody").append(tr);
});
//清空原有的bootstrap的分页条
$("#userPanel .pagination").html("");
//构建第三方法分页条组件paginator
var options={
currentPage:currentPage,
totalPages:page.totalPage,
numberOfPages:5,
onPageClicked:function(event,originalEvent,type,page){
//page是用户点击的页号,就是准备跳转到page页上去
findUsersByPage(page);
}
};
$("#userPanel .pagination").bootstrapPaginator(options);
}else if(result.status==0){
alert("查询数据失败!");
}
},
error:function(){
alert("请求失败!!");
}
});
}
这里我们看到了发送了ajax请求,通过url地址给后端
url:basePath+"user/findUsersByPage",
type:"get",
data:{
"currentPage":currentPage,
"userkeyword":userkeyword,
"roleType":roleType
},
dataType:"json",
这里面的url就是地址,传到后端那个类中,basePath是一个自己赋的值,它是所有地址中开头相同的地方
type:"get"这是向后端发送get请求,只要不修改数据就是get请求,如果是修改数据是post请求
data:是发送请求的值
dataType:"json" 这是返回值类型
3.后端
@Controller
//定义这个类是controller类
//此类事前端到java代码的第一个类
@RequestMapping("user/")
public class UserController {
//此注解事给UserService接口创建一个对象userService,存到spring容器中
@Resource(name="userService")
private UserService userService;
@RequestMapping(value="findUsersByPage",method=RequestMethod.GET)
@ResponseBody
public Result findUsersByPage(Page<User> page) {
Result result=null;
result=this.userService.findUsersByPage(page);
return result;
}
}
这里是后端的第一个类controller类.
@RequestMapping(value="findUsersByPage",method=RequestMethod.GET)
这句话就相当于,数据从js传到这个类的一个接口
value="findUsersByPage"这个就是和js里面的url地址是相同的
@ResponseBody
次注解必须写,不然返回不了后端的返回值,前端所作的请求就没有返回值
@RequestMapping(value="findUsersByPage",method=RequestMethod.GET)
@ResponseBody
public Result findUsersByPage(Page<User> page) {
Result result=null;
result=this.userService.findUsersByPage(page);
return result;
}
上面这段代码写的这个方法,里面调用了一个和他的方法名字一样的方法,这不是递归,注意看前面调用它的对象,这个对象是上面注解创建的userService接口的对象,所以这个方法就是userService接口的实现类重写的方法,所以下面的一步就是创建UserService接口和它的实现类.
//UserService接口
ublic interface UserService {
/**
* 分页+模糊
* @param page
* @return Result对象
*/
public Result findUsersByPage(Page<User> page);
}
上面代码是UserService接口,什么叫接口为什么要创建接口
-----我个人理解的,大家可以借鉴一下,对不对的反正通俗易懂.
接口就是提醒你不要忘了创建方法.而子实现重写的方法也可以用接口对象,调用
创建接口的实现类UserServiceImpl
@Service("userService")
public class UserServiceImpl implements UserService {
@Resource(name="userMapper")
private UserMapper userMapper;
@Override
public Result findUsersByPage(Page<User> page) {
Result result=new Result();
String roleType=page.getRoleType();
if("all".equals(roleType)) {
//默认没有角色类型,即默认全部
page.setPageSize(this.pageUtil.getPageSize());
String ukw="nochar".equals(page.getUserkeyword())? "%%" : "%"+page.getUserkeyword()+"%";
page.setUserkeyword(ukw);
int totalCount=this.userMapper.getCount(page);
page.setTotalCount(totalCount);
int totalPage=(totalCount%page.getPageSize()==0)? (totalCount/page.getPageSize()) : (totalCount/page.getPageSize())+1;
page.setTotalPage(totalPage);
List<User> users=this.userMapper.getUsersByPage(page);
page.setData(users);
}else {
//角色类型可能是"讲师","学员","管理员"
page.setRoleType("%"+roleType+"%");
page.setPageSize(this.pageUtil.getPageSize());
String ukw="nochar".equals(page.getUserkeyword())? "%%" : "%"+page.getUserkeyword()+"%";
page.setUserkeyword(ukw);
int totalCount=this.userMapper.getCount_RoleType(page);
page.setTotalCount(totalCount);
int totalPage=(totalCount%page.getPageSize()==0)? (totalCount/page.getPageSize()) : (totalCount/page.getPageSize())+1;
page.setTotalPage(totalPage);
List<User> users=this.userMapper.getUsersByPage_RoleType(page);
page.setData(users);
}
result.setStatus(1);
result.setMessage("查询数据成功!!");
result.setData(page);
return result;
}
}
上面这段代码是UserService接口的实现类用来重写UserService接口里面的方法
实现具体的业务
注意开头的@service注解必须写要不spring容器扫描不到这个类就不能给这个类创建实例,就是不能new它
@Resource(name="userMapper")
private UserMapper userMapper;
上面这个注解是一个UserMaper接口和之前的一样
下面就是创建UserMaper接口此接口用来连接数据库
public interface UserMapper {
/**
* 登录的数据库操作方法
* @param user 用户的信息(用户名和密码)
* @return 用户id
* notnull 数据库有真实的用户信息
* null 数据库没有真实的用户信息
*/
//分页+模糊,没有角色类型的
public int getCount(Page<User> page);
public List<User> getUsersByPage(Page<User> page);
}
定义UserMapper接口的实现类
此类用来执行sql语句
<!-- 没有角色类型的 用户的模糊+分页 -->
<!-- role的ResultMap -->
<resultMap type="Role" id="roleMap">
<!-- 注意:从表中的外键id,不能跟主表的主键id名字相同 -->
<id property="id" column="role_id" />
<result property="name" column="role_name"/>
</resultMap>
<!-- user的resultMap -->
<resultMap type="User" id="userMap">
<id property="id" column="user_id" jdbcType="VARCHAR"/>
<result property="loginName" column="user_loginname" jdbcType="VARCHAR"/>
<result property="loginType" column="user_logintype" jdbcType="VARCHAR"/>
<result property="nickName" column="user_nickname" jdbcType="VARCHAR"/>
<result property="password" column="user_password" jdbcType="VARCHAR"/>
<result property="type" column="user_type" jdbcType="INTEGER"/>
<result property="head" column="user_head" jdbcType="VARCHAR"/>
<result property="score" column="user_score" jdbcType="INTEGER"/>
<result property="isLock" column="user_islock" jdbcType="CHAR"/>
<result property="pwdState" column="user_pwdstate" jdbcType="VARCHAR"/>
<result property="regDate" column="user_regdate" jdbcType="TIMESTAMP"/>
<result property="age" column="user_age" jdbcType="INTEGER"/>
<result property="sex" column="user_sex" jdbcType="CHAR"/>
<result property="introduction" column="user_introduction" jdbcType="VARCHAR"/>
<collection property="roles" ofType="Role"
javaType="java.util.List"
resultMap="roleMap"></collection>
</resultMap>
<select id="getCount"
parameterType="Page"
resultType="java.lang.Integer">
select
count(user_id)
from t_user
where user_loginname like #{userkeyword} or
user_nickname like #{userkeyword}
</select>
<select id="getUsersByPage"
parameterType="Page"
resultMap="userMap">
select
u.user_id,
u.user_loginname,
u.user_logintype,
u.user_nickname,
u.user_password,
u.user_type,
u.user_head,
u.user_score,
u.user_islock,
u.user_pwdstate,
u.user_regdate,
u.user_age,
u.user_sex,
r.role_id,
r.role_name
from (
select * from t_user
where user_loginname like #{userkeyword} or
user_nickname like #{userkeyword}
limit #{begin},#{pageSize}
) u
left outer join t_user_role ur on u.user_id=ur.uid
left outer join t_role r on r.role_id=ur.rid
</select>
上面这个类就是执行sql语句,对数据库进行增删改查…
以上就是从前端到后端以及数据库的全部过程
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
