Vue中axios的基本用法詳解

<template>
	<div>
		<h1>學習axios</h1>
		<div v-if="token">
			{{userInfo.name}} 積分:{{userInfo.score}} 等級:{{userInfo.rank}}
			<button @click="logout">退出</button>
		</div>
		<div class="login" v-else>
			<h3>登入</h3>
			使用者名稱: <input type="text" v-model="user.name"> <br>
			密碼: <input type="password" v-model="user.password"> <br>
			<button @click="login">登入</button>
		</div>
		<div>
			<h3>新增留言</h3>
			<textarea rows="" cols="" v-model="msg">
			</textarea> <br>
			<button @click="sendMsg">發表留言</button>
 
		</div>
		<div class="list" v-if="feedlist.length">
			<div class="item" v-for="item in feedlist" :key="item.id">
				<h5>{{item.name}}</h5>
				<p>{{item.msg}}</p>
				<p>{{item.date}}</p>
				<hr>
			</div>
		</div>
		<!-- pagnation.pageTotal 如果有分頁資訊就顯示,沒有就隱藏 -->
		<div class="pagnation" v-if="pagnation.pageTotal">
			<!-- 如果current小等於就disabled 按鈕不可以用 -->
			<button :disabled="current<=1" @click="current--;getFeed()">上一頁</button>
			<!-- 迴圈遍歷總分頁書 出現1,2,3,4 -->
			<!-- 如果current等於item 就是當前頁給一個active的class -->
			<!-- 單擊時候設定current,獲取分頁對應的評論列表資訊 -->
			<span :class="{'active':current==item}" v-for="item in pagnation.pageTotal" :key="item"
				@click="current=item;getFeed()">{{item}}</span>
			<!-- 如果current大於等於總分頁資料 按鈕不可以用 -->
			<button :disabled="current>=pagnation.pageTotal" @click="current++;getFeed()">下一頁</button>
 
		</div>
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
				msg: '', //需要新增的評論
				current: 1, //預設獲取第一頁評論
				feedlist: [], //笑話列表
				pagnation: {
 
				}, //分頁資訊
				user: {
					name: '',
					password: '',
				},
				// 從本地獲取使用者資訊 parse 把json字串轉換為js物件
				userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"), //使用者資訊,
				// 從本地獲取token,字串不需要pase轉
				token: localStorage.getItem("token"), //token
			}
		},
		// 元件建立完畢就載入
		created() {
			this.getFeed();
		},
		// 登入後顯示使用者資訊
		methods: {
			sendMsg() {
				// 基礎方法
				this.$axios({
						url: "/api/feed",
						method: "post",
						data: {
							msg: this.msg
						}
					})
					.then(res => {
						// alert(res.data.msg);
						if (res.data.code == 0) {
							// 讓頁面迴歸第一1
							this.current = 1;
							// 獲取評論列表
							this.getFeed();
							// 清空評論框
							this.msg = '';
						}
					})
			},
			// 登入成功後,獲取評論資訊
			// 除了登入與註冊,介面規定向伺服器請求資料必須加上 請求頭token
			// token一串加密的字元,包含了使用者資訊等..(後端靠token識別使用者是否登入)
			getFeed() {
				this.$axios.get(
						"/api/feed?current=" + this.current, //請求url
						// {
						// 	headers:{
						// 		"Authorization":'Bearer '+localStorage.getItem("token")
						// 	}
						// }
					)
					// 網路請求成功
					.then(res => {
						console.log("成功", res.data)
						this.feedlist = res.data.data; //評論資訊
						// 更新分頁資訊
						this.pagnation = res.data.pagnation; //分頁資訊
					})
					// 網路請求失敗
					.catch(err => {
						console.log("失敗", err);
						alert(err.response.data.msg)
					})
			},
			logout() {
				// 清空使用者資訊與token
				this.userInfo = {};
				this.token = null;
				// 移除本地儲存
				localStorage.removeItem("userInfo");
				localStorage.removeItem("token");
			},
			login() {
				// 實現登入
				this.$axios.post(
						"/api/login", //請求的地址
						this.user, //請求的資料
					)
					.then(res => {
						// 網路請求成功
						if (res.data.code === 200) {
							// res是響應的資料
							// 01 本地存使用者資訊,與token
							// stringify 把js物件轉換為json字串
							localStorage.setItem("userInfo", JSON.stringify(res.data.user))
							localStorage.setItem("token", res.data.token);
							// 02 更新userInfo與token
							this.userInfo = res.data.user;
							this.token = res.data.token;
							// 登入成功 獲取評論
							this.getFeed()
						} else {
							alert(res.data.msg);
						}
					})
					.catch(err => {
						// 網路請求失敗
						console.error(err)
					})
			}
		}
	}
</script>
 
<style>
	.active {
		color: #FF7700
	}
 
	.pagnation span {
		padding: 15px;
		cursor: pointer;
	}
</style>

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
// 匯入axios 沒有./  (axios網路請求工具:1不依賴dom,2.前後端都可以用,3. 豐富攔截,擴充套件功能,4可封裝,複用性強)
import axios from 'axios';
// 掛載到vue的全域性(原型上),在每個元件都可以使用 ,prototype是固定的,$axios是自定義的
Vue.prototype.$axios = axios;
// 指定預設的請求域名
axios.defaults.baseURL = "http://dida100.com:8888"
// 給每個請求攔截一下,新增請求Token資訊
axios.interceptors.request.use(function(config){
	config.headers.Authorization = 'Bearer '+localStorage.getItem("token");
	return config;
})
// interceptors 攔截器
// request 請求
// config 設定 
// headers頭資訊
// Authorization 許可權
// defaults 預設
// baseURL 基礎URL
new Vue({
  render: h => h(App),
}).$mount('#app')