山东大学软件学院创新实训——项目记录（十）

基于RAG技术的心理健康大模型的开发及应用

这里实现的是根据当天的日记，从数据库中获取一句话建议的后端。

一、从数据库提取最近一篇日记心灵鸡汤后端编写

在logResultsController中编写该方法。

因为这里的blog增加了权限，因此在编辑获取最近的日志心灵鸡汤的时候，要将用户的id进行传递，在数据库中查找该用户最近新增的一篇日记。这里传递uid必须有@PathVariable的注解！！！

//获取最近的日志心灵鸡汤
    @ApiOperation("获取最近的日志心灵鸡汤")
    @GetMapping("/sentence/{uid}")
    public Result getSentence(@PathVariable Integer uid){
        //根据id进行查找后端数据库的信息:写了service要通过这个取传？
        String a = blogService.getAdvice(uid);
        return Result.success(a);
    }

blogService：

public interface IBlogService extends IService<Blog> {
        String getAdvice(Integer uid);
}

blogService实现类：

   @Override
    public String getAdvice(Integer uid) {
        return blogMapper.getAdvice(uid);
    }

数据库查找语言编写：这里实现对time逆序排序以及uid查找返回用户最近一篇的日记advice内容。

@Select("SELECT advice FROM blog WHERE uid=#{uid} Order By time DESC Limit 1")
    String getAdvice(Integer uid);

二、返回结果测试

这里学习到了一个新的测试后端的方法。在controller对应的方法旁，点击绿色小圆圈按键。

生成后端测试方法：

这里传递uid，点击三角符号，进行后端测试。

GET http://localhost:8088/log-results/sentence/86

后端返回结果清晰可见：

说明该controller方法成功返回数据库中存储的信息！！！

三、 实现前端vue存储当天日记心灵鸡汤并显示当天日记心灵鸡汤功能。

（一）vue存储日记心灵鸡汤advice字段

在blog.vue中，在data中找到前端绑定的form（前端用户编写日记绑定的表单数据），在form中增加advice数据：

data() {
    return {
      form: {
        user:'',
        uid:1,
        advice: ''
      },}

找到博客save方法（即用户编写完日记，进行保存按钮触发的方法）：

<div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>

进行修改save方法，前端根据用户id进行查找到数据库中存储的该用户信息，将返回的id以及uid复制给前端绑定的表单form，并使用api进行请求，存储用户数据到后端数据库。

save() {
      request.get("/user/" + this.user.id).then(res => {
        if (res.code === '200') {
          this.form.uid=res.data.id
          this.form.user=res.data.username
        }
        request.post("/blog/save", this.form).then(res => {
          if (res.code === '200') {
            this.$message.success("保存成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })
      })
    },

这样前端完成了与后端的交互，并成功将用户编写的日志，存储到数据库的blog表中。‘

（二）vue前端获取心灵鸡汤并进行展示

在Home.vue中进行修改。

（1）更改前端样式

首先修改的是前端的一句话展示方框大小（之前的方框太小了，现在想要将方框变大一些）。

这里将拖拽样式宽度变大。

<div
            class="draggable"
            @mousedown="startDrag"
            @touchstart="startDrag"
            @mousemove="onDrag"
            @touchmove="onDrag"
            @mouseup="stopDrag"
            @touchend="stopDrag"
            @mouseleave="stopDrag"
        >
          <svg class="bg" viewBox="0 0 520 260" preserveAspectRatio="none">
            <path :d="headerPath" fill="#3F51B5"></path>
          </svg>
          <div class="header">{{ this.sentence}}</div>
          <div class="content" :style="contentPosition">往下拉查看今天的小建议吧！</div>
        </div>

同理将header计算返回的数据，也相应的变大，变成L520

 headerPath() {
      return `M0,0 L520,0 520,${this.headerHeight}Q${this.c.x},${this.c.y} 0,${this.headerHeight}`;
    },

同理，拉拽的样式也变。

.draggable {
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 520px;
  height: 240px;
  overflow: hidden;
  margin: 30px auto;
  position: relative;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  user-select: none;
  border-radius: 8px;
}

最终效果： 

（2）前后端连接

 在拖拽框的header中，展示绑定的sentence属性。

<div
            class="draggable"
            @mousedown="startDrag"
            @touchstart="startDrag"
            @mousemove="onDrag"
            @touchmove="onDrag"
            @mouseup="stopDrag"
            @touchend="stopDrag"
            @mouseleave="stopDrag"
        >
          <svg class="bg" viewBox="0 0 520 260" preserveAspectRatio="none">
            <path :d="headerPath" fill="#3F51B5"></path>
          </svg>
          <div class="header">{{ this.sentence}}</div>
          <div class="content" :style="contentPosition">往下拉查看今天的小建议吧！</div>
        </div>

 在data中创建sentence属性：

data(){
return{
sentence:''}}

在methods中创建getSentence()函数，获取到后端返回的一句心灵鸡汤，并绑定到sentence中：

getSentence(){
      console.log("一句话",this.user.id)
        request.get("/log-results/sentence/"+this.user.id).then(res =>{
              this.sentence = res.data
        })
    },

在mouted中调用此函数：

（三）最终成果

往下拖拽蓝紫色区域，进行查看今日小建议：

 成果展示！！！