cocobear9  
一枚普通的zisuer(lll￢ω￢),努力每天多学一点点
记录第一个前后端手写的SSM小项目(2)-图书的增删改查-service,controller层以及前端页面的编写

接着上一篇文章 继续配置　

七:配置web.xml 和 sping-mvc.xml

web.xml配置：

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--1.配置前端控制器-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--初始化spring-mvc.xml-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--2.加载全局控制器当一启动tomcat加载spring核心文件-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!--3.配置乱码过滤器-->
    <filter>
        <filter-name>characterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

 

springmvc.xml配置

 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--1.Controller层的注解包扫描器-->
    <context:component-scan base-package="com.mkx.controller"></context:component-scan>
    <!--2.内部资源解析器-->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/page/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!--3.静态资源权限开放-->
    <mvc:default-servlet-handler></mvc:default-servlet-handler>
    <!--4.注解驱动自动用jackson解析-->
    <mvc:annotation-driven></mvc:annotation-driven>


</beans>

 

八：书写jsp页面和Controller层代码,Service层代码

在Controller层新建一个BookController

 

package com.mkx.controller;

import com.mkx.domain.Books;
import com.mkx.service.BooksService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

@Controller
@RequestMapping("/books")
public class BooksController {

    @Autowired
    @Qualifier("booksService")
    private BooksService booksService;

    @RequestMapping("/findAll")
    public ModelAndView findAll(){
        ModelAndView modelAndView = new ModelAndView();
        List<Books> booksList = booksService.findAll();
        modelAndView.addObject("booksList",booksList);
        modelAndView.setViewName("home");
        return modelAndView;
    }
}

 

在Service层新建一个BookService以及实现类BookServiceImpl

 

@Service("booksService")
public class BooksServiceImpl implements BooksService {
    @Autowired
    private BookMapper bookMapper;

    @Override
    public void save(Books books) {

    }

    @Override
    public void deleteById(int id) {

    }

    @Override
    public void update(Books books) {

    }

    @Override
    public List<Books> findAll() {
        List<Books> booksList = bookMapper.findAll();
        return booksList;
    }
}

 

