做化妆品代理在那些网站比较多,潍坊英文网站建设,个人网站能百度推广吗,wordpress 前台打不开1、什么是 axios
在实际开发过程中#xff0c;浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后#xff0c;官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。 关于 promise 的详细介… 1、什么是 axios
在实际开发过程中浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。 关于 promise 的详细介绍请点击浏览文章《ECMAScript6语法Promise》 axios 的主要特点如下
从浏览器中创建 XMLHttpRequest。从 node.js 发出 HTTP 请求。支持 Promise API。拦截请求和响应。转换请求和响应数据。取消请求。自动转换JSON数据。客户端支持防止CSRF/XSRF。 官方文档《Axios中文文档》 2、安装 axios
如果在项目中使用 axios则可以使用 npm 方式进行安装。在命令提示符窗口中输入如下命令 npm install axios --save 或者使用 yarn 安装命令如下 yarn add axios –save 3、axios 的语法
在实际项目开发中前端页面中所需的数据通常要从服务器端获取这就需要实现本地与服务器端的通信Vue 使用 axios 实现 Ajax 请求。
语法格式和参数说明 axios({url: , //请求的路径method: GET, //请求的方式默认为GETparams: {}, //GET请求方式传递的参数data: {}, //POST请求方式传递的参数headers: {}, //自定义请求头timeout: 1000, //请求超时时间毫秒responseType: JSON //响应的数据类型默认为JSON
}).then(// then() 函数处理请求成功的回调函数function (response) {console.log(返回的数据, response.data);}
).catch(function (error) {// catch() 函数处理请求失败的回调函数console.log(发生异常 error.message);
}); axios 详细使用方法请点击浏览文章《Vue使用axios实现Ajax请求》 4、解决跨域问题
如果 Vue 前端应用请求后端 API 服务器出现跨域问题CORS如下图
解决方法在 Vue 项目中打开 vue.config.js 配置文件在配置文件中使用代理解决跨域问题。 const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer:{proxy: http://localhost:8085, //使用代理解决跨域问题}
}) 详细的解决方法请点击浏览文章《Vue使用代理方式解决跨域问题》 5、axios 的二次封装
在项目中axios 进行二次封装可以更加方便的使用 Ajax 请求提高代码复用性和维护性。同时可以封装统一的请求与响应拦截处理。
项目结构图
5.1 封装 axios 公共处理类
在项目 src 目录下创建 utils 目录并在该目录下创建 request.js 类
// 1、引入axios
import axios from axios// 2、创建axios对象
const request axios.create({//baseURL: http://localhost:8081, //注意因为已经在 vue.config.js 文件中配置了代理服务解决跨域问题所有这里需要注释掉timeout: 0, //0表示永不超时withCredentials: true // 表示请求可以携带cookie
});// 3、添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 4、添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么if (response.status 200) {return response.data;}else {alert(操作失败 response.data.message);return null;}
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);
});// 5、导出axios实例
export default request5.2 创建 API 服务类
在实际项目中为各个模块创建各自的 API 服务类用于对接后端服务提供的 API 接口。
在项目 src 目录下创建 API 目录并在该目录下创建 UserApi.js 类
import request from /utils/request.js;//获取用户信息
export function getUserInfo(userId) {return request({method: GET,url: /user/getUserInfo/${userId}});
}//新增用户信息
export function saveUserInfo(userInfo) {return request({url: /user/saveUserInfo,method: POST,data: userInfo});
}//修改用户信息
export function updateUserInfo(userInfo) {return request({url: /user/updateUserInfo,method: POST,data: userInfo});
}//删除用户信息
export function deleteUserInfo(userId) {return request({url: /user/deleteUserInfo/${userId},method: POST});
}
5.3 创建组件并调用API接口
在项目 src 目录下创建 views/user 目录并在该目录下创建 UserInfo.vue 组件
templatefieldsetlegend用户信息/legendp用户名称input typetext v-modeluserInfo.userName //pp用户年龄input typetext v-modeluserInfo.age //pp用户性别input idmale typeradio value男 v-modeluserInfo.sex /label formale男/labelinput idfemale typeradio value女 v-modeluserInfo.sex /label forfemale女/label/pp博客信息input typetext v-modeluserInfo.blogName //pp博客地址input typetext v-modeluserInfo.blogUrl //pbutton clickgetUser(1)查询用户/buttonbutton clicksaveUser新增用户/buttonbutton clickupdateUser修改用户/buttonbutton clickdeleteUser删除用户/button/fieldset
/templatescript setup
//导入所需的API方法
import { getUserInfo, saveUserInfo, updateUserInfo, deleteUserInfo } from /api/UserApi.js;
import { ref } from vue;//注意这里使用 ref()不要使用 reactive()否则重新赋值后响应式状态就缺失了
let userInfo ref({userId: 0
});//获取用户信息
function getUser(userId) {getUserInfo(userId).then(function (result) {userInfo.value result;});
}//新增用户信息
function saveUser() {saveUserInfo(userInfo.value).then(function (response) {if (response) {alert(操作成功);} else {alert(操作失败);}});
}//修改用户信息
function updateUser() {updateUserInfo(userInfo.value).then(function (response) {if (response) {alert(操作成功);} else {alert(操作失败);}});
}//删除用户信息
function deleteUser() {deleteUserInfo(userInfo.value.userId).then(function (response) {if (response) {alert(操作成功);} else {alert(操作失败);}});
}/script!-- CSS样式 --
style scoped
input[typetext] {width: 300px;padding: 3px;font-size: 16px;
}button {margin-right: 10px;
}
/style 6、综合实例
通过上述 axios 的二次封装下面通过一个综合实例来测试应用效果。
【实例】使用 axios 的二次封装通过使用 Ajax 请求实现用户信息的查询、新增、修改、删除功能。实例执行的结果如下图 使用 Java、SpringBoot 创建一个后端项目编写 UserController.java 用户信息控制器实现 API 接口。
package com.pjb.pm.controller;import com.pjb.pm.entity.UserInfo;
import org.springframework.web.bind.annotation.*;/*** 用户信息控制器* author pan_junbiao**/
RestController
RequestMapping(/user)
//CrossOrigin //解决跨域问题
public class UserController
{/*** 获取用户信息*/RequestMapping(value /getUserInfo/{id}, method RequestMethod.GET)public UserInfo getUserInfo(PathVariable(id) Long userId){//模拟用户查询功能UserInfo userInfo new UserInfo();userInfo.setUserId(userId);userInfo.setUserName(pan_junbiao的博客);userInfo.setSex(男);userInfo.setAge(36);userInfo.setBlogName(您好欢迎访问 pan_junbiao的博客);userInfo.setBlogUrl(https://blog.csdn.net/pan_junbiao);return userInfo;}/*** 新增用户信息*/RequestMapping(value /saveUserInfo, method RequestMethod.POST)public boolean saveUserInfo(RequestBody UserInfo userInfo){if (userInfo null || userInfo.getUserName() null || userInfo.getUserName().length() 0){return false;}//忽略相关代码...return true;}/*** 修改用户信息*/RequestMapping(value /updateUserInfo, method RequestMethod.POST)public boolean updateUserInfo(RequestBody UserInfo userInfo){if (userInfo.getUserId() 0){return false;}//忽略相关代码...return true;}/*** 删除用户信息*/RequestMapping(value /deleteUserInfo/{id}, method RequestMethod.POST)public boolean deleteUserInfo(PathVariable(id) Long userId){if (userId 0){return false;}//忽略相关代码...return true;}
}
执行结果
1 查询用户信息 2新增、修改、删除用户信息
