SSM项目 三级联动+crud

于 2020-07-12 20:10:35 发布
阅读量330 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： SSM 文章标签： java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SDFSFASX/article/details/107304452
本文介绍如何使用Spring、SpringMVC和MyBatis（SSM）框架进行三级联动的数据处理，结合Vue.js实现动态更新与创建记录。内容包括配置SSM框架，设计数据库表结构，编写Mapper接口及实现，控制器处理请求，前端Vue.js组件的构建，以及详细的CRUD操作步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入代码片


****html代码****


<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th><input type="checkbox"></th>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>产地</th>
                <th>库存</th>
                <th colspan="100">操作<button @click="showAddComm()" >新增商品</button><button @click="deleteComm()">批量删除</button></th>
            </tr>
            <tr v-for="comm in list" >
                <td><input type="checkbox" v-model="checkedIds" :value="comm.id" ></td>
                <td>{{comm.id}}</td>
                <td>{{comm.name}}</td>
                <td>{{comm.age}}</td>
                <td>

                    {{comm.address}}

                </td>
                <td>{{comm.score}}</td>
                <td><button @click="showUpdateComm(comm.id)" >修改商品</button></td>
            </tr>
        </table>
        <table id="addComm" style="display: none" >
            <tr>
                <th colspan="100"><h1>保存商品</h1></th>
            </tr>
            <tr>
                <td>名称：</td>
                <td>
                    <input type="text" id="name" v-model="shpin.name" >
                </td>
            </tr>
            <tr>
                <td>价格：</td>
                <td>
                    <input type="text" id="age" v-model="shpin.age" >
                </td>
            </tr>
            <tr>
                <td>库存：</td>
                <td>
                    <input type="number" v-model="shpin.score" >
                </td>
            </tr>
            <tr>
                <td>产地：</td>
                <td>
                    <select id="cid" v-model="shpin.cid" v-on:change="getCityList(shpin.cid)">
                        <option v-for="p in prolist" v-bind:value="p.id">{{p.cname}}</option>
                    </select>省--
                    <select id="pid" v-model="shpin.pid" v-on:change="getCouList(shpin.pid)">
                        <option v-for="c in citylist" v-bind:value="c.id">{{c.cname}}</option>
                    </select>市--
                    <select id="couid" v-model="shpin.couid">
                        <option v-for="cou in coulist" v-bind:value="cou.id">{{cou.cname}}</option>
                    </select>县

                </td>
            </tr>
            <tr>
                <td colspan="100">
                    <button @click="addComm()" >确认新增</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<!-- jQuery -->
<script type="text/javascript" src="jQuery/jquery-2.2.3.min.js"></script>
<!-- 引入VueJs -->
<script type="text/javascript" src="vuejs/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="vuejs/axios-0.18.0.js"></script>
<script type="text/javascript" src="vuejs/index.js"></script>
</html>



**vue.js代码**


new Vue({
    el:"#app",
    data:{
        list:[],
        prolist:[],
        citylist:[],
        coulist:[],
        shpin:{},
        checkedIds:[]
    },
    methods:{
        findAllComm:function () {
            var _this = this;
            axios.get("findAll.do").then(function (response) {
                _this.list = response.data;
            })
        },
        showAddComm:function () {
            this.shpin = {};
            document.getElementById("addComm").style.display = "block";
            document.getElementById("name").readOnly=false;
            document.getElementById("age").readOnly=false;
            document.getElementById("cid").disabled=false;
            document.getElementById("pid").disabled=false;
            document.getElementById("couid").disabled=false;
        },
        //当市发生变化  县
        getCouList: function (id) {
            //使用$event的时候 前端页面方法的参数要保持一致都必须是 $event
           // var id = $event.target.value;
            var _this = this;
            axios.get("getCityListByPid.do?id=" + id).then(function (response) {
                _this.coulist = response.data;
            });
        },
        //当省发生变化   市
        getCityList: function (id) {
            //id 就是选择好的省的id
            //index能拿到 是地址的集合里面的那个地址，拿到选择的id

            //使用$event的时候 前端页面方法的参数要保持一致都必须是 $event
            //var id = $event.target.value;
            //alert(id+"市");
            var _this = this;
            axios.get("getCityListByPid.do?id=" + id).then(function (response) {
                _this.citylist = response.data;
                _this.coulist = [];
            });
        },
        //省
        getProList: function () {
            var _this = this;
            axios.get("getCityListByPid.do?id=1").then(function (response) {
                _this.prolist = response.data;
            })
        },
        addComm:function () {
            var _this = this;
            axios.post("update.do",_this.shpin).then(function (response) {
                alert(response.data.msg);
                _this.findAllComm();
                document.getElementById("addComm").style.display = "none";
            })
        }
        ,showUpdateComm:function (id) {
            var _this = this;
            axios.get("findOne1.do?id="+id).then(function (response) {
                _this.shpin = response.data.shpin;
                _this.citylist = response.data.citylist;
                _this.coulist = response.data.coulist;
                document.getElementById("addComm").style.display = "block";
                document.getElementById("name").readOnly=true;
                document.getElementById("age").readOnly=true;
                document.getElementById("cid").disabled=true;
                document.getElementById("pid").disabled=true;
                document.getElementById("couid").disabled=true;
            })
        }
        ,deleteComm: function () {
            var _this = this;
            axios.post("delete.do", _this.checkedIds).then(function (response) {
                if (response.data.flag){
                    _this.findAllComm();
                } else {
                    alert(response.data.flag);
                }
              // if (!response.data){
              //     alert("删除失败")
              // }
              //   _this.findAllComm();
            })
        }
    },created(){
        this.findAllComm();
        this.getProList();
    }
})

