1.背景简介
我在在专栏《Vue.js极速入门精要》最后一节，介绍了如何正Vuejs、axios以及Jackson来实现动态的加载数据并在前端展示，但并没有介绍如何通过Vue数据模型实现对行前端数据的提交和持久化。
这一节内容主要是实现对组织部门信息的持久化，主要是利用Vue数据模型、ajax封装库axios以及Jackson(Jackson详情请参考我另一专栏《深入浅出JSON与Jackson》)。部门信息主要包括：部门标识、部门名称、上级部门以及部门描述。下面我们就开始本实战应用案例介绍。
我们还是边学边练。
2.项目环境构建
第一步：构建项目
基于Eclipse，创建web工程，并导入Jackson库。
提示：当然你可以用Maven的方式来构建项目，并在pom中添加如下依赖
com.fasterxml.jackson.corejackson-databind2.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.练习
如何基于上述代码框架，实现数据的查找和删除呢？自己动手练练吧。
