bootstrap的学习使用和pagehelper分页插件的使用，bootstrap模板，pagehelper的配置与使用

it2023-06-24 72

文章目录

1. 关于表单数据提交后台两种常用方式1.1 通过`$('#formID').serialize()` 表单序列化提交1.2 前后台都通过json数据格式提交【***】1.2.1前台必须通过$.ajax()的方式提交1.2.2 后台控制器接收数据 2. bootstrapbootstrap的使用步骤（bootstrap模板）配置、使用、测试 3. PageHelper分页插件的配置、使用、测试3.1 配置PageHelper依赖3.2 配置PageHelper的插件，实现参数合理化，方式有两种（**推荐使用第二种**）。

1. 关于表单数据提交后台两种常用方式

1.1 通过$('#formID').serialize() 表单序列化提交

serialize()序列化提交的数据格式类似于 k1=v1&k2=v2&k3=v3...的形式，它提交的数据并不是json格式的。json数据格式是这样的{k1:v1,k2:v2,k3=v3...}

1.2 前后台都通过json数据格式提交【***】

1.2.1前台必须通过$.ajax()的方式提交

通过·$.ajax()·的方式提交并且设置contentType:"application/json;charset=UTF-8". 提交模板：

$(function () { $('#button').click(function () { //1. js发送请求 var dname = $('#add_dname').val() console.info(dname) $.ajax({ url: '${path}/deptv3/addUI', async: true, //data: '{"id":"","name":"' + dname + '"}', //data:$("#formId").serialize(), data: JSON.stringify({"key1":value1,"key2":balue2}),向后台controller发送的数据 dataType: "json", //不必须 type: "post", contentType: "application/json;charset=UTF-8", //必须写 //2. js接收结果 success: function (result) { if (200 == result.code) { //3. js更新页面 alert(result.message) } }, error: function () { //alert('服务器出现问题，请求失败') alert(result.message) } }); }) })

1.2.2 后台控制器接收数据

@RequestMapping注解需要设置produces = "application/json;charset=UTF-8"指定后台传到jsp页面的数据格式，可以设置consumes = "application/json;charset=UTF-8",声明前台jsp传到后台数据格式为json格式数据模板：

@RequestMapping(value = "registerUser", produces = "application/json;charset=UTF-8") @ResponseBody public Object registerUser(User user, Errors errors,) throws Exception { }

2. bootstrap

先上学习地址>>>>>>>>>>> Bootstrap V3 的JavaScript 插件 - 中文文档 Bootstrap V3 的CSS样式 - 中文文档 Bootstrap V3 的components组件 - 中文文档

下载地址： bootstrap下载地址

可视化布局地址： bootstrap可视化布局 - 菜鸟工具

Bootstrap是Twitter推出的一个用于前端开发的 ·开源· 工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。 Bootstrap特点：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

bootstrap的使用步骤（bootstrap模板）配置、使用、测试

（1）复制bootstrap的内容（css/js/fonts等）到项目的webapp文件夹

（2）在temp.jsp页面中引入bootstrap使用三个meta元素必须放在最前面使用项目访问路径 ${path}来获取bootstrap的css、js等文件 Bootstrap 的所有JavaScript 插件都依赖的是 jQuery，所以必须在加载 Bootstrap的JavaScript插件的前面导入jQuery包

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">   <% pageContext.setAttribute("path",request.getContextPath()); %>  <link href="${path}/css/bootstrap.min.css" rel="stylesheet">  <script src="${path}/js/jquery-1.11.0.min.js"></script>  <script src="${path}/js/bootstrap.min.js"></script> <title>bootstrap模板</title> </head> <body> <div class="container"> <h1>你好，世界！</h1> <button type="button">你好我是普通按钮</button> <button class="bg-primary" type="button" >你好我是bootstrap按钮</button> </div> </body> </html>

（3）在设置 spring-mvc.xml 中过滤静态资源拦截（不拦截静态资源）

<mvc:resources location="/css/" mapping="/css/**" /> <mvc:resources location="/images/" mapping="/images/**" /> <mvc:resources location="/js/" mapping="/js/**" /> <mvc:resources location="/fonts/" mapping="/fonts/**" />

（4）测试，在controller中调用方法（请求转发）测试访问temp.jsp（WEB-INF下的文件是不能直接通过调用地址来打开，也就是不能重定向打开）

@Controller @RequestMapping("/deptv3") public class DepartmentV3Controller { //测试跳转bootstrap模板，看是否生效 @RequestMapping(path="/tempUI",method = RequestMethod.GET) public String tempUI(){ return "temp"; } }

测试结果成功：

3. PageHelper分页插件的配置、使用、测试

（1）PageHelper介绍 PageHelper是一个针对MyBatis提供的分页插件，将分页查询简单化，只需要new就能使用（不需要自己再去计算分页数据了）。（2）使用maven方式需要配置pagehelper依赖和配置插件plugin

3.1 配置PageHelper依赖

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.0.0</version> </dependency>

3.2 配置PageHelper的插件，实现参数合理化，方式有两种（推荐使用第二种）。

PageInterceptor拦截器配置 ===》保证参数合理化

比如当前页currPage <= 1，则按currPage = 1进行查询如果当前页currPage > totalPage(总页数) ，则按currPage = totalPage(最后一页)查询 3.2.1 配置方式第一种：配置到MyBatis核心配置文件(SqlMapConfig )中，然后在spring核心配置文件applicationContext.xml中引入MyBatis的核心配置文件。（不推荐）

步骤A：在MyBatis核心配置文件SqlMapConfig.xml中配置PageHelper分页插件（拦截器PageInterceptor，为了保证参数的合理化）

<plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <property name="reasonable" value="true"/> </plugin> </plugins>

步骤B：在spring核心配置文件applicationContext.xml的sqlSessionFactory工厂中添加MyBatis的核心配置文件SqlMapConfig.xml

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  <property name="dataSource" ref="dataSource"/>  <property name="typeAliasesPackage" value="com.xgf.bean"/>  <property name="configLocation" value="classpath:SqlMapConfig.xml"/> </bean> 3.2.2 配置方式第二种【推荐使用】，直接在Spring核心配置文件applicationContext.xml中进行配置PageHelper分页插件的拦截器，实现参数的合理化。（需要注销前面的第一种配置）  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  <property name="dataSource" ref="dataSource"/>  <property name="typeAliasesPackage" value="com.xgf.bean"/>    <property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties">    <value> reasonable=true helperDialect=mysql </value> </property> </bean> </array> </property> </bean>

3.2.3 测试使用pagehelper分页插件

@RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration("classpath:applicationContext.xml") public class TestPageHelper { @Autowired private IDepartmentService departmentService; //slf4j日志 private static final Logger l = LoggerFactory.getLogger(TestPageHelper.class); @Test public void test01(){ //调用分页插件（只需要两行代码） //先调用PageHelper.start(1,10)再调用sql语句进行查询，然后将数据放到分页中，才能实现自动分页。 //参数1：当前页参参数2：每页记录数 PageHelper.startPage(1,10); //查询数据库 List<Department> departmentList = departmentService.findAllDepartments(); //将数据放到分页中 PageInfo<Department> pageInfo = new PageInfo<>(departmentList); l.info("test01 测试 pageInfo = " + pageInfo); } } 测试结果截图（成功）

如果出现：SQL syntax异常：... right syntax to use near ‘LIMIT 10‘ at line 1 请看这个》》》pagehelper出现SQL syntax异常解决办法

2.4 【小知识点别错过***】 >- 分页查询使用 limit，而PageHelper插件的**PageInterceptor**拦截器就是对查询的sql进行拦截然后后面拼接limit实现分页。所以，我们的sql查询语句末尾不能添加分号`;`，不然会报错：`SQL syntax： ... right syntax to use near ‘LIMIT 10‘ at line 1` >- 先调用PageHelper.start(1,10)再调用sql语句进行查询，然后将数据放到分页中，才能实现自动分页。

最新回复(0)