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

2401_84094620

于 2024-04-20 04:40:12 发布

阅读量946

点赞数 7

分类专栏：程序员文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/2401_84094620/article/details/137985484

版权

程序员专栏收录该内容

268 篇文章 0 订阅

订阅专栏

@Test

public void insertDeptByBATCH() {

DeptMapper OCM=sqlSession.getMapper(DeptMapper.class);

for(int i=0;i<10;i++) {

String id=UUID.randomUUID().toString().substring(0, 5);

OCM.insertByDept(new Dept(id));

}

注:对应的bean的构造方法没有添加，请自己添加

8.查询_分页后台代码的完成

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

1.主页面的执行流程：访问Index.jsp页面->index.jsp页面发送出查询信息列表的请求->EmpController来接受请求，然后查询出员工数据->跳转到list,jsp页面进行展示
2.在index.jsp中创建的内容：

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

pageEncoding=“utf-8”%>

<jsp:forward page=“/emp”></jsp:forward>

3.创建对应的控制器EmpController：

public class EmpController {

public String getAllEmpInfo() {

//我们有视图解析器所以返回的list，会自动给它添加前缀和后缀

return “list”;

}}

4.由于视图解析对应的地址是

所以先在/WEB-INF/view/目录下创建list,jsp:

5.开始向数据库取数据，具体步骤是：先创建service接口->在serviceImpl中来实现具体的接口->在controller层中调用这个接口即可；

<1>.创建EmpService:

public interface EmpService {

public List getALlEmpInfo();

}

<2>在serviceImpl中来实现具体的接口EmpServiceImpl:

public class EmpServiceImpl implements EmpService {

// service依赖于Dao

@Autowired

EmpMapper eMapper;

@Override

public List getALlEmpInfo() {

// TODO Auto-generated method stub

return eMapper.getEmpInfo();

}

但是如果数据较为庞大，每一次都查询所有的数据太过于繁琐，所以引入分页的组件PageHelper:

1.现在pom中引入pageHepler插件（直接在maven仓库中搜索pagehelper，选择对应的版本下载即可）

2.在mybatis的全局配置中注册分页组件：

3.引用组件也特别简单，只需要在查询之前调用PageHelper.startPage方法即可；

在EmpController的getAllEmpInfo（）方法中调用，注意一定要写在查询之前，而且后面紧跟的这个查询就是分页查询；

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

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

代码详情：

@Controller

public class EmpController {

@Autowired

EmpService empService;

//拦截emp请求

@RequestMapping(“/emp”)

public String getAllEmpInfo(@RequestParam(value=“pn”,defaultValue=“1” ) Integer pn) {

Map<String, Object> map = new HashMap<String, Object>();

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

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

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

List lemp=empService.getALlEmpInfo();

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

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

map.put(“pageInfo”,page );

//我们有视图解析器所以返回的list，会自动给它添加前缀和后缀

return “list”;

}

9.查询_使用spring的单元测试测试分页请求

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

1.创建一个单元测试类, 代码如下：

package com.test;

//@RunWith帮我们创建容器

//@ContextConfiguration指定创建容器时使用哪个配置文件

@RunWith(SpringJUnit4ClassRunner.class)

@ContextConfiguration(locations = { “classpath:conf/spring.xml”, “classpath:conf/spring-mvc.xml” })

@WebAppConfiguration

public class Test2 {

// 传入spring-mvc的ioc;

// 注：@Autowired只能装配IOC里面的,所以在上面添加了一个WebAppConfiguration注解，拿到web的ioc容器

@Autowired

WebApplicationContext context;

// 虚拟单元测试请求，获取处理结果

MockMvc mocMvc;

// 每次使用之前都要初始化一次，所以添加一个before注解

@Before

public void initMockMvc() {

// 只有先创建才能使用

mocMvc = MockMvcBuilders.webAppContextSetup(context).build();// 这个mocMvc就能模拟我的mvc请求

}

@Test

public void testPage() throws Exception {

// 模拟请求拿到返回值

MvcResult result = mocMvc.perform(MockMvcRequestBuilders.get(“/emp”).param(“pn”, “1”)).andReturn();

// 请求成功以后，请求域中会有pageInfo,那么我们就可以去取出进行验证

MockHttpServletRequest request = result.getRequest();

PageInfo pageInfo = (PageInfo) request.getAttribute(“pageInfo”);

System.out.println(“当前页码=” + pageInfo.getPageNum());

System.out.println(“总页码=” + pageInfo.getPages());

System.out.println(“总记录数=” + pageInfo.getTotal());

System.out.println(“在页面需要连续显示的页码=”);

int pageNu[] = pageInfo.getNavigatepageNums();

for (int nu : pageNu) {

System.out.print(nu + " ");

}

// 获取员工数据

List leEmps = pageInfo.getList();

for (Emp e : leEmps) {

System.out.println(e.toString());

}

10.查询_搭建BootStrap分页页面以及路径解析

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

1.路径的问题：

1.web路径，不以/开始的相对路径，找资源，以当前文件为基准，特别容易出问题
2.web路径以/开始的相对路径，找资源，以服务器为基准（http://localhost:3306/weservice/）

也就是说在找资源时要加上http://localhost:3306/weservice/，但是为了避免是写错误或者麻烦，我们可以使用这种方法来自动获取路径：

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

取值： A p p P a t h / 资源路径：比如我的要找 / s s m P r o j e c t / s r c / m a i n / w e b a p p / j s / j q u e r y 3 . 3.1. j s 文件，那么就可以直接写： {App_Path}/资源路径：比如我的要找/ssmProject/src/main/webapp/js/jquery_3.3.1.js文件，那么就可以直接写： AppPath/资源路径：比如我的要找/ssmProject/src/main/webapp/js/jquery3.3.1.js文件，那么就可以直接写：{App_Path}/js/jquery_3.3.1.js

2.由于所有的操作都是对list.jsp的操作，所以直接给出源码：

list.jsp文件：

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

pageEncoding=“utf-8”%>

员工列表

href=“https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>

SSM-CRUD

新增

删除

emp_id emp_name gender eamil dept_id 操作 emp_id emp_name gender eamil dept_id

编辑

删除

当前记录数:XXXX

首页
aria-hidden=“true”>«
1
2
3
4
5
aria-hidden=“true”>»
末页
11.查询_显示分页数据

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

1.由于表格的行数都是根据后台数据自动产生，所以我们要使用遍历：目前推荐c:foreach语句：

使用此语句，先引入核心标签库：<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %>

注：如果报错，就先在pom中引入jstl标签库

javax.servlet

jstl

1.2

目前就只有这一个版本，不要引用错了

 2.话不多说直接看代码：

同样是list.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());

%>

致一科技@Zhiyi Technology

新增

删除

emp_id emp_name gender eamil dept_id 操作
<c:forEach items=“${pageInfo.list }” var=“emp”>
${emp.emp_id} ${emp.emp_name} ${emp.gender} ${emp.eamil} ${emp.dept_id}

编辑

删除

</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中，所以核心代码如下：
//用于给提交按钮添加事件,用于在提交时可以校验你所提交的数据
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

class=‘pagination’>");

if (data.extend.pageInfo.pageNum > 1) {

$(“.pagination”).append(

“<li οnclick='toPage(” + 1
- “)'>首页
- ”);
}

//上一页的值

var prevoiuePage = data.extend.pageInfo.pageNum - 1;

if (data.extend.pageInfo.hasPreviousPage) {

$(“.pagination”)

.append(

“<li οnclick='toPage(”
- prevoiuePage
- “)'> «
- ”);
}

$.each(data.extend.pageInfo.navigatepageNums,

function(index, item) {

if (item == data.extend.pageInfo.pageNum) {

$(“.pagination”).append(

“
” + item
- “
- ”);
}

if (item != data.extend.pageInfo.pageNum) {

$(“.pagination”).append(

“<li οnclick='toPage(” + item
- “)'>” + item
- “
- ”);
}

});

//下一页的值

var nextPage = data.extend.pageInfo.pageNum + 1;

if (data.extend.pageInfo.hasNextPage) {

$(“.pagination”)

.append(

“<li οnclick='toPage(”
- nextPage
- “)'>»
- ”);
//末页的值

var lastPage = data.extend.pageInfo.pages;

$(“.pagination”).append(

“<li οnclick='toPage(” + lastPage
- “)'>末页
- ”);
}

}

