SSM融合步骤

2023-11-24 17:29:55

Mybatis、SpringMVC练习

CRM系统

  1. 课前回顾
    Springmvc 高级参数绑定 数组 List
    多个
    方法 (Integer[] ids) QueryVo (里面Integer[] ids)

方法（QueryVo 里面List itemList

  1. REquestMapping 处理器映射器（找此标签 路径 ）
    Value = {多个路径,}
    Value = {/item/sfdsf.action} 类头上
    Method=RequestMethod.POST或GET
    3、 Controller方法返回值
    三个
    ModelAndView 建议不使用 不解偶
    String 返回视图的路径 （形参 绑定Model ） 重定向redirect:另一个方法的映射路径 forward:内部转发
    Void 异步请求使用

  2. 异常处理器
    预期、运行时
    自定义异常处理类 实现HandlerEexceptionResolver
    由Spring实现化 自定义的处理类
    未知异常

CustomEexception 继承Eexception

4、 上传图片
1）Form 上传图片了 action上传路径
2）input type=file name=picturePic
3)接收此图片 形参上绑定 MultipartFile picturePic 接口
4）配置此接口的实现类 Springmvc.xml配置CommonsMultipartFileResolver id=multipartFileResolver
5、JSON数据交互
应用场景：前端是各种 html Freemarker JSP一个Servlet 是Java代码 jstl C

浏览器 Ajax 发送JSON字符串 报文

6、拦截器

拦截器 应用 （练习）

1 CRM项目外观

  1. 开发环境
    IDE： Eclipse Mars2
    Jdk: 1.7
    数据库: MySQL
  2. 创建数据库
    数据库sql文件位置如下图：

创建crm数据库，执行sql

效果如下图：

  1. 工程搭建
    使用的Bootstrap前端框架,官方网站
    http://www.bootcss.com/

工程使用Springmvc、spring、mybatis框架整合完成。

3.1. 需要的jar包

  1. spring（包括springmvc）
  2. mybatis
  3. mybatis-spring整合包
  4. 数据库驱动
  5. 第三方连接池。
  6. Json依赖包Jackson

jar包位置如下图：

3.2. 整合思路
Dao层：
1、SqlMapConfig.xml，空文件即可，但是需要文件头。
2、applicationContext-dao.xml
a) 数据库连接Druid
b) SqlSessionFactory对象，需要spring和mybatis整合包下的。
c) 配置mapper文件扫描器。Mapper动态代理开发 增强版

Service层：
1、applicationContext-service.xml包扫描器，扫描@service注解的类。
2、applicationContext-trans.xml配置事务。

Controller层：
1、Springmvc.xml
a) 包扫描器，扫描@Controller注解的类。
b) 配置注解驱动
c) 配置视图解析器

Web.xml文件：
1、配置spring监听器
2、配置前端控制器。

3.3. 创建工程
创建动态web工程，步骤如下图：

创建boot-crm，如下图

3.4. 加入jar包
加入课前资料中的jar包

3.5. 加入配置文件
创建config资源文件夹，在里面创建mybatis和spring文件夹
3.5.1. SqlMapConfig.xml
空文件即可

3.5.2. applicationContext-dao.xml
需要配置：
加载properties文件，数据源，SqlSessionFactory，Mapper扫描

3.5.3. jdbc.properties
配置数据库信息
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/crm?characterEncoding=utf-8
jdbc.username=root
jdbc.password=root

3.5.4. log4j.properties
配置日志信息

Global logging configuration

log4j.rootLogger=DEBUG, stdout

Console output…

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

3.5.5. applicationContext-service.xml
配置service扫描

3.5.6. applicationContext-trans.xml
配置事务管理：事务管理器、通知、切面

3.5.7. Springmvc.xml
配置SpringMVC表现层：Controller扫描、注解驱动、视图解析器

3.5.8. Web.xml
配置Spring、SpringMVC、解决post乱码问题


boot-crm

index.jsp


contextConfigLocationclasspath:spring/applicationContext-*.xml

org.springframework.web.context.ContextLoaderListener

encoding	org.springframework.web.filter.CharacterEncodingFilter

encoding/*

boot-crmorg.springframework.web.servlet.DispatcherServletcontextConfigLocationclasspath:spring/springmvc.xml1

boot-crm/
3.6. 加入静态资源 最终效果如下图：

  1. 实现页面展示
    4.1. 代码实现
    编写CustomerController 显示用户列表
    @Controller
    @RequestMapping(“customer”)
    public class CustomerController {

    /**

    • 显示用户列表
    • @return
      */
      @RequestMapping(“list”)
      public String queryCustomerList() {
      return “customer”;
      }

}

4.2. 页面显示问题
访问页面，发现不能正常显示

打开开发者工具，选择Network，
发现css、js等资源文件无法加载

原因：web.xml配置时，是设置所有的请求都进入SpringMVC。但是SpringMVC 无法处理css、js等静态资源，所以无法正常显示

解决方案：

  1. 在springmvc.xml中配置

  2. 修改web.xml，让所有以action结尾的请求都进入SpringMVC

    boot-crm

    *.action

