php-vue-博客系统开发bug

合集 - bug记录(2)

1.php-vue-博客系统开发bug01-03

2.uniapp-php-niushop系统bug02-25

收起

[1]前后端交互数据的形式：
后端返回的数组为对象：
{{"c_id":1,"c_name":"\u524d\u7aef\u5f00\u53d1","c_pid":0,"c_create_time":null,"c_update_time":null,"children":[{"c_id":11,"c_name":"Html/Css","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":12,"c_name":"JavaScript","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":13,"c_name":"jQuery","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":14,"c_name":"Angular","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":15,"c_name":"React","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":16,"c_name":"Vue","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"}],"showSubCategories":"false"}]}
转换成
后端返回的数组为数组：[有的表面上是数组，但是实际上是json，这种要json.parse解析，数据经console.log可以返回的是被解析后，并列出数组的key和value]
[{"c_id":1,"c_name":"\u524d\u7aef\u5f00\u53d1","c_pid":0,"c_create_time":null,"c_update_time":null,"children":[{"c_id":11,"c_name":"Html/Css","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":12,"c_name":"JavaScript","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":13,"c_name":"jQuery","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":14,"c_name":"Angular","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":15,"c_name":"React","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"},{"c_id":16,"c_name":"Vue","c_pid":1,"c_create_time":null,"c_update_time":null,"children":[],"showSubCategories":"false"}],"showSubCategories":"false"}]]
转换方法：
后端返回是：①return json_encode($result);，将 PHP 中的 $result 变量转换为 JSON 格式的字符串并返回，可以参考文档添加参数设置选项 ②return json($result)
前端转换：①前端接收到json数据，要进行categories.value = JSON.parse(response.data);将 response.data 中的 JSON 格式的字符串解析为 JavaScript 对象，可以在 JavaScript 中以对象的形式来操作和使用原本以字符串形式存在的 JSON 数据
②const data = Object.values(response.data);从 response.data 对象中获取所有的值，并将这些值存储在一个新的数组 data 中，如果 response.data 是 {key1: value1, key2: value2} ，那么 Object.values(response.data) 将会返回 [value1, value2] ，然后将其赋值给 data 变量
但这种在前端遍历前要先进行处理：

const response = await api.get('api/category/getCategories');
  const data = Object.values(response.data);
  const formattedCategories = data.map(category => ({
    c_name: category.c_name,
    c_id: category.c_id,
    children: category.children.map(subCategory => ({
      c_name: subCategory.c_name,
      c_id: subCategory.c_id
    }))
  }));
categories.value = formattedCategories;

[2]图片地址错误：@/../都不对时，尝试从src开头
[3]vue3前端的数据定义
①如果设定'const user = ref([id：])',暂未找到成功设定数据方法
②如果设定'const user = ref({})'，设定user.value.id = 数据 ；
[4]在