ssm——整合，前端页面设计，分页(1)

最新推荐文章于 2024-10-10 20:59:20 发布

2401_86367152

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量1.1k

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/2401_86367152/article/details/142073994

版权

</c:forEach>

当前第${pageInfo.pageNum}页

,总共 ${pageInfo.pages}页,共$ {pageInfo.total}条记录

首页
<c:if test=“${pageInfo.hasPreviousPage }”>
aria-hidden=“true”>«

</c:if>

<c:forEach items=“${pageInfo.navigatepageNums }” var=“num”>

<c:if test=“${num==pageInfo.pageNum}”>
${num}
</c:if>

<c:if test=“${num!=pageInfo.pageNum}”>
${num}
</c:if>

</c:forEach>

<c:if test=“${pageInfo.isHasNextPage() }”>
aria-hidden=“true”>»

</c:if>
末页
12.查询_返回分页json数据

=============================================================================
- 1.由于上面的方式只适用于客户端浏览器的交互，所以将返回的数据封装成json，前台进行接收，并进行解析就可以了
具体流程：index.jsp发送json请求进行员工分页的数据查询->服务器将查出的数据以json字符串的形式返回浏览器——>浏览器收到js字符串，使用js进行解析
- 2.为了方便放回json，所以重新写一个方法直接返回pageInfo,要返回json必须添加一个注解@ResponseBody,但是要返回jason,就先导入jackson的包
maven下：搜索jackson->jackson DataBind->选择你需要的版本
- 3.导入完成之后，在原来EmpConntroller层中添加一个新的方法，直接返回pageInfo对象：
为了让浏览器知道查询或者修改等成功与否，需要添加一个状态类来显示状态信息,在po里新创建一个msg对象，通用的返回类

