效果展示(主要实现功能 外观另议)
·
准备阶段 创建项目 基于maven 整合ssm框架 mapper开发规范 Jquery配置包 创建类型表(type) 电影表(dian)
题记:完成功能的登录功能(拦截器拦截)、增删改查、名字判重、状态更改、分页效果、模糊(条件)查询、统计数量
思路+实现:
首页
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<a href="/dian/tologin">登录</a>
<a href="/dian/show">首页</a>
</body>
</html>
实现登录功能 配置拦截器文件
前台 login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<center>
<h3>登录页面</h3>
${msg}
<form action="/dian/login" method="post">
用户名:<input type="text" name="name"><br/>
密码:<input type="text" name="password"><br/>
<input type="submit" value="登录"><br/>
${err}
</form>
</center>
</body>
</html>
控制层
@Controller
@RequestMapping("dian")
public class DianController {
@Autowired
private DianService dianService;
@RequestMapping("tologin")
public String tologin(){
return "login";
}
@RequestMapping("login")
public String login(Account account, HttpServletRequest request){
Account acc = dianService.login(account);
if (acc!=null){
request.getSession().setAttribute("acc",acc);
return "redirect:show";
}else{
request.setAttribute("err","账号或密码错误");
return "login";
}
}
拦截器类
public class LoginInterception implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws IOException {
Account acc = (Account) request.getSession().getAttribute("acc");
if (acc!=null){
return true;
}
response.sendRedirect(request.getContextPath()+"/dian/tologin");
return false;
}
}
拦截器配置文件(在springmvc.xml里配置即可)
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<mvc:exclude-mapping path="/dian/*login"></mvc:exclude-mapping>
<bean id="loginInterception" class="cn.jiyun.controller.LoginInterception"></bean>
</mvc:interceptor>
</mvc:interceptors>
增删改查 (因为比较基本 所有展示在一起了)
查看
sql语句 在mybatis配置文件里实现 (模糊查询 和 状态查询 也在这里实现)
<select id="show" parameterType="dian" resultType="dian">
select d.*,t.name tname from dian d,`type` t
<where>
d.tid=t.id
<if test="name!=null and name!=''">
and d.name like '%${name}%'
</if>
<if test="status!=null">
and status=#{status}
</if>
</where>
order by createtime desc
</select>
控制层(实现分页后台数据)
@RequestMapping("show")
public String show(Dian dian, Model model,HttpServletRequest request,
@RequestParam(required = true,defaultValue = "1") Integer pageNum){
Account acc = (Account) request.getSession().getAttribute("acc");
if (acc==null){
request.getSession().setAttribute("msg","未登录 请先登录");
return "redirect:tologin";
}
PageHelper.startPage(pageNum,2);
List<Dian> list = dianService.show(dian);
PageInfo<Dian> page = new PageInfo<>(list);
model.addAttribute("page",page);
return "show";
}
前台 (结合后台实现分页跳转功能)
<html>
<head>
<title>Title</title>
</head>
<body>
<center>
<h3>欢迎您:${acc.name}</h3>
<form action="/dian/show" method="post">
名称:<input type="text" name="name" value="${dian.name}">
状态:<select name="status">
<option value="">请选择</option>
<option value="0" <c:if test="${dian.status==0}">selected</c:if>>待审核</option>
<option value="1" <c:if test="${dian.status==1}">selected</c:if>>上架</option>
<option value="2" <c:if test="${dian.status==2}">selected</c:if>>售罄</option>
</select>
<input type="submit" value="搜索">
</form>
<a href="/dian/toadd">添加</a>
<a href="/dian/count">统计</a>
<table border="1" cellspacing="0">
<tr>
<td>编号</td>
<td>名称</td>
<td>价格</td>
<td>照片</td>
<td>时间</td>
<td>描述</td>
<td>状态</td>
<td>类型</td>
<td>操作</td>
</tr>
<c:forEach items="${page.list}" var="d">
<tr>
<td>${d.id}</td>
<td>${d.name}</td>
<td>${d.price}</td>
<td>
<img src="${d.pic}" alt="xxx" width="100px" height="90px">
</td>
<td>
<fmt:formatDate value="${d.createtime}" pattern="yyyy-MM-dd"></fmt:formatDate>
</td>
<td>${d.miao}</td>
<td>
<c:if test="${d.status==0}">待审核</c:if>
<c:if test="${d.status==1}">上架</c:if>
<c:if test="${d.status==2}">售罄</c:if>
</td>
<td>${d.tname}</td>
<td>
<a href="/dian/findById?id=${d.id}">修改</a>
<a href="/dian/delById?id=${d.id}" onclick="return confirm('您确定要删除吗?')">删除</a>
<c:if test="${acc.name=='admin'}">
<c:if test="${d.status==0}"><a href="/dian/updateStatus?id=${d.id}">上架</a> </c:if>
<c:if test="${d.status==1}"><a href="/dian/updateStatus?id=${d.id}">售罄</a></c:if>
</c:if>
</td>
</tr>
</c:forEach>
</table>
第${page.pageNum}页/共${page.pages}页/共${page.total}条数据
<a href="/dian/show?pageNum=${page.firstPage}">首页</a>
<a href="/dian/show?pageNum=${page.prePage}">上一页</a>
<c:forEach items="${page.navigatepageNums}" var="i">
<c:choose>
<c:when test="${i==page.pageNum}">
[${i}]
</c:when>
<c:otherwise>
<a href="/dian/show?pageNum=${i}">${i}</a>
</c:otherwise>
</c:choose>
</c:forEach>
<a href="/dian/show?pageNum=${page.nextPage}">下一页</a>
<a href="/dian/show?pageNum=${page.lastPage}">尾页</a>
</center>
</body>
</html>
添加
控制层 (类型必须动态获取 所以在这里直接查询出来放到model域中)
@ModelAttribute
public void setUp(Model model){
List<Type> tlist = dianService.showFu();
model.addAttribute("tlist",tlist);
}
@RequestMapping("add")
public String add(Dian dian, MultipartFile picFile,HttpServletRequest request) throws IOException {
if (picFile!=null && picFile.getSize()>0){
//获取路径
String path = request.getSession().getServletContext().getRealPath("/");
//获取名字
String name = picFile.getOriginalFilename();
picFile.transferTo(new File(path+"/"+name));
dian.setPic("../"+name);
}
dian.setStatus(0);
dianService.add(dian);
return "redirect:show";
}
前台 (通过Jquery解决名字判重)
<html>
<head>
<title>Title</title>
<script src="/js/jquery-1.8.3.js"></script>
</head>
<body>
<h3>添加界面</h3>
<form action="/dian/add" method="post" enctype="multipart/form-data">
姓名:<input type="text" name="name" id="name">
<span></span><br/>
价格:<input type="text" name="price"><br/>
类型:<select name="tid">
<option value="">请选择</option>
<c:forEach items="${tlist}" var="t">
<option value="${t.id}">${t.name}</option>
</c:forEach>
</select><br/>
描述:<input type="text" name="miao"><br/>
照片:<input type="file" name="picFile"><br/>
时间:<input type="date" name="createtime"><br/>
<input type="submit" value="添加">
</form>
</body>
<script>
var flag=false;
$("#name").blur(function () {
$.ajax({
type:"post",
url:"/dian/findByName",
data:"name="+this.value,
success:function (data) {
if (data=="no"){
$("span").html("名字重复不能添加")
flag=false;
} else{
$("span").html("可以使用");
flag=true;
}
}
})
});
$("form").submit(function () {
return flag;
})
</script>
</html>
// 后台方法
@RequestMapping("findByName")
@ResponseBody
public String findByName(String name){
Dian dian = dianService.findByName(name);
if (dian!=null){
return "no";
}else{
return "yes";
}
}
//sql语句
@Select("select * from dian where name=#{name}")
Dian findByName(String name);
修改
控制层
@RequestMapping("updateStatus")
public String updateStatus(Integer id){
dianService.updateStatus(id);
return "redirect:show";
}
sql语句
@Update("UPDATE `t5`.`dian` SET `name` = #{name}, `price` = #{price}, `pic` = #{pic}, `createtime` = #{createtime}," +
" `miao` = #{miao}, `status` = #{status}, `tid` = #{tid} WHERE `id` = #{id};")
void update(Dian dian);
前台 (注意隐藏域id)
<html>
<head>
<title>Title</title>
<script src="/js/jquery-1.8.3.js"></script>
</head>
<body>
<h3>添加界面</h3>
<form action="/dian/update" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${d.id}">
<input type="hidden" name="pic" value="${d.pic}">
姓名:<input type="text" name="name" value="${d.name}" id="name">
<span></span><br/>
价格:<input type="text" name="price" value="${d.price}"><br/>
类型:<select name="tid">
<option value="">请选择</option>
<c:forEach items="${tlist}" var="t">
<option value="${t.id}" <c:if test="${d.tid==t.id}">selected</c:if>>${t.name}</option>
</c:forEach>
</select><br/>
描述:<input type="text" name="miao" value="${d.miao}"><br/>
照片:<img src="${d.pic}" alt="xxx" width="100px" height="90px"><input type="file" name="picFile"><br/>
时间:<input type="date" name="createtime" value='<fmt:formatDate value="${d.createtime}" pattern="yyyy-MM-dd"></fmt:formatDate>'><br/>
<input type="submit" value="修改">
</form>
</body>
<script>
var flag=false;
$("#name").blur(function () {
$.ajax({
type:"post",
url:"/dian/findByName",
data:"name="+this.value,
success:function (data) {
if (data=="no"){
$("span").html("名字重复不能添加")
flag=false;
} else{
$("span").html("可以使用");
flag=true;
}
}
})
});
$("form").submit(function () {
return flag;
})
</script>
</html>
删除
控制层 + sql + 前台 (展示页面从哪里执行)
@RequestMapping("delById")
public String delById(Integer id){
dianService.delById(id);
return "redirect:show";
}
@Delete("delete from dian where id=#{id}")
void delById(Integer id);
<a href="/dian/delById?id=${d.id}" onclick="return confirm('您确定要删除吗?')">删除</a>
统计 (主要在于sql语句 sql实现了其他就迎难而解了)
sql
@Select("select t.name,count(d.id) num from type t left join dian d on d.tid=t.id group by t.id")
List<Map> count();
在控制层 存入model域中 前台跳转就行了
@RequestMapping("count")
public String count(Model model){
List<Map> clist = dianService.count();
model.addAttribute("count",clist);
return "count";
}
<a href="/dian/count">统计</a>
<body>
<h3>统计页面</h3>
<table border="1" cellspacing="0">
<c:forEach items="${count}" var="i">
<tr>
<td>${i.name}</td>
<td>${i.num}</td>
</tr>
</c:forEach>
</table>
<input type="button" value="返回" onclick="return history.back(-1)">
</body>