基于Maven开发工具的ssm框架(三层架构) 项目实战 (超级香饽饽)如正删改查、拦截器、状态更改、统计数量、模糊查询等 (附带源码)

效果展示(主要实现功能 外观另议)

·

 准备阶段 创建项目 基于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>

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值