axios.post 用法

1 axios.post 用法
HTTP请求提交方式：GET 和 POST
POST：

• 安全性更高一些，假如有密码敏感信息，发起POST
  
• 数据提交量凌驾4096kb，发起使用POST。一样平常开发：登录、数据新增、修改发起POST
  

GET：地址栏袒露提交数据，不适合敏感信息的提交
axios.post语法

1. ==========================GET=============================
2. axios.get("servlet地址",{params:{name:'tom',age:12}})
3.     .then(resp=>{})
4.     .catch(exception=>{处理异步交互的异常})
5. ==========================POST=============================
6. axios.post('servlet地址', {name:'tom',age:20})
7.      .then(response => {
8.             console.info(response)
9.          })
10.     .catch(e => {  //捕获异步请求失败情况，服务器500的情况下
11.             console.info(e)
12.         });

复制代码

axios.get和axios.post发送参数区别

axios.get(url,{params:{}}),这种参数传递时，按照querystring【格式：?key=value&key=value】向控制器发送的，所以controller里面就可以利用request.getParameter()；
axios.post(url,对象)这种情况传递参数是，按照jsonstring【格式：{“key”:value,“key”:value}】，控制器 里面对于jsonstring格式无法利用传统request.getParameter()获取中。控制器只能利用jackson的反序列方案解析请求参数。

1.                 //1-1 获取请求体
2.         BufferedReader reader = request.getReader();//读取请求体
3.         //1-2 从reader读取字符串
4.         StringBuilder requestBody=new StringBuilder();
5.         String temp;
6.         while((temp=reader.readLine())!=null){
7.             requestBody.append(temp);
8.         }
9.         System.out.println("请求协议发送来的数据有："+requestBody);
10.                 //1-3 依靠ObjectMapper将请求体传递来的jsonstring反序列化成java对象User
11.         ObjectMapper mapper=new ObjectMapper();
12.         Users users = mapper.readValue(requestBody.toString(), Users.class);

复制代码

细节：axios.post发送参数的方式是：jsonstring，所以控制器处理jsonstring的方式是json字符串的反序列化
在java程序中，将java对象转换为json格式字符串的过程称为JSON序列化；
反之，
在java程序中，将json格式的字符串转换为java对象的过程称为JSON反序列化。
2 物业系统贯穿案例の楼栋管理
添加楼栋
BuildingDao.java和BuildingService.java代码略
building/add.html发送新增请求请求

AddBuildingServlet处理新增楼栋的请求

1. @WebServlet(name = "AddBuildingServlet", value = "/AddBuildingServlet")
2. public class AddBuildingServlet extends HttpServlet {
3.     @Override
4.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
5.         System.out.println("新增楼栋的请求以接收到");
6.         //1. axios.post提交的json string数据获取:
7.         // 获取请求协议提交的json String
8.         BufferedReader reader = request.getReader();//读请求体
9.         String temp;
10.         StringBuilder jsonString=new StringBuilder();
11.         while( (temp=reader.readLine())!=null) {
12.             jsonString.append(temp);
13.         }
14.         reader.close();
15.         System.out.println("jsonString的内容是："+jsonString);
17.         //1-1 json String ----> java对象  json反序列化
18.         ObjectMapper mapper=new ObjectMapper();
19.         WyBuilding building = mapper.readValue(jsonString.toString(), WyBuilding.class);
20.         System.out.println("提交楼栋信息时："+building);
22.         //保存
23.         //设置浏览器解析响应体格式：json
24.         response.setContentType("application/json;charset=utf-8");
25.         try {
26.             TransactionManagement.getProxyInstance(new WyBuildingServiceImpl()).save(building);
27.             //响应
28.             response.getWriter().write(
29.                 mapper.writeValueAsString(
30.                     new ResponseResult<>(20000,"新增成功")
31.                 )
32.             );
33.         } catch (Exception e) {
34.             e.printStackTrace();//程序员跟踪异常关键节点
35.             //响应
36.             response.getWriter().write(
37.                 mapper.writeValueAsString(
38.                     new ResponseResult<>(50000,"新增失败,失败原因："+e.getMessage())
40.                 )
41.             );
42.         }
44.     }
45. }

