项目中遇到的问题总结

一、Vue样式冲突问题

团队开发Vue项目的时候出现了样式冲突问题，主要原因就是没有模块化style，会造成自己开发的页面被被人毁掉或打乱别人开的页面的样式

二、组建的样式更改

运用组件的时候会出现组件样式不是自己想要的样式，比如：不要下边框线的tab栏切换，鼠标移入效果等，解决方案就是在style外面再写一个style，在里面对组件的样式进行更改

三、ID是number类型会出现精度缺失问题

如果后端接口数据的ID是number类型会出现精度缺失问题，会造成无法拿到数据进行页面渲染，解决方案就是将ID循环出来再用BigInt对ID格式进行转换

四、接口数据里面是数组包对象再包数组

数组要用到循环，对象用到打点，如果数组包对象再包数组就要用到双重循环

五、对象打点渲染时数据渲染成功但是会报错

当对象打点渲染时，数据渲染成功但是会报错时，通常可以通过使用 v-if 进行条件判断来解决这个问题。这样可以确保只有在数据存在时才进行渲染，从而避免因为不存在的数据而导致报错。

六、通过ID获取整条数据进行路由跳转传参问题

当遇到点击跳转传参渲染整个页面时，可以先找到跳转的ID，再通过ID整条数据，然后进行页面跳转渲染
代码：

//ID跳转页面
<template>
   <div class="text-white text-center leading-10 study_button"
        style="width: 100px; height: 40px; background-color: #17ac82; border-radius: 5px; cursor: pointer;"
        @click="handleToInfo(item.id)"> //点击事件里加上跳转页面的ID，将ID通过点击事件传到被跳转的页面
                开始学习
   </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

// 获取路由跳转传参
const router = useRouter();
const handleToInfo = (id: number): void => {
  router.push(`/grow/growRouterInfo?id=${id}`); //通过 router.push() 将页面路由切换到 /grow/growRouterInfo 并且将id作为参数传递给目标页面
}
</script>

//被跳转页面
<template>
 <span v-if="List.careerPlanning">预计学习{{ List.careerPlanning.expectedlearningtime }}月</span>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

const id = ref(null) //创建一个响应式变量 id 来存储从路由中获取的ID参数。
const route = useRoute() //使用 useRoute 钩子来获取当前路由信息，包括查询参数。
console.log(route); 
id.value = route.query.id  //将当前页面的路由查询参数中的ID赋值给 id 变量。
console.log('当前路由参数:', id.value);

const List = ref({}); // 设置一个ref来接收后端数据（将获取到的数据赋值给 List 这个ref对象，以便在模板中进行渲染）
const URL = `/api/admin/open/v1/api/path/info?id=${id.value}`; // 替换为你要请求的API URL
Get(URL)
  .then(data => {
    if (data) {
      console.log('ID获取到的数据:', data.data);
      // 在这里可以对获取到的数据进行进一步处理
      List.value = data.data  // 将获取到的数据赋值给 careerPlanningList

    } else {
      console.log('未能成功获取数据');
    }
  });
</script>

七、react项目中富文本的使用

安装命令：

npm install react-quill

在package.json文件里查看是否安装上（ “react-quill”: “^2.0.0”,）

7.1添加富文本功能

  //  富文本
  const [value, setValue] = useState("");

  const handleChange = (content) => {
    setValue(content);
  };
  const modules = {
    toolbar: [
      [{ "code-block": "code-block" }, { header: 1, title: "Header 1" }], //添加代码块
      [{ header: 2, title: "Header 2" }], //标题，包括标题1和标题2
      [{ header: [1, 2, 3, 4, 5, 6, false] }], 
      [{ size: ["10px"] }], //设置文字大小，默认大小为10px
      ["bold", "italic", "underline", "strike", "clean"], //文字样式，加粗、斜体、下划线、删除线
      ["formula"], //插入公式
      ["blockquote", "align"], //引用和对齐
      [{ list: "ordered" }, { list: "bullet" }],  //有序列表和无序列表
      ["direction", { background: [] }, { color: [] }],  //文本方向、背景、颜色
      [{ font: ["宋体"] }], //字体设置
      ["link", "image", "video"],  //插入链接、图片、视频
    ],
  };