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)
Vue+MySQL实现购物车的增删改查的更多相关文章
- Vc数据库编程基础MySql数据库的表增删改查数据
Vc数据库编程基础MySql数据库的表增删改查数据 一丶表操作命令 1.查看表中所有数据 select * from 表名 2.为表中所有的字段添加数据 insert into 表名( 字段1,字段2 ...
- python操作三大主流数据库(2)python操作mysql②python对mysql进行简单的增删改查
python操作mysql②python对mysql进行简单的增删改查 1.设计mysql的数据库和表 id:新闻的唯一标示 title:新闻的标题 content:新闻的内容 created_at: ...
- 使用 NodeJS+Express+MySQL 实现简单的增删改查
关于node.js暂时记录如下,以后有时间一定学习 文章来自简书,作者:sprint,2016-07 使用 Node.js + Express+MySQL 实现简单的增删改查 https://www. ...
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- mysql 的基本操作总结--增删改查
本文只是总结一下mysql 的基本操作,增删改查,以便忘记的时候可以查询一下 1.创建数据库 语法:CREATE DATABASES 数据库名; 例子: CREATE DATABASES studen ...
- Mysql数据表的增删改查
---恢复内容开始--- Mysql数据表的增删改查 1.创建表 语法:CREATE TABLE 表名(字段1,字段2,字段3.......) CREATE TABLE `users` ( `us ...
- Python进阶----数据库的基础,关系型数据库与非关系型数据库(No SQL:not only sql),mysql数据库语言基础(增删改查,权限设定)
day37 一丶Python进阶----数据库的基础,mysql数据库语言基础(增删改查,权限设定) 什么是数据库: 简称:DataBase ---->DB 数据库即存放数据的仓库, ...
- MySQL数据库安装，MySQL数据库库的增删改查，表的增删改查，表数据的基本数据类型
一 MySQL的安装 MySQL现在属于甲骨文公司,所以和java语言匹配度较高,同时甲骨文公司的另一种数据库为Oracle,两者同为关系型数据库,即采用关系模型来组织数据,以行和列的方法来存储数据的 ...
- 在C#的控制台应用中使用Dapper链接MySQL并执行一些增删改查
一.首先先创建一个C#的控制台应用 二.然后添加上必要的命名空间 using System;using System.Collections.Generic;using MySql.Data.MySq ...
随机推荐
- MyEclipse修改运行内存
修改 myeclipse.ini -vmargs -Xmx1768m -XX:MaxPermSize=1320m -XX:ReservedCodeCacheSize=64m -Dosgi.nls.w ...
- Java类与类之间的6种关系及uml表示
一.继承关系 继承指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力.在Java中继承关系通过关键字extends明确标识,在设计时一般没有争议 ...
- mysql安装笔记
MySQL-mysql 8.0.11安装教程 - Laumians - 博客园 https://www.cnblogs.com/laumians-notes/p/9069498.html mysql ...
- LeetCode 282. Expression Add Operators
原题链接在这里:https://leetcode.com/problems/expression-add-operators/ 题目: Given a string that contains onl ...
- transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）
//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不 ...
- Linux操作系统常用命令合集——第六篇-软件包操作(2个命令)
一.前言介绍 软件包即程序包 程序包管理 关键词:rpm程序包管理.YUM仓库管理.源码编译安装 程序包管理: 将编译好的应用程序的各组成文件打包一个或几个程序包文件,从而方便快捷地实现程序包的安装. ...
- 遇到一张jpg的图片打不开,ps打不开,fireworks,打不开,ie8浏览器上显示不了,其他的浏览器没问题
1.在photoshop上报错; 2.在fireworks上报错 3.ie8上 其他的图片都可以,就这张不可以,没发现什么不同的地方,都是jpg格式的呀,而且谷歌浏览器能显示出来; 处理方法: 1.选 ...
- qt5.10 开发安卓之硌手的小虫子们
1.jdk 下载: 下载地址:http://www.oracle.com/technetwork/java/javase/overview/index.html windows 平台不要下载java ...
- zabbix主动模式,自定义Key监控 zabbix采集器
主动模式不是只能用模板提供的标准检测器方式 zabbix-agent两种运行方式即主动模式和被动模式.默认被动模式. 两种模式是相对 客户端 角度来说的. 被动模式:等待server来取数据,可以使用 ...
- P3144 [USACO16OPEN]关闭农场——离线，并查集
https://www.luogu.org/problem/P3144 每次关闭一个农场,农场之间有边相连,问每次关闭后开着的农场是否是一个连通块: 数据小,离线搞: 我们先记录删的顺序,然后倒着来, ...