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

<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.22</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.8</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<!-- 配置jetty -->
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.4.28.v20200408</version>
<configuration>
<httpConnector>
<!-- 端口号 -->
<port>82</port>
<!-- 访问路径 -->
<host>localhost</host>
</httpConnector>
<!--监听整个项目，如果项目源码改变，1秒后 jetty自动重启 -->
<scanIntervalSeconds>1</scanIntervalSeconds>
</configuration>
</plugin>
</plugins>
</build>

1.5.2 springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--扫描注解-controller-->
<context:component-scan base-package="com.bobo.controller"/>
<!--配置视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!--配置前缀-->
<property name="prefix" value="/WEB-INF/view/"></property>
<!--配置后缀-->
<property name="suffix" value=".jsp"></property>
</bean>
<!--开启注解驱动-->
<mvc:annotation-driven/>
<!--放开静态资源 css js jpg-->
<mvc:default-servlet-handler/>
</beans>

1.5.3 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<!--2 springmvc配置 -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- post 中文乱码解决提交乱码处理 -->
<filter>
<filter-name>chartecode</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>chartecode</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<listener>
<listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
</listener>
</web-app>

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

3.2 实现开始

1）index.js

count 定义为2

2） 获取状态state

随便一个组件

有三种方式可以获取该变量count

方式1：

{{this.$store.state.count}}

方式2：

方式3：

3)getters

如果存的数据比较多，我们想过滤获取

4)Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

5）Actions

Actions的作用用于异步的修改数据。

实际上，mutation中的函数，只能是同步的，不能使用异步的。

目前在我们所学的知识当中，有一类函数是异步的 --- 定时器函数。

比如setTimeout。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，可以通过context.commit提交，也可以通过context.state获取state。

可以通过

this.$store.dispatch('action'); 进行调用