Vue3 学习

9.使用Axios实现异步通信

9.1 什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，他的主要作用就是实现AJAX异步通信，其功能特点：

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API //支持链式编程的
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换`JSON``数据
• 客户端支持防御XSRF（跨站请求伪造）

9.2 为什么要使用Axios

由于Vue.js是一个 视图层框架 并且作者尤雨溪严格遵守 SoC （关注度分离原则），所有Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐Axios框架

9.3 第一个Axios应用程序

项目添加插件

npm install --save axios vue-axios   //cnpm install --save axios vue-axios

加载

//main.js入口文件
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'  //导入根组件

const app = createApp(App); //创建组件实例
app.use(VueAxios,axios)   //为App组件绑定插件
app.mount("#app")         //挂载

使用

this.axios.post("/login",{
    username:"zhangyali",
    password:"123456"
}).then(response=>{
    console.log(response);
}).catch(error=>{
    console.log(error);
})

10.vue-router4基础

10.1 安装vue-router@4

npm install vue-router@4
yarn add vue-router@4

10.2 引入

import {createRouter,createWebHashHistory} from 'vue-router'

10.3 路由配置

//定义路由（和组件）
const Home = import('./components/home.vue');
const About = import('./components/about.vue');
const Product = import('./components/product.vue');

//定义路由
const routes = [
{path:'/',component:Home},
{path:'/about',component:About},
{path:'/product',component:Product},
];

//创建路由
const router = createRouter({
	history: createWebHashHistory(),
	routes,//定义的路由
})

//将路由加入到实例
use（router);

10.4 路由应用

router-view 组件显示容器
router-link 链接

10.5 带参数的动态路由匹配

const routes =[
	{path:"/",component:ShowBlogs},
	{path:"/add",component:AddBlog},
	//动态路由
	{path:"/single-blog/:id",component:SingleBlog},
];

通信匹配

//通信地址，例如：https://jsonplaceholder.typicode.com/posts/4
。。。
this.axios.get("https://jsonplaceholder.typicode.com/posts/"+this.id)          //get()方法接收一个URL作为参数，如果要传递参数
	  .then(response=>{             //以?key=value的形式附加在URL上
	      console.log(response);
		 this.blog = response.body;
	  })
。。。

获取params（例如：/posts/4中的4）

this.$route.params