public class Msg {

private Integer code;//状态码（规定100：成功，200：失败）

private String msg;//提示信息

private Map<String, Object> extend=new HashMap<String, Object>();//用户要返回给浏览器的数据

public Msg() {}

public Integer getCode() {

return code;

}

public void setCode(Integer code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public Map<String, Object> getExtend() {

return extend;

}

public void setExtend(Map<String, Object> extend) {

this.extend = extend;

}

public static Msg success() {

Msg result=new Msg();

result.setCode(100);

result.setMsg(“deal success”);

return result;

}

public static Msg fail() {

Msg result=new Msg();

result.setCode(200);

result.setMsg(“deal failure”);

return result;

}

}
- 4.EmpController中修改的内容：
@Controller

public class EmpController {

@Autowired

EmpService empService;

@ResponseBody

@RequestMapping(“/emp”)

public Msg getEmps(@RequestParam(value=“pn”,defaultValue=“1” ) Integer pn) {

//为了方便快速查询，所以引入PageHelper分页查询

//表示从第pn查，每一页显示5条数据

PageHelper.startPage(pn, 5);//后面紧跟的这个查询就是分页查询

List lemp=empService.getALlEmpInfo();

//将查询的分页结果进行包装,其中PageInfo中包含了这个页面的所有信息，所以只需要将pageInfo交给页面接受就行了

PageInfo page=new PageInfo(lemp,5);//5:表示每次只显示5页的导航菜单

return Msg.success().add(“pageInfo”,page );//返回的不仅有状态消息，其中由于add方法，也将

}

}

13.查询_构建员工列表

=========================================================================

1.重新改造Index页面，让它发出ajax请求：

代码详情如下：

<%@ page language=“java” contentType=“text/html; charset=utf-8”

pageEncoding=“utf-8”%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
员工列表
href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

<%

pageContext.setAttribute(“App_Path”, request.getContextPath());

%>

致一科技@<span

style=“font-family: STXingkai; color: graytext;”>Zhiyi

Technology

新增

删除

emp_id emp_name gender eamil dept_id 操作

当前第页 ,总共页,共条记录

14.查询_构建分页条

========================================================================
- 1.在第十三步中我们已经动态创建好了员工信息列表，接下来就是创建分页导航条：
对应的代码如下：

<%@ page language=“java” contentType=“text/html; charset=utf-8”

pageEncoding=“utf-8”%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
员工列表
href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

<%

pageContext.setAttribute(“App_Path”, request.getContextPath());

%>

致一科技@<span

style=“font-family: STXingkai; color: graytext;”>Zhiyi

Technology

新增

删除

emp_id emp_name gender eamil dept_id 操作

15.查询_优化完整分页条

==========================================================================
- 1.在上一步骤，基本流程已经走完，但是点击页面跳转问题并未解决，接下来进行解决；
代码如下：

<%@ page language=“java” contentType=“text/html; charset=utf-8”

pageEncoding=“utf-8”%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
员工列表
href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

<%

pageContext.setAttribute(“App_Path”, request.getContextPath());

%>

致一科技@<span

style=“font-family: STXingkai; color: graytext;”>Zhiyi

Technology

新增

删除

emp_id emp_name gender eamil dept_id 操作

16.新增_创建员工——新增模态框

==============================================================================

1. 这个模态框是引用bootStrap中的javaScript组件中模态框的案例

具体代码详情如下：

<%@ page language=“java” contentType=“text/html; charset=utf-8”

pageEncoding=“utf-8”%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
员工列表
href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

<%

pageContext.setAttribute(“App_Path”, request.getContextPath());

%>

aria-labelledby=“myModalLabel”>

<button type=“button” class=“close” data-dismiss=“modal”

aria-label=“Close”>

×

新增员工信息

emp_Name

<input type=“text” class=“form-control” id=“inputName”

placeholder=“姓名”>

gender

<input type=“radio”

name=“inlineRadioOptions” id=“genderMan” value=“男” checked=“checked”> 男

<input type=“radio”

name=“inlineRadioOptions” id=“genderGirl” value=“女”> 女

<input type=“radio”

name=“inlineRadioOptions” id=“genderOthers” value=“女”>

女

Email

<input type=“email” class=“form-control” id=“inputEmail”

placeholder=“Email@gmail.com”>

DeptName

Close

Save changes

致一科技@<span

style=“font-family: STXingkai; color: graytext;”>Zhiyi

Technology

新增

删除

emp_id emp_name gender eamil dept_id dept_Name 操作

17.新增_ajax显示部门信息

=============================================================================

1.每一次点击应该新增一次ajax请求来获取部门信息到添加的下拉框中