解决后的效果如下图，可以正常显示页面样式：

我们使用第二种方式解决，因为此项目中的页面的请求都是以action结尾的，所以使用第二种方式，在web.xml里面进行相应的配置

boot-crm

*.action

  1. 实现查询条件初始化
    5.1. 需求分析

页面效果如上图，在查询客户的时候，可以选择客户来源,所属行业,客户级别信息,页面加载时需要初始化查询条件下拉列表。

前端jsp逻辑

--请选择--

按照jsp的要求,把对应的数据查询出来,放到模型中。
数据存放在base_dict表，可以使用dict_type_code类别代码进行查询
使用需要获取的数据如下图：

使用的sql:
SELECT * FROM base_dict WHERE dict_type_code = ‘001’

5.2. 实现DAO开发
5.2.1. pojo
因为页面显示的名字是下划线方式，和数据库表列名一样，根据页面的样式，编写pojo
public class BaseDict {
private String dict_id;
private String dict_type_code;
private String dict_type_name;
private String dict_item_name;
private String dict_item_code;
private Integer dict_sort;
private String dict_enable;
private String dict_memo;
get/set。。。。。。
}

5.2.2. Mapper
编写BaseDictMapper
public interface BaseDictMapper {
/**
* 根据类别代码查询数据
*
* @param dictTypeCode
* @return
*/
List queryBaseDictByDictTypeCode(String dictTypeCode);

}

5.2.3. Mapper.xml
编写BaseDictMapper.xml

5.3. 实现Service开发
5.3.1. BaseDictService 接口
public interface BaseDictService {

/*** 根据类别代码查询* * @param dictTypeCode* @return*/
List queryBaseDictByDictTypeCode(String dictTypeCode);

}

5.3.2. BaseDictServiceImpl 实现类
@Service
public class BaseDictServiceImpl implements BaseDictService {

@Autowired
private BaseDictMapper baseDictMapper;@Override
public List queryBaseDictByDictTypeCode(String dictTypeCode) {List list = this.baseDictMapper.queryBaseDictByDictTypeCode(dictTypeCode);return list;
}

}

5.4. 实现Controller开发
5.4.1. 修改之前编写的controller
@Controller
@RequestMapping(“customer”)
public class CustomerController {

@Autowired
private BaseDictService baseDictService;/*** 显示客户列表* * @return*/
@RequestMapping("list")
public String queryCustomerList(Model model) {// 客户来源List fromType = this.baseDictService.queryBaseDictByDictTypeCode("002");// 所属行业List industryType = this.baseDictService.queryBaseDictByDictTypeCode("001");// 客户级别List levelType = this.baseDictService.queryBaseDictByDictTypeCode("006");// 把前端页面需要显示的数据放到模型中model.addAttribute("fromType", fromType);model.addAttribute("industryType", industryType);model.addAttribute("levelType", levelType);return "customer";
}

}

5.4.2. 效果
实现效果如下图：

5.4.3. 硬编码问题
这里是根据dict_type_code类别代码查询数据，这里的查询条件是写死的，有硬编码问题。可以把类别代码提取到配置文件中，再使用@value注解进行加载。
5.4.3.1. 添加env.properties
添加env.properties配置文件
#客户来源
CUSTOMER_FROM_TYPE=002
#客户行业
CUSTOMER_INDUSTRY_TYPE=001
#客户级别
CUSTOMER_LEVEL_TYPE=006

5.4.3.2. 修改springmvc.xml配置文件
在springmvc.xml中加载env.properties

注意:Controller需要的配置文件信息必须添加到springmvc的配置文件中

5.4.3.3. 修改Controller方法
@Controller
@RequestMapping(“customer”)
public class CustomerController {

// 客户来源
@Value("${CUSTOMER_FROM_TYPE}")
private String CUSTOMER_FROM_TYPE;
// 客户行业
@Value("${CUSTOMER_INDUSTRY_TYPE}")
private String CUSTOMER_INDUSTRY_TYPE;
// 客户级别
@Value("${CUSTOMER_LEVEL_TYPE}")
private String CUSTOMER_LEVEL_TYPE;@Autowired
private BaseDictService baseDictService;/*** 显示客户列表* * @return*/
@RequestMapping("list")
public String queryCustomerList(Model model) {// 客户来源List fromType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_FROM_TYPE);// 所属行业List industryType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_INDUSTRY_TYPE);// 客户级别List levelType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_LEVEL_TYPE);// 把前端页面需要显示的数据放到模型中model.addAttribute("fromType", fromType);model.addAttribute("industryType", industryType);model.addAttribute("levelType", levelType);return "customer";
}

}
6. 客户列表展示
6.1. 需求
展示客户列表，并且可以根据查询条件过滤查询结果，并且实现分页。
效果如下图：

页面代码：

客户信息列表
ID客户名称客户来源客户所属行业客户级别固定电话手机操作
${row.cust_id}${row.cust_name}${row.cust_source}${row.cust_industry}${row.cust_level}${row.cust_phone}${row.cust_mobile} 修改 删除

分析我们需要根据四个条件进行查询，返回数据是分页对象Page