controller层代码

@RestController
public class ShController {

    @Resource
    private ShService shService;

    @RequestMapping("findAll")
    public List<Shpin> findAll(){
        return shService.findAll();
    }
    //三级联动
    @RequestMapping("/getCityListByPid")
    public List<City> getCityListByPid(Integer id) {
        return shService.getCityListByPid(id);
    }
    @RequestMapping("findOne")
    public Shpin findOne(Integer id){
        return shService.findOne(id);
    }

    @RequestMapping("findOne1")
    public Map findOne1(Integer id){
        return shService.findOne1(id);
    }
    @RequestMapping("delete")
    public ResultMsg deleteAll(@RequestBody Integer[] checkedIds){
        try {
            shService.deleteAll(checkedIds);
            return new ResultMsg(true,"删除成功");
        } catch (Exception e) {
            e.printStackTrace();
            return new ResultMsg(true,"删除失败");
        }
    }
    @RequestMapping("update")
    public ResultMsg updateAll(@RequestBody Shpin shpin){
        System.out.println(shpin);
         return  shService.updateAll(shpin)；
    }

}


service层代码


public interface ShService {
    List<Shpin> findAll();

    void deleteAll(Integer[] checkedIds);

    ResultMsg updateAll(Shpin shpin);

    Shpin findOne(Integer id);

    List<City> getCityListByPid(Integer id);

    Map findOne1(Integer id);
}

service实现层代码

@Service
public class ShServiceimpl implements ShService {
    @Resource
    private ShMapper shMapper;

    @Override
    public List<Shpin> findAll() {
        return shMapper.findAll();
    }

    @Override
    public void deleteAll(Integer[] checkedIds) {
        for (Integer id : checkedIds) {
            shMapper.delete(id);
        }
    }

    @Override
    public ResultMsg updateAll(Shpin shpin) {
        System.out.println(shpin);
        if (shpin.getId()!=null&& shpin.getId() >0 ) {
            if (shpin.getScore()>10){
               return new ResultMsg(false,"库存应小于10");
            }else {
                try {
                    shMapper.update(shpin);
                    return new ResultMsg(true,"修改成功");
                } catch (Exception e) {
                    e.printStackTrace();
                    return new ResultMsg(true,"修改失败");
                }

            }

        } else {

                try {
                        String address="";

                        if (shpin.getCid()>0){
                            String cname =shMapper.shengByid(shpin.getCid());
                            address+=cname+"省";
                        }

                        if (shpin.getPid()>0){
                            String cname = shMapper.shengByid(shpin.getPid());
                            address+=cname+"市";
                        }
                        if (shpin.getCouid()>0){
                            String cname = shMapper.shengByid(shpin.getCouid());
                            address+=cname+"县";
                        }
                        shpin.setAddress(address);
                        shMapper.save(shpin);
                    return new ResultMsg(true,"新增成功");
                } catch (Exception e) {
                    e.printStackTrace();
                    return new ResultMsg(false,"新增失败");
                }
        }
    }

    @Override
    public Shpin findOne(Integer id) {
        return shMapper.findOne(id);
    }

    @Override
    public List<City> getCityListByPid(Integer id) {
        return shMapper.getCityListByPid(id);
    }

    @Override
    public Map findOne1(Integer id) {
        Shpin one = shMapper.findOne(id);
        List<City> citylist=shMapper.getCityListByPid(one.getCid());
        List<City> coulist=shMapper.getCityListByPid(one.getPid());
        HashMap map = new HashMap();
        map.put("citylist",citylist);
        map.put("coulist",coulist);
        map.put("shpin",one);
        return map;
    }
}

mapper层接口

public interface ShMapper {
    List<Shpin> findAll();

    void delete(@Param("id") Integer id);

    void save(Shpin shpin);

    void update(Shpin shpin);

    Shpin findOne(@Param("id")Integer id);

    List<City> getCityListByPid(@Param("id")Integer id);

    String shengByid(@Param("cid")Integer cid);

    List<City> cidList(@Param("cid")Integer cid);
}