复制代码

细节
添加楼栋时，楼栋的建成时间在Servlet中处理时会抛出非常：

这个非常发生的根本原因是：jackson在处理JSON反序列化时，因为请求提交的日期格式和jackson用来转换的格式不一致造成的，怎么办理呢？我们通太过析可以发现：Jackson处理日期时，是根据我们在Building实体类的completed属性的@JsonFormat指定的日期格式举行转换的，

所以我们只有将请求提交的日期格式设置为“yyyy年MM月dd日”的格式才可以，el-date-picker组件中“value-format”属性就可以设置数据提交时的格式。详细代码如下所示：

修改楼栋
弹窗式修改楼栋，跟新增楼栋处理就比力相似了。我们跟着以下步调操纵：

• 点击“编辑”按钮时，弹出修改对话框
  //修改按钮单击事件
  handleEdit(index, row) {
  //修改用的对话框弹出
  this.dialogFormVisible = true;
  console.log("index: ",index);
  //row本身就是要修改的数据对象，ElementUI修改不用id查询数据库了
  console.log("row: ",row);
  //表现修改的楼栋信息
  this.building={…row};//地址
  },
  
• 保存修改后的楼栋信息，修改成功的情况下，关闭修改对话框并革新列表页面
  

批量删除楼栋
需求分析：
批量删除楼栋信息时，我们先要判定用户是否勾选“删除楼栋”，假如没有勾选给出提示消息，勾选了楼栋信息就给控制器发送请求完成删除。
代码实现

• BuildingDao.java
  @Override
  public int batchDelete(Connection conn,Integer… ids) {
  StringBuilder sql=new StringBuilder();
  sql.append(“delete from wy_building where id in “);
  sql.append(”(”);
  for(int i=0;i<ids.length;i++){
  if(i==ids.length-1){
  sql.append(“?”);
  continue;
  }
  sql.append(“?,”);
  }
  sql.append(“)”);
  return Dbutils.noQuary(
  conn,
  sql.toString(),
  ids);
  }
  
• BuildingService.java代码略
  
• list.html发送批量删除的请求axios.get发送，servlet处理批量删除请求的querystring参数
  
  
  

axios.get发送批量删除请求，控制器吸取数据后的处理思路，参考代码如下：

• list.html发送批量删除的请求axios.post发送，servlet处理批量删除请求的jsonstring参数
  
  
  

通过axios.post和axios.get分别处理批量删除案例得出心得：queryString格式和jsonString格式在控制器中处理方式是不一样的
QueryString的请求参数，控制器吸取：
String value=request.getParameter(“name”);
根据参数传递时的name吸取对应的value，且value一定是String范例
QueryString的请求参数，控制器吸取：
request.getReader()读取请求体，再通过ObjectMapper的readValue将读取的请求体(着实就是json字符串)转换为java程序必要的java对象，完成后续的数据处理
登录
UserDao.java和UserService.java代码略
login.html发送异步请求

1. <el-form :model="user" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
2.     <el-form-item label="账号" prop="phone">
3.         <el-input v-model="user.phone" clearable prefix-icon="el-icon-s-custom"></el-input>
4.     </el-form-item>
5.     <el-form-item label="密码" prop="password">
6.         <el-input type="password" v-model="user.password" clearable show-password prefix-icon="el-icon-search"></el-input>
7.     </el-form-item>
8.     <el-form-item>
9.         <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
10.         <el-button type="danger" @click="resetForm('loginForm')">重置</el-button>
11.     </el-form-item>
12. </el-form>
13. <script>
14. new Vue({
15.         el: "#app",
16.         data() {
17.             return {
18.                 user:{
19.                     phone:'13388775566',
20.                     password:'123'
21.                 }
22.             }
23.         },
24.         methods: {
25.             submitForm(formName) {
26.                 this.$refs[formName].validate((valid) => {
27.                     if (valid) {//表单验证通过
28.                         axios.post("/web/DoLoginServlet",this.user)
29.                         .then(resp=>{ })
30.                     } else {//表单验证不过
31.                         console.log('error submit!!');
32.                         return false;
33.                     }
34.                 });
35.             },
36.             resetForm(formName) {
37.                 this.$refs[formName].resetFields();
38.             }
39.         }
40.     })
41. </script>

