jsp使用axiosVueAxiosVueRouterVuex的入门应用

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

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

1.2.安装

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

jsp使用axiosVueAxiosVueRouterVuex的入门应用 Bootstrap

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><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><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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd"><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/><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"><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><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//跨域@RestControllerpublic 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@NoArgsConstructorpublic 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.htmlhttps://item.jd.com/3984684.htmlhttps://item.jd.com/4461494.html

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

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

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

1 在网址中传入参数

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

第一步：

增加商品链接

第二步：

第三步：

3. Vuex3.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

随便一个组件