Vue學習第三天（axios和動畫效果）
在學習視頻中，老師演示使用vue-resource，但是由於vue-resource已經停止升級，我們使用axios完成ajax操作，官方文檔的一堆介紹可以自行百度，下面我們介紹它的簡單使用，使用方法可以使用以下兩種方式
第一種
- npm install axios //使用npm安裝axios
- import axios from ‘axios’ //在js文件中引用模塊
第二種
直接在頁面上引用js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
第二種方法是我測試過可以成功的，接下來，我們就可以在我們的js中使用ajax，下面分別介紹get和post這兩種請求
get請求：
axios.get('/test/delCar?Id='+id).then(function () {
console.log("you have success add a record!")
}).catch(function (error) {
console.log("there are some error in the program")
})
不難看出，原來ajax的success事件變成了.then()，原來的fail事件變成了.catch()，對於後臺，我們使用springboot，構建一個controller，對應get請求，後臺使用@RequestParam接受參數
@GetMapping("delCar")
@ResponseBody
public Msg delCustomer(@RequestParam("Id") Integer Id){
testService.delCustomer(Id);
return Msg.success();
}
而如果要進行post請求的發送，我們則需要做出調整，普通的adaj，post請求後臺接受採用@RequestParam，但是這樣操作的前提是，我們的請求參數在請求頭中，但是如果使用axios我們的請求參數位於請求體中，我們在使用@RequestParam就會報錯，我們必須使用@RequestBody獲取到的數據是一個字符串，它本身是一個json，我們可以藉助json工具解析內容
Post請求
axios.post('/test/addCar', {
username:this.name
}).then(function (data) {
console.log("you have success add a record!")
}).catch(function (error) {
console.log("there are some error in the program")
})
後臺代碼（Controller）：
@PostMapping("/addCar")
@ResponseBody
public Msg addCar(@RequestBody LcleCustomer lcleCustomer){
System.out.println("-->"+lcleCustomer);
Integer result = testService.addCustomer(lcleCustomer);
if(result != null){
return Msg.success();
}
else {
return Msg.fail();
}
}
後臺代碼（Service）：
public Integer addCustomer(LcleCustomer lcleCustomer){
lcleCustomer.setAddTime(LocalDateTime.now());
lcleCustomer.setUpdateTime(LocalDateTime.now());
lcleCustomer.setDeleted(0);
Integer result = lcleCustomerMapper.insert(lcleCustomer);
return result;
}
接下來，我們介紹axios中的一些動畫效果
- 使用v-enter效果
- 自定義前綴
- 引用animate.css
如果使用vue自身的樣式我們只需要定義一個樣式即:
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
</style>
值得一提的是，我們的樣式前綴是v-，不難聯想到v-for，v-if，沒錯，這個就是vue提供的樣式前綴，但是如果我們想要定義自己的樣式前綴，我們需要改變transition的name，這樣操作以後，我們的前綴就變成餓了.name-（）要把使用樣式的html元素用包裹起來
<div>
<div>
<button v-on:click="toggle1">戳我</button>
<transition name="h">
<h2 v-show="flag1">你的酒館對我打了樣</h2>
</transition>
</div>
除了自定義的樣式以外，我們還能使用第三方的css進行樣式的控制，首先，要在頁面上引用我們下載過的css
<link href="css/animate.css" rel="stylesheet"/>
然後我們需要給包裹標籤加上一些相當的類名
<div>
<button v-on:click="toggle">點我</button>
<!--需要動畫控制的元素，用transition包裹起來-->
<!--如果這個標籤沒有name，那麼控制其動畫效果的前綴是v--->
<!---->
<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeInRight">
<h2 v-show="flag">我的一個道姑朋友</h2>
</transition>
</div>
除了上面的介紹，我們仍然後可以用半場動畫，這裏不再贅述，需要可以自行學習，下面是代碼
半場動畫頁面源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>半場小球</title>
<script src="js/vue.js" type="text/javascript"></script>
<link href="css/animate.css" rel="stylesheet" />
</head>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: blue;
}
</style>
<body>
<div id="app2">
<button v-on:click="exchange">點我</button>
<transition v-on:before-enter="before" v-on:enter="enter" v-on:after-enter="after">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vue = new Vue({
el:'#app2',
data:{
flag:true
},
methods:{
exchange:function(){
this.flag = !this.flag
},
//規定小球的初始位置
before:function(el){
el.style.transform = "translate(0, 0)"
},
//規定小球的最終定的位置
enter:function(el, done){
el.offsetWidth
el.style.transform = "translate(150px, 450px)"
el.style.transition = "all 1s ease"
//使用done函數，可以立即結束小球的運動，即直接執行after中的內容
done()
},
after:function(el){
this.flag = !this.flag
},
}
})
</script>
</body>
</html>
