智能商贸-day2-集成SpringMVC&前端展示
智能商贸-day2-集成SpringMVC&前端展示
完成Service层
i. 导包
4.0.0
cn.itsource
springdatajpa
1.0-SNAPSHOT
UTF-8
4.2.5.RELEASE
4.3.8.Final
1.9.0.RELEASE
2.5.0
org.springframework
spring-core
${org.springframework.version}
org.springframework
spring-context
4.2.5.RELEASE
org.springframework
spring-tx
${org.springframework.version}
org.springframework
spring-jdbc
${org.springframework.version}
org.springframework
spring-orm
${org.springframework.version}
org.springframework
spring-aop
${org.springframework.version}
org.springframework
spring-test
${org.springframework.version}
test
org.springframework
spring-web
${org.springframework.version}
org.springframework
spring-webmvc
${org.springframework.version}
org.apache.commons
commons-io
1.3.2
commons-fileupload
commons-fileupload
1.2.2
com.fasterxml.jackson.core
jackson-core
${com.fasterxml.jackson.version}
com.fasterxml.jackson.core
jackson-annotations
${com.fasterxml.jackson.version}
com.fasterxml.jackson.core
jackson-databind
${com.fasterxml.jackson.version}
org.hibernate
hibernate-core
${org.hibernate.version}
org.hibernate
hibernate-entitymanager
${org.hibernate.version}
org.springframework.data
spring-data-jpa
${spring-data-jpa.version}
com.github.wenhao
jpa-spec
3.1.1
*
*
commons-dbcp
commons-dbcp
1.2.2
mysql
mysql-connector-java
5.1.6
org.apache.commons
commons-lang3
3.5
junit
junit
4.12
test
javax.servlet
javax.servlet-api
3.1.0
provided
i. 创建IBaseService
package cn.itsource.pss.service;
import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.query.BaseQuery;
import org.springframework.data.domain.Page;
import java.io.Serializable;
import java.util.List;
public interface IBaseService{
//添加与修改数据
void save(T t);
//根据id删除一条数据
void delete(ID id);
//根据id查询到一条数据
T findOne(ID id);
//查询所有数据
List findAll();
//根据Query拿到分页对象(分页)
Page findPageByQuery(BaseQuery baseQuery);
//根据Query拿到对应的所有数据(不分页)
List findByQuery(BaseQuery baseQuery);
//根据jpql与对应的参数拿到数据
List findByJpql(String jpql,Object... values);
}
ii. 创建BaseServiceImpl
package cn.itsource.pss.service.impl;
import cn.itsource.pss.query.BaseQuery;
import cn.itsource.pss.repository.BaseRepository;
import cn.itsource.pss.service.IBaseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.transaction.annotation.Transactional;
import java.io.Serializable;
import java.util.List;
import static org.springframework.transaction.annotation.Propagation.SUPPORTS;
@Transactional(readOnly = true,propagation = SUPPORTS)
public class BaseServiceImpl implements IBaseService{
//注意:Spring 4.x 中可以为子类注入子类对应的泛型类型的成员变量的引用
@Autowired
private BaseRepository baseRepository;
@Override
@Transactional(
public void save(T t) {
baseRepository.save(t);
}
@Override
@Transactional(
public void delete(ID id) {
baseRepository.delete(id);
}
@Override
public T findOne(ID id) {
return baseRepository.findOne(id);
}
@Override
public List findAll() {
return baseRepository.findAll();
}
@Override
public Page findPageByQuery(BaseQuery baseQuery) {
return baseRepository.findPageByQuery(baseQuery);
}
@Override
public List findByQuery(BaseQuery baseQuery) {
return baseRepository.findByQuery(baseQuery);
}
@Override
public List findByJpql(String jpql, Object... values) {
return baseRepository.findByJpql(jpql, values);
}
}
iii. 创建IEmployeeService
package cn.itsource.pss.service;
import cn.itsource.pss.domain.Employee;
//注：在开发中，业务后期是有很多功能的(不只是我们最简单的CRUD)
public interface IEmployeeService extends IBaseService {
}
iv. 创建EmployeeServiceImpl
package cn.itsource.pss.service.impl;
import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.service.IEmployeeService;
import org.springframework.stereotype.Service;
@Service
public class EmployeeServiceImpl extends BaseServiceImpl implements IEmployeeService {
}
集成SpringMVC
i. 引入相应jar包(已经完成)
首先确定咱们已经引入SpringMVC的核心jar包，这个包咱们之前在pom.xml中已经引入，这里主要是给大家提醒一下。
org.springframework
spring-web
${org.springframework.version}
org.springframework
spring-webmvc
${org.springframework.version}
ii. 配置applicationContext-mvc.xml
1048576
iii. 配置web.xml
contextConfigLocation
classpath:applicationContext.xml
org.springframework.web.context.ContextLoaderListener
characterEncodingFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
UTF-8
forceEncoding
true
characterEncodingFilter
/*
dispatcher
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:applicationContext-mvc.xml
1
dispatcher
/
iv. 创建Controller与页面
package cn.itsource.pss.controller;
import cn.itsource.pss.domain.Employee;
import cn.itsource.pss.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private IEmployeeService employeeService;
@RequestMapping("/index")
public String index() {
//根据配置，这里会跳到/WEB-INF/views/employee/employee.jsp页面
return "employee/employee";
}
@RequestMapping("/list")
@ResponseBody
public List list(){
return employeeService.findAll();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
访问成功
引入主页面
1.1.1. 抽取一个head.jsp
这里放的是引入easyui的代码(我们很多页面都要引入，所以单独抽取出来)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
1.1.2. 准备静态菜单数据
咱们现在还没有做菜单功能，所以先准备一些数据可以读取
代码如下：
[{
"id":1,
"text":"基本数据",
"iconCls":"icon-save",
"children":[{
"text":"用户管理",
"url":"/employee/index"
},{
"text":"部门管理",
"url":"/department/index"
}]
}]
1.1.3. main.jsp中的代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
智销系统
<%@include file="/WEB-INF/views/head.jsp" %>
源码时代智销系统
员工的查询页面
v. mployee.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
<%@include file="/WEB-INF/views/head.jsp" %>
用户名
密码
邮件
年龄
vi. UiPage.java
由于咱们SpringDataJpa返回的数据和EasyUI中的数据匹配不上，所以咱们准备一个类，直接把SpringDataJpa的Page对象进行一次封装，返回给前台即可：
package cn.itsource.yxb.common;
import org.springframework.data.domain.Page;
import java.util.List;
public class UiPage {
private long total; //总条数
private List rows; //每页数据
public UiPage(){}
public UiPage(Page page){
total = page.getTotalElements();
rows = page.getContent();
}
get,set省略
}
vii. BaseQuery.java
EasyUI查询传参的名称如果和BaseQuery中接收的名称不一致，咱们就需要修改BaseQuery这个类进行功能的兼容：
/**
* 所有Query对象的父类 公共代码｜规范
*/
public abstract class BaseQuery {
….
//兼容Easyui的分页
public void setPage(int page) {
this.currentPage = page;
}
public void setRows(int rows) {
this.pageSize = rows;
}
}
viii. EmployeeController.java
在控制层页面返回相应的数据即可
@Controller
@RequestMapping("/employee")
public class EmployeeController extends BaseController{
@Autowired
private IEmployeeService employeeService;
@RequestMapping("/index")
public String index(){
return "employee/employee";
}
//查询分页数据
@RequestMapping("/page")
@ResponseBody
public UiPage page(EmployeeQuery query){
return new UiPage(employeeService.findPageByQuery(query));
}
}
完善Employee对象
i. 员工完善字段
@Entity
@Table(name="employee")
public class Employee extends BaseDomain {
private String username;
private String password;
private String email;
private Integer age;
//头像
private String headImage;
//部门
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name="department_id")
private Department department;
…
}
i. 显示部门与头像
请注意：图片需要大家自己根据数据库的图片路径把文件加上去
employee.js
function formatImage(data) {
return "![没有图片]("+data+")
"
}
function formatDept(data) {
if(data){return data.name};
return "";
}
$(function () {
})
employee.jsp
头像
用户名
密码
邮件
年龄
部门
web.xml(解决noSession)
运行时我们会发现没有数据，然后通过js调试工作可以看到，返回报错 no-session
我们加上以下代码即可
openEntity
org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter
openEntity
/*
加入高级查询条件
i. employee.jsp
这里咱们之前employee的grid控件是引入了这个div的
ii. UtilController
我们把很多工具功能都放到这个类中
/**
* 工具的Controller
*/
@Controller
@RequestMapping("/util")
public class UtilController extends BaseController {
@Autowired
private IDepartmentService departmentService;
@RequestMapping("/departmentList")
@ResponseBody
public List departmentList(){
return departmentService.findAll();
}
}
iii. employee.js
咱们先可以引入jquery.serializejson.js这个控件，它直接直接拿到一个表单中的所有值，并且封装成一个json数据.
$(function () {
//这里我们把很多会常用到的元素进行一个抽取
var searchForm = $("#searchForm");
var employeeGrid = $("#employeeGrid");
//只要a标签中有data-method属性，咱们就给它添加事件
// 执行对应的itsource中的事件
$("a[data-method]").on("click",function () {
itsource[$(this).data("method")]();
})
var itsource={
search:function () {
//需要先引入 jquery.jdirk.js 才可以使用这个方法
var params = searchForm.serializeObject();
employeeGrid.datagrid('load',params);
}
}
})
iv. EmployeeQuery
这里添加部门的支持
//只写一些特殊的条件
public class EmployeeQuery extends BaseQuery {
…
private Long departmentId;
@Override
public Specification createSpecification() {
Specification spec = Specifications.and()
.like(StringUtils.isNotBlank(username),"username", "%"+username+"%")
.like(StringUtils.isNotBlank(email),"email", "%"+email+"%")
.eq(departmentId!=null,"department.id",departmentId)
.lt(age!=null,"age", age )
.build();
return spec;
}
…
}