ssm案例

最新推荐文章于 2022-06-25 15:02:30 发布

原创最新推荐文章于 2022-06-25 15:02:30 发布 · 448 阅读

CC 4.0 BY-SA版权

本文介绍了一次使用SSM（Spring、SpringMVC、Mybatis）框架进行数据库操作的案例。首先在MySQL创建数据表，然后创建webapp项目，详细列出了后端目录结构、依赖的jar包以及配置文件。接着，讲述了从Model到DAO，再到Service和Controller的代码编写过程，强调了各层的作用和交互。最后，展示了前端页面和JavaScript代码，包括数据列表和新增页面，以及利用Ajax实现异步交互。

首先，先在mysql里面建一张供操作的数据库和表，例如途中mydemo和shirt_brands；
在这里插入图片描述
新建一个webapp项目，后端目录如下

前台目录如下，bootstrap是一个样式框架

pom里面jar包文件如下
servlet------api 2.5
spring-----context、core、beans、webmvc、jdbc、tx 4.3.7RELEASE
jackson------databined、core、annotation 2.9.9
mybatis 3.4.6
mybatis-spring 1.3.2
commons-dbcp2 2.5.0
mysql-connector-java 5.1.38

在这里插入图片描述

spring.xml：

web.xml:

以上全部配置完成之后开始写java后端代码，首先先写model里的ShirtbrandsInfo类，model层=entity层。存放我们的实体类，与数据库中的属性值基本保持一致。

private int sbid;
private String sbName;
以下为get和set方法

然后写dao里面的ShirtbrandsDao类，这个类是用来写sql，对数据库进行操作，mapper层=dao层，现在用mybatis逆向工程生成的mapper层，其实就是dao层。对数据库进行数据持久化操作，他的方法语句是直接针对数据库操作的。

public interface ShirtbrandsDao {
    @Insert("insert into shirt_brands(sbName) values(#{sbName})")
    public void save(ShirtbrandsInfo sb);

    @Delete("delete from shirt_brands where sbid=#{sbid}")
    public void del(int sbid);

    @Update("update shirt_brands set sbName=#{sbName}")
    public void update(ShirtbrandsInfo sb);

    @Select("select * from shirt_brands where sbid=#{sbid}")
    public ShirtbrandsInfo findById(int sbid);

    @Select("select * from shirt_brands")
    public List<ShirtbrandsInfo> findAll();
}

其次写service里面的ShirtbrandsService服务类，需要有三个注释，service层。存放业务逻辑处理，也是一些关于数据库处理的操作，但不是直接和数据库打交道，他有接口还有接口的实现方法，在接口的实现方法中需要导入mapper层，mapper层是直接跟数据库打交道的，他也是个接口，只有方法名字，具体实现在mapper.xml文件里，service是供我们使用的方法，service层是针对我们controller，也就是针对我们使用者。service的impl是把mapper和service进行整合的文件。

@Service
@Transactional
public class ShirtbrandsService {
    @Autowired
    private ShirtbrandsDao sbdao;

    public void saveShirtbrand(ShirtbrandsInfo sb) {
        sbdao.save(sb);
    }

    public void delShirtbrand(int sbid) {
        sbdao.del(sbid);
    }

    public void modShirtbrand(ShirtbrandsInfo sb) {
        sbdao.update(sb);
    }

    public ShirtbrandsInfo searchOne(int sbid) {
        return sbdao.findById(sbid);
    }

    public List<ShirtbrandsInfo> searchAll() {
        return sbdao.findAll();
    }
}

最后写controller里面的InitCtrl类，controller层。控制器，导入service层，因为service中的方法是我们使用到的，controller通过接收前端传过来的参数进行业务操作，在返回一个指定的路径或者数据表。

@RestController
public class InitCtrl {
    @Autowired
    private ShirtbrandsService shirtbrandsService;
    private final static String SUCCESS = "{\"status\":\"ok\"}";
    private static ObjectMapper om = new ObjectMapper();

    @RequestMapping("/save.do")
    public String save(@RequestBody ShirtbrandsInfo shirtbrandsInfo) {
        shirtbrandsService.saveShirtbrand(shirtbrandsInfo);
        return SUCCESS;
    }

