(Vue -06) 购物车案例 + 课程管理案例
2022-03-21 本文已影响0人
Jinx要睡懒觉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车案例</title>
<style>
table{
border-collapse: collapse;
}
td,th{
border: 1px solid #eee;
padding: 2px 10px;
text-align: center;
}
td img{
width: 100px;
}
td input{
width: 50px;
text-align: center;
outline: none;
}
.empty{
border: 1px solid pink;
width: 400px;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="app">
<table v-if="goodses.length>0">
<thead>
<tr>
<th><input type="checkbox" v-model="allCheck">全选</th>
<th>名称</th>
<th>图片</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody v-for="(item,index) in goodses" :key="item.id">
<tr>
<td><input type="checkbox" v-model="item.isCheck"></td>
<td>{{item.name}}</td>
<td><img :src="item.img"></td>
<td>{{item.price}}</td>
<td>
<!-- 最少买一个商品 -->
<button @click="item.count--" :disabled="item.count===1">-</button>
<input type="text" :value="item.count" readonly>
<button @click="item.count++" :disabled="item.count===10">+</button>
</td>
<td>￥{{item.price*item.count | toFixed2}}</td>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: right;padding-right: 20px;">
<span>总计：</span>
<span>￥{{totalPrice | toFixed2}}</span>
</td>
</tr>
</tfoot>
</table>
<div v-else class="empty">
你的购物车是空的耶
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#app',
data:{
//商品数组
goodses:[
{
id:1001,
name:'iphone13',
img:'https://img10.360buyimg.com/n7/jfs/t1/174210/17/21333/198606/61a8a72aE6d147d88/d14a6fed105759da.jpg',
price:5999,
count:2,
isCheck:false
},
{
id:1002,
name:'小米',
img:'https://img12.360buyimg.com/n7/jfs/t1/210286/8/11109/115669/61a89cb6Ea88c1ed0/499ecd75c018b615.jpg',
price:2399,
count:2,
isCheck:false
},
{
id:1003,
name:'华为',
img:'https://img10.360buyimg.com/n7/jfs/t1/170247/17/12852/67106/604f1593E65e7d374/dc2e256bf9e1a020.jpg',
price:10999,
count:2,
isCheck:false
},
{
id:1004,
name:'诺基亚',
img:'https://img11.360buyimg.com/n7/jfs/t1/222650/38/4356/356804/61a6e6e2E51cc5ab5/594cad3c38f8273f.jpg',
price:1499,
count:2,
isCheck:false
}
]
},
//方法
methods: {
delGoods(index){
if (confirm('是否确定删除？')) {
this.goodses.splice(index,1)
}
}
},
//过滤器
filters:{
//数字保留两位小数
toFixed2(val){
return val.toFixed(2)
}
},
//计算属性
computed:{
//是否全选了呀
allCheck:{
get(){
return this.goodses.length===0? false:this.goodses.every(r=>r.isCheck)
},
set(val){
// console.log(val);
//数组的所有的商品都是选中状态，name全选状态为true
this.goodses.forEach(r => {r.isCheck=val});
}
},
//计算总计
totalPrice(){
return this.goodses.filter(r=>r.isCheck).reduce((a,b)=>a+b.price*b.count,0)
}
}
})
</script>
</body>
</html>
点击修改按钮时，要获取当前的信息，在下方显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程管理</title>
<style>
.search{
border: 1px solid #eee;
padding: 10px 0
}
table{
border-collapse: collapse;
}
td,th{
border: 1px solid #eee;
padding: 2px 10px;
text-align: center;
}
.edit td:first-child{
text-align: right;
}
.edit td:last-child{
text-align: left;
}
</style>
</head>
<body>
<div id="app">
<div class="search">
<span>课程名称(模糊查询)：</span>
<input type="text" v-model="searchText">
<button @click="loadSubject">搜索</button>
</div>
<table>
<thead>
<tr>
<th>课程编号</th>
<th>课程名称</th>
<th>课时</th>
<th>年级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in subjects" :key="index">
<td>{{item.SubjectId}}</td>
<td>{{item.SubjectName}}</td>
<td>{{item.ClassHour}}</td>
<td>{{item.Grade.GradeName}}</td>
<td>
<button @click="getSubjectById(item.SubjectId)">修改</button>
<button @click="deleteSubjectById(item.SubjectId)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<button @click="pageIndex=1" :disabled="pageIndex===1">首页</button>
<button @click="pageIndex--" :disabled="pageIndex===1">上一页</button>
<span>{{pageIndex}}</span>
<span>/</span>
<span>{{totalPage}}</span>
<button @click="pageIndex++" :disabled="pageIndex===totalPage">下一页</button>
<button @click="pageIndex=totalPage" :disabled="pageIndex===totalPage">尾页</button>
</td>
</tr>
</tfoot>
</table>
<hr>
<table class="edit">
<tr>
<td>课程名称：</td>
<td><input type="text" v-model="subject.subjectName"></td>
</tr>
<tr>
<td>课时：</td>
<td><input type="text" v-model.number="subject.classHour"></td>
</tr>
<tr>
<td>年级：</td>
<td>
<select v-model="subject.gradeId">
<option value="0">请选择年级</option>
<option v-for="(item,index) in grades" :value="item.GradeId">{{item.GradeName}}</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button v-if="subject.subjectId" @click="updateSubject">修改</button>
<button v-else @click="addSubject">添加</button>
<button @click="clear">取消</button>
</td>
</tr>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src='https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js'></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
//数据
data:{
//总数量
count:0,
//当前页码
pageIndex:1,
//每页数量
pageSize:5,
//搜索内容
searchText:'',
//课程数组
subjects:[],
//年级数组
grades:[],
//课程对象
subject:{
subjectName:'',
classHour:0,
gradeId:0
}
},
//方法
methods: {
//加载数据的方法
async loadSubject(){
//发生请求，获取课程数据
let {data:{data,count}} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{
params:{
pageIndex:this.pageIndex,
pageSize:this.pageSize,
subjectName:this.searchText
}
})
//将获取到的数据，传给当前Vue实例管理
this.subjects = data
this.count = count
},
//加载年级的方法
async loadGrade(){
let {data} = await axios.get('http://www.bingjs.com:81/Grade/GetAll')
this.grades = data
},
//添加课程的方法
async addSubject(){
//解构出课程对象的三个属性
let {subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Add',{
subjectName,
classHour,
gradeId
})
if(data){
alert('添加成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
this.clear()
}
},
//根据课程编号，查询一个课程信息
async getSubjectById(subjectId){
let {data} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectById',{
params:{
subjectId
}
})
// 获取课程信息
let {SubjectName:subjectName,ClassHour:classHour,GradeId:gradeId} = data
// 更新可定对象的信息
this.subject = {
subjectId,
subjectName,
classHour,
gradeId
}
},
//修改课程的方法
async updateSubject(){
//从课程对象里面解构出课程的相关信息
let {subjectId,subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Update',{
subjectId,
subjectName,
classHour,
gradeId
})
if(data){
alert('修改成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
this.clear()
}
},
//删除课程的方法
async deleteSubjectById(subjectId){
if(!confirm('是否确定删除')) return
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
if(data){
alert('删除成功！')
//调用加载课程信息的方法
this.loadSubject()
}
},
//清空表单数据的方法
clear(){
this.subject = {
subjectName:'',
classHour:0,
gradeId:0
}
}
},
//计算属性
computed:{
//总页数
totalPage(){
return Math.ceil(this.count/this.pageSize)
}
},
//监听器
watch:{
//监听当前页码是否发生变化
pageIndex(){
this.loadSubject()
}
},
//创建完成的生命周期-此时可操作数据了
created() {
//调用加载课程信息的方法
this.loadSubject()
//调用加载年级信息的方法
this.loadGrade()
},
})
</script>
</body>
</html>
