计算机系统应用教程网站

网站首页 > 技术文章 正文

实战:整合VueJS、Axios和Jacksons实现JAVA EE 下的数据持久化

btikc 2024-10-17 08:37:12 技术文章 8 ℃ 0 评论

1.背景简介

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

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

我们还是边学边练。

2.项目环境构建

第一步：构建项目

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

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

<dependency>
??????????? <groupId>com.fasterxml.jackson.core</groupId>
??????????? <artifactId>jackson-databind</artifactId>
??????????? <version>2.9.10</version>
</dependency>

项目会自动到导入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来导入相应的库：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue+Axios持久化示例</title>
<link href="static/css/bulma.min.css" rel="stylesheet">
?
</head>
<body style="margin:10px;">
??? <h1>Vue+Axios+Java Web实现数据持久化示例</h1>
?
??? <fieldset>
??????? <legend>部门信息</legend>
??????? <div id="sbtForm">
??????? <!-- <form id="myDepart"? > -->
??????????? <div id="xDepart">
??????????????? <label>编号：</label><input v-model="dptObject.dptId"
?????????????????? placeholder="输入大于200的数字">
??????????????? <label>名称：</label><input
?????????????????? v-model="dptObject.dptName" placeholder="输入部门名称">
??????????????? <label>上级：</label><input
?????????????????? v-model="dptObject.dptParent" placeholder="输入上级部门编号">
??????????????? <label>类型：</label>
??????????????? ? <select v-model="dptObject.dptType">
??????????????? ??? <option v-for="option in options" v-bind:value="option.value">
??????????????? ??? {{ option.text }}
??????????????? ??? </option>
??????????????? ?</select>
??????????????? <button class="button is-success is-rounded" v-on:click="subdata()"> 保持信息</button>
??????????? </div>
??????????? {{dptObject.dptName}}
??????????? <span style="color:red">--{{result}}</span>
??????? <!-- </form> -->
??????? </div>
??? </fieldset>
???
</body>
?
</html>

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

<!—导入Vuejs -->
<script src="static/js/vue.js"></script>
<!—导入Ajax框架axios -->
<script src="static/js/axios.js"></script>
<!—创建Vue实例并axios的ajax提交方法 -->
<script type="text/javascript">
?
Vue.prototype.$axios = axios; //注册为Vue的全局实例
?
new Vue({
??? el:"#sbtForm",
??? data:{?
??? ? result:"",
? ? ??dptObject:{"dptId":0,"dptName":"","dptParent":0,"dptType":"独立机构"},
? ? ??options:[
? ? ??????{ text: '独立机构', value: '独立机构' },
? ? ??????{ text: '直属部门', value: '直属部门' },
? ? ??????{ text: '分支机构', value: '分支机构' },
? ? ??????{ text: '子级部门', value: '子级部门' }
? ? ????],
??? },
??? methods:{??????
??????? subdata:function(){
??????? ? let s = this; //指向Vue实例本身，否则this指向了调用对象
??????? ? axios.post('dataSDemo',s.dptObject)
??????? ?????? .then(function (response) {
??????? ??? ???s.result = response.data;
??????????? ????? ?console.log(response);
??????? ??????? })
??????? ?????? .catch(function (error) {
??????? ???????? console.log(error);
??????? ??????? });
??????? },
??? }
});
?
?
</script>

代码说明：

上述代码中，在创建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:\n" + 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）。完成对象转换后即可以把对象进行持久化了（数据库或或其它形式）。

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



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

6.练习

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

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表