index.jsp：就一个超链接进行跳转到home主页

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        a:link,a:visited{
            text-decoration:none;  /*超链接无下划线*/
        }
        a:hover{
            text-decoration:underline;  /*鼠标放上去有下划线*/
        }
        a{
            font-size: 20px;
            color: black;
        }
        h2{
            width: 180px;
            height: 40px;
            margin: 80px auto;
            text-align: center;
            line-height: 40px;
            background-color: yellowgreen;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<h2>
    <a href="${pageContext.request.contextPath}/books/findAll">点击跳转到首页</a>
</h2>

</body>
</html>

 

home.jsp主页-->结合bootstrap前端框架

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        h3{
            font-size: 25px;
            text-align: center;
            color: cornflowerblue;
        }
        #findAll{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>书籍展示列表</h3>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-inline">
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary">新增</button>
                </div>

                <div class="col-md-8">
                    <div class="form-group" >
                        <label for="bookName">书本名称:</label>
                        <input type="text" class="form-control" id="bookName" >
                    </div>
                    <button type="submit" class="btn btn-default">查询</button>
                </div>

            </form>
        </div>
    </div>
</div>


<div class="container" id="findAll">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-hover" >
                <tr>
                    <th>书籍编号</th>
                    <th>书籍名称</th>
                    <th>书籍数量</th>
                    <th>书籍简介</th>
                    <th>修改数据</th>
                </tr>
                <c:forEach items="${booksList}" var="books" varStatus="bo">
                    <tr>
                        <td>${books.id}</td>
                        <td>${books.bookName}</td>
                        <td>${books.bookCount}</td>
                        <td>${books.detail}</td>
                        <td>
                            <span> <a href="#">修改 &nbsp</a></span>
                            <span> <a href="#">增加</a></span>
                        </td>
                    </tr>
                </c:forEach>

            </table>
        </div>
    </div>
</div>


</body>
</html>

 

 九：编写addBook.jsp页面以及对应的Controller层以及Service层的代码

 addBook.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加图书</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        h3{
            font-size: 25px;
            text-align: center;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>增加书籍</h3>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" action="${pageContext.request.contextPath}/books/addBook" method="post">
                <div class="form-group">
                    <label for="bookName" class="col-sm-2 control-label">书籍名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookName" name="bookName">
                    </div>
                </div>
                <div class="form-group">
                    <label for="bookCount" class="col-sm-2 control-label">书籍数量</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookCount" name="bookCount" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="detail" class="col-sm-2 control-label">书籍简介</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="detail" name="detail" >
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


</body>
</html>

Controller层:

@RequestMapping("/addBook")
    public String addBook(Books books){
        booksService.save(books);
        return "redirect:/books/findAll" ;
    }

Service层

 

 @Override
    public void save(Books books) {
        bookMapper.save(books);
    }

 

十：编写更改页面update.jsp以及Controller层和Sevice层

这里修改需要一个回写，所以在Controller层需要写一个回写的方法把Books的参数回写到update.jsp的value上

 

@RequestMapping("/writeBack")
    public ModelAndView writeBack(Books books){
        ModelAndView modelAndView =new ModelAndView();
        modelAndView.addObject("books",books);
        modelAndView.setViewName("updateBook");
        return modelAndView ;
    }

    @RequestMapping("/updateBook")
    public String updateBook(Books books){
        booksService.update(books);
        return "redirect:/books/findAll" ;
    }

 

update.jsp,这里回显需要一个id的隐藏域,不然提交表单的时候没有id这个属性


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>更改数据</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        h3{
            font-size: 25px;
            text-align: center;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>更改数据</h3>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" action="${pageContext.request.contextPath}/books/updateBook" method="post">
                <%--隐藏域回显id发送数据--%>
                <input type="hidden" name="id" value="${books.id}">
                <div class="form-group">
                    <label for="bookName" class="col-sm-2 control-label">书籍名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookName" name="bookName" value="${books.bookName}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="bookCount" class="col-sm-2 control-label">书籍数量</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookCount" name="bookCount" value="${books.bookCount}" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="detail" class="col-sm-2 control-label">书籍简介</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="detail" name="detail" value="${books.detail}" >
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>

 

 十一：编写delete的Controller层和Service层

 

//根据id删除数据
    @RequestMapping("/delete")
    public String delete(int id){
        booksService.deleteById(id);
        return "redirect:/books/findAll" ;
    }

 十二：编写动态sql模糊查询

只要更改findAll的参数就行了.

在bookMapper.xml中：1.注意这里使用了sql的函数库concat用处是：连接字符串,2.然后这里参数穿的是实体类,刚开始尝试了String,一直报错,索性就传实体类把

<select id="findAll" resultType="books" parameterType="books">
        SELECT * FROM books
         <where>
             <if test="bookName != null">
                 and bookName LIKE concat('%',#{bookName},'%')
             </if>
         </where>

    </select>

在前台加一个按钮和输入框

 

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-inline" action="${pageContext.request.contextPath}/books/findAll" method="post">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="addBook(this)">新增</button>
                </div>

                <div class="col-md-8">
                    <div class="form-group" >
                        <label for="bookName">书本名称:</label>
                        <input type="text" class="form-control" id="bookName" name="bookName" >
                    </div>
                    <button type="submit" class="btn btn-default">查询</button>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-primary" onclick="refrush(this)">首页</button>
                </div>
                
            </form>
        </div>
    </div>
</div>

 

Controller层和Service层只需要改一下参数即可

 十三：登录功能和拦截器

登录的页面login.jsp 用到了AJAX异步提交请求，

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书管理登录界面</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <%--引入jquery--%>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>

    <style>
        h3{
            font-size: 25px;
            text-align: center;
            color: cornflowerblue;
        }

    </style>
    <script>
        /*处理onblur的离焦事件*/
        function a1() {
            $.get("${pageContext.request.contextPath}/user/check1",{username:$("#username").val()},function (data) {
                if(data.toString()==="ok"){
                    alert(data);
                    $("#status").css("color","green");
                }else{
                    alert(data);
                    $("#status").css("color","red");
                }
                $("#status").html(data);

            })
        }


    </script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>图书管理登录界面</h3>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form action="${pageContext.request.contextPath}/user/login" method="post">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="username" name="username" onblur="a1()">
                    <span id="status"> </span>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="password" name="password" onblur="a2()">
                    <span id="status2"> </span>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div>


</body>
</html>

 

 

 

拦截器 的配置：1.创建一个拦截器的类实现HandlerInterceptor接口,在方法执行之前判断Session中有没有存在User，如果存在说明用户已经登录了

 

public class UserInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        User loginUser = (User) session.getAttribute("loginUser");
        if(loginUser!=null){
            //放行
            return true;
        }
        else{
            //拦截并返回
            response.sendRedirect(request.getContextPath()+"/login.jsp");
            return false;
        }

    }
}

 

在Spring-mvc.xml中配置拦截器

<!--5.配置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/user/login"/>
            <bean class="com.mkx.interceptor.UserInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>

这样如果没有登录进不了主页,会自动跳转到登录页面

 

 OK,到现在基本的增删改查就完成了,后面还有完善的功能：分页功能,事务的织入，

 

posted on 2020-10-08 16:15  cocobear9  阅读(519)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3