mapper.xml sql语句
 <select id="findAll" resultType="Shpin">
        select * from tb_stu where gid = 0
    </select>
    <select id="getCityListByPid" resultType="City">
           select * from t_city where pid=#{id}
      </select>

    <select id="shengByid" resultType="string">
           select cname from t_city where id=#{cid}
      </select>

    <update id="delete" >
        update tb_stu set gid=1 where id=#{id}
    </update>
    <!--  insert into tb_stu(name,age,address,score,cid,pid,couid,gid) values (#{name},#{age},#{address},#{score},#{cid},#{pid},#{couid},0) -->
    
    <insert id="save" parameterType="Shpin">
        insert into tb_stu(name,age,address,score,cid,pid,couid,gid) values (#{name},#{age},#{address},#{score},#{cid},#{pid},#{couid},0)
    </insert>

    <select id="findOne" resultType="Shpin" >
        select * from tb_stu where id = #{id} and gid = 0
    </select>

    <update id="update">
        update tb_stu set score = #{score} where id = #{id}
    </update>
简单实用的ssm+json三级联动
01-12
简单实用的ssm+json三级联动。一看就懂
SSM+Maven实现无刷新三级联动
05-24
SSM+Maven实现无刷新三级联动，经测试，能正常运行，包含三张表和一张表的实现
SSM简单三级联动代码示例
01-24
SSM简单三级联动代码示例，简单帮助新手学习三级联动。
SSM+easyui+三级联动可以运行代码，方便学习小例子，培训用
11-27
本人培训老师，这个是培训完后制作的小例子，SSM+easyui+三级联动可以运行代码，可以直接运行，不懂的可以Q我1010851542
ssm+maven省市区三级联动
11-22
使用当下主流框架ssm，利用maven管理jar包，数据库为mysql数据库
ssm框架简单整合增删改查+jq,ajax下拉框+二级省市联动
05-18
这个项目是一个基础的SSM整合实例，旨在帮助初学者理解这些框架如何协同工作并实现基本的CRUD（创建、读取、更新、删除）操作，以及利用Ajax和jQuery实现动态下拉框和二级省市联动效果。 1. **Spring框架**：Spring...
SSM框架下实现json格式三级联动功能详解
在IT领域中，"ssm+json三级联动"指的是使用SSM框架（Spring, Spring MVC, MyBatis）结合JSON（JavaScript Object Notation）数据交换格式来实现的一个三级联动功能。三级联动是一种常见的Web应用交互模式，用于在三...
SSM框架下实现JSON与AJAX的三级联动功能
通过以上六个方面的详细解释，可以看出SSM+JSON+AJAX实现三级联动涉及到前端和后端的紧密配合，从数据库设计到框架配置，再到具体的编码实践，都需要精心设计和精确实现。只有这样，才能让最终用户在使用过程中体验...
SSM框架整合教程：实现电影系统增删改查及三级联动功能
现在，我们来详细探讨一下基于SSM框架实现的高级整合，尤其是增删改查（CRUD）功能以及三级联动在电影系统中的应用。 Spring框架是SSM中的核心，负责整个系统的业务逻辑管理。它通过依赖注入（DI）和面向切面编程...
【ssm项目源码】商户管理系统.zip
02-10
【ssm项目源码】商户管理系统是一套基于Java技术栈的Web应用，主要采用了Spring、SpringMVC和MyBatis三个框架的集成，通常被称为SSM框架。这套系统旨在为商户提供全面的业务管理功能，包括但不限于商户信息管理、...
ssm+maven+三级联动+分页+多条件模糊查询
05-03
ssm+maven+三级联动+分页+多条件模糊查询
SSM整合前台后台交互的三级省市联动
03-23
前台发送Ajax请求,后台响应给前台,前台解析响应数据并且在页面加载
基于SSM（Spring-SpringMVC-MyBatis）的高级整合（增删改查功能）电影系统加三级联动
06-01
此资源是基于SSM（Spring+SpringMVC+MyBatis）的高级整合，项目中利用前端框架bootstrap快速搭建简洁优美的界面，进行对mysql的增，删，改，查的基础操作。是一个非常适合新手学习的例子！！电影系统加有三级联动
SSM，ajax 三级联动（非JSP）
09-02
SSM，mysql，ajax，非JSP技术，实现地区省的三级联动。
ssm+mysql+easyui-tree省市区三级联动
11-20
ssm+mysql+easyui-tree的三级联动,我是将数据拼接后传到前台的，应该还是比较简单易懂的
ssm之地区表三级联动
mytimelife的博客
09-05 1252
往期回顾1.重磅资料，微服务 2.springBoot面试题集锦（含答案）3.idea的常用设置和快捷键（内含动图）4.程序员：凭什么他大专12K,而我硕士研究生才5K？2019年世界...
三级联动
MRslonly的博客
08-27 1953
普通的三级联动 html： <body> 省：<select id="s1"> <option>—请选择—</option> </select> 市：<select id="s2"> <option>—请选择—</option> </select> 区：<select ...
ssm 省市县三级联动
weixin_43470118的博客
10-29 785
实体类： import java.io.Serializable; public class Test implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private String proName; private String cityName; priv...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值