springai连接chatgpt4结合vue生成简易聊天（前端篇）

我们已经实现了后端的接口了，接下来讲讲前端方面（本例子，使用vue2与axios）

前端：

 利用element-ui的布局容器，我们将页面分为上中下三部分

上部分：

最顶上，非常简单就是div标签

<el-header style="font-size: 30px; text-align: center;  border: 1px solid black;">
   <div style="margin-top: 10px;">客服小爱为你服务</div>
  </el-header>

 我们设置字体大小 font-size为30px，文字居中显示,text-aligh:center，给一个框架线

 中部分：

中部分，如何实现，聊天能不断的被渲染，实际这就是一个v-for所做的效果，我们写一个大盒子，盒子里面包裹一个小盒子，小盒子里面又包裹着两个小盒子，分别是机器人聊天需要回应的渲染效果和自己发送消息渲染效果。直接看代码

<el-main style="height: 540px;padding: 0px;margin-left: 200px;">

<div class="List" v-for="obj in table"  :key="obj.id">

<div class="box1" style="width: 100%; height: 300px;">


  <div class="yonghu" style="  height: 150px;">
<div class="send" style="display: inline-block;">
  <div style="margin-top: 15px;">{{ obj.text2 }}</div>
	
</div>
<div style="display: inline-block;width: 82px;height: 82px;position: relative;margin-top: 30px;">
<img  src="123.jpg" style="width: 80px;
border-radius: 50%;   z-index: 1;position: absolute;">
</div>
</div>

<div class="kefu" style="height: 150px;">
<img  src="kefu.jpg" style="width: 80px;
border-radius: 50%;   z-index: 1;">
<div class="send" style="display: inline-block;">
  <div style="margin-top: 15px;">{{ obj.text1 }}</div>
	
</div>
</div>



</div>
</div>
   


  </el-main>

实际机器人和自己发送效果是一样的，我们利用v-for去不断从一个table数组拿出对象，这个对象里面有id字段名（用于知道渲染先后），message(聊天信息)，然后通过不断的取一个对象，渲染小盒子，最终实现看似的一问一答效果。那如何能循环了？这就得看最底下那一部分，实现的点击效果

下部：

利用input标签，将input标签里面的value值与某个变量绑定，我们点击按钮，判断value是否为空，如果不为空，就会触发一次axios请求，该请求，将input标签的value给后端，后端返回chatgpt回答文字，再将input的vue与chatgpt回答的文字，组合成一个对象，push进table，为了有id，我们可以在data（）{}中定义一个计数器num=0,每点击一次num++，然后将num,input标签的value与后端chatgpt回答的文字封装成对象，push进数组table中，最终渲染进页面，达到聊天的感觉

<el-footer style="margin-left: 190px;">
    <div class="wrapper" style="margin-top: 20px;">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="请友善发言哦~" rows="2" maxlength="200" @focus="pinglun" @blur="ww" @input="ws" v-model="inputone"></textarea>
    <button  @click="wt(inputone)">发布</button>
  </div>

  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  </el-footer>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      table: [
       ],
      inputone: '',//评论框的内容
      sum: 1,
      username: '',
      name:''
    }
  },
  ///
  methods: {
     // 1. 当我们文本域获得了焦点，就让 total 显示出来
    pinglun() {
      const total = document.querySelector('.total');
      total.style.opacity = 1
    },
// 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    ww() {
      const total = document.querySelector('.total');
      total.style.opacity = 0
    },
      // 3. 检测用户输入
    ws() {
      const total = document.querySelector('.total');
      total.innerHTML = `${tx.value.length}/200字`
    },
    wt(yanglin) {
     let that=this
      axios.post(`http://localhost:8081/ai/ollama/${yanglin}`)
        .then(resp => {
          const sum = that.sum++;
          const tx = document.querySelector('#tx')
          let ww ={
        id: sum,
        text1:resp.data.message,
        text2: yanglin,
      }
      if (tx.value.trim() !== '') {
        this.table.push(ww);
        tx.value=''
          }
        }).catch(e => {
            console.log("不要狗叫了，我说你对的就是对的");
        });
    
     }
  }

</script>

 感谢各位观看！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！