复制代码

DoLoginServlet处理登录请求

1. @Override
2. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
3.     response.setContentType("application/json;charset=utf-8");
4.     try {
5.         BufferedReader reader = request.getReader();
6.         StringBuilder requestBody=new StringBuilder();
7.         String content;//用来保存每次读取到的一行数据
8.         while( (content=reader.readLine())!=null){
9.             requestBody.append(content);
10.         }
11.         reader.close();
12.         System.out.println("requestBody:"+requestBody);
13.         //1-2 json反序列化技术将json字符串转回java对象
14.         WyUser user = new ObjectMapper().readValue(requestBody.toString(), WyUser.class);
16.         //2.调
17.         WyUserServiceImpl proxyInstance = new TransactionalProxyFactory<WyUserServiceImpl>(
18.             new WyUserServiceImpl()
19.         ).getTxProxyInstance();
21.         WyUser loginUser = proxyInstance.findByAccount(user.getPhone(), user.getPassword());
23.         response.getWriter().write(
24.             new ObjectMapper().writeValueAsString(
25.                 new ResponseResult<>(20000,"登录成功",loginUser)
26.             )
27.         );
28.     } catch (Exception e) {
29.         e.printStackTrace();
30.         String msg=e.getMessage();
31.         if(e instanceof InvocationTargetException){
32.             InvocationTargetException t=(InvocationTargetException)e;
33.             msg=t.getTargetException().getMessage();
34.         }
35.         response.getWriter().write(
36.             new ObjectMapper().writeValueAsString(
37.                 new ResponseResult<>(50001,"登录失败，原因："+msg)
38.             )
39.         );
40.     }
41. }

复制代码

细节：
用户登录成功后，必要将登任命户的真实姓名和头像存入欣赏器缓存，页面跳转到home.html后，在home页面表现欢迎消息

验证用户登录过滤器
本次过滤器的使用与第二周贯穿案例的过滤器基本一样。登录成功后将用户登录信息保存到session中。必要注意的是在过滤器中必要放行vue和ElementUI的资源访问权限。详细代码如下所示：

1. @WebFilter("/*")
2. public class AuthorizeFilter implements Filter {
3.     @Override
4.     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
5.         System.out.println("AuthorizeFilter doFilter");
6.         HttpServletRequest req=(HttpServletRequest)request;
7.         HttpServletResponse resp=(HttpServletResponse)response;
8.         HttpSession session = req.getSession();
9.         Object user = session.getAttribute("user");
11.         //2 获取当前用户要进入的是否是登录页面
12.         StringBuffer requestURL = req.getRequestURL();
13.         String requestURI = req.getRequestURI();
14.         System.out.println("requestURL:"+requestURL);
15.         System.out.println("requestURI:"+requestURI);
16.         String url = requestURI.toLowerCase();
17.         if(user!=null
18.                 ||url.contains("login")
19.                 ||url.contains("css")
20.                 ||url.contains("images")
21.                 ||url.contains("/js/")
22.                 ||url.contains("/vue/")
23.                 ||url.contains("/element-ui/")
24.                 ||url.contains("/ueditor/")
25.         ) {
26.             //放行
27.             chain.doFilter(request, response);
28.         }else{
29.             //不放行,去登录
30.             resp.getWriter().write("<script>window.parent.location.href="/web/login.html";</script>");
31.         }
32.     }
33. }

复制代码

登出系统

常见坑点
JSON反序列化时 日期范例转换问题

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。