Sql语句:
SELECT
a.cust_id,
a.cust_name,
a.cust_user_id,
a.cust_create_id,
b.dict_item_name cust_source,
c.dict_item_name cust_industry,
d.dict_item_name cust_level,
a.cust_linkman,
a.cust_phone,
a.cust_mobile,
a.cust_zipcode,
a.cust_address,
a.cust_createtime
FROM
customer a
LEFT JOIN base_dict b ON a.cust_source = b.dict_id
LEFT JOIN base_dict c ON a.cust_industry = c.dict_id
LEFT JOIN base_dict d ON a.cust_level = d.dict_id
WHERE
a.cust_name LIKE ‘%马%’
AND a.cust_source = ‘6’
AND a.cust_industry = ‘2’
AND a.cust_level = ‘22’
LIMIT 0, 10

6.2. 创建pojo开发
public class Customer {

private Long cust_id;
private String cust_name;
private Long cust_user_id;
private Long cust_create_id;
private String cust_source;
private String cust_industry;
private String cust_level;
private String cust_linkman;
private String cust_phone;
private String cust_mobile;
private String cust_zipcode;
private String cust_address;
private Date cust_createtime;

get/set。。。。。。
}

6.3. 实现DAO
分析：

  1. 前台发起请求,需要接收请求过来的查询条件数据，可以使用pojo接收数据。需要依此编写查询逻辑。
  2. 前台需要分页显示，根据准备好的分页实现，应该返回分页类Page，而创建Page分页类需要数据总条数，所以也需要查询数据总条数的逻辑。

根据分析，DAO需要编写两个方法:

  1. 需要根据条件分页查询客户信息
  2. 需要根据条件查询数据总条数

6.3.1. 创建QueryVo
需要编写QueryVo，里面包含查询条件属性和分页数据。
创建接受请求参数的QueryVo：
public class QueryVo {

private String custName;
private String custSource;
private String custIndustry;
private String custLevel;// 当前页码数
private Integer page = 1;
// 数据库从哪一条数据开始查
private Integer start;
// 每页显示数据条数
private Integer rows = 10;

get/set。。。。。。
}

6.3.2. Mapper
创建CustomerMapper 接口
public interface CustomerMapper {

/*** 根据queryVo分页查询数据* * @param queryVo* @return*/
List queryCustomerByQueryVo(QueryVo queryVo);/*** 根据queryVo查询数据条数* * @param queryVo* @return*/
int queryCountByQueryVo(QueryVo queryVo);

}

6.3.3. Mapper.xml
创建CustomerMapper.xml

AND a.cust_name LIKE '%${custName}%' AND a.cust_source = #{custSource} AND a.cust_industry = #{custIndustry} AND a.cust_level = #{custLevel}

6.4. 实现service
6.4.1. 接口
编写接口CustomerService
public interface CustomerService {
/**
* 根据条件分页查询客户
*
* @param queryVo
* @return
*/
Page queryCustomerByQueryVo(QueryVo queryVo);
}

6.4.2. 实现类
编写接口实现类CustomerServiceImpl
@Service
public class CustomerServiceImpl implements CustomerService {
@Autowired
private CustomerMapper customerMapper;

@Override
public Page queryCustomerByQueryVo(QueryVo queryVo) {// 设置查询条件,从哪一条数据开始查queryVo.setStart((queryVo.getPage() - 1) * queryVo.getRows());// 查询数据结果集List list = this.customerMapper.queryCustomerByQueryVo(queryVo);// 查询到的数据总条数int total = this.customerMapper.queryCountByQueryVo(queryVo);// 封装返回的page对象Page page = new Page<>(total, queryVo.getPage(), queryVo.getRows(), list);return page;
}

}

6.5. 实现Controller
改造Controller的方法
@RequestMapping(“list”)
public String queryCustomerList(QueryVo queryVo, Model model) {

try {// 解决get请求乱码问题if (StringUtils.isNotBlank(queryVo.getCustName())) {queryVo.setCustName(new String(queryVo.getCustName().getBytes("ISO-8859-1"), "UTF-8"));}
} catch (Exception e) {e.printStackTrace();
}// 客户来源
List fromType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_FROM_TYPE);
// 所属行业
List industryType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_INDUSTRY_TYPE);
// 客户级别
List levelType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_LEVEL_TYPE);// 把前端页面需要显示的数据放到模型中
model.addAttribute("fromType", fromType);
model.addAttribute("industryType", industryType);
model.addAttribute("levelType", levelType);// 分页查询数据
Page page = this.customerService.queryCustomerByQueryVo(queryVo);
// 把分页查询的结果放到模型中
model.addAttribute("page", page);// 数据回显
model.addAttribute("custName", queryVo.getCustName());
model.addAttribute("custSource", queryVo.getCustSource());
model.addAttribute("custIndustry", queryVo.getCustIndustry());
model.addAttribute("custLevel", queryVo.getCustLevel());return "customer";

}

  1. 修改客户信息
    7.1. 需求
    页面效果如下图：

1、客户列表中点击“修改”按钮弹出客户信息修改窗，并初始化客户信息
2、点击“保存修改”按钮将修改后的结果保存到数据库中

