Vue-axios请求模块及路由

目录

一、vue-axios请求模块

1、axios模块：是一个基于promise的http客户端请求工具。

2、axios使用方法

(1)安装axios

(2)无参的get请求：

(3)带参的get请求：

(4)post请求：

(5)put请求

(6)delete请求

(7)axios的数据封装格式：

3、vue-axios模块：是针对Vue对axios进行了一层简单的包装

(1)安装：

(2)在main.js文件中进行全局的配置

二、Vue的路由

1、路由：从源页面到目的页面的决策过程

2、前端路由：在前端页面中维护的路由规则

3、VueRouter路由

4、VueRouter的组成

5、VueRouter常用的函数

三、VueRouter的使用

1、安装vue-router

2、创建路由文件

3、声明路由请求接口：定义roter-link，'to'属性声明路由的目标路径

4、声明路由出口：指定组件渲染的位置

四、动态路由

五、嵌套路由

六、命名路由

---

一、vue-axios请求模块

1、axios模块：是一个基于promise的http客户端请求工具。

(1)从浏览器中创建XMLHttpRequest：异步请求对象

(2)支持PromiseAPI：请求的返回值是Promise对象(resolve、reject)

(3)从node.js创建http请求

(4)拦截请求和响应

2、axios使用方法

(1)安装axios

npm  install  axios

(2)无参的get请求：

axios.get(‘/url’).then((result)=>{
}).catch((err)=>{
})

(3)带参的get请求：

axios.get('/url'，{params: {id: 12}}).then((result)=>{
}).catch((err)=>{
})

或者：

axios({
    url:'url',
    methods: 'get',
    params: {
        参数名: 参数值
    }
}).then((result)=>{
    请求成功的处理代码
}).catch((err)=>{
    失败的处理代码
})
服务器端：'req.query.参数名' 格式接收

(4)post请求：

axios.post('url',{参数名:参数值}).then((result)=>{
}).catch((err)=>{
})

或者：

axios({
    url：'url'，
    methods: 'post'，
    data: {
        参数名:参数值
    }
}).then((result)=>{
}).catch((err)=>{
})   

服务器端：'req.body.参数名' 获取数据

需求：服务器向客户端响应一个对象数组，客户端接收到数组后，在组件中以表格的形式显示出来

(5)put请求

用于对数据更新时使用.请求时传参的方式、服务器端获取数据的方式与post请求类似

(6)delete请求

用于删除数据。可以采用类似get方式或post方式的写法

a、类似于get方式：服务器端以'req.query.参数名'的格式获取请求数据

axios.deleter('url'，
    {params:{参数名:参数值}}
).then((res)=>{
}).catch((err)=>{})

b、类似于post方式：服务器端以'req.body.参数名'的格式获取请求数据

axios.deleter('url'，
    {data:{参数名:参数值}}
).the