vue-axios的安装及四个常见方法（VueAxiosVueRouter）
vue-axios的安装及四个常见方法（VueAxiosVueRouter）什么是单页面应用：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制<dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.1.5.RELEASE</version> </dependency> <dependen
1. axios1.1什么是 axiosAxios 是一个基于 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-axios1.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
在vue-cli创建项目时，勾选即可
案例需求：
要实现三个组件之间的切换。
1首页面组件
2 列表页组件
3 详情页组件
用户中心，和首页面、列表页面是一个级别的。
但是，用户中心的内容比较多，又分成了多个子页面，如：
1 我的购物车
2 我的收藏夹
3.我的订单
这些页面，是二级页面
如何实现二级页面之间的跳转呢，这就是嵌套路由
以下是两个商品的详情页面，思考一下，我们是做一个页面还是两个页面呢？如果一个商品做一个页面，显然不合适。
既然是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 如何在代码中接受这个参数
第一步：增加商品链接
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.jscount 定义为2
随便一个组件
有三种方式可以获取该变量count
方式1：{{this.$store.state.count}}方式2：
如果存的数据比较多，我们想过滤获取
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Actions的作用用于异步的修改数据。
实际上，mutation中的函数，只能是同步的，不能使用异步的。
目前在我们所学的知识当中，有一类函数是异步的 --- 定时器函数。
比如setTimeout。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，可以通过context.commit提交，也可以通过context.state获取state。
可以通过
this.$store.dispatch('action'); 进行调用