//用于弹出新增员工的模态框的点击事件

function addEmp() {

//在模态框弹出之前，先发送ajax请求查出部门信息，添加的下拉框中

addDeptInfoToList();

//此处弹出模态框

$(‘#empAddModal’).modal({

backdrop : “static”

})

}

//用于送ajax请求查出部门信息，添加的下拉框中

function addDeptInfoToList() {

$.ajax({

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

type : “GET”,

success : function(data) {

//接下来就是添加部门信息到下拉列表

$.each(data.extend.depts, function(index,item) {

$(“#inputDeptName”).append(“” + item.dept_name + “”);

});

}

});

}

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

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

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

Url发出：

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

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

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

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

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

19.新增_jquery的前端校验

==============================================================================
- 1.这次的功能全部操作在index.jsp中，所以核心代码如下：
//用于给提交按钮添加事件,用于在提交时可以校验你所提交的数据
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-bhcfaFr9-1713559134833)]

[外链图片转存中…(img-iYPLirp6-1713559134834)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-RIqUgPN4-1713559134834)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-VVMOXhUU-1713559134834)]

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-HekNy6BT-1713559134834)]

[外链图片转存中…(img-2KYPsaPQ-1713559134835)]

2401_84094620

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
ssm——整合，前端页面设计，分页

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！“)'>首页”);//上一页的值.append(“)'>«”);” + item”);if (item!});//下一页的值.append(nextPage“)'>»”);//末页的值“)'>末页”);//用于弹出新增员工的模态框的点击事件//在模态框弹出之前，先发送ajax请求查出部门信息，添加的下拉框中。
复制链接

扫一扫