五、axios异步请求
5.1 axios概述
概述：
axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据。
常见的方法：
axios(config)
axios.get(url, [config])
axios.post(url, [data])
发送数据config常用参数：
{ url: '请求的服务器', method: '请求方式', // 默认是 get // GET请求参数 params: { 参数名: 参数值 }, // POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数 data: { 参数名: 参数值 }, // 响应数据格式,默认json responseType: 'json' }
响应数据常用参数：
{ data: {}, //真正的响应数据(响应体) status: 200, //响应状态码 statusText: 'OK', //响应状态描述 headers: {}, //响应头 config: {} //其他配置信息 }
5.2.Get请求
var app = new Vue({ el: "#app", data: { user: {} }, //当页面加载完毕后 created() { //发送GET请求axios.get("请求路径",{ config }); axios.get("请求路径",{ //get请求参数 params: { name:"zhangsan", age:23 }, //响应数据格式为"json" responseType: 'json' }).then(res => { //打印响应数据 console.log(res); //把响应数据赋值给Vue中的user属性 app.user = res.data; }).catch(err => { //打印响应数据(错误信息) console.log(err); }); } });
5.3.Post请求
var app = new Vue({ el: "#app", data: { user: {} }, //当页面加载完毕后 created() { //发送POST请求axios.post("请求路径",{ 参数 }); axios.post("请求路径",{ name:"zhangsan", age:23 }).then(res => { console.log(res); app.user = res.data; }).catch(err => { console.log(err); }); } });
5.4.跨域请求
跨域请求：在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者端口号不同都是跨域请求.
跨域请求需要在服务提供方, 开启允许跨域请求
六、VueJs Ajax
6.1.vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新
到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource
6.2.axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios
6.2.1.引入axios
首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from ‘axios’;
//安装方法
npm install axios
//或
bower install axios
当然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
6.2.2.get请求
//通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(response); }).catch(function(err){ console.log(err); }); //以上请求也可以通过这种方式来发送 axios.get('/user',{ params:{ ID:12345 } }).then(function(response){ console.log(response); }).catch(function(err){ console.log(err); });
6.2.3.post请求
axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });
为方便起见，为所有支持的请求方法提供了别名
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
七、综合案例
7.1.需求
完成用户的查询与修改操作
7.2. 数据库设计与表结构
CREATE DATABASE vuejsdemo; USE vuejsdemo; CREATE TABLE USER( id INT PRIMARY KEY AUTO_INCREMENT, age INT, username VARCHAR(20), PASSWORD VARCHAR(50), email VARCHAR(50), sex VARCHAR(20) )
User类
public class User { private Integer id; private String username; private String password; private String sex; private int age; private String email; 省略getter/setter ｝
7.3.服务器端
7.3.1.配置文件
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <!-- 手动指定 spring 配置文件位置 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!-- 配置 spring 提供的监听器，用于启动服务时加载容器 。 该间监听器只能加载 WEB-INF 目录中名称为 applicationContext.xml 的配置文件 --> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> <!-- 配置 spring mvc 的核心控制器 --> <servlet> <servlet-name>springmvcDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置初始化参数，用于读取 springmvc 的配置文件 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <!-- 配置 servlet 的对象的创建时间点：应用加载时创建。取值只能是非 0 正整数，表示启动顺 序 --> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvcDispatcherServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <!-- 配置 springMVC 编码过滤器 --> <filter> <filter-name>CharacterEncodingFilter</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> <!-- 启动过滤器 --> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <!-- 过滤所有请求 --> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 配置创建 spring 容器要扫描的包 --> <context:component-scan base-package="com.itheima"> <!-- 制定扫包规则 ,只扫描使用@Controller 注解的 JAVA 类 --> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <mvc:annotation-driven></mvc:annotation-driven> </beans>
applicationContext.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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.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"> <!-- 配置 spring 创建容器时要扫描的包 --> <context:component-scan base-package="com.itheima"> <!--制定扫包规则，不扫描@Controller 注解的 JAVA 类，其他的还是要扫描 --> <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!-- 加载配置文件 --> <context:property-placeholder location="classpath:db.properties"/> <!-- 配置 MyBatis 的 Session 工厂 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 数据库连接池 --> <property name="dataSource" ref="dataSource"/> <!-- 加载 mybatis 的全局配置文件 --> <property name="configLocation" value="classpath:SqlMapConfig.xml"/> </bean> <!-- 配置数据源 --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="${jdbc.driver}"></property> <property name="jdbcUrl" value="${jdbc.url}"></property> <property name="user" value="${jdbc.username}"></property> <property name="password" value="${jdbc.password}"></property> </bean> <!-- 配置 Mapper 扫描器 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.itheima.dao"/> </bean> <tx:annotation-driven/> <!-- (事务管理)transaction manager, use JtaTransactionManager for global tx --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"/> </bean> </beans>
db.properties
jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/vuejsDemo jdbc.username=root jdbc.password=root
7.3.2.Controller
@RequestMapping("/user") @Controller @ResponseBody public class UserController { @Autowired private IUserService userService; @RequestMapping(value="/findAll.do") public List<User> findAll() { return userService.findAll(); } @RequestMapping(value="/findById.do") public User findById(Integer id) { return userService.findById(id); } @RequestMapping(value="/update.do") public User update(@RequestBody User user) { return userService.update(user); } }
7.3.3.Dao
public interface IUserDao { @Select("select * from user") public List<User> findAll(); @Select("select * from user where id=#{id}") User findById(Integer id); @Update("update user set username=#{username},password=#{password},sex=#{sex},age=# {age},email=#{email} where id=#{id}") void update(User user); }
7.4.客户端
7.4.1.user.html页面
原因种种 页面代码暂时提供不了 思路大概就是这些 嘻嘻~
7.4.2.user.js
var vue = new Vue({ el: "#app", data: { user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""}, userList: [] }, methods: { findAll: function () { var _this = this; axios.get("/vuejsDemo/user/findAll.do").then(function (response) { _this.userList = response.data; console.log(_this.userList); }).catch(function (err) { console.log(err); }); }, findById: function (userid) { var _this = this; axios.get("/vuejsDemo/user/findById.do", { params: { id: userid } }).then(function (response) { _this.user = response.data; $('#myModal').modal("show"); }).catch(function (err) { }); }, update: function (user) { var _this = this; axios.post("/vuejsDemo/user/update.do",_this.user).then(function (response) { _this.findAll(); }).catch(function (err) { }); } }, created(){ this.findAll(); } });
