前端Vue封装结果类，传递对象数据给后端SpringBoot，并使用Gson强转对象为另一对象

青旅半醒 2022-10-31 00:42 19阅读 0赞

### 前端Vue封装结果类，传递对象数据给后端SpringBoot，并强转对象为另一对象 ###

*  第一步Vue封装结果类
 *   *  1.1在某个js文件中进行封装
     *  1.2使用
 *  第二步编写传递对象数据给后端的函数
 *   *  2.1函数源码
 *  第三步后端接口开发
 *   *  3.1导入依赖
     *  3.2实现后端接收对象参数
     *  3.3在上面的代码的基础上，使用Gson强转对象

# 第一步Vue封装结果类 #

## 1.1在某个js文件中进行封装 ##

使用constructor创建构造函数

export class Article { 
        constructor(userID, userName, articleTitle,articleDescription,articleContent,articleCategory,articleTap) { 
            this.userID = userID
            this.userName = userName
            this.articleTitle = articleTitle
            this.articleDescription = articleDescription
            this.articleContent = articleContent
            this.articleCategory = articleCategory
            this.articleTap = articleTap
        }
    }

## 1.2使用 ##

先导入该js(或者叫做类)，然后通过new的关键词，传递参数，使用构造函数，创建对象。

import { Article} from "@/network/article";
    
    this.article = new Article(this.userID, this.userName, this.ruleForm.title, this.ruleForm.description,
                        this.editor.txt.html(), this.articleCategory, this.tabID);
    
                    let that = this;
                    let a = saveArticle(that.article).then(function (a) { 
                    });

# 第二步编写传递对象数据给后端的函数 #

## 2.1函数源码 ##

因为传递的是对象数据，所以要使用JSON.stringify包裹住对象参数，然后请求头里面要加上`'Content-Type':' application/json; charset=UTF-8 '`,同样使用的时候还是要通过import进行导入。

export function saveArticle(article) { 
        return request({ 
            url: '/article/saveArticle',
            method: 'Post',
            headers: {  'Content-Type':' application/json; charset=UTF-8 '},
            data: JSON.stringify({ 
                "article":article
            })
        });
    }

# 第三步后端接口开发 #

## 3.1导入依赖 ##

<dependency>
                <groupId>commons-beanutils</groupId>
                <artifactId>commons-beanutils</artifactId>
                <version>1.9.3</version>
            </dependency>
            <dependency>
                <groupId>commons-collections</groupId>
                <artifactId>commons-collections</artifactId>
                <version>3.2.1</version>
            </dependency>
            <dependency>
                <groupId>commons-lang</groupId>
                <artifactId>commons-lang</artifactId>
                <version>2.6</version>
            </dependency>
            <dependency>
                <groupId>commons-logging</groupId>
                <artifactId>commons-logging</artifactId>
                <version>1.1.1</version>
            </dependency>
            <dependency>
                <groupId>net.sf.ezmorph</groupId>
                <artifactId>ezmorph</artifactId>
                <version>1.0.6</version>
            </dependency>
            <dependency>
                <groupId>net.sf.json-lib</groupId>
                <artifactId>json-lib</artifactId>
                <version>2.2.3</version>
                <classifier>jdk15</classifier>
            </dependency>
    
            
            <dependency>
                <groupId>com.google.code.gson</groupId>
                <artifactId>gson</artifactId>
                <version>2.8.2</version>
            </dependency>

## 3.2实现后端接收对象参数 ##

注意这里最好使用@RequestBody 接收参数。

## 3.3在上面的代码的基础上，使用Gson强转对象 ##

我这里想转为Article类的对象。

@PostMapping("/saveArticle")
        public void saveArticle(@RequestBody String article) { 
    
            JSONObject a = JSONObject.fromObject(article);
            JSONObject articleMeta = JSONObject.fromObject(a.get("article"));
    
            Gson gs = new Gson();  
            String listStr = gs.toJson(articleMeta);
    
            Article articleData = gs.fromJson(listStr, Article.class);
        }