SSM学习笔记4——实战项目CRM-数据查询

本文链接：https://blog.youkuaiyun.com/weixin_45550460/article/details/108992099

实战项目CRM

SSM + jQuery EasyUI

本章学习目标

CRM 开发环境搭建
客户列表展示
客户分页显示
客户添加
客户信息修改回显
客户信息更新保存
客户信息删除

CRM 开发环境搭建

在上一个项目的基础上，
config–>mapper–>CustomerMapper.xml：添加客户这一段可以删了
src–>dao–>CustomerMapper.java：添加客户的saveCustomer方法可以删了
src–>service–>CustomerService.java：saveCustomer这一行可以删了
src–>service–>impl–>CustomerServiceImpl.java：类里面的内容可以删了
src–>test包可以删了
src–>controller–>CustomerController.java：类里面的内容可以删了

至此就可以得到整合完SSM之后的一个最基本的结构

再添加easyui及界面

部署到Tomcat上（如果有问题的话尝试参照下图）

在这里插入图片描述
运行，显示如下：

1. 客户列表展示

1.1.Mapper 接口

src–>dao–>CustomerMapper.java

查询：
List<Customer>获得所有客户的信息，取名为findAl

package cn.sm1234.dao;
import java.util.List;
import cn.sm1234.domain.Customer;

public interface CustomerMapper {
	/**
	* 查询所有数据
	*/
	public List<Customer> findAl();
}

1.2.Sql 映射配置

findAl()要在config–>mapper–>CustomerMapper.xml里面添加配置，配置的id一定要跟方法名称保持一致
Customer实体的属性名，要跟数据库表的字段保持一致
所以配置里的resultType，用Customer进行封装

打开数据库，t_customer表–>右键–>粘贴SQL语句–>从…选择
得到的是：


SELECT 	`id`, 
	`NAME`, 
	`gender`, 
	`telephone`, 
	`address`
	 
	FROM 
	`ssm`.`t_customer` 
	LIMIT 0, 1000;

最后一句LIMIT 0, 1000; 表示分页，现在没用到，可以删掉

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 该文件编写 mybatis 中的 mapper 接口里面的方法提供对应的 sql 语句 -->
<mapper namespace="cn.sm1234.dao.CustomerMapper">

	<!-- 查询所有数据 -->
	<select id="findAl" resultType="cn.sm1234.domain.Customer">
		SELECT id,
			NAME,
			gender,
			telephone,
			address
			FROM
		ssm.t_customer
	</select>
</mapper>

1.3.Service

接下来提供一个service来对接

接口：
src–>service–>CustomerService.java

package cn.sm1234.service;

import cn.sm1234.domain.Customer;
import java.util.List;

public interface CustomerService {

	/**
	* 查询所有数据
	*/
	public List<Customer> findAll();
}

然后要做一个实现：

src–>service–>impl–>CustomerServiceImpl.java

package cn.sm1234.service.impl;

import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import cn.sm1234.dao.CustomerMapper;
import cn.sm1234.domain.Customer;
import cn.sm1234.service.CustomerService;

@Service("customerService")
@Transactional
public class CustomerServiceImpl implements CustomerService {
	
	//注入 Mapper 接口对象
	@Resource
	private CustomerMapper customerMapper;
	
	public List<Customer> findAll() {
		return customerMapper.findAl();
	}
}

1.4.Controller

src–>controller–>CustomerController.java

注入service对象

查询数据：
等一下是要跟easyUI的datagrid组件进行对接，该组件会接受json数据，所以这里用一个map集合来返回json数据，方法起名为list
要把map转成json，所以加一个@ResponseBody
通过customerService这个业务来拿到所需要的数据
拿到数据之后要封装成相应的格式才能返回
datagrid组件有分页功能，如果是要分页的话，就是照着上面的用map
这里简化不分页，所以方法返回list就行了

package cn.sm1234.controller;

import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.sm1234.domain.Customer;
import cn.sm1234.service.CustomerService;

@Controller
@RequestMapping("/customer")
public class CustomerController {
	
	//注入 service 对象
	@Resource
	private CustomerService customerService;
	
	/**
	* 查询所有数据，给页面返回 json 格式数据
	* easyui 的 datagrid 组件，需要展示数据，需要提供 json 数据：[ {id:1,name:xxx},{id:1,name:xxx} ]
	*/
	@RequestMapping("/list")
	@ResponseBody // 用于转换对象为 json
	public List<Customer> list(){
		//查询数据
		List<Customer> list = customerService.findAll();
		return list;
	}

}