7.2. 实现编辑数据回显
在客户列表显示中，可以点击修改按钮，弹出修改界面，打开浏览器的开发者工具，发现当点击修改按钮，会发起一个请求
如下图方式进行查看

分析这里应该是发起请求到后台，获取该用户的详细信息，在页面上可以回显

复制请求路径中的edit.action，在customer.jsp页面中搜索，找到请求逻辑
找到的代码如下图：

发现这里是一个Ajax请求，根据这个请求我们可以开发后台逻辑，提供给前端页面进行调用

7.3. 回显功能实现
7.3.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id查询客户
  • @param id
  • @return
    */
    Customer queryCustomerById(Long id);

7.3.2. Mapper.xml
在CustomerMapper.xml编写sql

SELECT * FROM customer WHERE cust_id = #{id}

7.3.3. Service接口
编写CustomerService.接口方法
/**

  • 根据id查询数据
  • @param id
  • @return
    */
    Customer queryCustomerById(Long id);

7.3.4. Service接口实现类
在CustomerServiceImpl实现接口方法
@Override
public Customer queryCustomerById(Long id) {
Customer customer = this.customerMapper.queryCustomerById(id);
return customer;
}
7.3.5. Controller
在CustomerController编写方法
/**

  • 根据id查询用户,返回json格式数据
  • @param id
  • @return
    */
    @RequestMapping(“edit”)
    @ResponseBody
    public Customer queryCustomerById(Long id) {
    Customer customer = this.customerService.queryCustomerById(id);
    return customer;
    }

7.4. 实现编辑客户数据
在编辑框，点击保存修改按钮，应该进行数据保存，如下图所示：

发起请求如下图：

在页面找到的请求逻辑是：
function updateCustomer() {
. p o s t ( " < .post("<%=basePath%>customer/update.action", .post("<("#edit_customer_form").serialize(),function(data){
alert(“客户信息更新成功！”);
window.location.reload();
});
}

7.5. 编辑功能实现
7.5.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id编辑客户
  • @param customer
    */
    void updateCustomerById(Customer customer);

7.5.2. Mapper.xml
在CustomerMapper.xml编写sql

UPDATE customer
SET

cust_name = #{cust_name},


cust_user_id = #{cust_user_id},


cust_create_id = #{cust_create_id},


cust_source = #{cust_source},


cust_industry = #{cust_industry},


cust_level = #{cust_level},


cust_linkman = #{cust_linkman},


cust_phone = #{cust_phone},


cust_mobile = #{cust_mobile},


cust_zipcode = #{cust_zipcode},


cust_address = #{cust_address},

cust_createtime = NOW()
WHERE
(cust_id = #{cust_id});

7.5.3. Service接口
编写CustomerService.接口方法
/**

  • 根据id编辑客户数据
  • @param customer
    */
    void updateCustomerById(Customer customer);

7.5.4. Service接口实现类
在CustomerServiceImpl实现接口方法
@Override
public void updateCustomerById(Customer customer) {
this.customerMapper.updateCustomerById(customer);
}

7.5.5. Controller
在CustomerController编写方法
需要正确的响应，要告诉前端更新成功。返回值有没有都可以。
这里需要加@ResponseBody注解，使其不走视图解析器。
/**

  • 根据id查询用户,返回更新后客户的json格式数据
  • @param id
  • @return
    */
    @RequestMapping(“update”)
    @ResponseBody
    public String updateCustomerById(Customer customer) {
    Customer result = this.customerService.updateCustomerById(customer);
    return “OK”;
    }
  1. 删除客户
    8.1. 需求分析
    点击客户列表中的删除按钮，提示“警告信息”，如下图

如下图，点击确定后删除用户信息，并刷新页面。

发起的请求如下图：

搜索前端jsp页面逻辑找到如下代码：
function deleteCustomer(id) {
if(confirm(‘确实要删除该客户吗?’)) {
$.post("<%=basePath%>customer/delete.action",{“id”:id},function(data){
alert(“客户删除更新成功！”);
window.location.reload();
});
}
}

8.2. 功能开发
8.2.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id删除用户
  • @param id
    */
    void deleteCustomerById(Long id);

8.2.2. Mapper.xml
在CustomerMapper.xml编写sql

DELETE FROM customer WHERE cust_id = #{id} 8.2.3. Service接口 在CustomerService编写接口方法 /** * 根据id删除客户 * * @param id */ void deleteCustomerById(Long id);

8.2.4. Service实现类
在CustomerServiceImpl实现接口方法
@Override
public void deleteCustomerById(Long id) {
this.customerMapper.deleteCustomerById(id);
}

8.2.5. Controller
在CustomerController编写方法
/**

  • 删除用户
  • @param id
  • @return
    */
    @RequestMapping(“delete”)
    @ResponseBody
    public String deleteCustomerById(Long id) {
    this.customerService.deleteCustomerById(id);
    return “ok”;
    }

Mybatis、SpringMVC练习

CRM系统

  1. 课前回顾
    Springmvc 高级参数绑定 数组 List
    多个
    方法 (Integer[] ids) QueryVo (里面Integer[] ids)

方法（QueryVo 里面List itemList

  1. REquestMapping 处理器映射器（找此标签 路径 ）
    Value = {多个路径,}
    Value = {/item/sfdsf.action} 类头上
    Method=RequestMethod.POST或GET
    3、 Controller方法返回值
    三个
    ModelAndView 建议不使用 不解偶
    String 返回视图的路径 （形参 绑定Model ） 重定向redirect:另一个方法的映射路径 forward:内部转发
    Void 异步请求使用

  2. 异常处理器
    预期、运行时
    自定义异常处理类 实现HandlerEexceptionResolver
    由Spring实现化 自定义的处理类
    未知异常

CustomEexception 继承Eexception

4、 上传图片
1）Form 上传图片了 action上传路径
2）input type=file name=picturePic
3)接收此图片 形参上绑定 MultipartFile picturePic 接口
4）配置此接口的实现类 Springmvc.xml配置CommonsMultipartFileResolver id=multipartFileResolver
5、JSON数据交互
应用场景：前端是各种 html Freemarker JSP一个Servlet 是Java代码 jstl C

