文章	评论	标签
95	125	101

Spring MVC 综合测试复习8.19

1.功能分析

列出清单：查
已有物品入库/出库：改
新物品入库：增
一共3项功能，没有删除操作

2.功能实现

采用Spirng+Spring MVC+Mybatis实现，由于是考试，直接写jsp页面就完了，不用考虑那么多

1.创建数据库

创建数据库（myoffice）

创建数据表（tb_supply），代码如下

CREATE TABLE `tb_supply`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '物品编号',
  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '物品名称',
  `model` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '物品规格',
  `quantity` int(11) NULL DEFAULT NULL COMMENT '库存数量',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

往数据库里面随便插一点数据

2.新建项目

新建动态web项目，由于考试直接给的jar包，因此不使用maven，只需将jar包丢到WEB-INF/lib中即可，可能还需要在编辑器中引入jar包，否则编写类时可能会找不到依赖，下图为idea引入外部库。eclipse只需选中所有依赖右键Build Path然后Add即可。

eclipse在创建项目后还需在项目右键Java EE Tools中选择Generate Deployment Descriptor Stub

随后创建resources资源文件夹，如果已经有则不用创建，eclipse操作为New Source Folder
在资源文件夹中创建mapper文件夹用于存放mybatis mapper的xml文件
将提供的jdbc.properties数据库配置文件以及springmvc.xmlspring配置文件复制到resources中备用
建立controller、dao、model、service包备用，如图为例
在WEB-INF下创建视图存放文件夹（当然你放别的地方也无所谓），本文以WEB-INF/jsp为视图解析文件夹
配置Tomcat以测试项目

3.编写配置文件

1.`web.xml`

由于素材中没给web.xml文件，因此需要自己编写。

1.配置前端控制器：

<servlet>
    <servlet-name>spring</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <!-- ContextconfigLocation 需要记住，此项为加载springmvc.xml配置文件-->
        <param-name>contextConfigLocation</param-name>
        <!-- 配置文件路径按照自己的来，classpath为rescources路径-->
        <param-value>classpath:springmvc.xml</param-value>
    </init-param>
</servlet>
<!--编写mapping-->
<servlet-mapping>
    <servlet-name>spring</servlet-name>
    <!--意味着所有xxx.do结尾的网址都会被拦截-->
    <url-pattern>*.do</url-pattern>
</servlet-mapping>

DispatcherServlet的完整类路径可以在代码中打Dis按提示回车，然后复制上边的Import路径即可

2.配置主页

假定主页为list.do

<welcome-file-list>
    <welcome-file>list.do</welcome-file>
</welcome-file-list>

这样访问项目根路径时就会自动跳转到list.do了

3.配置过滤器防止中文乱码*

考试时候这个其实可以忽略，要是有强迫症你就别往里面插中文数据就行了

<filter>
    <filter-name>encodingFilter</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>
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

2.`jdbc.properties`

刚刚已经将这个文件复制到了资源文件夹中，只需填写其中的值即可

# 8.0版本以上的mysql可能需要使用新版驱动，并且driver名为com.mysql.cj.jdbc.driver
jdbc.driver=com.mysql.jdbc.Driver
# 连接本地数据库可以直接使用jdbc:mysql:///myoffice，5.7以上版本数据库需要加serverTimezone=Asia/Shanghai参数
jdbc.url=jdbc:mysql://127.0.0.1:3306/myoffice?characterEncoding=utf-8
jdbc.username=root
jdbc.password=数据库密码

3.`springmvc.xml`

这是spring的配置文件

1.配置包扫描

需要将所有的bean添加扫描，那么仅需将包的上级目录写入即可

<!--这是我建立的包名，不一定和我一样-->
<context:component-scan base-package="com.oldwu"></context:component-scan>

2.加载`jdbc.properties`数据库配置文件

<context:property-placeholder location="classpath:jdbc.properties"/>

3.配置数据库连接池

dataSource的class也可以像刚刚一样在代码中打出来

<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
    <!--引入刚刚的jdbc.properties中的内容-->
    <property name="driverClassName" value="${jdbc.driver}"/>
    <property name="url" value="${jdbc.url}"/>
    <property name="username" value="${jdbc.username}"/>
    <property name="password" value="${jdbc.password}"/>
</bean>

4.配置`SqlSessionFactoryBean`

仅需将ref中填入刚刚连接池的id，下面的如果xml和dao类放在一个文件夹中，直接不用写，否则的话，填写xml文件所在的目录

<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"/>
        <!-- 自动扫描mapping.xml文件 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
</bean>

5.配置mybatis的包扫描

