Vue+MySQL实现购物车的增删改查
1，创建简单数据库数据表
2，创建Mapper文件
<!--查询商品--> <select id="selectcommodity" resultType="Commodity"> select * from commodity </select> <!--添加商品--> <insert id="insertcommodity" > insert into commodity (name,price,number) values (#{name},#{price},#{number}) </insert> <!--删除商品--> <delete id="deletecommodityById" parameterType="int"> delete from commodity where id=#{id}; </delete> <!--修改商品--> <update id="updatecommdity"> update commodity set name=#{name},price=#{price},number=#{number} where id=#{id} </update>
3，编写dao层
//查询Commodity List<Commodity> selectcommodity(); //添加Commodity int insertcommodity(Commodity commodity); //删除Commodity int deletecommodityById(int id); //编辑Commodity int updatecommdity(@Param("name") String name,@Param("price") int price,@Param("number") int number,@Param("id")int id);
4，编写service层
GoodsService
//查询Commodity List<Commodity> selectcommodity(); //添加Commodity int insertcommodity(Commodity commodity); //删除Commodity int deletecommodityById(int id); //编辑Commodity int updatecommdity(@Param("name") String name,@Param("price") int price,@Param("number") int number,@Param("id")int id);
GoodsImple
//查询Commodity public List<Commodity> selectcommodity() { return goodsDao.selectcommodity(); } //添加Commodity public int insertcommodity(Commodity commodity) { return goodsDao.insertcommodity(commodity); } //删除Commodity public int deletecommodityById(int id) { return goodsDao.deletecommodityById(id); } //编辑Commodity public int updatecommdity(String name, int price, int number, int id) { return goodsDao.updatecommdity(name,price,number,id); }
5,编写Controller层
// 查询Commodity商品
@ResponseBody
@RequestMapping("/selectcommodity")
public R selectcommodity(){
return R.ok(goodsService.selectcommodity());
}
// 添加Commodity商品
@ResponseBody
@RequestMapping("/insertcommodity")
public R insertcommodity(String name,Integer price,Integer number){
return R.ok(goodsService.insertcommodity(new Commodity(0,name,price,number,0)));
}
@ResponseBody
@RequestMapping("/deletecommodityById")
public R deletecommodityById(Integer id){
return R.ok(goodsService.deletecommodityById(id));
}
@ResponseBody
@RequestMapping("/updatecommdity")
public R updatecommdity(String name, Integer price,Integer number,Integer id){
return R.ok(goodsService.updatecommdity(name,price,number,id));
}
6，页面
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> table{ text-align: center; } tr{ height: 40px; line-height: 40px; } table input{ background: transparent; width: 40px; height: 20px; line-height: 20px; padding: 0; border:none; outline:none; border-top: 1px solid gray; border-bottom: 1px solid gray; text-align: center; } button{ width: 20px; height: 22px; border: 1px solid gray; border-left: none; cursor: pointer; outline:none; margin-left: -4px; } #reduce{ border-right: none; border-left:1px solid gray; margin-right: -5px; } span{ color: red; font-size: 22px; } a{ text-decoration: none; column-rule: blue; } #addCom{ margin: 30px; } </style> </head> <body> <table width="1000px" id="tab1" border="1" style="width: 90%"> <caption style="font-size: 28px;">购物车</caption> <tr><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr> <tr v-for="(obj,index) in commoditys"> <td>{{obj.id}}</td> <td>{{obj.name}}</td> <td>{{obj.price}}</td> <td> <!--<button id="jian">-</button>--> <!--<input type="text" v-model="obj.number">--> <!--<button >+</button>--> <button id="jian" v-on:click="obj.number<=0?0:(obj.number-=1)">-</button> <input type="text" v-model="obj.number"/> <button v-on:click="obj.number+=1">+</button> </td> <!--计算后保留后两位小数--> <td>{{(obj.price*obj.number).toFixed(2)}}</td> <td> <a href="#" @click="remove(obj.id)">删除</a> <a href="#" @click="updata(obj.id)">编辑</a> </td> </tr> <tr> <td colspan="6" align="right"> 总计:{{total|currency}} </td> </tr> </table> <div id="addCom" > <input type="text" id="inpid" hidden="hidden"> 名称:<input type="text" id="inpname"> 单价:<input type="text" id="inpprice"> 数量:<input type="text" id="inpnumber"> <input type="button" value="添加" id="insertcomy"> <input type="button" value="修改" @click="update"> </div> <script src="js/jquery-1.11.3.js"></script> <script src="js/vue.min.js"></script> <script> var vm=new Vue({ el:"#tab1", data:{ commoditys:[] }, computed:{//计算的方法 total:function(){ var sum=0; for(var i=0;i<this.commoditys.length;i++){ sum+=this.commoditys[i].price*this.commoditys[i].number; } return sum; } }, methods:{ remove:function (id) { $.ajax({ url:"goods/deletecommodityById", data:{id:id}, success:function (data) { if (data.code==1){ alert("删除成功！"); show(); }else { alert("删除失败！"); } } }) }, updata:function (cid) { for (var i=0;this.commoditys.length;i++){ if (this.commoditys[i].id==cid){ $("#inpid").val(this.commoditys[i].id); $("#inpname").val(this.commoditys[i].name); $("#inpnumber").val(this.commoditys[i].number); $("#inpprice").val(this.commoditys[i].price); } } } } }) var vm2=new Vue({ el:"#addCom", data:{}, methods:{ update:function () { alert($("#inpid").val()) $.ajax({ url:"goods/updatecommdity", data:{ "name":$("#inpname").val(), "price":$("#inpprice").val(), "number":$("#inpnumber").val(), "id":$("#inpid").val() }, success:function (data) { alert("修改成功"); $("#inpname").val(); $("#inpprice").val(); $("#inpnumber").val(); $("#inpid").val(); show(); },error:function (rel) { alert(rel+"修改失败"); } }); } } }) function show() { $.ajax({ url:"goods/selectcommodity", contentType:"application/json;charset=utf-8", datatype:"json", success:function (data){ console.log(data.data) vm.commoditys=data.data; } }) } show(); //添加 $("#insertcomy").on("click",function(){ // alert($("#inpname").val()); // alert($("#inpprice").val()); // alert($("#inpnumber").val()); $.ajax({ url:"goods/insertcommodity", data:{ "name":$("#inpname").val(), "price":$("#inpprice").val(), "number":$("#inpnumber").val(), }, type:"post", success:function () { alert("添加成功"); show(); },error:function (rel) { alert(rel+"添加失败"); } }); }); </script> </body> </html>
(注意引用jquer.js vue.js)
