在这里插入代码片
****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) {
var _this = this;
axios.get("getCityListByPid.do?id=" + id).then(function (response) {
_this.coulist = response.data;
});
},
getCityList: function (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);
}
})
}
},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>