在value中填入你的mapper(dao)的类路径

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="com.oldwu.dao"></property>
</bean>

6.配置视图解析器

刚刚已经创建了WEB-INF/jsp视图存放目录。
prefix为前缀，填写存放目录:/WEB-INF/jsp/
suffix为后缀，填写匹配的视图后缀名：.jsp

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
</bean>

Tips:配置文件中可以按住Ctrl+鼠标左键查看类/文件是否正确配置

至此，烦人的配置完毕..哦这该死的反人类配置文件

4.编写实体类 `Suppy`

不引入lombok的话可以使用编辑器自动生成getter和setter

import lombok.Data;

@Data
public class Supply {

    private int id;
    private String name;
    private String model;
    private int quantity;

}

5.实现功能：查询(列出清单)

1.新建 `SupplyController`

不要忘了在创建完的类中加入@Controller以注册到容器

2.新建 `SupplyService` 接口

public interface SupplyService { }

3.实现 `SupplyService` 接口

为了规范，在service包中新建impl包，在impl包中新建实现类SupplyServiceImpl
public class SupplyServiceImpl implements SupplyService { }
不要忘记加入@Service以注册到容器

4.新建`SupplyDao.java`

在mapper(dao)包中创建SupplyDao.java

5.新建`SupplyDao.xml`

在resources/mapper中创建SupplyDao.xml，内容参考素材。

注意：如果刚刚没有配置xml扫描，请将xml放在SupplyDao.java的同一级目录，并且名称相同

写入xml文件中的namespace，为SupplyDao.java的完整路径，例：
<mapper namespace="com.oldwu.dao.SupplyDao"></mapper>

6.新建`list.jsp`

在WEB-INF/jsp中新建list.jsp

7.编写`SupplyDao.java`接口

public interface SupplyDao {
    List<Supply> getAllList();
}

8.编写`SupplyDao.xml`

id与Dao中的名称对应，resultType为返回值类型，填实体类的完整路径

<select id="getAllList" resultType="com.oldwu.model.Supply">
    select * from tb_supply
</select>

9.编写`SupplyService.java`接口

public interface SupplyService {
    List<Supply> supplyAll();
}

10.实现`SupplyService`

@Service
public class SupplyServiceImpl implements SupplyService {
    //自动填充SupplyDao
    @Autowired
    private SupplyDao dao;
    
    @Override
    public List<Supply> supplyAll() {
        return dao.getAllList();
    }
}

11.编写`SupplyController`

@Controller
public class SupplyController {

    @Autowired
    private SupplyService supplyService;
    
    //因为之前设置主页为list.do，因此这里写list
    @RequestMapping("list")
    public String getList(Model model){
        //将属性添加到model中，这样属性可以代入到页面显示
        model.addAttribute("list",supplyService.supplyAll());
        return "list";
    }

}

12.编写`list.jsp`

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>办公用品管理系统</title>
</head>
<body>
<div style="margin: auto;width: 60%">
    <h1 style="text-align: center">办公用品管理系统</h1>
    <h5 style="text-align: center;color: red">${msg}</h5>
    <hr>
    <table border="1" cellpadding="0" cellspacing="0" style="margin: auto;width: 100%">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>规格</th>
            <th>仓库数量</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="supply">
            <%--实现“库存数量”少于5的办公用品，行的背景用浅黄色高亮显示。--%>
            <tr style="background-color: ${supply.quantity<5?"#ffff90":"white"}">
                <td>${supply.id}</td>
                <td>${supply.name}</td>
                <td>${supply.model}</td>
                <td>${supply.quantity}</td>
                <td style="text-align: center">
                    <a href="#">借出</a>
                    <a href="#">入库</a>
                </td>
            </tr>
        </c:forEach>
    </table>
    <p style="text-align: right">
        <a href="#">新增物品</a>
    </p>
</div>
</body>
</html>

至此，查询功能的编写已经完成，访问项目已经可以正常显示数据库中的数据了

6.实现功能：物品的借出(改)

1.新建`out.jsp`

在视图文件夹中新建out.jsp用来显示借出页面

2.完善`list.jsp`中的`<a>`标签

传入id以请求这行数据
<a href="out.do?id=${supply.id}">借出</a>

3.编写`SupplyDao.java`

在原有基础上增加根据id查询：

Supply selectById(String id);
int updateInOut(@Param("id") Integer id,@Param("num") Integer num);

4.编写`SupplyDao.xml`

在原有基础上增加：

<select id="selectById" resultType="com.oldwu.model.Supply">
    select * from tb_supply where id = #{id}
