axios下载大文件_实战：整合VueJS、Axios和Jacksons实现JAVA EE 下的数据持久化

1.背景简介

我在在专栏《Vue.js极速入门精要》最后一节，介绍了如何正Vuejs、axios以及Jackson来实现动态的加载数据并在前端展示，但并没有介绍如何通过Vue数据模型实现对行前端数据的提交和持久化。

这一节内容主要是实现对组织部门信息的持久化，主要是利用Vue数据模型、ajax封装库axios以及Jackson(Jackson详情请参考我另一专栏《深入浅出JSON与Jackson》)。部门信息主要包括：部门标识、部门名称、上级部门以及部门描述。下面我们就开始本实战应用案例介绍。

我们还是边学边练。

2.项目环境构建

第一步：构建项目

基于Eclipse，创建web工程，并导入Jackson库。

提示：当然你可以用Maven的方式来构建项目，并在pom中添加如下依赖

            com.fasterxml.jackson.core

            jackson-databind

            2.9.10

项目会自动到导入Jackson相关的库：

1) jackson-annotations-2.9.10.jar

2) jackson-core-2.9.10.jar

3) jackson-databind-2.9.10.jar

项目的Java版本为Java 8，构建的项目结果如下：

项目目录结构

第二步，为项目添加js库：vuejs和axios

这里建议直接下载Vue和Axios库，并添加到js目录下。下载地址分别为：

Vuejs:https://cn.vuejs.org/v2/guide/installation.html

Axios:https://github.com/axios/axios/

也可通过CDN来导入相应的库：

3.创建输入信息表单页面

本项目是直接下载了两个js库并放置在根目录下的static目录下的子目录js中。

第一步：创建页面命名为index.html,编写页面文件代码，如下：

Vue+Axios持久化示例

Vue+Axios+Java Web实现数据持久化示例

        部门信息

                编号：

                   placeholder="输入大于200的数字">

                名称：

                   v-model="dptObject.dptName" placeholder="输入部门名称">

                上级：

                   v-model="dptObject.dptParent" placeholder="输入上级部门编号">

                类型：

                    {{ option.text }}

                 保持信息

            {{dptObject.dptName}}

            --{{result}}

第二步：引入Vue和axios框架包，并修改页面代码如下：

代码说明：

上述代码中，在创建Vue实例时，定义了几个选项，主要是data选项和methods选项，其中data中result表示结果，dptObject表示需要持久化的部门对象，methods中定义类ajax提交方法subdata。Axios的post方法是一个样板化的代码，其中dataAjaxService为后台服务Servlet的URL。axios详情可以参考：https://github.com/axios/axios#example

4.创建数据持久化服务对象

为了简便起见，本示例没有真正连接数据库，而是模拟了数据存储操作，以单例模式实现DataServiceProvider，主要包括这样介个方法：

注意：Depart类和DataServiceProvider类详情，请参考专栏《Vue.js极速入门精要》最后一节。

5.创建后台服务类

创建后台Servlet，使其解析并处理有axios以ajax方式提交的数据。代码如下：

package com.newdayedu.demo.restful;

import java.io.BufferedReader;

import java.io.IOException;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.newdayedu.demo.entity.Depart;

import com.newdayedu.demo.service.DataServiceProvider;

@WebServlet(name = "dataAjaxService", urlPatterns = { "/dataAjaxService" })

public class DataRestfulService extends HttpServlet {

         private static final long serialVersionUID = 1L;

         protected void doGet(HttpServletRequest request, HttpServletResponse response)

                          throws ServletException, IOException {

                  String httpMethod = request.getMethod();

                  response.setContentType("application/json;charset=UTF-8");

                  DataServiceProvider data = DataServiceProvider.getDataProvider();

                  if (httpMethod.equalsIgnoreCase("post")) {

                          String result = "Unkown";

                          String json =readJSONString(request) ;

                          Depart d = data.toXObject(json);

                          data.addDepart(d);

                          response.getWriter().append("{"result":"成功保存","+json+"}");

                          System.out.println("Send JSON Data:" + data.toJSON(d));

                          response.flushBuffer();

                  }

         }

         /**

          * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

          *      response)

          */

         protected void doPost(HttpServletRequest request, HttpServletResponse response)

                          throws ServletException, IOException {

                  doGet(request, response);

         }

         //post的json数据以流的形式发送到后端

         private static String readJSONString(HttpServletRequest request) {

                  StringBuffer json = new StringBuffer();

                  String line = null;

                  try {

                          BufferedReader reader = request.getReader();

                          while ((line = reader.readLine()) != null) {

                                   json.append(line);

                          }

                  } catch (Exception e) {

                          System.out.println(e.toString());

                  }

                  return json.toString();

         }

}

这里需要注意的是：如何在后台获取axios以Ajax的方法 提交的数据，所以关键是方法readJSONString方法(不能以getParameter方法获取)。当然你可利用其它前端库对提交的数据进行适当的转换，以你认可的方式获取表单值。在上述代码中，

String json =readJSONString(request) ;

Depart d = data.toXObject(json);

这两行代码完成提交对象字符串解析和对象转换(利用Jackson)。完成对象转换后即可以把对象进行持久化了(数据库或或其它形式)。

然后，我们运行整个项目，在输入表单输入，点击保持后，结果页面类似如下：

Ajax持久化对象结果

红色内容为保存成功的对象数据。

6.练习

如何基于上述代码框架，实现数据的查找和删除呢？自己动手练练吧。本次的边学边练就到这里了，记得动手练练啊——书读百遍，不如一练！