浏览器 Ajax 发送JSON字符串 报文

6、拦截器

拦截器 应用 （练习）

1 CRM项目外观

  1. 开发环境
    IDE： Eclipse Mars2
    Jdk: 1.7
    数据库: MySQL
  2. 创建数据库
    数据库sql文件位置如下图：

创建crm数据库，执行sql

效果如下图：

  1. 工程搭建
    使用的Bootstrap前端框架,官方网站
    http://www.bootcss.com/

工程使用Springmvc、spring、mybatis框架整合完成。

3.1. 需要的jar包

  1. spring（包括springmvc）
  2. mybatis
  3. mybatis-spring整合包
  4. 数据库驱动
  5. 第三方连接池。
  6. Json依赖包Jackson

jar包位置如下图：

3.2. 整合思路
Dao层：
1、SqlMapConfig.xml，空文件即可，但是需要文件头。
2、applicationContext-dao.xml
a) 数据库连接Druid
b) SqlSessionFactory对象，需要spring和mybatis整合包下的。
c) 配置mapper文件扫描器。Mapper动态代理开发 增强版

Service层：
1、applicationContext-service.xml包扫描器，扫描@service注解的类。
2、applicationContext-trans.xml配置事务。

Controller层：
1、Springmvc.xml
a) 包扫描器，扫描@Controller注解的类。
b) 配置注解驱动
c) 配置视图解析器

Web.xml文件：
1、配置spring监听器
2、配置前端控制器。

3.3. 创建工程
创建动态web工程，步骤如下图：

创建boot-crm，如下图

3.4. 加入jar包
加入课前资料中的jar包

3.5. 加入配置文件
创建config资源文件夹，在里面创建mybatis和spring文件夹
3.5.1. SqlMapConfig.xml
空文件即可

3.5.2. applicationContext-dao.xml
需要配置：
加载properties文件，数据源，SqlSessionFactory，Mapper扫描

3.5.3. jdbc.properties
配置数据库信息
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/crm?characterEncoding=utf-8
jdbc.username=root
jdbc.password=root

3.5.4. log4j.properties
配置日志信息

Global logging configuration

log4j.rootLogger=DEBUG, stdout

Console output…

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

3.5.5. applicationContext-service.xml
配置service扫描

3.5.6. applicationContext-trans.xml
配置事务管理：事务管理器、通知、切面

3.5.7. Springmvc.xml
配置SpringMVC表现层：Controller扫描、注解驱动、视图解析器

3.5.8. Web.xml
配置Spring、SpringMVC、解决post乱码问题


boot-crm

index.jsp


contextConfigLocationclasspath:spring/applicationContext-*.xml

org.springframework.web.context.ContextLoaderListener

encoding	org.springframework.web.filter.CharacterEncodingFilter

encoding/*

boot-crmorg.springframework.web.servlet.DispatcherServletcontextConfigLocationclasspath:spring/springmvc.xml1

boot-crm/
3.6. 加入静态资源 最终效果如下图：

  1. 实现页面展示
    4.1. 代码实现
    编写CustomerController 显示用户列表
    @Controller
    @RequestMapping(“customer”)
    public class CustomerController {

    /**

    • 显示用户列表
    • @return
      */
      @RequestMapping(“list”)
      public String queryCustomerList() {
      return “customer”;
      }

}

4.2. 页面显示问题
访问页面，发现不能正常显示

打开开发者工具，选择Network，
发现css、js等资源文件无法加载

原因：web.xml配置时，是设置所有的请求都进入SpringMVC。但是SpringMVC 无法处理css、js等静态资源，所以无法正常显示

解决方案：

  1. 在springmvc.xml中配置

  2. 修改web.xml，让所有以action结尾的请求都进入SpringMVC

    boot-crm

    *.action

解决后的效果如下图，可以正常显示页面样式：

我们使用第二种方式解决，因为此项目中的页面的请求都是以action结尾的，所以使用第二种方式，在web.xml里面进行相应的配置