</select>
<update id="updateInOut">
    update tb_supply set quantity = quantity - #{num} where id = #{id}
</update>

5.编写`SupplyService`并实现方法

Supply getSupplyById(String id);
boolean outSupply(Integer id,Integer num);

//实现方法
@Override
public Supply getSupplyById(String id) {
    return dao.selectById(id);
}
@Override
public boolean outSupply(Integer id, Integer num) {
    return dao.updateInOut(id, num) > 0;
}

6.编写`SupplyController`

在原有基础上增加：

@RequestMapping("out")
public ModelAndView outSupply(String id, ModelAndView model) {
    model.addObject("supply", supplyService.getSupplyById(id));
    model.setViewName("supply");
    return model;
}
@RequestMapping("outSubmit")
public ModelAndView outSubmitSupply(Integer id,Integer outNum, ModelAndView model) {
    if (supplyService.outSupply(id,outNum)){
        model.addObject("msg","借出成功！");
    }else {
        model.addObject("msg","借出失败！");
    }
    //转发到list.do继续处理
    model.setViewName("forward:list.do");
    return model;
}

7.编写`out.jsp`

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>借出</title>
</head>
<body>
<form action="outSubmit.do" method="post">
    <div style="margin: auto;width: 500px">
        <h1 style="text-align: center">办公物品借出</h1>
        <table border="1" cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
                <td>编号</td>
                <td>${supply.id}</td>
            </tr>
            <tr>
                <td>名称</td>
                <td>${supply.name}</td>
            </tr>
            <tr>
                <td>规格</td>
                <td>${supply.model}</td>
            </tr>
            <tr>
                <td>当前库存</td>
                <td id="nowNum">${supply.quantity}</td>
            </tr>
            <tr>
                <td>借出数量</td>
                <td>
                    <input type="number" name="outNum" id="outNum" value="0">
                    <input type="hidden" name="id" value="${supply.id}">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="出库" onclick="return check()">
                </td>
            </tr>
        </table>
    </div>
</form>
<script>
    //实现库存前端校验
    function check() {
        var outNum = document.getElementById("outNum").value;
        var nowNum = document.getElementById("nowNum").innerText;
        if (outNum == null ||outNum == 0 || outNum == ""){
            alert("借出数量必须填写且不能为0！");
            return false;
        }
        if (nowNum - outNum < 0){
            alert("没有足够的库存！");
            return false;
        }
        return true;
    }
</script>
</body>
</html>

至此，借出功能完成

7.实现功能：已有物品的入库(改)

和出库大同小异，无非改一些名称和数据库xml中的加减符号罢了，jsp页面去掉js即可。
别忘了在list.jsp中重写<a>标签：
<a href="in.do?id=${supply.id}">入库</a>

8.实现功能：物品入库(增)

1.编写`SupplyDao.java`

int insert(Supply supply);

2.编写`SupplyDao.xml`

<insert id="insert">
    INSERT INTO `myoffice`.`tb_supply`(`name`, `model`, `quantity`)
    VALUES (#{name}, #{model}, #{quantity})
</insert>

3.编写`SupplyService`并实现

boolean addSupply(Supply supply);

//实现接口
@Override
public boolean addSupply(Supply supply) {
    return dao.insert(supply) > 0;
}

4.编写`SupplyController`

//增加物品页面显示
@RequestMapping("add")
public String addSupply() {
    return "add";
}
//增加物品提交动作
@RequestMapping("addSubmit")
public ModelAndView addSubmitSupply(Supply supply, ModelAndView model) {
    if (supplyService.addSupply(supply)) {
        model.addObject("msg", "物品增加成功！");
    } else {
        model.addObject("msg", "物品增加失败！");
    }
    //转发
    model.setViewName("forward:list.do");
    return model;
}

5.新建`add.jsp`

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>增加物品</title>
</head>
<body>
<form action="addSubmit.do" method="post">
    <div style="margin: auto;width: 500px">
        <h1 style="text-align: center">办公增加物品</h1>
        <table border="1" cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
                <td>名称</td>
                <td>
                    <input type="text" name="name" required>
                </td>
            </tr>
            <tr>
                <td>规格</td>
                <td>
                    <input type="text" name="model" required>
                </td>
            </tr>
            <tr>
                <td>数量</td>
                <td>
                    <input type="number" name="quantity" required>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="入库">
                </td>
            </tr>
        </table>
    </div>
</form>
</body>
</html>

就此，写完了

源码下载

本文源码下载
 大三阶段性考试第一次测验源码含题目

注意！本源码使用idea编写，为maven项目，如果使用eclipse打开需要导入为maven项目！