品牌管理改造
展示品牌列表
getAllList(){//获取所有列表
//分析：
//1.由于已经导入了Vue-resource这个包，所以可以直接通过this.$http来发请数据请求
//2.根据接口文档API，知道获取列表的时候， 应该发起一个get请求
//3.this.$http.get('url').then(function(){})
//4.当通过then指定回调函数之后，在回调函数中可以拿到数据服务器返回的result
//5.先判断result.status是否等于0，如果等于0，就成功了，可以把result.message赋值给this.list
//如果不等于0，可以弹框提醒，获取数据失败
this.$http.get('api/getprodlist').then(respone => {
//注意：通过$http获取到的数据，都在result.body存放着
let result = respone.body
if(result.status === 0){
//成功了
this.list = result.message
}else{
//失败了
alert("数据获取失败")
}
})
},
添加品牌数据
add(){//添加品牌列表到后台服务器
//分析:
//1.通过查看API接口，发现要发送一个Post请求，this.$http.post
//2.this.$http.post()中接收三个参数
// 2.1 第一个参数：要请求的URL地址
// 2.2 第二个参数：要提交给服务器的数据，要以对象形式提交给服务器{name :this.name}
// 2.3 第三个参数：是一个配置对象，要以哪种表单数据类型提交过去{emulateJSON: true }
//3. 字啊post方法中，使用.then来设置成功的回调函数，用result.body来来拿结果
this.$http.post('api/addproduct', {name: this.name}).then(result =>{
console.log(result.body)
if(result.body.status === 0){
//成功了
//添加完成后，只需要手动再调用下getAllList就能刷新品牌列表
this.getAllList()
this.name = ""
}else{
//失败了
alert("添加数据失败")
}
})
}
删除品牌数据
del(id){//删除品牌
this.$http.get('api/delproduct/' + id).then(respone => {
//注意：通过$http获取到的数据，都在result.body存放着
let result = respone.body
if(result.status === 0){
//删除成功
this.getAllList()
}else{
//失败了
alert("删除数据失败")
}
})
}
改造后的全部代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" v-model = "name" class = "form-control">
</label>
<input type="button" value="添加" @click="add" class = "btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="" @click.prevent = "del(item.id)">删除</td>
</tr>
</tbody>
</table>
</div>
<script>
//如果我们通过全局配置了请求的数据接口根域名，则每次单独发起http请求的时候，
//请求的url路径应该以相对路径开头，前面不能带 / ， 否则不会启用根域名做拼接
Vue.http.options.root = 'http://www.liulongbin.top:3005/'
//全局启用emulateJSON
Vue.http.options.emulateJSON = true
var vm = new Vue({
el: '#app',
data() {
return {
name:'',
list: [//存放所有品牌列表的数组
// { id: 1, name: '五菱宏光', ctime: new Date() },
// { id: 2, name: '众泰', ctime: new Date() },
]
}
},
created() {//当Vm的实例和data和methods初始化完毕之后，vm实例会自动执行created周期函数
this.getAllList()
},
methods: {
add(){//添加品牌列表到后台服务器
//分析:
//1.通过查看API接口，发现要发送一个Post请求，this.$http.post
//2.this.$http.post()中接收三个参数
// 2.1 第一个参数：要请求的URL地址
// 2.2 第二个参数：要提交给服务器的数据，要以对象形式提交给服务器{name :this.name}
// 2.3 第三个参数：是一个配置对象，要以哪种表单数据类型提交过去{emulateJSON: true }
//3. 字啊post方法中，使用.then来设置成功的回调函数，用result.body来来拿结果
this.$http.post('api/addproduct', {name: this.name}).then(result =>{
console.log(result.body)
if(result.body.status === 0){
//成功了
//添加完成后，只需要手动再调用下getAllList就能刷新品牌列表
this.getAllList()
this.name = ""
}else{
//失败了
alert("添加数据失败")
}
})
},
getAllList(){//获取所有列表
//分析：
//1.由于已经导入了Vue-resource这个包，所以可以直接通过this.$http来发请数据请求
//2.根据接口文档API，知道获取列表的时候， 应该发起一个get请求
//3.this.$http.get('url').then(function(){})
//4.当通过then指定回调函数之后，在回调函数中可以拿到数据服务器返回的result
//5.先判断result.status是否等于0，如果等于0，就成功了，可以把result.message赋值给this.list
//如果不等于0，可以弹框提醒，获取数据失败
this.$http.get('api/getprodlist').then(respone => {
//注意：通过$http获取到的数据，都在result.body存放着
let result = respone.body
if(result.status === 0){
//成功了
this.list = result.message
}else{
//失败了
alert("数据获取失败")
}
})
},
del(id){//删除品牌
this.$http.get('api/delproduct/' + id).then(respone => {
//注意：通过$http获取到的数据，都在result.body存放着
let result = respone.body
if(result.status === 0){
//删除成功
this.getAllList()
}else{
//失败了
alert("删除数据失败")
}
})
}
},
});
</script>
</body>
</html>
效果展示
Vue中的动画
为什么要有动画：动画是能够提高用户的体验，帮助用户更好的理解页面中的功能
过渡类名动画实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- 2.自定义两组样式来控制transition内部元素实现动画 -->
<style>
/* .v-enter【这是一个时间点】是进入以前，元素的起始状态 ,此时还没有开始进入*/
/* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(150px);
}
/* v-enter-active【入场动画的时间段】 */
/* v-leave-active【出场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 需求:点击按钮，让h3显示，再点击，让h3隐藏 -->
<input type="button" value="点击按钮" @click = "flag = !flag">
<!-- 1.使用transition元素，把需要被动画控制的元素，包裹起来 -->
<!-- transition元素，是Vue官方提供的 -->
<transition>
<h3 v-if = "flag">这是一个H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data () {
return{
flag: false
}
},
methods:{
}
});
</script>
</body>
</html>
使用第三方类库来实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<!-- 入场bounceIn 离场 bounceOut -->
</head>
<body>
<div id="app">
<!-- 需求:点击按钮，让h3显示，再点击，让h3隐藏 -->
<input type="button" value="点击按钮" @click = "flag = !flag">
<!-- 使用 :duration 来统一设置入场和离场时候的动画时长 -->
<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
<h3 v-if = "flag">这是一个H3</h3>
</transition> -->
<!-- 使用:duration="{enter:200, leave:400} 来分别设置入场的时长和离场的时长 -->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{enter:200, leave:400}">
<h3 v-if = "flag">这是一个H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data () {
return{
flag: false
}
},
methods:{
}
});
</script>
</body>
</html>
实现加入购物车的半场动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag = !flag">
<!-- 1.使用transition元素把小球包裹起来 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show=flag></div>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data () {
return{
flag:false
}
},
methods:{
//注意：动画钩子函数的第一个参数：el，表示 执行动画的那个DOM元素，是个原生的JS DOM对象
//大家可以认为，el是通过 document.getElenebtById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
//beforeEnter 表示动画入场之前，此时动画尚未开始，
//可以在beforeEnter中设置元素开始动画之前的起始样式
//设置小球开始动画之前的起始位置
el.style.transform="translate(0, 0)"
},
enter(el, done){
//这句话没有实际的作用，但是如果不写，出不来动画效果
//可以认为 el.offsetWidth会强制动画刷新
el.offsetWidth
//enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = "all 1s ease"
//这里的done起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用
done()
},
afterEnter(el){
this.flag = !this.flag
}
}
});
</script>
</body>
</html>
实现列表动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<style>
li {
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
li:hover {
background-color: hotpink;
transition: all 0.8s ease;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
/* 下面的.v-move 和 .v-leave-active配合使用，能够实现列表后续的元素，渐渐的飘上来 */
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- <ul> -->
<!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，
不能够使用transition包裹，需要使用transition-group -->
<!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置：key属性 -->
<!-- 给transition-group添加appear属性，实现页面刚展示出来的时候，入场时候的效果 -->
<!-- 通过为 transition-group 元素，设置tag属性，执行transition-group渲染为指定的元素，如果不指定，默认渲染span标签-->
<transition-group appear tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
{{item.id}} --- {{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
id: '',
name: '',
list: [
{ id: 1, name: '赵高' },
{ id: 2, name: '秦桧' },
{ id: 3, name: '严嵩' },
{ id: 4, name: '魏宗贤' },
]
}
},
methods: {
add() {
this.list.push({ id: this.id, name: this.name })
this.id = this.name = ''
},
del(i) {
this.list.splice(i, 1)
}
}
});
</script>
</body>
</html>