boot-crm

*.action

  1. 实现查询条件初始化
    5.1. 需求分析

页面效果如上图，在查询客户的时候，可以选择客户来源,所属行业,客户级别信息,页面加载时需要初始化查询条件下拉列表。

前端jsp逻辑

--请选择--

按照jsp的要求,把对应的数据查询出来,放到模型中。
数据存放在base_dict表，可以使用dict_type_code类别代码进行查询
使用需要获取的数据如下图：

使用的sql:
SELECT * FROM base_dict WHERE dict_type_code = ‘001’

5.2. 实现DAO开发
5.2.1. pojo
因为页面显示的名字是下划线方式，和数据库表列名一样，根据页面的样式，编写pojo
public class BaseDict {
private String dict_id;
private String dict_type_code;
private String dict_type_name;
private String dict_item_name;
private String dict_item_code;
private Integer dict_sort;
private String dict_enable;
private String dict_memo;
get/set。。。。。。
}

5.2.2. Mapper
编写BaseDictMapper
public interface BaseDictMapper {
/**
* 根据类别代码查询数据
*
* @param dictTypeCode
* @return
*/
List queryBaseDictByDictTypeCode(String dictTypeCode);

}

5.2.3. Mapper.xml
编写BaseDictMapper.xml

5.3. 实现Service开发
5.3.1. BaseDictService 接口
public interface BaseDictService {

/*** 根据类别代码查询* * @param dictTypeCode* @return*/
List queryBaseDictByDictTypeCode(String dictTypeCode);

}

5.3.2. BaseDictServiceImpl 实现类
@Service
public class BaseDictServiceImpl implements BaseDictService {

@Autowired
private BaseDictMapper baseDictMapper;@Override
public List queryBaseDictByDictTypeCode(String dictTypeCode) {List list = this.baseDictMapper.queryBaseDictByDictTypeCode(dictTypeCode);return list;
}

}

5.4. 实现Controller开发
5.4.1. 修改之前编写的controller
@Controller
@RequestMapping(“customer”)
public class CustomerController {

@Autowired
private BaseDictService baseDictService;/*** 显示客户列表* * @return*/
@RequestMapping("list")
public String queryCustomerList(Model model) {// 客户来源List fromType = this.baseDictService.queryBaseDictByDictTypeCode("002");// 所属行业List industryType = this.baseDictService.queryBaseDictByDictTypeCode("001");// 客户级别List levelType = this.baseDictService.queryBaseDictByDictTypeCode("006");// 把前端页面需要显示的数据放到模型中model.addAttribute("fromType", fromType);model.addAttribute("industryType", industryType);model.addAttribute("levelType", levelType);return "customer";
}

}

5.4.2. 效果
实现效果如下图：

5.4.3. 硬编码问题
这里是根据dict_type_code类别代码查询数据，这里的查询条件是写死的，有硬编码问题。可以把类别代码提取到配置文件中，再使用@value注解进行加载。
5.4.3.1. 添加env.properties
添加env.properties配置文件
#客户来源
CUSTOMER_FROM_TYPE=002
#客户行业
CUSTOMER_INDUSTRY_TYPE=001
#客户级别
CUSTOMER_LEVEL_TYPE=006

5.4.3.2. 修改springmvc.xml配置文件
在springmvc.xml中加载env.properties

注意:Controller需要的配置文件信息必须添加到springmvc的配置文件中

5.4.3.3. 修改Controller方法
@Controller
@RequestMapping(“customer”)
public class CustomerController {

// 客户来源
@Value("${CUSTOMER_FROM_TYPE}")
private String CUSTOMER_FROM_TYPE;
// 客户行业
@Value("${CUSTOMER_INDUSTRY_TYPE}")
private String CUSTOMER_INDUSTRY_TYPE;
// 客户级别
@Value("${CUSTOMER_LEVEL_TYPE}")
private String CUSTOMER_LEVEL_TYPE;@Autowired
private BaseDictService baseDictService;/*** 显示客户列表* * @return*/
@RequestMapping("list")
public String queryCustomerList(Model model) {// 客户来源List fromType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_FROM_TYPE);// 所属行业List industryType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_INDUSTRY_TYPE);// 客户级别List levelType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_LEVEL_TYPE);// 把前端页面需要显示的数据放到模型中model.addAttribute("fromType", fromType);model.addAttribute("industryType", industryType);model.addAttribute("levelType", levelType);return "customer";
}

}
6. 客户列表展示
6.1. 需求
展示客户列表，并且可以根据查询条件过滤查询结果，并且实现分页。
效果如下图：

页面代码：

客户信息列表
ID客户名称客户来源客户所属行业客户级别固定电话手机操作
${row.cust_id}${row.cust_name}${row.cust_source}${row.cust_industry}${row.cust_level}${row.cust_phone}${row.cust_mobile} 修改 删除

分析我们需要根据四个条件进行查询，返回数据是分页对象Page