 2.在编写此功能之前要先有一个方法专门返回部门信息数据，故在Controller层添加一个控制器DepController：

@Controller

public class DepController {

@Autowired

DepService depService;

@ResponseBody

@RequestMapping(“/depts”)

public Msg getDepts() {

List lDepts=depService.getALlDeptInfo();

return Msg.success().add(“depts”, lDepts);

}

}

但是缺少相应的服务层，以及dao层

对应的service：

public interface DepService {

public List getALlDeptInfo();

}

对用的serviceImpl层：

@Service

public class DeptServiceImpl implements DepService {

// service依赖于Dao

@Autowired

DeptMapper deptMapper;

public DeptMapper getDeptMapper() {

return deptMapper;

}

public void setDeptMapper(DeptMapper deptMapper) {

this.deptMapper = deptMapper;

}

@Override

public List getALlDeptInfo() {

// TODO Auto-generated method stub

return deptMapper.getDeptInfo();

}

}

对应的mapper文件：

public interface DeptMapper {

public void insertByDept(Dept dept);

public List getDeptInfo();

}

对应的mapper,xml文件：（Dept.xml）
<?xml version="1.0" encoding="UTF-8" ?>
select * from tbl_dept

insert into tbl_dept (dept_name)

values(#{dept_name})

index.jsp页面：

<%@ page language=“java” contentType=“text/html; charset=utf-8”

pageEncoding=“utf-8”%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
员工列表
href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

<%

pageContext.setAttribute(“App_Path”, request.getContextPath());

%>

aria-labelledby=“myModalLabel”>

<button type=“button” class=“close” data-dismiss=“modal”

aria-label=“Close”>

×

新增员工信息

emp_Name

<input type=“text” class=“form-control” id=“inputName”

placeholder=“姓名”>

gender

<input type=“radio”

name=“inlineRadioOptions” id=“genderMan” value=“男”

checked=“checked”> 男

<input type=“radio”

name=“inlineRadioOptions” id=“genderGirl” value=“女”> 女

<input type=“radio”

name=“inlineRadioOptions” id=“genderOthers” value=“女”>

女

Email

<input type=“email” class=“form-control” id=“inputEmail”

placeholder=“Email@gmail.com”>

DeptName

<button type=“button” class=“btn btn-default” data-dismiss=“modal”

id=“Close”>Close

Save

changes

致一科技@<span

style=“font-family: STXingkai; color: graytext;”>Zhiyi

Technology

新增

删除

emp_id emp_name gender eamil dept_id dept_Name 操作

18.新增_新增的基本完成

==========================================================================

1.为了规范开发，固定：

Url发出：

/emp/{id} get ：用于查询员工信息

/emp/ Post ：用于保存员工信息

/emp/{id} put ：用于修改员工信息

/emp/{id} delete ：用于删除员工信息

中间遇到了很多问题，暂时还未解决，先暂时使用servlet提交的方式完成此任务；等解决之后在进行补充

19.新增_jquery的前端校验

==============================================================================
- 1.这次的功能全部操作在index.jsp中，所以核心代码如下：
//用于给提交按钮添加事件,用于在提交时可以校验你所提交的数据

$(“#submit”).click(function(){

//1.拿到校验的数据，使用正则表达式进行校验

var emp_name=$(“#inputName”).val();

var regName=/(^{[a-zA-Z0-9_-]{1,16}$)|(}[\u2E80-\u9FFF]{2,5})/;

if(!regName.test(emp_name)){

alert(“用户名输入a-z或者A-Z或者2-5位中文”);

return false;

};

})

20.新增_jquery的前端校验优化

================================================================================

1.alert提示太丑，我们可以给其输入框增加样式来完成提示

添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可

每次添加之前先清除之前的样式和内容

核心代码：

//用于给提交按钮添加事件,用于在提交时可以校验你所提交的数据

$(“#submit”).click(function(){

//1.拿到校验的数据，使用正则表达式进行校验

var emp_name=$(“#inputName”).val();

var regName=/(^{[a-zA-Z0-9_-]{1,16}$)|(}[\u2E80-\u9FFF]{2,5})/;

if(!regName.test(emp_name)){

//alert(“用户名输入a-z或者A-Z或者2-5位中文”);

//alert提示太丑，我们可以给其输入框增加样式来完成提示

//添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可

//每次添加之前先清除之前的样式和内容

$(“#inputName”).parent().removeClass(“has-error has-warning has-success”);

$(“#helpSpanToInputName”).text(“”);

$(“#inputName”).parent().addClass(“has-error”);

$(“#helpSpanToInputName”).text(“用户名输入a-z或者A-Z或者2-5位中文”);

return false;

}

else{

$(“#inputName”).parent().addClass(“has-success”);

}

})

21.新增_ajax校验用户名是否重复

================================================================================
- 1.首先要判断书写的用户名是否在数据库中已经存在
//用于给提交按钮添加事件,用于在提交时可以校验你所提交的数据

$(“#submit”).click(function(){

//1.拿到校验的数据，使用正则表达式进行校验

var emp_name=$(“#inputName”).val();

var regName=/(^{[a-zA-Z0-9_-]{1,16}$)|(}[\u2E80-\u9FFF]{2,5})/;

var email = $(“#inputEmail”).val();

var regEmail = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;

if(!regName.test(emp_name)){

//alert(“用户名输入a-z或者A-Z或者2-5位中文”);

//alert提示太丑，我们可以给其输入框增加样式来完成提示

//添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可

//每次添加之前先清除之前的样式和内容

$(“#inputName”).parent().removeClass(“has-error has-warning has-success”);

$(“#helpSpanToInputName”).text(“”);

$(“#inputName”).parent().addClass(“has-error”);

$(“#helpSpanToInputName”).text(“用户名输入a-z或者A-Z或者2-5位中文”);

return false;

}

else{

$(“#inputEmail”).parent().addClass(“has-success”);

}

if(!regEmail.test(email)){

//alert(“用户名输入a-z或者A-Z或者2-5位中文”);

//alert提示太丑，我们可以给其输入框增加样式来完成提示

//添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可

//每次添加之前先清除之前的样式和内容

$(“#inputEmail”).parent().removeClass(“has-error has-warning has-success”);

$(“#helpSpanToinputEmail”).text(“”);

$(“#inputEmail”).parent().addClass(“has-error”);

$(“#helpSpanToinputEmail”).text(“email格式不正确”);

return false;

}

else{

$(“#inputEmail”).parent().addClass(“has-success”);

}

var ajaxValidate=$(this).attr(“data-m”);

alert(ajaxValidate);

if(ajaxValidate==‘fail’){

return false;

}else{

return true;

}

})

//给员工姓名的输入框绑定事件来检测其内容是否发生改变

$(“#inputName”).change(function(){

//获取当前输入框中的值

var emp_name=this.value;

//一旦改变就立刻发送ajax请求来判断用户名是否可用

$.ajax({

url:“http://localhost:8080/wxservice/checkUser”,

data:“emp_name=”+emp_name,

type:“POST”,

success:function(data){

if(data.extend.result){

//每次添加之前先清除之前的样式和内容

$(“#inputName”).parent().removeClass(“has-error has-warning has-success”);

$(“#helpSpanToInputName”).text(“”);

$(“#inputName”).parent().addClass(“has-success”);

$(“#helpSpanToInputName”).text(“用户名可用”);

$(“#submit”).attr(“data-m”,“success”);

}else{

//每次添加之前先清除之前的样式和内容

$(“#inputName”).parent().removeClass(“has-error has-warning has-success”);

$(“#helpSpanToInputName”).text(“”);

$(“#inputName”).parent().addClass(“has-error”);

$(“#helpSpanToInputName”).text(“用户名已经注册”);

//此处就是为了在提交时判断会否可以提交

$(“#submit”).attr(“data-m”,“fail”);

}

}

});

})
- 2.在controllwer层中处理ajax请求：
但是在编写controller曾之前首先要写好相对应的service以及serviceImpl,mapper,mapper.xml;

先写mapper:

1.empMapper:

public interface EmpMapper {

public List checkUserAlreadyUseByUserName(String emp_name);

}

2.empMapper.xml：

select *

from tbl_emp

where emp_name=#{emp_name}

3.service:

public interface EmpService {

public Boolean checkUser(String name);

}

4.serviceImpl:

@Service

public class EmpServiceImpl implements EmpService {

// service依赖于Dao

@Autowired

EmpMapper eMapper;

@Autowired

DeptMapper deptMapper;

@Override

public Boolean checkUser(String name) {

// TODO Auto-generated method stub

Boolean result=null;

List lemps=eMapper.checkUserAlreadyUseByUserName(name);

if(lemps.size()>=1) {

result=false;

}else {

result=true;

}

return result;

}

}

5.controller:

@Controller

public class EmpController {

@Autowired

EmpService empService;

//用于检验用户名是否可用

@ResponseBody

@RequestMapping(“/checkUser”)

public Msg checkUse(@RequestParam(value=“emp_name”) String emp_name) {

Boolean result=empService.checkUser(emp_name);

return Msg.success().add(“result”, result);

}

}

注：以上都是代码片段，请注意！！！！！！！！！！！！！！！！！

22.新增_ajax校验用户名细节处理

================================================================================

1.由于时间太过仓促，先不进行优化

23.新增_JSR303校验

===========================================================================

1.此校验是后台校验,先导入Hibernate validator jar包，maven仓库直接搜索Hibernate validator，点击进入Hibernate validator Engine Relocation Artifact

24.新增分页插件的合理化

=========================================================================

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

此时引入pageHelper中的一个属性：reasonable：

分页合理化参数，默认值为false。当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。

默认false 时，直接根据参数进行查询。

打开mybatis,xml文件，找到plugins下的

在里面新增property属性；

25.修改的基本实现

======================================================================

最后更多分享：前端字节跳动真题解析
;

})
- 2.在controllwer层中处理ajax请求：
但是在编写controller曾之前首先要写好相对应的service以及serviceImpl,mapper,mapper.xml;

先写mapper:

1.empMapper:

public interface EmpMapper {

public List checkUserAlreadyUseByUserName(String emp_name);

}

2.empMapper.xml：

select *

from tbl_emp

where emp_name=#{emp_name}

3.service:

public interface EmpService {

public Boolean checkUser(String name);

}

4.serviceImpl:

@Service

public class EmpServiceImpl implements EmpService {

// service依赖于Dao

@Autowired

EmpMapper eMapper;

@Autowired

DeptMapper deptMapper;

@Override

public Boolean checkUser(String name) {

// TODO Auto-generated method stub

Boolean result=null;

List lemps=eMapper.checkUserAlreadyUseByUserName(name);

if(lemps.size()>=1) {

result=false;

}else {

result=true;

}

return result;

}

}

5.controller:

@Controller

public class EmpController {

@Autowired

EmpService empService;

//用于检验用户名是否可用

@ResponseBody

@RequestMapping(“/checkUser”)

public Msg checkUse(@RequestParam(value=“emp_name”) String emp_name) {

Boolean result=empService.checkUser(emp_name);

return Msg.success().add(“result”, result);

}

}

注：以上都是代码片段，请注意！！！！！！！！！！！！！！！！！

22.新增_ajax校验用户名细节处理

================================================================================

1.由于时间太过仓促，先不进行优化

23.新增_JSR303校验

===========================================================================

1.此校验是后台校验,先导入Hibernate validator jar包，maven仓库直接搜索Hibernate validator，点击进入Hibernate validator Engine Relocation Artifact

24.新增分页插件的合理化

=========================================================================

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

此时引入pageHelper中的一个属性：reasonable：

分页合理化参数，默认值为false。当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。

默认false 时，直接根据参数进行查询。

打开mybatis,xml文件，找到plugins下的

在里面新增property属性；

25.修改的基本实现

======================================================================

最后更多分享：前端字节跳动真题解析
- [外链图片转存中…(img-dQIXYHTN-1725921356989)]

2401_86367152

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ssm——整合，前端页面设计，分页(1)

1.重新改造Index页面，让它发出ajax请求：

1. 这个模态框是引用bootStrap中的javaScript组件中模态框的案例

1.每一次点击应该新增一次ajax请求来获取部门信息到添加的下拉框中

2.在编写此功能之前要先有一个方法专门返回部门信息数据，故在Controller层添加一个控制器DepController：

1.为了规范开发，固定：

1.alert提示太丑，我们可以给其输入框增加样式来完成提示

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

最后更多分享：前端字节跳动真题解析

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

最后更多分享：前端字节跳动真题解析

ssm——整合，前端页面设计，分页(1)

1.重新改造Index页面，让它发出ajax请求：

1. 这个模态框是引用bootStrap中的javaScript组件中模态框的案例

新增员工信息

1.每一次点击应该新增一次ajax请求来获取部门信息到添加的下拉框中

2.在编写此功能之前要先有一个方法专门返回部门信息数据，故在Controller层添加一个控制器DepController：

新增员工信息

1.为了规范开发，固定：

1.alert提示太丑，我们可以给其输入框增加样式来完成提示

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

最后更多分享：前端字节跳动真题解析

1.由于上面的pageHelper插件中，分页显示出现了一些问题，比如当总页码超过最后一页，同样会进行跳转的问题：

最后更多分享：前端字节跳动真题解析