1. axios

1.1甚么是 axios

Axios 是两个如前所述 promise（promise是触发器程式设计的软件系统）的 HTTP 库，能用在应用程序和 node.js 中

axios其本质上也是对原生植物XMLHttpRequests的PCB，或者说它是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 importVueAxiosfrom 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)) //处置失利情形

案例：

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来控制

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