SSM项目 三级联动+crud

于 2020-07-12 20:10:35 发布
阅读量329 收藏
点赞数
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>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值