前言
本章节将是Java从零单排系列的最后一篇文章，希望大家以后要多多学习，走向高收入。小马哥商城实战这个项目最后，我们还有完成用户支付流程，以及发货流程。
用户充值，手机地址填写
由于我们目前没有接入第三方支付（支付宝，微信等），我们就通过后台为用户充钱吧。 新增一个background.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台</title>
</head>
<body>
<div id="app">
<h3>用户列表</h3>
<table border="">
<tr>
<th>用户名称</th>
<th>手机号码</th>
<th>钱包余额</th>
<th>收件地址</th>
<th>操作</th>
</tr>
<tr v-for="item in memberList">
<td>{{item.name}}</td>
<td>{{item.mobile}}</td>
<td>{{item.money}}</td>
<td>{{item.address}}</td>
<td>
<button @click="showDialogEvent(item)">修改</button>
</td>
</tr>
</table>
<div v-if="showDialog">
<p>用户名称<label>{{member.name}}</label>手机号码<label>{{member.mobile}}</label></p>
<div><label>钱包</label><input v-model="member.money"></div>
<div><label>收件地址</label><input v-model="member.address"></div>
<div>
<button @click="modifyMember">提交</button>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
memberList:[],
showDialog:false,
member:{
id:'',
name:'',
mobile:'',
address:'',
money:0
},
}
},
created(){
this.getMemberList();
},
methods:{
getMemberList(){
axios.get('member/getList',this.member)
.then(res=>{
this.memberList = res.data
})
},
showDialogEvent(item){
this.showDialog = true;
let jsonStr = JSON.stringify(item)
let jsonObj = JSON.parse(jsonStr)
this.member.id = jsonObj.id
this.member.name = jsonObj.name
this.member.mobile = jsonObj.mobile
this.member.address = jsonObj.address
this.member.money = jsonObj.money
},
modifyMember(){
axios.post('member/modifyMember',this.member).then(res=>{this.getMemberList(); this.showDialog = false;})
}
}
})
</script>
</body>
</html>
点击修改，显示修改的输入框
点击提交过去最新的用户列表。
更新用户信息的接口为
member/modifyMember,里面稍微有点逻辑判断
@Transactional
@Override
public String modifyMember(JSONObject requestJson) {
Member member = JSON.toJavaObject(requestJson, Member.class);
//先查找用户是否存在
if (memberDao.getMemberByMobile(member) != null) {
//更新用户的手机地址
memberDao.update(requestJson);
//更新用户钱包
walletDao.update(requestJson);
return "ok";
} else {
return "error";
}
}
member update中我们用到了mybatis的set标签。
<update id="update">
update member
<set>
<trim prefixOverrides=",">
<if test="!@com.xiaoma.mall.utils.DaoParamsUtil@isBlank(name)">
name = #{name},
</if>
<if test="!@com.xiaoma.mall.utils.DaoParamsUtil@isBlank(mobile)">
mobile = #{mobile},
</if>
<if test="!@com.xiaoma.mall.utils.DaoParamsUtil@isBlank(address)">
address = #{address},
</if>
</trim>
</set>
where id = #{id}
</update>
清空购物车
清空购物车需要回到我们编写的mall的页面。在购物车下方准备一个结账按钮，绑定触发事件，将memberId传给 shoppingCar/clean 接口，然后我们就可以在shoppingServiceImp编写我们的清空购物车逻辑。
- 查询购物的商品，进行计费；
- 查询用户钱包余额
- 判断用户钱包金额是否足够清空购物车，否则提示错误。
- 清空购物车时，先对用户钱包进行扣费，再对库存进行相减，最后将购物车中的商品状态设置为1。
@Transactional
@Override
public String cleanCar(JSONObject requestJson) {
int memberId = requestJson.getIntValue("memberId");
List<Integer> carIds = new ArrayList<>();
//获取购物车商品
List<JSONObject> list = shoppingCarDao.getList(memberId);
BigDecimal totalPrice = BigDecimal.ZERO;
for(JSONObject item :list){
totalPrice = totalPrice.add(item.getBigDecimal("price"));
carIds.add(item.getIntValue("id"));
}
Wallet wallet = walletDao.getWalletByMemberId(memberId);
//钱包余额足够清空购物车
if(wallet.getMoney().compareTo(totalPrice) >=0){
BigDecimal residue = wallet.getMoney().subtract(totalPrice);
JSONObject updateParams = new JSONObject();
updateParams.put("money",residue);
updateParams.put("id",wallet.getMemberId());
walletDao.update(updateParams);
//删除购物车中的商品
shoppingCarDao.cleanCarByCarIds(carIds);
//减库存
for(JSONObject item :list){
warehouseDao.subtractWarehouse(item);
}
}else {
return "error";
}
return "ok";
}
更新购物车的时候，我们可以通过mybatis的foreach标签，批量更新。
<update id="cleanCarByCarIds">
update shopping_car set status = 1
where
id in
<foreach collection="carIds" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</update>
前端调用完接口后，要刷新下数据。
pay(){
axios.post('shoppingCar/clean',{memberId:this.member.id}).then(res=>{
if(res.data == 'ok'){
this.getShoppingCar()
this.getMember()
this.getGoodLists()
}else{
window.alert('error')
}
})
}
这样大致的支付流程完成了。
小马哥商城实战总结
小马哥商城虽然比较简单，但是这个项目富含的知识点，在往后的工作一定会用的，因为这是最基础的知识。在编写代码的时候一定要先模拟实际的场景，然后通过代码来实现模拟的场景，这边我们编写的代码就比较完整。
