Vue(Axios+VueRouter+Vuex)的入门使用

科技 09-14 来源： bobo棒

1. axios

1.1什么是 axios

Axios 是一个基于 promise（promise是异步编程的解决方案）的 HTTP 库，可以用在浏览器和 node.js 中

axios本质上也是对原生XMLHttpRequests的封装，只不过它是Promise的实现版本，符合最新的ES规范

官网：http://www.axios-js.com/zh-cn/docs/vue-axios.html

1.2.安装

在vue骨架工程中打开命令行执行

npm install --save axios vue-axios

1.3.配置

然后再main.js中加入:

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

1.4 快速使用

//发送一个get请求
this. this.axios.get('http://localhost:82/get',{params:{id:1}})
.then(res=>console.log(res.data)) //处理成功情况
.catch(error=>console.log(error)) //处理失败情况
}


//发起一个POST请求。
this.axios.post('http://localhost:83/post', {
id: '1',
name: 'bobo棒'
})
.then(res=>console.log(res.data)) //处理成功情况
.catch(error=>console.log(error)) //处理失败情况

案例：

当组件加载时通过axios获取所有的user对象。并v-for渲染

1.5 搭建springmvc环境供vue调用

1.5.1 pom.xml



org.springframework
spring-webmvc
5.1.5.RELEASE


org.projectlombok
lombok
1.18.22


com.fasterxml.jackson.core
jackson-databind
2.9.8






org.eclipse.jetty
jetty-maven-plugin
9.4.28.v20200408



82

localhost


1

1.5.2 springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>

1.5.3 web.xml

<?xml version="1.0" encoding="UTF-8"?>



springmvc
org.springframework.web.servlet.DispatcherServlet

contextConfigLocation
classpath:springmvc.xml

1


springmvc
/



chartecode
org.springframework.web.filter.CharacterEncodingFilter

encoding
utf-8



chartecode
/*


org.springframework.web.context.request.RequestContextListener

1.5.4 controller

@CrossOrigin//跨域
@RestController
public class HelloController {
@GetMapping("get")
public User get(Integer id) {
return new User(1, "bobo棒");
}
@PostMapping("add")
public boolean add(@RequestBody User user) {
System.out.println("接收数据"+user);
return true;
}
}

1.5.5 user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String name;
}

2.VueRouter 路由

2.1 作用

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

什么是单页面应用：
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制

可以简单理解：根据路径由路由展示对应的组件

2.2 单页面应用案例

例如美团

https://bj.meituan.com/shenghuo

2.3 安装

在vue-cli创建项目时，勾选即可

2.4 使用router插件

2.5 快速入门

案例需求：

要实现三个组件之间的切换。

1首页面组件

2 列表页组件

3 详情页组件

2.5.1 创建三个组件

2.5.2 配置app.vue

2.5.3 配置路由

2.6 嵌套路由

用户中心，和首页面、列表页面是一个级别的。

但是，用户中心的内容比较多，又分成了多个子页面，如：

1 我的购物车

2 我的收藏夹

3.我的订单

这些页面，是二级页面

如何实现二级页面之间的跳转呢，这就是嵌套路由

第一步：

第二步:

2.7 动态路由

以下是两个商品的详情页面，思考一下，我们是做一个页面还是两个页面呢？如果一个商品做一个页面，显然不合适。

既然是1个页面，我们如何在浏览时，能够显示不同的内容呢?

这里就有一个动态的概念。

在进行数据渲染的时候，一定会通过不同的参数，传递不用的商品信息，然后进行渲染。

这个参数，一般就是商品id。

https://item.jd.com/3726830.html
https://item.jd.com/3984684.html
https://item.jd.com/4461494.html

比如，上面三个网址中的数字，其实就是商品的id。

要实现这么功能 --- 一个页面，载入不同的内容，就叫做动态路由。

在vue-router中，要实现动态路由，从两个方面出发：

1 在网址中传入参数

2 如何在代码中接受这个参数

第一步：

增加商品链接

第二步：

第三步：

3. Vuex

3.1 什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个 Vuex 应用的核心就是 store（仓库）

仓库是用来干嘛的，顾名思义仓库就是存储某些东西的，需要就从里面拿取出来。那么我们就可以先理解为vuex是帮我们存储数据的。vuex 作为内存来存储，一般在登录成功时需要把用户信息，菜单信息等放置 vuex 中，作为全局的共享数据

我们先来看下store长什么样子

export default new Vuex.Store({
state: {
count:2
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})

我们可以看到store对象里面包含了state,而state也是一个对象，所以"store”基本上就是一个容器。仔细一看，这个store就是用来存储数据而已

Vuex 和单纯的全局对象有以下两点不同：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

好了，现在我们可以这样理解store：Vue的核心是组件，那么组件之间怎么进行通信呢？我们第一时间会想到父子组件之间的通信props和$emit，那非父子关系的组件怎么通信呢？当然办法还是有的，或许你会想到事件传参或者多层嵌套，但是这样就是使得代码臃肿并且难以维护。

因此Vuex应运而生，把组件共享状态抽取出来，以一个全局单例模式管理。另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

简单来说，就是把组件需要共享的数据抽取出来，交给store来处理

此外,store是内存机制，而不是缓存机制，当前页面一旦刷新或者通过路由跳转亦或是关闭，都会导致store初始化。因此在之前就暂时把store看成一个多功能的全局变量.

那么store一般保存的是什么数据呢？

1.组件的初始数据 2.后台返回来的初始数据

现在相信大家对Vuex有了初步的了解，那么我们来进一步了解Vuex的核心概念,分别是

State、 Getter、 Mutation、 Action、 Module