springMVC案例练习，非常详细

小俊会编码

已于 2022-08-27 20:29:42 修改

阅读量621

点赞数 2

分类专栏： springMVC 文章标签：前端

于 2022-08-17 11:57:52 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/126382196

版权

一.新建项目，环境配置，导入依赖.....

不熟悉去看 http://t.csdn.cn/MmIYw

二.使用的技术

响应前端数据有三种方式

不用ajax
- Model:
- ModelANDView:

使用ajax

ResponseBody（要用需要导jackson依赖）：用来将其他类型转换成json串

 <!--json的三个jackson依赖  当写了 @ResponseBody注解时,将其他类型转换串      -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.13.2</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.2.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.13.2</version>
        </dependency>

配置文件spring-mvc.xml:

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       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">

    <!--这个是扫描,指定包下的组件-->
    <context:component-scan base-package="com.pro"/>

    <!--MVC注解驱动，配合handler来使用 -->
    <mvc:annotation-driven/>
    <!--静态资源默认排除在外 要加载静态资源css,js等，就需要写，默认的静态资源在哪处理 ，由Tomcat里面默认的servlet来处理  -->
    <mvc:default-servlet-handler/>

    <!-- 配置一个视图解析器，来访问WEB-INF下面的文件
       /WEB-INF/jsp/网页目录及名称 WEB-INF/jsp/index.jsp-->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>

    </bean>
</beans>

模拟的数据

package com.pro.util;

import com.pro.domain.User;

import java.util.ArrayList;
import java.util.List;

public class DataUtil {

    public static List<User> userList = new ArrayList<User>();

    //写一个静态代码块，模拟从数据库当中取出来的数据集合
    static {
        for (int i = 0; i < 10; i++) {
            userList.add((new User(
                    i,
                    "name" + i,
                    "pwd" + 1
            )));
        }
    }
}

三. 代码及实现效果：

页面固定资源代码：

<body>
<%--用bootStrap框架加入一个按钮--%>
<div class="d-grid gap-2" style="text-align: center;">
    <button class="btn btn-info" id="btList" type="button" style="width:100%;height: 80px;">隐藏列表</button>
</div>
<div id="dsave" class="table table-striped">
    <form action="" id="frm">
        <table border="1px" width="500px">
            <tr>
                <td>添加</td>
                <td><input type="text" name="userId" id="userId" placeholder="id"></td>
                <td><input type="text" name="username" id="username" placeholder="username"></td>
                <td><input type="password" name="password" id="password" placeholder="password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交" id="tj"></td>
                <td colspan="2"><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
</div>

<%--修改--%>
<div id="dsave1" class="table table-striped">
    <form action="" id="frm1">
        <%-- <table border="1px" width="500px">
             <tr>
                 <td >修改</td>
                 <td><input type="text" name="userId" id="userId1" placeholder="id"></td>
                 <td><input type="text" name="username" id="username1" placeholder="username"></td>
                 <td><input type="password" name="password" id="password1" placeholder="password"></td>
             </tr>
             <tr>
                 <td colspan="2"><input type="submit" value="提交" id="tj1" ></td>
                 <td colspan="2"><input type="reset" value="重置"></td>
             </tr>
         </table>--%>
    </form>
</div>


<%--&lt;%&ndash;因为增加是拼接的，所以不能直接用$('#btadd').click(function () &ndash;%&gt;
<tr><td style="text-align: center" colspan="4"><button type="button" id="btadd" class="btn btn-danger btn-lg" style="width: 100%">新增用户</button></td>--%>
<div id="ut">


</div>
</body>

先显示所有用户信息，用到了ajax，jQuery，bootstrap，json

控制层代码

 @RequestMapping("/getList")
    //要 @ResponseBody注解生效，需要加MVC注解驱动
    @ResponseBody//就是返回字符串或者json串,如果是字符串就能返回，如果不是字符串就会尝试转换成字符串（为了实现目的，就需要导入三个jackson依赖）
    public Object getList(){
        List<User> userList = new ArrayList<User>();
        return DataUtil.userList;
//        return "list";//没加ResponseBody返回的是list.jsp,加了就是返回一个字符串
    }