Catalog

One 、 Encapsulation of front and rear end transmission data

1.1 Result.java

1.2 Contants.java

1.3 Front end preprocessing of data

Two 、 Forum function design

2.1 Interface

2.2 ForumCard.vue

---

One 、 Encapsulation of front and rear end transmission data

In order to make the data interaction between the front and back ends more convenient and safe , I encapsulate the data from the front end and the data returned from the back end .

The specific implementation steps are as follows ：

1.1 Result.java

The interface returns the wrapper class in a unified way

There are mainly three parts ：

code： Status code , stay Contants.java Class defines common states

mag： Return message , If the login is successful , System error, etc

data： Return the data

/**
 *  The interface returns the wrapper class in a unified way 
 */
@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, " System error ", null);
    }

}

1.2 Contants.java

Common values of status codes ：

public interface Constants {

    String CODE_200 = "200"; // success 
    String CODE_401 = "401";  //  Insufficient authority 
    String CODE_400 = "400";  //  Parameter error 
    String CODE_500 = "500"; //  System error 
    String CODE_600 = "600"; //  Other business exceptions 

    String DICT_TYPE_ICON = "icon";

}

1.3 Front end preprocessing of data

Backend return Result Data of type , Front-end request.js To deal with

The processing code is as follows ：

request.interceptors.response.use(
    response => {
        let res = response.data;
        //  If it is a returned file 
        if (response.config.responseType === 'blob') {
            return res
        }
        //  Compatible with the string data returned by the server 
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        //  Give a prompt when the permission verification fails 
        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)
    }

Two 、 Forum function design

As a place for users to discuss and communicate, the forum is essential .

2.1 Interface

The design of the front end is as follows , Put each story on a card , With a title 、 Content 、 Author and publication time

2.2 ForumCard.vue

<template>
  <div class="main">
    <el-row>
      <el-col :span="16">
        <div>
          <el-input
              style="width: 60%"
              placeholder=" Please enter keywords "
              suffix-icon="el-icon-search"
              v-model="search" />
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button type="info" @click="load" plain> Search for </el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button type="info" @click="goto_write" plain> Release </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>