项目简介
旅游网站后台管理,包括如下
用户
旅游线路
线路图片
线路分类
旅行社
后台技术
springboot、mybatis、mybatis plus
前台
bootstrap、jquery、thymeleaf、fileinput插件
数据库
mysql
数据库设计
从素材中直接引入数据库脚本即可
表结构
创建项目
依赖
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.zh</groupId><artifactId>travel-springboot-mp</artifactId><version>1.0-SNAPSHOT</version><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.0.RELEASE</version><relativePath/> <!-- 依赖spring-boot-starter-parent构件时，从本地仓库-> 远程仓库获取,不从本地目录获取 --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--mybatis pulus--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.3.2</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.11</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.46</version></dependency><!--fileupload--><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
启动器
@SpringBootApplicationpublic class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}}
application.yml
具体语法参考YAML快速入门.html
server:port: 80servlet:context-path: / #项目的上下文路径spring:datasource:url: jdbc:mysql://localhost:3306/travelusername: rootpassword:driver-class-name: com.mysql.jdbc.Driverhikari:idle-timeout: 60000maximum-pool-size: 30minimum-idle: 10thymeleaf:cache: false# mybatis plus配置mybatis-plus:mapper-locations: classpath:/mappers/*.xml #加载映射文件type-aliases-package: com.zh.bean #别名搜索的包configuration:lazy-loading-enabled: true #打开懒加载aggressive-lazy-loading: false #关闭积极懒加载
整合mybatis plus
@Configuration@MapperScan("com.zh.dao")public class MybatisPlusConfig {@Beanpublic PageInterceptor pageInterceptor() {return new PageInterceptor();}}
用户管理
实体类
Lombok能以简单的注解形式来简化java代码，提高开发人员的开发效率
使用lomhok简化实体类开发，具体lomhok语法和安装参考资料lomhok入门.html文档
@Data@TableName("tab_user")public class User implements Serializable {@TableId(type = IdType.AUTO)private Integer uid;private String username;private String password;private String name;private Date birthday;private String sex;private String telephone;private String email;private String status;private String code;private Boolean isadmin;}
dao
接口
public interface UserDao extends BaseMapper<User> {}
注意：这里使用mybatis plus内置方法，没有映射文件
service
接口
public interface UserService {/*** 分页查询** @param condition 查询条件* @return*/PageInfo<User> findPage(User condition, int pageNum, int pageSize);/*** 查询** @param condition 查询条件* @return*/List<User> find(User condition);/*** 添加** @param user* @return*/int add(User user);/*** 根据ID查询用户** @param id* @return*/User findById(Integer id);/*** 修改** @param user* @return*/int update(User user);/*** 删除** @param id* @return*/int delete(Integer id);}
实现类
@Servicepublic class UserServiceImpl implements UserService {@Resourceprivate UserDao userDao;@Overridepublic PageInfo<User> findPage(User condition, int pageNum, int pageSize) {return PageHelper.startPage(pageNum, pageSize).doSelectPageInfo(() -> {userDao.selectList(Wrappers.<User>query());});}@Overridepublic List<User> find(User condition) {return userDao.selectList(Wrappers.query());}@Overridepublic int add(User user) {return userDao.insert(user);}@Overridepublic User findById(Integer id) {return userDao.selectById(id);}@Overridepublic int update(User user) {return userDao.updateById(user);}@Overridepublic int delete(Integer id) {return userDao.deleteById(id);}}
注意：分页方法采用的lambda表达式的写法
测试
@RunWith(SpringRunner.class)
@SpringBootTest
public class UserServiceImplTest {
@Autowired
private UserService userService;
@Test
public void testFindPage() {
User u = new User();
PageInfo<User> page = userService.findPage(u, 1, 10);
page.getList().forEach(System.out::println);
System.out.println("总行数=" + page.getTotal());
System.out.println("当前页=" + page.getPageNum());
System.out.println("每页行数=" + page.getPageSize());
System.out.println("总页数=" + page.getPages());
System.out.println("起始行数=" + page.getStartRow());
System.out.println("是第一页=" + page.isIsFirstPage());
System.out.println("是最后页=" + page.isIsLastPage());
System.out.println("还有下一页=" + page.isHasNextPage());
System.out.println("还有上一页=" + page.isHasPreviousPage());
System.out.println("页码列表" + Arrays.toString(page.getNavigatepageNums()));
}
}
controller
@Controller
@RequestMapping("/admin/user")
public class UserController {
@Resource
private UserService userService;
/**
* 分页查询
*
* @param user 请求参数
* @param pageNum 当前页
* @param pageSize 每页行数
* @param model
* @return
*/
@RequestMapping("/page")
public String page(
User user,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
Model model) {
PageInfo<User> page = userService.findPage(user, pageNum, pageSize);
model.addAttribute("page", page);
return "/user/list";
}
/**
* 跳到添加页面
*
* @return
*/
@RequestMapping("/toadd")
public String toAdd() {
return "/user/add";
}
/**
* 添加
*
* @param user
* @return
*/
@RequestMapping("/doadd")
public String doAdd(User user) {
userService.add(user);
return "redirect:/admin/user/page";
}
/**
* 跳到修改页面
*
* @param id
* @param model
* @return
*/
@RequestMapping("/toupdate/{id}")
public String toUpdate(@PathVariable("id") Integer id, Model model) {
User user = userService.findById(id);
model.addAttribute("user", user);
return "/user/update";
}
@RequestMapping("/doupdate")
public String doUpdate(User user) {
userService.update(user);
return "redirect:/admin/user/page";
}
/**
* 删除
*
* @param id
* @return
*/
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
userService.delete(id);
return "redirect:/admin/user/page";
}
}
页面
前端技术栈 bootstrap，jquery，ace, fileinput插件
拷贝资料中的static目录，里面有bootstrap, jquery, ace，fileinput前端框架
index.html、header.html、left.html(拷贝)
springboot 项目访问http://localhost/context_path回自动跳转到templates/index.html
这里我们直接拷贝index.html,header.html,和left.html
list.html
页面涉及到ace和bootstrap模板部分代码拷贝，代码中thyleaf指令和脚本部分自己写
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css"/>
<!-- ace styles -->
<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
<![endif]-->
<link rel="stylesheet" href="/assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="/assets/css/ace-rtl.min.css"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/assets/js/dataTables.buttons.min.js"></script>
<script src="/assets/js/buttons.flash.min.js"></script>
<script src="/assets/js/buttons.html5.min.js"></script>
<script src="/assets/js/buttons.print.min.js"></script>
<script src="/assets/js/buttons.colVis.min.js"></script>
<script src="/assets/js/dataTables.select.min.js"></script>
<!-- ace scripts -->
<script src="/assets/js/ace-elements.min.js"></script>
<script src="/assets/js/ace.min.js"></script>
<!-- TODO 页面删除js -->
<script>
$(function () {
$("#checkAll").click(function () {
$(":checkbox[name='ids']").prop("checked", $(this).prop("checked"));
});
$("#btnDelete").click(function () {
if ($(":checked[name='ids']").length > 0) {
$("#df").submit();
} else {
alert('请选择要删除的记录')
}
});
})
</script>
</head>
<body class="no-skin">
<div th:replace="header :: navbar"></div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try {
ace.settings.loadState('main-container')
} catch (e) {
}
</script>
<div th:replace="left :: sidebar"></div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">首页</a>
</li>
<li>
<a href="#">用户</a>
</li>
<li class="active">用户管理</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<div style="float: left; padding: 10px;">
<form class="form-inline" id="qf" action="/admin/user/page" method="post">
<!-- TODO 回显数据 -->
<input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}">
<input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" name="name" class="form-control" id="name" th:value="${param.name}">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="text" name="email" class="form-control" id="email" th:value="${param.email}">
</div>
<button type="submit" class="btn btn-sm btn-default">查询</button>
<button type="button" class="btn btn-sm btn-default"
onclick="location.href='/admin/user/toadd'">添加
</button>
</form>
</div>
<!--TODO 删除表单-->
<form action="/admin/user/delete" method="post" id="df">
<table id="simple-table" class="table table-bordered table-hover">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>电话</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- TODO 回显数据 -->
<tr th:each="u : ${page.list}">
<td><input type="checkbox" name="ids" th:value="${u.uid}"></td>
<td th:text="${u.uid}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.sex}"></td>
<td th:text="${#dates.format(u.birthday, 'yyyy-MM-dd')}"></td>
<td th:text="${u.telephone}"></td>
<td th:text="${u.email}"></td>
<td>
<div class="hidden-sm hidden-xs btn-group">
<a class="btn btn-xs btn-info"
th:href="|/admin/user/toupdate/${u.uid}|">
<i class="ace-icon fa fa-pencil bigger-120"></i>
</a>
<a class="btn btn-xs btn-info"
th:href="|/admin/user/delete/${u.uid}|">
<i class="ace-icon fa fa-trash-o bigger-120"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<!-- TODO 回显数据 -->
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li id="first">
<a href="javascript:void(0);">
<span aria-hidden="true">首页</span>
</a>
</li>
<li id="prev">
<a href="javascript:void(0);" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li name="pageNum" th:each="i : ${page.navigatepageNums}"
th:class="${i == page.pageNum} ? 'active'">
<a href="javascript:void(0);" th:text="${i}"></a>
</li>
<li id="next">
<a href="javascript:void(0);" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li id="last">
<a href="javascript:void(0);">
<span aria-hidden="true">末页</span>
</a>
</li>
<span style="font-size: 20px;margin-left: 5px;"
th:text="|共${page.total} 条 记录, 共${page.pages}页, 每页${page.pageSize}行数|">
</span>
<select id="setRows">
<option value="5" th:selected="${5 == page.pageSize}">5</option>
<option value="10" th:selected="${10 == page.pageSize}">10</option>
<option value="20" th:selected="${20 == page.pageSize}">20</option>
<option value="30" th:selected="${30 == page.pageSize}">30</option>
</select>
</ul>
</nav>
</div>
<!-- TODO 分页JS -->
<script th:inline="javascript">
//得到初始化变量
var pageNum = [[${page.pageNum}]]; //当前页
var pages = [[${page.pages}]]; //总页数
var hasNextPage = [[${page.hasNextPage}]];//true：还有下一页
var hasPreviousPage = [[${page.hasPreviousPage}]]; //还有上一页
//判断按钮状态
if (!hasPreviousPage) {
$("#prev").addClass("disabled");
$("#first").addClass("disabled");
}
if (!hasNextPage) {
$("#next").addClass("disabled");
$("#last").addClass("disabled");
}
//设置按钮的监听事件
$("#first").click(function () {
if (!$("#first").hasClass("disabled")) {
$("#pageNum").val(1);
$("#qf").submit();
}
});
$("#prev").click(function () {
if (!$("#prev").hasClass("disabled")) {
$("#pageNum").val(pageNum - 1);
$("#qf").submit();
}
});
$("#next").click(function () {
if (!$("#next").hasClass("disabled")) {
$("#pageNum").val(pageNum + 1);
$("#qf").submit();
}
});
$("#last").click(function () {
if (!$("#last").hasClass("disabled")) {
$("#pageNum").val(pages);
$("#qf").submit();
}
});
//页码分页
$("li[name='pageNum']").click(function () {
if (!$(this).hasClass("active")) {
$("#pageNum").val($(this).children("a").html());
$("#qf").submit();
}
});
//设置每页行数
$("#setRows").change(function () {
$("#pageSize").val($(this).val());
$("#pageNum").val(1);
$("#qf").submit();
});
</script>
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</body>
</html>
add.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/assets/js/dataTables.buttons.min.js"></script>
<script src="/assets/js/buttons.flash.min.js"></script>
<script src="/assets/js/buttons.html5.min.js"></script>
<script src="/assets/js/buttons.print.min.js"></script>
<script src="/assets/js/buttons.colVis.min.js"></script>
<script src="/assets/js/dataTables.select.min.js"></script>
<!-- ace scripts -->
<script src="/assets/js/ace-elements.min.js"></script>
<script src="/assets/js/ace.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body class="no-skin">
<div th:replace="header :: navbar"></div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div th:replace="left :: sidebar"></div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">首页</a>
</li>
<li>
<a href="#">用户</a>
</li>
<li class="active">用户管理</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<form action="/admin/user/doadd" method="post">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</div>
<div class="form-group">
<label for="birthday">生日：</label>
<input type="text" class="form-control" id="birthday" name="birthday" placeholder="请输入生日" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})">
</div>
<div class="form-group">
<label for="telephone">电话：</label>
<input type="text" class="form-control" name="telephone" id="telephone" placeholder="请输入电话"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱地址"/>
</div>
<div class="form-group">
<label for="username">登录名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入登录名"/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="text" class="form-control" name="password" id="password" placeholder="请输入密码"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" />
</div>
</form>
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</body>
</html>
update.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/assets/js/dataTables.buttons.min.js"></script>
<script src="/assets/js/buttons.flash.min.js"></script>
<script src="/assets/js/buttons.html5.min.js"></script>
<script src="/assets/js/buttons.print.min.js"></script>
<script src="/assets/js/buttons.colVis.min.js"></script>
<script src="/assets/js/dataTables.select.min.js"></script>
<!-- ace scripts -->
<script src="/assets/js/ace-elements.min.js"></script>
<script src="/assets/js/ace.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body class="no-skin">
<div th:replace="header :: navbar"></div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div th:replace="left :: sidebar"></div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">首页</a>
</li>
<li>
<a href="#">用户</a>
</li>
<li class="active">用户管理</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<!-- TODO 回显数据 -->
<form action="/admin/user/doupdate" method="post" th:object="${user}">
<input type="hidden" name="uid" th:value="${user.uid}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"
th:value="*{name}">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="sex" value="男" th:checked="'男' == *{sex}" />男
<input type="radio" name="sex" value="女" th:checked="'女' == *{sex}" />女
</div>
<div class="form-group">
<label for="birthday">生日：</label>
<input type="text" class="form-control" id="birthday" name="birthday"
placeholder="请输入生日" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})"
th:value="*{#dates.format(birthday, 'yyyy-MM-dd')}">
</div>
<div class="form-group">
<label for="telephone">电话：</label>
<input type="text" class="form-control" name="telephone" id="telephone"
placeholder="请输入电话" th:value="*{telephone}"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" name="email" id="email"
placeholder="请输入邮箱地址" th:value="*{email}"/>
</div>
<div class="form-group">
<label for="username">登录名</label>
<input type="text" class="form-control" name="username" id="username"
placeholder="请输入登录名" th:value="*{username}"/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="text" class="form-control" name="password" id="password"
placeholder="请输入密码" th:value="*{password}"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" />
</div>
</form>
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</body>
</html>
多选删除
controller
/**
* 批量删除
* @param ids
* @return
*/
@RequestMapping("/delete")
public String batchDelete(@RequestParam("ids") Integer[] ids) {
for (Integer id : ids) {
userService.delete(id);
}
return "redirect:/admin/user/page";
}
页面
<script>
$(function(){
$("#checkAll").click(function() {
$(":checkbox[name='ids']").prop("checked", $(this).prop("checked"));
});
$("#btnDelete").click(function(){
if ($(":checked[name='ids']").length > 0) {
$("#df").submit();
} else {
alert('请选择要删除的记录')
}
});
})
</script>
注入在springmvc中配置日期转换器
package com.zh.config;
import org.springframework.core.convert.converter.Converter;
import org.springframework.stereotype.Component;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:47
* @Modified By:
*/
@Component
public class DateConverterConfig implements Converter<String, Date> {
private static final List<String> formarts = new ArrayList<>(4);
static {
formarts.add("yyyy-MM");
formarts.add("yyyy-MM-dd");
formarts.add("yyyy-MM-dd hh:mm");
formarts.add("yyyy-MM-dd hh:mm:ss");
}
@Override
public Date convert(String source) {
String value = source.trim();
if ("".equals(value)) {
return null;
}
if (source.matches("^\\d{4}-\\d{1,2}$")) {
return parseDate(source, formarts.get(0));
} else if (source.matches("^\\d{4}-\\d{1,2}-\\d{1,2}$")) {
return parseDate(source, formarts.get(1));
} else if (source.matches("^\\d{4}-\\d{1,2}-\\d{1,2} {1}\\d{1,2}:\\d{1,2}$")) {
return parseDate(source, formarts.get(2));
} else if (source.matches("^\\d{4}-\\d{1,2}-\\d{1,2} {1}\\d{1,2}:\\d{1,2}:\\d{1,2}$")) {
return parseDate(source, formarts.get(3));
} else {
throw new IllegalArgumentException("Invalid boolean value '" + source + "'");
}
}
/**
* 格式化日期
*
* @param dateStr String 字符型日期
* @param format String 格式
* @return Date 日期
*/
public Date parseDate(String dateStr, String format) {
Date date = null;
try {
DateFormat dateFormat = new SimpleDateFormat(format);
date = dateFormat.parse(dateStr);
} catch (Exception e) {
}
return date;
}
}
旅游公司
参考用户管理CRUD操作，具体代码和用户管理相似
实体类
package com.zh.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:49
* @Modified By:
*/
@Data
@TableName("tab_seller")
public class Seller implements Serializable {
/**
* 商家id
*/
@TableId(type = IdType.AUTO)
private Integer sid;
/**
* 商家名称
*/
private String sname;
/**
* 商家电话
*/
private String consphone;
/**
* 商家地址
*/
private String address;
}
dao
public interface SellerDao extends BaseMapper<Seller> {
}
service
接口
package com.zh.service;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Seller;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:52
* @Modified By:
*/
public interface SellerService {
/**
* 分页查询
*
* @param condition 查询条件
* @return
*/
public PageInfo<Seller> findPage(Seller condition, int pageNum, int pageSize);
/**
* 查询
*
* @param condition 查询条件
* @return
*/
public List<Seller> find(Seller condition);
/**
* 添加
*
* @param seller
* @return
*/
public int add(Seller seller);
/**
* 根据ID查询用户
*
* @param id
* @return
*/
public Seller findById(Integer id);
/**
* 修改
*
* @param seller
* @return
*/
public int update(Seller seller);
/**
* 删除
*
* @param id
* @return
*/
public int delete(Integer id);
}
实现类
package com.zh.service.Impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Seller;
import com.zh.dao.SellerDao;
import com.zh.service.SellerService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:53
* @Modified By:
*/
@Service
public class SellerServiceImpl implements SellerService {
@Resource
private SellerDao sellerDao;
@Override
public PageInfo<Seller> findPage(Seller condition, int pageNum, int pageSize) {
return PageHelper.startPage(pageNum, pageSize).doSelectPageInfo(() -> {
sellerDao.selectList(new QueryWrapper<Seller>());
});
}
@Override
public List<Seller> find(Seller condition) {
return sellerDao.selectList(Wrappers.query());
}
@Override
public int add(Seller seller) {
return sellerDao.insert(seller);
}
@Override
public Seller findById(Integer id) {
return sellerDao.selectById(id);
}
@Override
public int update(Seller seller) {
return sellerDao.updateById(seller);
}
@Override
public int delete(Integer id) {
return sellerDao.deleteById(id);
}
}
controller
package com.zh.controller;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Seller;
import com.zh.service.SellerService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import javax.annotation.Resource;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:54
* @Modified By:
*/
@Controller
@RequestMapping("/admin/seller/")
public class SellerController {
@Resource
private SellerService sellerService;
@RequestMapping("/page")
public String page(
Seller seller,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
Model model) {
PageInfo<Seller> page = sellerService.findPage(seller, pageNum, pageSize);
model.addAttribute("page", page);
return "seller/list";
}
@RequestMapping("/toadd")
public String toAdd() {
return "seller/add";
}
@RequestMapping("/doadd")
public String doAdd(Seller seller) {
sellerService.add(seller);
return "redirect:/admin/seller/page";
}
@RequestMapping("/toupdate/{id}")
public String toUpdate(@PathVariable("id") Integer id, Model model) {
Seller seller = sellerService.findById(id);
model.addAttribute("seller", seller);
return "seller/update";
}
@RequestMapping("/doupdate")
public String doUpdate(Seller seller) {
sellerService.update(seller);
return "redirect:/admin/seller/page";
}
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
sellerService.delete(id);
return "redirect:/admin/seller/page";
}
}
线路分类
实体类
package com.zh.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:56
* @Modified By:
*/
@Data
@TableName("tab_category")
public class Category implements Serializable {
@TableId(type = IdType.AUTO)
/**
* 分类id
*/
private Integer cid;
/**
* 分类名称
*/
private String cname;
}
dao
public interface CategoryDao extends BaseMapper<Category> {
}
service
接口
package com.zh.service;
import com.zh.bean.Category;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:59
* @Modified By:
*/
public interface CategoryService {
public List<Category> find();
/**
* 添加
*
* @param category
* @return
*/
public int add(Category category);
/**
* 根据ID查询
*
* @param id
* @return
*/
public Category findById(Integer id);
/**
* 修改
*
* @param category
* @return
*/
public int update(Category category);
/**
* 删除
*
* @param id
* @return
*/
public int delete(Integer id);
}
实现类
package com.zh.service.Impl;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.zh.bean.Category;
import com.zh.dao.CategoryDao;
import com.zh.service.CategoryService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 21:59
* @Modified By:
*/
@Service
public class CategoryServiceImpl implements CategoryService {
@Resource
private CategoryDao categoryDao;
@Override
public List<Category> find() {
return categoryDao.selectList(Wrappers.query());
}
@Override
public int add(Category category) {
return categoryDao.insert(category);
}
@Override
public Category findById(Integer id) {
return categoryDao.selectById(id);
}
@Override
public int update(Category category) {
return categoryDao.updateById(category);
}
@Override
public int delete(Integer id) {
return categoryDao.deleteById(id);
}
}
controller
package com.zh.controller;
import com.zh.bean.Category;
import com.zh.service.CategoryService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:00
* @Modified By:
*/
@Controller
@RequestMapping("/admin/category/")
public class CategoryController {
@Resource
private CategoryService categoryService;
@RequestMapping("/list")
public String find(Model model) {
List<Category> list = categoryService.find();
model.addAttribute("list", list);
return "category/list";
}
@RequestMapping("/toadd")
public String toAdd() {
return "category/add";
}
@RequestMapping("/doadd")
public String doAdd(Category category) {
categoryService.add(category);
return "redirect:/admin/category/list";
}
@RequestMapping("/toupdate/{id}")
public String toUpdate(@PathVariable("id") Integer id, Model model) {
Category category = categoryService.findById(id);
model.addAttribute("category", category);
return "category/update";
}
@RequestMapping("/doupdate")
public String doUpdate(Category category) {
categoryService.update(category);
return "redirect:/admin/category/list";
}
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
categoryService.delete(id);
return "redirect:/admin/category/list";
}
}
页面
页面代码直接从素材拷贝即可，注意分类因为数据较少，可以不用分页
旅游线路
需求和表结构
旅游线路主表（线路名称，详情，介绍，价格，缩略图)
旅游线详细图片表(小图，大图)
实体类
线路实体类
package com.zh.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:02
* @Modified By:
*/
@Data
@TableName("tab_route")
public class Route implements Serializable {
@TableId(type = IdType.AUTO)
/**
* 线路id，必输
*/
private Integer rid;
/**
* 线路名称，必输
*/
private String rname;
/**
* 价格，必输
*/
private Double price;
/**
* 线路介绍
*/
private String routeIntroduce;
/**
* 是否上架，必输，0代表没有上架，1代表是上架
*/
private String rflag;
/**
* 上架时间
*/
private String rdate;
/**
* 是否主题旅游，必输，0代表不是，1代表是
*/
private String isThemeTour;
/**
* 收藏数量
*/
private Integer count;
/**
* 所属分类，必输
*/
private Integer cid;
/**
* 缩略图
*/
private String rimage;
/**
* 所属商家
*/
private Integer sid;
/**
* 抓取数据的来源id
*/
private String sourceId;
/**
* 所属分类 使用resultmap的assocation处理
*/
@TableField(exist = false)
private Category category;
/**
* 所属商家 使用resultmap的assocation处理
*/
@TableField(exist = false)
private Seller seller;
/**
* 商品详情图片列表,关联属性，mybatis plus不能查，需要配置resultmap使用resultmap的collection处理
*/
@TableField(exist = false)
private List<RouteImg> routeImgList;
}
线路的图片列表
package com.zh.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:06
* @Modified By:
*/
@Data
@TableName("tab_route_img")
public class RouteImg implements Serializable {
/**
* 商品图片id
*/
@TableId(type = IdType.AUTO)
private int rgid;
/**
* 旅游商品id
*/
private int rid;
/**
* 详情商品大图
*/
private String bigpic;
/**
* 详情商品小图
*/
private String smallpic;
}
dao
线路dao
package com.zh.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zh.bean.Route;
import java.util.List;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:09
* @Modified By:
*/
public interface RouteDao extends BaseMapper<Route> {
/**
* 分页查询
*
* @param conditioin
* @return
*/
public List<Route> find(Route conditioin);
/**
* 根据ID查询用户
*
* @param id
* @return
*/
public Route findById(Integer id);
}
映射文件
因为线路需要查询线路详细图片列表 routeImgList ，线路所属分类 category ，线路所属旅行社 seller ,这里在
xml映射文件中使用resultMap的association和collection查询，不能使用mybatis plus内置查询
<?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">
<mapper namespace="com.zh.dao.RouteDao">
<sql id="selectSql">
SELECT
*
FROM
tab_route
</sql>
<select id="find" resultMap="routeMap">
<include refid="selectSql"></include>
<where>
<if test="cid !=null">
cid = #{cid}
</if>
<if test="sid !=null">
and sid = #{sid}
</if>
<if test="rname !=null and rname.trim() != ''">
and rname like '%${rname}%'
</if>
<if test="routeIntroduce != null and routeIntroduce.trim() != ''">
and routeIntroduce like '%${routeIntroduce}%'
</if>
</where>
</select>
<resultMap id="routeMap" type="route">
<id column="rid" property="rid"></id>
<association property="category" javaType="category"
select="com.zh.dao.CategoryDao.findById" column="cid">
<id column="cid" property="cid"></id>
</association>
<association property="seller" javaType="seller"
select="com.zh.dao.SellerDao.findById" column="sid">
<id column="sid" property="sid"></id>
</association>
<collection property="routeImgList" javaType="java.util.List" ofType="RouteImg"
select="com.zh.dao.RouteImgDao.findByRid" column="rid">
<id column="rgid" property="rgid"></id>
</collection>
</resultMap>
<select id="findById" parameterType="int" resultMap="routeMap">
<include refid="selectSql"></include>
where
rid = #{rid}
</select>
</mapper>
注意：这里因为要查询旅游线路的所属分类（ select=”cn.lxs.travel.dao.CategoryDao.findById” ），所属旅行
社（ select=”cn.lxs.travel.dao.SellerDao.findById” ），线路详细图片列表
（ select=”cn.lxs.travel.dao.RouteImgDao.findByRid” ）
所以需要分在在CategoryDao中增加findById方法如下
public interface CategoryDao extends BaseMapper<Category> {
@Select("SELECT cname,cid FROM tab_category WHERE cid=#{id}")
Category findById(Integer id);
}
SellerDao增加findById方法如下：
public interface SellerDao extends BaseMapper<Seller> {
@Select("SELECT * FROM tab_seller WHERE sid=#{id}")
Seller findById(Integer id);
}
RouteImgDao增加findByRid方法：如下
public interface RouteImgDao extends BaseMapper<RouteImg> {
@Select("select * from tab_route_img where rid = #{rid}")
List<RouteImg> findByRid(Integer rid);
}
service
线路service：接口
package com.zh.service;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Route;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:19
* @Modified By:
*/
public interface RouteService {
/**
* 分页查询
*
* @param conditioin 查询条件
* @return
*/
public PageInfo<Route> findPage(Route conditioin, int pageNum, int pageSize);
/**
* 添加
*
* @param route
* @return
*/
public int add(Route route);
/**
* 根据ID查询用户
*
* @param id
* @return
*/
public Route findById(Integer id);
/**
* 修改
*
* @param route
* @return
*/
public int update(Route route);
/**
* 删除
*
* @param id
* @return
*/
public int delete(Integer id);
}
线路service实现类
package com.zh.service.Impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Route;
import com.zh.dao.RouteDao;
import com.zh.service.RouteService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:20
* @Modified By:
*/
@Service
public class RouteServiceImpl implements RouteService {
@Resource
private RouteDao routeDao;
@Override
public PageInfo<Route> findPage(Route condition, int pageNum, int pageSize) {
return PageHelper.startPage(pageNum, pageSize).doSelectPageInfo(() -> {
routeDao.find(condition);
});
}
@Override
public int add(Route route) {
return routeDao.insert(route);
}
@Override
public Route findById(Integer id) {
return routeDao.findById(id);
}
@Override
public int update(Route route) {
return routeDao.updateById(route);
}
@Override
public int delete(Integer id) {
return routeDao.deleteById(id);
}
}
测试
package com.zh.service.Impl;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Route;
import com.zh.service.RouteService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
import static org.junit.jupiter.api.Assertions.*;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:22
* @Modified By:
*/
@RunWith(SpringRunner.class)
@SpringBootTest
public class RouteServiceImplTest {
@Autowired
private RouteService routeService;
@Test
public void findPage() {
Route condition = new Route();
condition.setRname("北京");
PageInfo<Route> page = routeService.findPage(condition, 1, 10);
page.getList().forEach((r) -> {
System.out.println(r.getRid() + "\t" + r.getRname() + "\t" +
r.getCategory().getCname() + "\t" + r.getSeller().getSname() + "\t" +
r.getRouteImgList().size());
});
}
@Test
public void findById() {
Route r = routeService.findById(34);
System.out.println(r.getRid() + "\t" + r.getRname() + "\t" + r.getCategory().getCname() +
"\t" + r.getSeller().getSname() + "\t" + r.getRouteImgList().size());
}
}
controller
package com.zh.controller;
import com.github.pagehelper.PageInfo;
import com.zh.bean.Category;
import com.zh.bean.Route;
import com.zh.bean.RouteImg;
import com.zh.bean.Seller;
import com.zh.service.CategoryService;
import com.zh.service.RouteImgService;
import com.zh.service.RouteService;
import com.zh.service.SellerService;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-10-19 22:24
* @Modified By:
*/
@Controller
@RequestMapping("/admin/route/")
public class RouteController {
@Resource
private RouteService routeService;
@Resource
private CategoryService categoryService;
@Resource
private SellerService sellerService;
@Resource
private RouteImgService imgService;
/**
* 分页
*
* @param route
* @param pageNum
* @param pageSize
* @param model
* @return
*/
@RequestMapping("/page")
public String page(
Route route,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
Model model) {
PageInfo<Route> page = routeService.findPage(route, pageNum, pageSize);
model.addAttribute("page", page);
//查询所有分类生成下拉框
List<Category> categories = categoryService.find();
model.addAttribute("categories", categories);
List<Seller> sellers = sellerService.find(new Seller());
model.addAttribute("sellers", sellers);
//用于页面回显
model.addAttribute("route", route);
return "route/list";
}
/**
* 删除
*
* @param id
* @return
*/
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
routeService.delete(id);
return "redirect:/admin/route/page";
}
/**
* 跳到添加页面
*
* @param model
* @return
*/
@RequestMapping("/toadd")
public String toAdd(Model model) {
//查询所有分类生成下拉框
List<Category> categories = categoryService.find();
model.addAttribute("categories", categories);
List<Seller> sellers = sellerService.find(new Seller());
model.addAttribute("sellers", sellers);
return "route/add";
}
/**
* 根据id查询，跳转到修改页面
*
* @param id
* @param model
* @return
*/
@RequestMapping("/toupdate/{id}")
public String toUpdate(@PathVariable("id") Integer id, Model model) {
Route route = routeService.findById(id);
model.addAttribute("route", route);
//查询所有分类生成下拉框
List<Category> categories = categoryService.find();
model.addAttribute("categories", categories);
List<Seller> sellers = sellerService.find(new Seller());
model.addAttribute("sellers", sellers);
return "route/update";
}
/**
* 执行添加
*
* @param route
* @param rimageFile
* @param request
* @return
* @throws IOException
*/
@RequestMapping("/doadd")
public String doAdd(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
//项目的部署目录 + img/product/rimage/
performRImage(route, rimageFile, request);
routeService.add(route);
return "redirect:/admin/route/page";
}
@RequestMapping("/doupdate")
public String doUpdate(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
performRImage(route, rimageFile, request);
routeService.update(route);
return "redirect:/admin/route/page";
}
private void performRImage(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
//项目的部署目录 + img/product/rimage/
String savePath = request.getServletContext().getRealPath("img/product/rimage/");
//处理随机文件名
String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." +
FilenameUtils.getExtension(rimageFile.getOriginalFilename());
//上传目录如果不存在,先创建
File savePathDir = new File(savePath);
if (!savePathDir.exists()) {
boolean mkdirs = savePathDir.mkdirs();
System.out.println("创建目录rimage："+mkdirs);
}
//保存文件
rimageFile.transferTo(new File(savePathDir, fileName));
//设置线路的rimage属性=文件的相对路径
route.setRimage("img/product/rimage/" + fileName);
}
/**
* 根据id加载线路图片，跳到image.html
*
* @param id
* @param model
* @return
*/
@RequestMapping("/toimage/{id}")
public String toImage(@PathVariable("id") Integer id, Model model) {
Route route = routeService.findById(id);
model.addAttribute("route", route);
return "route/image";
}
@RequestMapping("/doimage")
public String doImage(
Integer rid,
@RequestParam("bigPicFile") MultipartFile[] bigPicFile,
@RequestParam("smallPicFile") MultipartFile[] smallPicFile,
HttpServletRequest request) throws Exception {
List<String> bigPic = new ArrayList<>();
List<String> smallPic = new ArrayList<>();
String path = request.getServletContext().getRealPath("/");
for (MultipartFile f : bigPicFile) {
File bigPath = new File(path + "img\\product\\big-pic\\");
if (!bigPath.exists()) {
bigPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." +
FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(bigPath, fileName));
bigPic.add("img/product/big-pic/" + fileName);
}
for (MultipartFile f : smallPicFile) {
File smallPath = new File(path + "img\\product\\small-pic\\");
if (!smallPath.exists()) {
smallPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." +
FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(smallPath, fileName));
smallPic.add("img/product/small-pic/" + fileName);
}
//要添加的图片列表
List<RouteImg> ris = new ArrayList<>();
for (int i = 0; i < bigPic.size(); i++) {
RouteImg img = new RouteImg();
img.setRid(rid);
img.setBigpic(bigPic.get(i));
img.setSmallpic(smallPic.get(i));
ris.add(img);
}
imgService.saveImg(rid, ris);
return "redirect:/admin/route/page";
}
}
页面list.html、add.html、update.html
页面部分直接从素材拷贝，里面thymleaf指令和脚本自己写
参考素材代码
主图（缩略图）上传
controller
调到添加页面
修改一下上边那个controller
/**
* 执行添加
*
* @param route
* @param rimageFile
* @param request
* @return
* @throws IOException
*/
@RequestMapping("/doadd")
public String doAdd(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
//项目的部署目录 + img/product/rimage/
performRImage(route, rimageFile, request);
routeService.add(route);
return "redirect:/admin/route/page";
}
@RequestMapping("/doupdate")
public String doUpdate(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
performRImage(route, rimageFile, request);
routeService.update(route);
return "redirect:/admin/route/page";
}
private void performRImage(Route route, @RequestParam("rimageFile") MultipartFile rimageFile,
HttpServletRequest request) throws IOException {
//项目的部署目录 + img/product/rimage/
String savePath = request.getServletContext().getRealPath("img/product/rimage/");
//处理随机文件名
String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." +
FilenameUtils.getExtension(rimageFile.getOriginalFilename());
//上传目录如果不存在,先创建
File savePathDir = new File(savePath);
if (!savePathDir.exists()) {
savePathDir.mkdirs();
}
//保存文件
rimageFile.transferTo(new File(savePathDir, fileName));
//设置线路的rimage属性=文件的相对路径
route.setRimage("img/product/rimage/" + fileName);
}
项目图片文件上传，注意重复文件名的处理
页面
页面使用基于bootstrap的图片上传插件fileinput
参考官方文档http://bootstrap-fileinput.com/
bootstrap-fileinput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性一款非常优秀的HTML5文件上传插件，支持bootstrap 3.x 和4.x版本，具有非常多的特性:多文件选择。这个插件能最简单的帮你完成文件上传功能，且使用bootstrap样式。还支持多种文件的预览，images, text, html, video,audio, flash。另外还支持ajax方式上传文件，可以看到上传进度。支持拖拽的方式添加和删除文件
用法
如果你将一个 css class=’file’ 属性赋予 input 标签，插件将自动把字段 [input type=”file”] 转换为文件输入控件。但是，如果你想通过 javascript 单独初始化插件，那么请勿将 css class=’file’ 属性附加到’input’上（因为这将导致重复的初始化，并且JavaScript代码可能会被跳过不执行）
步骤一
引入相关的依赖的插件
<script src="/assets/js/bootstrap.min.js"></script>
<link href="/js/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/js/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
步骤二
方法一：在文件域中设置class=”file”
<input id="rimageFile" name="rimageFile" class="file" type="file">
注意html的input属性multiple，决定fileinput是否接受多图片上传
方法二：使用js把文件域转换成fileinput对象
<input id="rimageFile" name="rimageFile" type="file" >
<script >
$(function(){
$("#rimageFile").fileinput({
});
})
</script>
修改
加载数据，调到修改页面
@RequestMapping("/toupdate/{id}")
public String toUpdate(@PathVariable("id") Integer id, Model model) {
Route route = routeService.findById(id);
model.addAttribute("route", route);
//查询所有分类生成下拉框
List<Category> categories = categoryService.find();
model.addAttribute("categories", categories);
List<Seller> sellers = sellerService.find(new Seller());
model.addAttribute("sellers", sellers);
return "route/update";
}
修改回显主图（缩略图）到页面
拷贝素材，修改响应代码练习
<script th:inline="javascript">
$(function(){
var rimage = '/' + [[${route.rimage}]];
$("#rimageFile").fileinput({
initialPreview: [
"<img src='" + rimage +"' class='file-preview-image' >"
],
overwriteInitial: true
});
})
</script>
initialPreview：数组类型，指定初始化回显的图片列表
overwriteInitial：覆盖之前回显的内容
线路详细图片
需求: 一条旅游线路，有多张介绍线路的详细图片，详细图片分为小图和大图，前端选择小图可以预览大图
数据结构
service
public interface RouteImgService {
/**
* 处理线路图片
*
* @param rid：线路id
* @param routeImgs：要添加的线路图片列表
*/
public void saveImg(Integer rid, List<RouteImg> routeImgs);
}
ServiceImpl
@Service
public class RouteImgServiceImpl implements RouteImgService {
@Resource
private RouteImgDao imgDao;
@Override
@Transactional
public void saveImg(Integer rid, List<RouteImg> routeImgs) {
imgDao.delete(Wrappers.<RouteImg>query().eq("rid", rid));
for (RouteImg ri : routeImgs) {
imgDao.insert(ri);
}
}
}
controller和页面
查看线路详细图片
/**
* 根据id加载线路图片，跳到image.html
*
* @param id
* @param model
* @return
*/
@RequestMapping("/toimage/{id}")
public String toImage(@PathVariable("id") Integer id, Model model) {
Route route = routeService.findById(id);
model.addAttribute("route", route);
return "route/image";
}
页面回显image.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<title>商品详细图片</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css"/>
<!-- ace styles -->
<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
<![endif]-->
<link rel="stylesheet" href="/assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="/assets/css/ace-rtl.min.css"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/assets/js/dataTables.buttons.min.js"></script>
<script src="/assets/js/buttons.flash.min.js"></script>
<script src="/assets/js/buttons.html5.min.js"></script>
<script src="/assets/js/buttons.print.min.js"></script>
<script src="/assets/js/buttons.colVis.min.js"></script>
<script src="/assets/js/dataTables.select.min.js"></script>
<!-- ace scripts -->
<script src="/assets/js/ace-elements.min.js"></script>
<script src="/assets/js/ace.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
<link href="/js/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/js/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/js/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
</head>
<body class="no-skin">
<div th:replace="header :: navbar"></div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try {
ace.settings.loadState('main-container')
} catch (e) {
}
</script>
<div th:replace="left :: sidebar"></div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">首页</a>
</li>
<li>
<a href="#">用户</a>
</li>
<li class="active">用户管理</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<form action="/admin/route/doimage" enctype="multipart/form-data" method="post">
<input type="hidden" name="rid" th:value="${route.rid}">
<div class="form-group">
<label for="bigPicFile">详细大图：</label>
<input id="bigPicFile" name="bigPicFile" type="file" multiple>
</div>
<div class="form-group">
<label for="smallPicFile">详细小图：</label>
<input id="smallPicFile" name="smallPicFile" type="file" multiple>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交"/>
<input class="btn btn-default" type="reset" value="重置"/>
<input class="btn btn-default" type="button" value="返回"/>
</div>
</form>
</div><!-- /.page-content -->
<script th:inline="javascript">
var ri = [[${route.routeImgList}]]; //后台查询的图片列表
var bi = []; //回显的大图数组
var si = []; //回显的小图数组
for (var i = 0; i < ri.length; i++) {
bi.push("<img src='/" + ri[i].bigpic + "' class='file-preview-image' >");
si.push("<img src='/" + ri[i].smallpic + "' class='file-preview-image' >");
}
$("#bigPicFile").fileinput({
initialPreview: bi,
overwriteInitial: true,
minFileCount: 1,
maxFileCount: 4
});
$("#smallPicFile").fileinput({
initialPreview: si,
overwriteInitial: true,
minFileCount: 1,
maxFileCount: 4
});
</script>
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</body>
</html>
注意html5属性multiple，表示可以多文件上传
保存线路详细图片
@Resource
private RouteImgService imgService;
/**
* 根据id加载线路图片，跳到image.html
*
* @param id
* @param model
* @return
*/
@RequestMapping("/toimage/{id}")
public String toImage(@PathVariable("id") Integer id, Model model) {
Route route = routeService.findById(id);
model.addAttribute("route", route);
return "route/image";
}
@RequestMapping("/doimage")
public String doImage(
Integer rid,
@RequestParam("bigPicFile") MultipartFile[] bigPicFile,
@RequestParam("smallPicFile") MultipartFile[] smallPicFile,
HttpServletRequest request) throws Exception {
List<String> bigPic = new ArrayList<>();
List<String> smallPic = new ArrayList<>();
String path = request.getServletContext().getRealPath("/");
for (MultipartFile f : bigPicFile) {
File bigPath = new File(path + "img\\product\\big-pic\\");
if (!bigPath.exists()) {
bigPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." +
FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(bigPath, fileName));
bigPic.add("img/product/big-pic/" + fileName);
}
for (MultipartFile f : smallPicFile) {
File smallPath = new File(path + "img\\product\\small-pic\\");
if (!smallPath.exists()) {
smallPath.mkdirs();
}
String fileName = UUID.randomUUID().toString().replace("-", "") + "." +
FilenameUtils.getExtension(f.getOriginalFilename());
f.transferTo(new File(smallPath, fileName));
smallPic.add("img/product/small-pic/" + fileName);
}
//要添加的图片列表
List<RouteImg> ris = new ArrayList<>();
for (int i = 0; i < bigPic.size(); i++) {
RouteImg img = new RouteImg();
img.setRid(rid);
img.setBigpic(bigPic.get(i));
img.setSmallpic(smallPic.get(i));
ris.add(img);
}
imgService.saveImg(rid, ris);
return "redirect:/admin/route/page";
}
这个保存的图片这里还有点问题，这个rimage这个文件夹为什么创建的地方在C盘，我的代码是在F盘的啊，然后这个还是个临时文件的样子。图片大小还不能大于1M
线路修改这个有问题，明明在页面中中有selected的，但是，这边显示的对应不上
上面的bug找到了，是因为：
可以看到，这里是cid在category和sid在seller中。
修改页面：
修改后：
添加了用户和旅游公司的查询，并且清除了查询的bug，不能用pageNumber，这样会导致在中间页查询的时候，出现不显示数据的原因，因为页码pageNumber大于查询的数据页数。设置为1就行了。
另外，这里的代码是有问题的，因为这个网站东西一多实在太卡了，就不修改了，代码我放到码云上了。
若有收获，就点个赞吧
0 人点赞
