柚见第十一期(前端页面开发)

news2025/11/1 5:05:32

创建队伍

便于控制样式,在外面套一层div
在这里插入图片描述

创建假数据模拟后端传来数据

//假数据模拟  
const initFormData = {  
  "name": "",  
  "description": "",  
  "expireTime": "",  
  "maxNum": 0,  
  "password": "",  
  "status": 0,  
  "userId": 0  
}  
const addTeamData=ref({...initFormData})

ref({…initFormData}) 与ref(initFormData) 的区别

在Vue.js中，使用const addTeamData=ref({...initFormData})与const addTeamData=ref(initFormData)创建的响应式引用之间存在一定的区别。具体分析如下：

const addTeamData=ref({...initFormData})：这种方式通过展开操作符{...initFormData}创建了initFormData对象的一个浅拷贝，并将这个拷贝作为ref的初始值。这意味着对addTeamData.value的任何修改都不会影响原始的initFormData对象。如果initFormData是一个简单类型（如基本类型或简单对象），则这种方式可以确保原始数据保持不变，同时在响应式引用上进行修改。
const addTeamData=ref(initFormData)：这种方式直接将initFormData作为ref的初始值，不进行拷贝。因此，如果initFormData是一个简单的数据类型，对它的任何更改都会反映在addTeamData.value上，反之亦然。如果initFormData是一个复杂的对象或数组，则可能需要深拷贝来防止对原始数据的意外修改。

总的来说，如果要保护原始数据不受更改影响，或者明确不希望对原始数据进行修改，那么使用浅拷贝的方式可能更为合适。

组件选用

description 文本框实现textarea

在这里插入图片描述

status

在判断状态时，把类型转为Number，因为通过打印可得，状态是字符串类型的。
在这里插入图片描述

前后端时间

bug

:min-date=“minDate”
选择时间范围不生效
一直从2014年开始
在这里插入图片描述

严格安装官方文档设置解决

在这里插入图片描述

bug: 时间滚动选择失效

其实没有失效,记得切换浏览器手机模式就成功了
下面请跳过

在这里插入图片描述

前端时间格式化

下载一个moment格式化工具 npm i moent

在这里插入图片描述

bug:

在这里插入图片描述

const onConfirm = (e) => {  
  const selectedValues=e.selectedValues//['2023','01','01']  
  addTeamData.value.expireTime = selectedValues.join('-');  
  showPicker.value = false;  
};

后端时间格式化

在这里插入图片描述

在expiretime 字段加上格式化注解
在这里插入图片描述

提交

在这里插入图片描述

const onSubmit =async () => {  
  const postData={  
    ...addTeamData.value,  
    status:Number(status2.value),//因为使用的是status2,记得传数据给后端的时候要覆盖掉之前的status数据  
    expireTime:moment(addTeamData.value.expireTime).format("YYYY-MM-DD HH:hh:ss")  
  }  
  // console.log('submit = ', postData); //可以打印一下传输给后端的数据  
  
  // todo 前端参数校验  
  // 向后端发起请求  
  const res= await myAxios.post("/team/add",postData)  
  if(res?.code === 0 && res.data)  
  {  
    showSuccessToast('添加成功')  
    router.push(  
        {  
          path:'/team',  
          replace:true  
        }  
    )  
  }else {  
    showFailToast("添加失败,请重新输入")  
  }  
  
};

在这里插入图片描述

队伍卡片封装

Card 商品卡片 - Vant 4 (gitee.io)

cv 之前的用户组件改造

在这里插入图片描述

调整图片大小

在这里插入图片描述

不好找类名,在组件中加上自定义类名

在这里插入图片描述

bug: 样式没有传递到子组件

//失败
.van-image {  
  height: 120px;  
}
//失败
#teamCardList :deep(.van-image){  
  height: 120px;  
}
//成功
#teamCardList :deep(.van-card__thumb img ){  
  height: 120px;  
}

在这里插入图片描述

搜索队伍

在team页面添加搜索条

更新队伍

添加新页面 teamupdatePage

在这里插入图片描述

获取当前用户已创建队伍

在这里插入图片描述

获取当前用户已加入队伍

在这里插入图片描述

解散队伍

报错:不能反序列化

“JSON parse error: Cannot deserialize value of type long from Object value (token JsonToken.START_OBJECT); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize value of type long from Object value (token JsonToken.START_OBJECT)\n at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream); line: 1, column: 1]”

报错，这是因为我们后端接口没有封装对象（偷懒），所以我们封装一个删除请求DeleteRequest

在这里插入图片描述