Sql语句:
SELECT
a.cust_id,
a.cust_name,
a.cust_user_id,
a.cust_create_id,
b.dict_item_name cust_source,
c.dict_item_name cust_industry,
d.dict_item_name cust_level,
a.cust_linkman,
a.cust_phone,
a.cust_mobile,
a.cust_zipcode,
a.cust_address,
a.cust_createtime
FROM
customer a
LEFT JOIN base_dict b ON a.cust_source = b.dict_id
LEFT JOIN base_dict c ON a.cust_industry = c.dict_id
LEFT JOIN base_dict d ON a.cust_level = d.dict_id
WHERE
a.cust_name LIKE ‘%马%’
AND a.cust_source = ‘6’
AND a.cust_industry = ‘2’
AND a.cust_level = ‘22’
LIMIT 0, 10

6.2. 创建pojo开发
public class Customer {

private Long cust_id;
private String cust_name;
private Long cust_user_id;
private Long cust_create_id;
private String cust_source;
private String cust_industry;
private String cust_level;
private String cust_linkman;
private String cust_phone;
private String cust_mobile;
private String cust_zipcode;
private String cust_address;
private Date cust_createtime;

get/set。。。。。。
}

6.3. 实现DAO
分析：

  1. 前台发起请求,需要接收请求过来的查询条件数据，可以使用pojo接收数据。需要依此编写查询逻辑。
  2. 前台需要分页显示，根据准备好的分页实现，应该返回分页类Page，而创建Page分页类需要数据总条数，所以也需要查询数据总条数的逻辑。

根据分析，DAO需要编写两个方法:

  1. 需要根据条件分页查询客户信息
  2. 需要根据条件查询数据总条数

6.3.1. 创建QueryVo
需要编写QueryVo，里面包含查询条件属性和分页数据。
创建接受请求参数的QueryVo：
public class QueryVo {

private String custName;
private String custSource;
private String custIndustry;
private String custLevel;// 当前页码数
private Integer page = 1;
// 数据库从哪一条数据开始查
private Integer start;
// 每页显示数据条数
private Integer rows = 10;

get/set。。。。。。
}

6.3.2. Mapper
创建CustomerMapper 接口
public interface CustomerMapper {

/*** 根据queryVo分页查询数据* * @param queryVo* @return*/
List queryCustomerByQueryVo(QueryVo queryVo);/*** 根据queryVo查询数据条数* * @param queryVo* @return*/
int queryCountByQueryVo(QueryVo queryVo);

}

6.3.3. Mapper.xml
创建CustomerMapper.xml

AND a.cust_name LIKE '%${custName}%' AND a.cust_source = #{custSource} AND a.cust_industry = #{custIndustry} AND a.cust_level = #{custLevel}

6.4. 实现service
6.4.1. 接口
编写接口CustomerService
public interface CustomerService {
/**
* 根据条件分页查询客户
*
* @param queryVo
* @return
*/
Page queryCustomerByQueryVo(QueryVo queryVo);
}

6.4.2. 实现类
编写接口实现类CustomerServiceImpl
@Service
public class CustomerServiceImpl implements CustomerService {
@Autowired
private CustomerMapper customerMapper;

@Override
public Page queryCustomerByQueryVo(QueryVo queryVo) {// 设置查询条件,从哪一条数据开始查queryVo.setStart((queryVo.getPage() - 1) * queryVo.getRows());// 查询数据结果集List list = this.customerMapper.queryCustomerByQueryVo(queryVo);// 查询到的数据总条数int total = this.customerMapper.queryCountByQueryVo(queryVo);// 封装返回的page对象Page page = new Page<>(total, queryVo.getPage(), queryVo.getRows(), list);return page;
}

}

6.5. 实现Controller
改造Controller的方法
@RequestMapping(“list”)
public String queryCustomerList(QueryVo queryVo, Model model) {

try {// 解决get请求乱码问题if (StringUtils.isNotBlank(queryVo.getCustName())) {queryVo.setCustName(new String(queryVo.getCustName().getBytes("ISO-8859-1"), "UTF-8"));}
} catch (Exception e) {e.printStackTrace();
}// 客户来源
List fromType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_FROM_TYPE);
// 所属行业
List industryType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_INDUSTRY_TYPE);
// 客户级别
List levelType = this.baseDictService.queryBaseDictByDictTypeCode(this.CUSTOMER_LEVEL_TYPE);// 把前端页面需要显示的数据放到模型中
model.addAttribute("fromType", fromType);
model.addAttribute("industryType", industryType);
model.addAttribute("levelType", levelType);// 分页查询数据
Page page = this.customerService.queryCustomerByQueryVo(queryVo);
// 把分页查询的结果放到模型中
model.addAttribute("page", page);// 数据回显
model.addAttribute("custName", queryVo.getCustName());
model.addAttribute("custSource", queryVo.getCustSource());
model.addAttribute("custIndustry", queryVo.getCustIndustry());
model.addAttribute("custLevel", queryVo.getCustLevel());return "customer";

}

  1. 修改客户信息
    7.1. 需求
    页面效果如下图：

1、客户列表中点击“修改”按钮弹出客户信息修改窗，并初始化客户信息
2、点击“保存修改”按钮将修改后的结果保存到数据库中

