笔记

准备的效果图:

为了配合源码熟悉解析请求服务器(https://api.uomg.com/api/rand.qinghua?format=json)返回数据的写法，我把视频中返回的数据结构截图如下:

2025-11-30 访问的时候失败
提示错误：GET https://api.uomg.com/api/rand.qinghua?format=json net::ERR_CERT_DATE_INVALID

源码

App.vue

<template>
  <Count/>
  <br>
  <LoveTalk/>
</template>


<script setup lang="ts" name="App">
//上面一行 name="App" 表示定义组件名。如果不写，会自动寻找文件名作为组件名。

  import Count from './components/Count.vue'
  import LoveTalk from './components/LoveTalk.vue'
</script>

components\Count.vue

<template>
  <div class="count">

    <h2>当前求和为：{{ sum }}</h2>

    <!-- 将从 select 收集到内容 转为数字(.number) 给 n -->
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref } from "vue";

  // 数据
  let sum = ref(1) // 当前求和
  let n = ref(1)   // 用户选择的数字

  // 方法
  function add(){
    sum.value += n.value
  }
  function minus(){
    sum.value -= n.value
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }

  select,button {
    margin: 0 5px; /*上下为0px 左右间距5px*/
    height: 25px;
  }
</style>

components\LoveTalk.vue

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>

    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">

  import {reactive} from 'vue'
  import axios from "axios";
  import {nanoid} from 'nanoid' //如果提示没有 nanoid, 需要安装: npm i nanoid

  // 数据
  //定义一个响应式的数组
  let talkList = reactive([
    {id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},
    {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},
    {id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}
  ])

  // 方法
  async function getLoveTalk(){
    // 发请求
    //写法0:
    //let strRelsult = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //console.log(strRelsult.data.content)
    //写法1:
    //对返回的对象 直接 解构 取 data 的写法。
    //let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //那么此时取 data.content 的 内容就是:
    //console.log(data.content)
    //写法2:
    //对返回的对象 解构(取data) 再解构(从data中再取content) ：
    //let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //console.log(content)
    //写法3: 连续解构赋值+重命名
    //对返回的对象 解构(取data) 再解构(从data中再取content) 最后将 content改个名为title：
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    console.log(title)
    //注: 2025-11-30 访问该链接的时候提示 LoveTalk.vue?t=1764492536486:19 GET https://api.uomg.com/api/rand.qinghua?format=json net::ERR_CERT_DATE_INVALID


    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(), title} 
    // 放到数组中
    talkList.unshift(obj)
  }
</script>

<style scoped>
  .talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>