SpringBoot 综合案例day-05

部门管理小程序

需求：部门信息的增删查改操作、分页浏览

架构：前后分离模式（后台restful服务、前台界面）

技术：后台（SpringBoot、SpringMVC、SpringIOC、Mybatis、restful）

           前台（html、jquery、ajax）

后台开发

1.添加

/dept/post        POST

2.删除

/dept/remove  POST

3.更新

/dept/put          POST

4.查询

/dept/get          GET

5.列表

/dept/list           GET

dept-service 后端代码层编写

使用的jar包，最后的devtools用于热启动方便自动重载。

1.实体类

package cn.xdl.entity;

import java.io.Serializable;

public class Dept implements Serializable{
	private Integer deptno;
	private String dname;
	private String loc;
	public Integer getDeptno() {
		return deptno;
	}
	public void setDeptno(Integer deptno) {
		this.deptno = deptno;
	}
	public String getDname() {
		return dname;
	}
	public void setDname(String dname) {
		this.dname = dname;
	}
	public String getLoc() {
		return loc;
	}
	public void setLoc(String loc) {
		this.loc = loc;
	}
	
}

2.deptDao接口

package cn.xdl.dao;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import cn.xdl.entity.Dept;

public interface DeptDao {
	
	@Select("select * from dept order by deptno")
	public List<Dept> findAll();
	
	@Select("select * from dept where deptno=#{id}")
	public Dept findBuId(int id);
	
	@Insert("insert into dept(deptno,dname,loc) values(dept_seq.nextval,#{dname},#{loc})")
	public int save(Dept dept);
	
	@Update("update dept set dname=#{dname},loc=#{loc} where deptno=#{deptno}")
	public int update(Dept dept);
	
	@Delete("delete from dept where deptno=#{deptno}")
	public int delete(int id);
}

3.主启动类

@SpringBootApplication
@MapperScan(basePackages="cn.xdl.dao")
@ServletComponentScan
public class MyBootApplication {

	public static void main(String[] args) {
		SpringApplication.run(MyBootApplication.class, args);
	}	

}

4.application.yml文件配置数据库参数。注意层级关系和冒号后的空格

server:
 port: 8888
spring:
 datasource:
  username: scott
  password: 123456
  url: jdbc:oracle:thin:@127.0.0.1:1521:MLDN
  driverClassName: oracle.jdbc.OracleDriver

5.编写一个测试类测试mybatis连接正常

@RunWith(SpringRunner.class)
@SpringBootTest(classes={MyBootApplication.class})
public class TestDeptDao {
	@Autowired
	private DeptDao deptDao;
	
	@Test
	public void test1(){
		List<Dept> list = deptDao.findAll();
		for (Dept dept : list) {
			System.out.println(dept.getDeptno()+" "+dept.getDname());
		}
	}
}

6.运行测试类可以在eclipse后台查看到打印的所有结果。

7.编写Controller

package cn.xdl.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.github.pagehelper.PageHelper;

import cn.xdl.dao.DeptDao;
import cn.xdl.entity.Dept;
@RestController
@Transactional //事务管理
public class DeptController {
	@Autowired
	private DeptDao deptDao;
	
	// /dept/list 默认查询第1页，5条 
	@GetMapping("/dept/list")//dept/list?page=xx&pageSize=xx
	public List<Dept> list(
			@RequestParam(value="page",required=false,defaultValue="1")int page,
			@RequestParam(value="pageSize",required=false,defaultValue="5")int pageSize){
		PageHelper.startPage(page,pageSize);
		List<Dept> list = deptDao.findAll();
		return list;
	}
	@GetMapping("/dept/get") // /dept/get?id=xx
	public Dept get(Integer id) {
		if (id==null) {
			return null;
		}
		Dept dept = deptDao.findBuId(id);
		return dept;
	}
	@PostMapping("/dept/post")
	public int post(Dept dept) {
		return deptDao.save(dept);
	}
	
	@PostMapping("/dept/put")
	public int put(Dept dept) {
		return deptDao.update(dept);
	}
	
	@PostMapping("/dept/remove")
	public int remove(Integer id) {
		return deptDao.delete(id);
	}
}

8.运行主启动类，浏览器输入http://localhost:8888/dept/list等进行组件测试。

至此，后台开发完毕。

前台开发

建一个maven项目或者动态web项目，此处建立的是动态web项目。dept-ui

WebContent新建js文件夹引入jquery.js文件。

创建一个list.html页面文件使用ajax进行前后端交互。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var page = 1;
	$(function(){
		list();
	})
	function nextPage(){
		page++;
		list(page,5);
	}
	function prePage(){
		page--;
		list(page,5);
	}
	//删除数据
	function del(deptno){
		$.ajax({
			url:"http://localhost:8888/dept/remove",
			type:"post",
			data:{"id":deptno},
			dataType:"json",
			success:function(result){
				if (result==1) {
					alert("删除成功");
					list();//刷新列表
				} else {
					alert("删除失败");
				}
			},
			error:function(){
				alert("删除异常");
			}
		});
	}
	//加载列表显示
    function list(page,pageSize){
		//清空原有列表数据
		$("#depts").empty();
		//发送ajax请求显示列表
		$.ajax({
			url:"http://localhost:8888/dept/list",
			type:"get",
			data:{"page":page,"pageSize":pageSize},
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					//获取部门信息
					var deptno = result[i].deptno;
					var dname = result[i].dname;
					var loc = result[i].loc;
					//配成一个tr元素
					var str= '<tr>';
					str+='<td>'+deptno+'</td>';
					str+='<td>'+dname+'</td>';
					str+='<td>'+loc+'</td>';
					str+='<td><a href="#">更新</a>';
					str+=' <a href="#" onclick="del('+deptno+')">删除</a></td>';
				    str+='</tr>';
				    //将tr元素添加到table中
				    $("#depts").append(str);
				}
			}
		});
	}
</script>
</head>
<body>
	<h1>部门列表</h1>
	<table id="depts">	
	</table>
	<a href="#" onclick="list(1,5)">第一页</a>
	<a href="#" onclick="prePage()">上一页</a>
	<a href="#" onclick="nextPage()">下一页</a>
</body>
</html>

注意要使后台json数据可以用于前台，需要在后台项目中写一个Filter用于授权。

@WebFilter(filterName="ajaxCorsFilter",servletNames={"dispatcherServlet"})
public class AjaxCorsFilter implements Filter{

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		//设置response响应header参数，目的支持ajax跨域访问响应问题
		HttpServletResponse httpServletResponse = (HttpServletResponse)response;
		//用于查询到json跨域
		httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		//存放数据跨域，请求方式全部可跨域
		httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
		chain.doFilter(request, response);
	}

	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		
	}

}

在tomcat服务器运行使用http://localhost:8080/dept-ui/list.html进行测试。

---------------------------------------------------------------------------------------------

打包发布案例

在dept-service后端项目的pom.xml文件加入

  <build>
  	<plugins>
  		<plugin>
  			<groupId>org.springframework.boot</groupId>
  			<artifactId>spring-boot-maven-plugin</artifactId>
  		</plugin>
  	</plugins>
  </build>

用于打包发布项目。

右键项目Run As-->Maven Build-->Goals 栏输入package等同于终端mvn package命令

打包成功。

终端java -jar 包名就可以运行。

前端项目

右键Export-->WAR File 打包成war包，丢到tomcat服务器运行。

再别的机器上运行别人项目，注意配置文件中数据库连接的url的配置。