山东大学项目实训 创新实训 法律文书专家系统 个人报告三 项目开发 ：前后端交互

个人工作:

在本项目中，我主要负责后端程序的开发，个人工作主要围绕设计数据库，开发后端服务，与DeepSeek模型进行交互等方面。由于一些其他因素,本项目后端转为使用java开发,另外我本人还负责了一部分前端代码,主要是前后端交互部分,和部分界面布局的改进。目前项目还未接入mongodb数据库，此工作将会在后期进行。

工作展示：

前端项目目录结构：

这是自我封装的request 拦截器，可以自请求发送前对请求做一些处理，比如统一加token，对请求参数统一加密

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:9090',  // 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错
    timeout: 60000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    //config.headers['Content-Type'] = 'application/json;charset=utf-8';

    if (!(config.data instanceof FormData)) {
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
    }

    // 设置请求头
    let jwtToken = localStorage.getItem('jwtToken');
    if (jwtToken) {
        config.headers['jwtToken'] = jwtToken;
    }

    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
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
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

文书摘要:

文书摘要功能将会通过如下方法向后端交互:

async uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);


      //将返回的json处理成正常字段
      function formattedSummary(msg) {
        const parsed = JSON.parse(msg);
        return parsed.summary.replace(/\n/g, '
');
      }

      try {
        const response = await request.post("/wenshu/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {

          },
        });

        console.log("文件上传成功：", response);

        // 添加用户文本消息

        this.addMessage({
          sender: "ai",
          type: "text",
          content: formattedSummary(response.msg),
        });


      } catch (error) {
        console.error("文件上传失败：", error);
      }
    },

而后端将会通过以下方法接受并处理消息然后返回:

@PostMapping("/upload")
    public Result handleFileUpload(@RequestParam("file") MultipartFile file) {
        String filename = file.getOriginalFilename();
        if (filename == null) {
            return Result.error("空文件");
        }

        try {
            String textContent = extractTextFromFile(file);

            // 构建请求
            //textContent="现在，你作为法律专家，请你给出该法律文书的摘要:\n"+textContent;
            ObjectMapper mapper = new ObjectMapper();
            Map data = new HashMap<>();
            data.put("document", textContent);

            String jsonBody = mapper.writeValueAsString(data);

            HttpRequest request = HttpRequest.newBuilder()
                    .uri(URI.create("http://localhost:7860/summarize"))
                    .header("Content-Type", "application/json")
                    .POST(HttpRequest.BodyPublishers.ofString(jsonBody))
                    .build();

            // 发送请求并处理响应

            HttpClient client = HttpClient.newHttpClient();
            HttpResponse response = client.send(
                    request, HttpResponse.BodyHandlers.ofString());

            System.out.println("Status code: " + response.statusCode());

            System.out.println("Response body: " + response.body());

            //返回结果
            return Result.success(response.body());

        } catch (UnsupportedOperationException e) {

            return Result.error("不支持的文件类型");
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error("文件解析失败");
        }
    }

法律预测报告(前后端代码)如下:

async submitQuestion() {
      if (!this.inputQuestion.trim() || this.isLoading) return;
      this.isLoading = true;

      //格式化回答
      function formattedPrediction(msg) {
        const parsed = JSON.parse(msg);
        return parsed.prediction.replace(/\n/g, '
');
      }

      // 添加用户问题
      const newQ = {
        question: this.inputQuestion,
        time: new Date().toLocaleTimeString(),
        answer: "",
        keywords: [],
        timestamp: "",
      };

      try {
        // 向后端发送请求
        const response = await request.post('/yuce/send', this.inputQuestion);
        console.log(response)

        if (response.code == 200) {
          const newQ = {
            question: this.inputQuestion,
            time: new Date().toLocaleTimeString(),
            answer: formattedPrediction(response.msg),
            keywords: [],
            timestamp: "",
          };
          this.history.push(newQ);
        }

      } finally {
        this.isLoading = false;
        this.inputQuestion = "";
      }
    },

@PostMapping("/send")
    public Result handleRequest(@RequestBody String requestData) {
        System.out.println("接收到的字符串: " + requestData);
        // 构建请求
        try {

        ObjectMapper mapper = new ObjectMapper();
        Map data = new HashMap<>();
        data.put("fact", requestData);

        String jsonBody = mapper.writeValueAsString(data);


        HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create("http://localhost:7860/prediction"))
                .header("Content-Type", "application/json")
                .POST(HttpRequest.BodyPublishers.ofString(jsonBody))
                .build();

        // 发送请求并处理响应
        HttpClient client = HttpClient.newHttpClient();
        HttpResponse response = client.send(
                request, HttpResponse.BodyHandlers.ofString());

        System.out.println("Status code: " + response.statusCode());

            //返回结果
        return Result.success(response.body());

        } catch (Exception e) {
            e.printStackTrace();
            return Result.error("错误");
        }
    }