    @RequestMapping("/del.do")
    public String del(int sbid) {
        shirtbrandsService.delShirtbrand(sbid);
        return SUCCESS;
    }

    @RequestMapping("/mod.do")
    public String mod(ShirtbrandsInfo shirtbrandsInfo) {
        shirtbrandsService.modShirtbrand(shirtbrandsInfo);
        return SUCCESS;
    }

    @RequestMapping("/singel.do")
    public ShirtbrandsInfo findOne(int sbid) {
        return shirtbrandsService.searchOne(sbid);
    }

    @RequestMapping("/init.do")
    public List<ShirtbrandsInfo> init() {
        return shirtbrandsService.searchAll();
    }
}

后端数据完成之后开始写前台页面
数据列表页面：

<div class="container">
    <div class="row">
        <div class="col-md-2"><a href="save.html" class="btn btn-primary">保存新品牌</a></div>
    </div>
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <table class="table-bordered table striped table-hover">
                <tr>
                    <th>品牌编号</th>
                    <th>品牌名称</th>
                    <th>用户操作</th>
                </tr>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="frame/jquery/baidu_jquery211.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/index.js"></script>

在这里插入图片描述
新增页面：

<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4 class="panel-title"><span class="glyphicon glyphicon-user">添加品牌</span></h4>
                </div>
                <div class="panel-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group"><label for="" class="col-sm-3 control-label">品牌名称</label>
                            <div class="col-sm-8"><input type="text" placeholder="请输入" name="sbName" class="form-control"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-off col-sm-9">
                                <button type="button" class="btn btn-primary">新品牌注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="frame/jquery/baidu_jquery211.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/save.js"></script>

在这里插入图片描述
tools页面js代码：
ajax实现异步数据的前后台交互

(function ($) {
    this.remoteLoadData = {
        // protocol协议、addr地址、sendData发送的数据
        loadData: function (protocol, addr, sendData, fn) {
            // stringify把json对象转化成字符串，相当于om对象里面的writealueAsString
            var sd = sendData == null ? {} : JSON.stringify(sendData);
            $.ajax({    // 对于页面上一小段数据的拉取，而不是加载整个页面
                type: protocol,
                url: addr,
                contentType:"application/json",  // 返回的数据也是json格式
                data: sd,
                dataType: "json",
                // 回调函数
                success: function (res) {
                    fn(res)
                }
            })
        },
    }
})(jQuery);

index.js页面：

(function ($) {
    // 闭包对象
    var pageInit = function () {
        var tab;
        var initData = function (res) {
            // 在页面的表格上删除所有class为infos的标签
            $(".infos").remove();
            // 拼装网页标签
            var tag = "";
            $.each(res,function (i) {
                var obj = res[i];
                // 点击修改信息按钮进入mod.do界面，点击删除品牌按钮删除数据del.do
                tag += `<tr class="infos">
                            <td>${obj.sbid}</td>
                            <td>${obj.sbName}</td>
                            <td> 
                            <a href="mod.do?sbid=${obj.sbid}" class="btn btn-xs btn-info">修改信息</a>
                            <a href="del.do?sbid=${obj.sbid}" class="btn btn-xs btn-danger">删除品牌</a>
                            </td>
                        </tr>`;
            });
            // 将数据绑定到网页上
            $(".table").append(tag);
        };
        return {
            init: function () {
                //  默认数据列表界面
                remoteLoadData.loadData("get", "init.do", null, initData);
            }
        }
    }();
    pageInit.init();
})(jQuery);

save.js：

(function ($) {
    var saveObj = function () {
        var btn;
        var btnEventHandler = function () {
            // 获取用户输入的信息
            var params = {
                sbName:$("input[name=sbName]").val(),
            }
            // 将数据传输至后台save.do中，点击新品牌注册之后返回数据列表界面index.html
            remoteLoadData.loadData("post","save.do",params,function (res) {
                location.href = "http://localhost:8080/myssm2/index.html";
            });
        }
        return {
            addEvent:function () {
                // 为btn加载事件
                btn = $("button");
                btn.click(btnEventHandler);
            }
        }
    }();
    saveObj.addEvent();
})(jQuery);