7.2. 实现编辑数据回显
在客户列表显示中，可以点击修改按钮，弹出修改界面，打开浏览器的开发者工具，发现当点击修改按钮，会发起一个请求
如下图方式进行查看

分析这里应该是发起请求到后台，获取该用户的详细信息，在页面上可以回显

复制请求路径中的edit.action，在customer.jsp页面中搜索，找到请求逻辑
找到的代码如下图：

发现这里是一个Ajax请求，根据这个请求我们可以开发后台逻辑，提供给前端页面进行调用

7.3. 回显功能实现
7.3.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id查询客户
  • @param id
  • @return
    */
    Customer queryCustomerById(Long id);

7.3.2. Mapper.xml
在CustomerMapper.xml编写sql

SELECT * FROM customer WHERE cust_id = #{id}

7.3.3. Service接口
编写CustomerService.接口方法
/**

  • 根据id查询数据
  • @param id
  • @return
    */
    Customer queryCustomerById(Long id);

7.3.4. Service接口实现类
在CustomerServiceImpl实现接口方法
@Override
public Customer queryCustomerById(Long id) {
Customer customer = this.customerMapper.queryCustomerById(id);
return customer;
}
7.3.5. Controller
在CustomerController编写方法
/**

  • 根据id查询用户,返回json格式数据
  • @param id
  • @return
    */
    @RequestMapping(“edit”)
    @ResponseBody
    public Customer queryCustomerById(Long id) {
    Customer customer = this.customerService.queryCustomerById(id);
    return customer;
    }

7.4. 实现编辑客户数据
在编辑框，点击保存修改按钮，应该进行数据保存，如下图所示：

发起请求如下图：

在页面找到的请求逻辑是：
function updateCustomer() {
. p o s t ( " < .post("<%=basePath%>customer/update.action", .post("<("#edit_customer_form").serialize(),function(data){
alert(“客户信息更新成功！”);
window.location.reload();
});
}

7.5. 编辑功能实现
7.5.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id编辑客户
  • @param customer
    */
    void updateCustomerById(Customer customer);

7.5.2. Mapper.xml
在CustomerMapper.xml编写sql

UPDATE customer
SET

cust_name = #{cust_name},


cust_user_id = #{cust_user_id},


cust_create_id = #{cust_create_id},


cust_source = #{cust_source},


cust_industry = #{cust_industry},


cust_level = #{cust_level},


cust_linkman = #{cust_linkman},


cust_phone = #{cust_phone},


cust_mobile = #{cust_mobile},


cust_zipcode = #{cust_zipcode},


cust_address = #{cust_address},

cust_createtime = NOW()
WHERE
(cust_id = #{cust_id});

7.5.3. Service接口
编写CustomerService.接口方法
/**

  • 根据id编辑客户数据
  • @param customer
    */
    void updateCustomerById(Customer customer);

7.5.4. Service接口实现类
在CustomerServiceImpl实现接口方法
@Override
public void updateCustomerById(Customer customer) {
this.customerMapper.updateCustomerById(customer);
}

7.5.5. Controller
在CustomerController编写方法
需要正确的响应，要告诉前端更新成功。返回值有没有都可以。
这里需要加@ResponseBody注解，使其不走视图解析器。
/**

  • 根据id查询用户,返回更新后客户的json格式数据
  • @param id
  • @return
    */
    @RequestMapping(“update”)
    @ResponseBody
    public String updateCustomerById(Customer customer) {
    Customer result = this.customerService.updateCustomerById(customer);
    return “OK”;
    }
  1. 删除客户
    8.1. 需求分析
    点击客户列表中的删除按钮，提示“警告信息”，如下图

如下图，点击确定后删除用户信息，并刷新页面。

发起的请求如下图：

搜索前端jsp页面逻辑找到如下代码：
function deleteCustomer(id) {
if(confirm(‘确实要删除该客户吗?’)) {
$.post("<%=basePath%>customer/delete.action",{“id”:id},function(data){
alert(“客户删除更新成功！”);
window.location.reload();
});
}
}

8.2. 功能开发
8.2.1. Mapper接口
在CustomerMapper添加方法
/**

  • 根据id删除用户
  • @param id
    */
    void deleteCustomerById(Long id);

8.2.2. Mapper.xml
在CustomerMapper.xml编写sql

DELETE FROM customer WHERE cust_id = #{id} 8.2.3. Service接口 在CustomerService编写接口方法 /** * 根据id删除客户 * * @param id */ void deleteCustomerById(Long id);

8.2.4. Service实现类
在CustomerServiceImpl实现接口方法
@Override
public void deleteCustomerById(Long id) {
this.customerMapper.deleteCustomerById(id);
}

8.2.5. Controller
在CustomerController编写方法
/**

  • 删除用户
  • @param id
  • @return
    */
    @RequestMapping(“delete”)
    @ResponseBody
    public String deleteCustomerById(Long id) {
    this.customerService.deleteCustomerById(id);
    return “ok”;
    }


本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

相关文章

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销 是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题 跑道 汽车 绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce

立即
投稿

微信公众账号

微信扫一扫加关注

 返回
顶部