目录

一、前后端传输数据的封装

1.1 Result.java

1.2 Contants.java

1.3 前端对数据的预处理

二、论坛功能设计

2.1 界面

2.2 ForumCard.vue

---

一、前后端传输数据的封装

为了使前后端的数据交互更为方便安全，我对前端传来的数据以及后端返回的数据做了封装等处理。

具体实现步骤内容如下：

1.1 Result.java

接口统一返回包装类

主要有三部分组成：

code：状态码，在Contants.java类中定义了常见的状态

mag：返回消息，如登录成功，系统错误等

data：返回数据

/**
 * 接口统一返回包装类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {

    private String code;
    private String msg;
    private Object data;

    public static Result success() {
        return new Result(Constants.CODE_200, "", null);
    }

    public static Result success(Object data) {
        return new Result(Constants.CODE_200, "", data);
    }

    public static Result error(String code, String msg) {
        return new Result(code, msg, null);
    }

    public static Result error() {
        return new Result(Constants.CODE_500, "系统错误", null);
    }

}

1.2 Contants.java

状态码的常见取值：

public interface Constants {

    String CODE_200 = "200"; //成功
    String CODE_401 = "401";  // 权限不足
    String CODE_400 = "400";  // 参数错误
    String CODE_500 = "500"; // 系统错误
    String CODE_600 = "600"; // 其他业务异常

    String DICT_TYPE_ICON = "icon";

}

1.3 前端对数据的预处理

后端返回Result类型的数据，前端在request.js进行处理

处理代码如下：

request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        // 当权限验证不通过的时候给出提示
        if (res.code === '401') {
            // ElementUI.Message({
            //     message: res.msg,
            //     type: 'error'
            // });
            router.push("/login")
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }

二、论坛功能设计

论坛作为用户讨论交流的地方是必不可少的。

2.1 界面

前端的设计如下，每条说说放置在一张卡片上，写有标题、内容、作者和发表时间

2.2 ForumCard.vue

<template>
  <div class="main">
    <el-row>
      <el-col :span="16">
        <div>
          <el-input
              style="width: 60%"
              placeholder="请输入关键词"
              suffix-icon="el-icon-search"
              v-model="search" />
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button type="info" @click="load" plain>搜索</el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button type="info" @click="goto_write" plain>发布</el-button>
        </div>
      </el-col>
      <el-col :span="4"><div></div></el-col>
    </el-row>
    <el-space direction="vertical" style="text-align: left">
      <el-card v-for="(forum,i) in forumlist" :key="i" class="box-card" style="width: 1200px;background-color: #99a9bf" shadow="hover">
        <template #header>
          <div class="card-header">
            <span style="font-weight:bold">{
   { forum.title }}</span>
          </div>
        </template>
        <div class="text item">
          {
   { forum.content }}
        </div>
        <div class="text item" style="margin-top: 20px">
          {
   { forum.username }}
        </div>
        <div class="text item" style="text-align: right">
          {
   { forum.time }}
        </div>
      </el-card>
    </el-space>
  </div>
</template>