如果报错，有可能是因为SpringMVC 在转换 Java 对象为 json 数据的时候，jackson 插件的版本太低，导致转换失败。
解决办法：
升级 jackson 插件的版本，最好升级都 2.6 以上，升级之前记得把旧的删了
在这里插入图片描述
这三个是jackson 的包

部署Tomcat，访问：
http://localhost:8080/08.crm/customer/list.action
显示：
在这里插入图片描述
说明数据成功转换，成功从数据库返回到页面

1.5.页面

customer_manage.jsp
在这里做数据展示
导入easyui的资源文件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>客户管理</title>   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 导入easyui的资源文件 -->
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link id="themeLink" rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  </head>

然后就可以用datagrid做展示
datagrid的使用：
写一个table 起名list
写一个JavaScript，进行数据的展示
里面写一个页面加载的函数，把数据加载到table
用datagrid抓取数据，要两个参数：url（后台的地址），columns（填充的列数据）

<body>
<table id="list"></table>
<script type="text/javascript">
  		$(function(){
  			$("#list").datagrid({
  				//url:后台数据查询的地址
  				url:"customer/list.action",
  				//columns：填充的列数据
  					//field:后台对象的属性
  					//tille:列标题
  				columns:[[
  					{
  						field:"id",
  						title:"客户编号",
  						width:100,
  						checkbox:true
  					},
  					{
  						field:"name",
  						title:"客户姓名",
  						width:200
  					},
  					{
  						field:"gender",
  						title:"客户性别",
  						width:200
  					},
  					{
  						field:"telephone",
  						title:"客户手机",
  						width:200
  					},
  					{
  						field:"address",
  						title:"客户住址",
  						width:200
  					}
  				]]
  			});
  		});
  	</script>
  </body>
</html>

至此，重新运行项目，点击客户管理会显示之前在数据库添加过的数据：
在这里插入图片描述
ps：顺带说一下，如果点击左侧的客户管理，右边的选项卡什么都没有显示，可能是因为你是直接在eclipse内置浏览器打开，复制地址，用另外的浏览器打开就可以了（这个问题真的是搞了我好长时间。。。）

2. 客户分页显示

分页详解：
在这里插入图片描述
前端部分，在customer_manage.jsp添加

pagination:true

这一句就行，然后把url:"customer/list.action", 改成url:"customer/listByPage.action", 后面会另外写

2.2.Controller

接下来就是在Controller做分页查询，把结果返回给datagrid

2.2.1. 使用 mybatis 分页插件

2.2.1.1. 导入 mybatis 分页插件的 jar 包

在这里插入图片描述

2.2.1.2. 配置 applicationContext.xml

在这里引入这个插件的功能
（applicationContext.xml是mybatis 的配置文件）

在创建SqlSessionFactory对象那里添加

<!-- 引入插件 -->
		<property name="plugins">
			<array>
				<!-- mybatis分页插件 -->
				<bean class="com.github.pagehelper.PageInterceptor">
					<property name="properties">
						<!-- 
						helperDialect:连接数据库的类型
						 -->
						<value>
							helperDialect=mysql
						</value>
					</property>
				</bean>
			</array>
		</property>

CustomerController.java：

package cn.sm1234.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.sm1234.domain.Customer;
import cn.sm1234.service.CustomerService;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Controller
@RequestMapping("/customer")
public class CustomerController {
	
	//注入service对象
	@Resource
	private CustomerService customerService;
	
	/**
	 * 查询所有数据，给页面返回json格式数据
	 * easyui的datagrid组件，需要展示数据提供json数据： [ {id:1,name:xxx},{id:1,name:xxx} ]
	 */
	@RequestMapping("/list")
	@ResponseBody  // 用于转换对象为json
	public List<Customer> list(){
		//查询数据
		List<Customer> list = customerService.findAll();
		return list;
	}
	
	//设计Map集合存储需要给页面的对象数据
	private Map<String,Object> result = new HashMap<String,Object>();
	
	/**
	 * 分页查询
	 */
	@RequestMapping("/listByPage")
	@ResponseBody
	public Map<String,Object> listByPage(Integer page,Integer rows){
		//设置分页参数
		PageHelper.startPage(page, rows);
		//查询所有数据
		List<Customer> list = customerService.findAll();
		
		//使用PageInfo封装查询结果
		PageInfo<Customer> pageInfo = new PageInfo<Customer>(list);
		
		//从PageInfo对象取出查询结果
		//总记录数
		long total = pageInfo.getTotal();
		//当前页数据列表
		List<Customer> custList = pageInfo.getList();
		
		result.put("total", total);
		result.put("rows", custList);
		
		return result;
	}
}