网站开发网校,市政浙江建设培训中心网站,国外销售网站怎样建设,菏泽网站建设设计Vue的Ajax请求
axios简介
Axios#xff0c;是Web数据交互方式#xff0c;是一个基于promise [5]的网络请求库#xff0c;作用于node.js和浏览器中#xff0c;它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在…Vue的Ajax请求
axios简介
Axios是Web数据交互方式是一个基于promise [5]的网络请求库作用于node.js和浏览器中它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2]axios :不是vue的插件可以在任何地方使用推荐
axios的使用方式
1、使用npm安装
npm install axios2、使用cdn链接axios
script srchttps://unpkg.com/axios/dist/axios.min.js/scriptaxios的语法
axios({// 请求方式method: post,url: api,// 传递参数data: obj,// 设置请求头信息headers: {key: value},responseType: json
}).then(response {// 请求成功let res response.data;console.log(res);
}).catch(error {// 请求失败console.log(error);
});axios案例
1、数据准备
Student.json
[{sid:1,name:mary,age:18,gender:女},{sid:2,name:lucy,age:18,gender:女},{sid:3,name:tom,age:19,gender:男},{sid:4,name:jack,age:18,gender:男}
]2、初使用问题
VScode 解决办法 3、axios 发送get请求
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idapptable cellspacing0 cellpadding0 border1 width500 aligncentertrth学号/thth姓名/thth年龄/thth性别/th/trtr v-forstu in stustd{{stu.sid}}/tdtd{{stu.name}}/tdtd{{stu.age}}/tdtd{{stu.gender}}/td/tr/table/divscriptconst vueApp Vue.createApp({data:function(){return {stus:}},created:function(){//发送ajax请求将得到的数据赋值给stusaxios({method:get,url:json/students.json}).then(resp {this.stus resp.data;});}});vueApp.mount(#app);/script
/body
/html或者
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idapptable cellspacing0 cellpadding0 border1 width500 aligncentertrth学号/thth姓名/thth年龄/thth性别/th/trtr v-forstu in stustd{{stu.sid}}/tdtd{{stu.name}}/tdtd{{stu.age}}/tdtd{{stu.gender}}/td/tr/table/divscriptconst vueApp Vue.createApp({data:function(){return {stus:}},created:function(){//发送ajax请求将得到的数据赋值给stusaxios.get(json/students.json).then(resp {this.stus resp.data;});}});vueApp.mount(#app);/script
/body
/html4、axios 发送post请求
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idapptable cellspacing0 cellpadding0 border1 width500 aligncentertrth学号/thth姓名/thth年龄/thth性别/th/trtr v-forstu in stustd{{stu.sid}}/tdtd{{stu.name}}/tdtd{{stu.age}}/tdtd{{stu.gender}}/td/tr/table/divscriptconst vueApp Vue.createApp({data:function(){return {stus:}},created:function(){//发送ajax请求将得到的数据赋值给stusaxios({method:post,url:json/students.json}).then(resp {this.stus resp.data;});}});vueApp.mount(#app);/script
/body
/html注意绝大多数web服务器,都不允许静态文件响应POST请求,所以这里运行会报错哦。
5、补充
为所有支持的请求方法提供了别名axios.request(confifig)axios.get(url[, confifig])axios.delete(url[, confifig])axios.head(url[, confifig])axios.post(url[, data[, confifig]])axios.put(url[, data[, confifig]])axios.patch(url[, data[, confifig]])
请求后台数据
1.index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idapptable cellspacing0 cellpadding0 border1 width500 aligncentertrth学号/thth姓名/thth年龄/thth性别/thth邮箱/th/trtr v-forstu in stustd{{stu.sid}}/tdtd{{stu.sname}}/tdtd{{stu.sage}}/tdtd{{stu.sgender}}/tdtd{{stu.semail}}/td/tr/table/divscriptconst vueApp Vue.createApp({data:function(){return {stus:}},created:function(){//发送ajax请求将得到的数据赋值给stusaxios.get(http://localhost:8888/day10_war_exploded/studentServlet?flaggetAllStudents).then(resp {this.stus resp.data;});}});vueApp.mount(#app);/script
/body
/html2.StudentServlet.java
package com.etime.servlet;import com.etime.entity.Student;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;WebServlet(/studentServlet)
public class StudentServlet extends BaseServlet {protected void getAllStudents(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {ListStudent list new ArrayList();Student student1 new Student(1,范冰冰,女,18,fbbqq.com);Student student2 new Student(2,刘德华,男,18,ldhqq.com);Student student3 new Student(3,孙红雷,男,18,shlqq.com);list.add(student1);list.add(student2);list.add(student3);ObjectMapper mapper new ObjectMapper();String res mapper.writeValueAsString(list);PrintWriter out resp.getWriter();out.print(res);out.close();}
}3.跨域问题 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的是浏览器对javascript施加的安全限制。 同源策略是指协议域名端口都要相同其中有一个不同都会产生跨域在请求数据时浏览器会在控制台中报一个异常提示拒绝访问。 跨域问题怎么出现的 开发一些前后端分离的项目比如使用 Servlet Vue 开发时后台代码在一台服务器上启动前台代码在另外一台电脑上启动此时就会出现问题。比如 后台 地址为http://localhost:8080/前台 地址为 http://127.0.0.1:5500/此时端口号不一致 不符合同源策略造成跨域问题。 CorsFilter
package com.etime.filter;import org.apache.commons.lang.StringUtils;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*跨域请求*/
WebFilter(/*)
public class CorsFilter implements Filter {Overridepublic void init(FilterConfig filterConfig) throws ServletException {}Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response (HttpServletResponse) servletResponse;HttpServletRequest request (HttpServletRequest) servletRequest;request.setCharacterEncoding(utf-8);// 不使用*自动适配跨域域名避免携带Cookie时失效String origin request.getHeader(Origin);if(StringUtils.isNotBlank(origin)) {response.setHeader(Access-Control-Allow-Origin, origin);}// 自适应所有自定义头String headers request.getHeader(Access-Control-Request-Headers);if(StringUtils.isNotBlank(headers)) {response.setHeader(Access-Control-Allow-Headers, headers);response.setHeader(Access-Control-Expose-Headers, headers);}// 允许跨域的请求方法类型response.setHeader(Access-Control-Allow-Methods, *);// 预检命令OPTIONS缓存时间单位秒response.setHeader(Access-Control-Max-Age, 3600);// 明确许可客户端发送Cookie不允许删除字段即可response.setHeader(Access-Control-Allow-Credentials, true);filterChain.doFilter(request, response);}Overridepublic void destroy() {}
}综合练习
1.register.html–注册功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title注册/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idappform账号input typetext v-modelusername blurcheckUsername()span stylecolor:red{{username_msg}}/spanbr密码input typepassword v-modelpwd blurcheckPwd()span stylecolor:red{{pwd_msg}}/spanbrinput typebutton value注册 clickregister()/form/divscriptconst vueApp Vue.createApp({data:function(){return {username:,pwd:,username_msg:,pwd_msg:,username_flag:false,pwd_flag:false}},methods:{checkUsername:function(){if (this.username ) {this.username_msg 账号不能为空;this.username_flag false;} else if (this.username.length 6) {this.username_msg 账号至少6个字符;this.username_flag false;} else {//账号是否为已注册账号的判断axios({method:get,url:http://localhost:8888/day10_war_exploded/managerServlet?flagcheckUsernameusernamethis.username}).then(resp {if (resp.data) {this.username_msg ;this.username_flag true;} else {this.username_msg 账号已存在;this.username_flag false;}});}},checkPwd:function(){if (this.pwd ) {this.pwd_msg 密码不能为空;this.pwd_flag false;} else if (this.pwd.length 8) {this.pwd_msg 密码至少8个字符;this.pwd_flag false;} else {this.pwd_msg ;this.pwd_flag true;}},register:function(){if (this.username_flag this.pwd_flag) {//处理需要传递给后端的数据,使用这种方式处理数据时,method值必须是postlet params new URLSearchParams();params.append(flag,register);params.append(username,this.username);params.append(pwd,this.pwd);//数据全部通过校验axios({method:post,url:http://localhost:8888/day10_war_exploded/managerServlet,data:params}).then(resp {if (resp.data) {alert(注册成功);window.location.href login.html;} else {alert(注册失败请稍后再试);}});} else {alert(请认真填写数据);}}}});vueApp.mount(#app);/script
/body
/html2.login.html-登录功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title登录/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idappform账号input typetext v-modelusername blurcheckUsername()span stylecolor:red{{username_msg}}/spanbr密码input typepassword v-modelpwd blurcheckPwd()span stylecolor:red{{pwd_msg}}/spanbrinput typebutton value登录 clicklogin()/form/divscriptconst vueApp Vue.createApp({data(){return {username:,pwd:,username_msg:,pwd_msg:,username_flag:false,pwd_flag:false}},methods:{checkUsername(){if (this.username ) {this.username_msg 账号不能为空;this.username_flag false;} else if (this.username.length 6) {this.username_msg 账号至少6个字符;this.username_flag false;} else {axios({method:get,url:http://localhost:8888/day10_war_exploded/managerServlet?flagcheckUsernameusernamethis.username}).then(resp {if (resp.data) {this.username_msg 该账号未注册请先注册;this.username_flag false;} else {this.username_msg ;this.username_flag true;}});}},checkPwd(){if (this.pwd ) {this.pwd_msg 密码不能为空;this.pwd_flag false;} else if (this.pwd.length 8) {this.pwd_msg 密码至少8个字符;this.pwd_flag false;} else {this.pwd_msg ;this.pwd_flag true;}},login(){if (this.username_flag this.pwd_flag) {let params new URLSearchParams();params.append(flag,login);params.append(username,this.username);params.append(pwd,this.pwd);axios({method:post,url:http://localhost:8888/day10_war_exploded/managerServlet,data:params}).then(resp {if (resp.data) {alert(登录成功);window.location.href index.html;} else {alert(密码有误请查证后再登录);}});} else {alert(请认真填写数据);}}}});vueApp.mount(#app);/script
/body
/html3.学生信息展示
(1) studentInfo.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.global.js/scriptscript srcjs/axios.min.js/script
/head
bodydiv idapptable cellspacing0 cellpadding0 border1 width500 aligncentertrth学号/thth姓名/thth年龄/thth性别/thth邮箱/thth头像/th/trtr v-forstu in stustd{{stu.sid}}/tdtd{{stu.sname}}/tdtd{{stu.sage}}/tdtd{{stu.sgender}}/tdtd{{stu.semail}}/tdtdimg :srchttp://localhost:8888/sms_pic/student/stu.sphoto width50/td/tr/tablediva hrefjavascript:void(0) clickgetStudentByPage(1)首页/aa hrefjavascript:void(0) clickgetStudentByPage(prevPage)上一页/a{{page}}/{{countPages}}a hrefjavascript:void(0) clickgetStudentByPage(nextPage)下一页/aa hrefjavascript:void(0) clickgetStudentByPage(countPages)尾页/a/div/divscriptconst vueApp Vue.createApp({data:function(){return {stus:,page:,countPages:,prevPage:,nextPage:}},methods:{getStudentByPage(p){let params new URLSearchParams();params.append(flag,getStudentByPage);params.append(page,p);axios({method:post,url:http://localhost:8888/day10_war_exploded/studentServlet,data:params}).then(resp {this.stus resp.data.list;this.page resp.data.page;this.countPages resp.data.countPages;this.prevPage resp.data.prevPage;this.nextPage resp.data.nextPage;});}},created:function(){this.getStudentByPage(1);}});vueApp.mount(#app);/script
/body
/html(2) PageUtil.java-分页代码
package com.etime.util;import java.util.List;public class PageUtil {private int page; //当前页页码private int rows; //每页显示条数private int index; //偏移量private int countRows; //总条数private int countPages; //总页数private int prevPage; //当前页的上一页页码private int nextPage; //当前页的下一页页码private List list; //当前页的数据public PageUtil(String page,int rows,int countRows){init_page(page);this.rows rows;init_index();this.countRows countRows;init_countPages();init_prevPage();init_nextPage();}private void init_page(String page){if (page null || .equals(page)) {this.page 1;} else {this.page Integer.parseInt(page);}}private void init_index(){this.index (this.page - 1) * this.rows;}private void init_countPages(){int mod this.countRows % this.rows;if (mod 0) {this.countPages this.countRows / this.rows;} else {this.countPages this.countRows / this.rows 1;}}private void init_prevPage(){if (this.page 1) {this.prevPage 1;} else {this.prevPage this.page - 1;}}private void init_nextPage(){if (this.page this.countPages) {this.nextPage this.countPages;} else {this.nextPage this.page 1;}}public int getPage() {return page;}public int getRows() {return rows;}public int getIndex() {return index;}public int getCountRows() {return countRows;}public int getCountPages() {return countPages;}public int getPrevPage() {return prevPage;}public int getNextPage() {return nextPage;}public List getList() {return list;}public void setList(List list) {this.list list;}
}(3)StudentServlet.java protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//分页数据查询String page req.getParameter(page);int rows 10;int countRows studentService.getCountRows();PageUtil pageUtil new PageUtil(page, rows, countRows);ListStudent list studentService.getStudentByPage(pageUtil);pageUtil.setList(list);ObjectMapper mapper new ObjectMapper();String res mapper.writeValueAsString(pageUtil);PrintWriter out resp.getWriter();out.print(res);out.close();}(3)StudentServlet.java protected void getStudentByPage(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//分页数据查询String page req.getParameter(page);int rows 10;int countRows studentService.getCountRows();PageUtil pageUtil new PageUtil(page, rows, countRows);ListStudent list studentService.getStudentByPage(pageUtil);pageUtil.setList(list);ObjectMapper mapper new ObjectMapper();String res mapper.writeValueAsString(pageUtil);PrintWriter out resp.getWriter();out.print(res);out.close();}
