柚见(伙伴匹配系统)第二期

接口调试

选择–内存查询版本

前端

单页面应用
只加载一个html页面,通过js来改变加载的组件从而改变页面布局

前端整合路由

入门 | Vue Router (vuejs.org)

Vue-Router

根据不同的url来展示不同的页面(组件),不用写if/else

有些组件库整合了Vue-Router,注意先看组件文档,省去自己写的时间

• 安装
  npm install vue-router@4

• 引入
  新建config文件夹及ts文件
  

• 使用Tabbar 标签栏 - Vant 4 (gitee.io)

  

搜索页面

粗略搭建
模仿b站

• 找组件—选择事件监听模版
  Search 搜索 - Vant 4 (gitee.io)

• 新建searchpage页面,cv代码

• router.ts 挂载路由

  添加tag,divider组件

添加tag,divider

添加分类选择

• 布局
  

• 选择与标签连接
  

• 小bug
  

• 解决:一定记得ref([]),具体原因,之后去查
  

• 点击关闭标签
  

  美化标签间隔

点击 🔍过滤删选标签
点击清除

• bug

用户页User

新建前端接收用户信息实体 user.d.ts

• user页面添加展示组件
  

用户编辑页edit

进入这个页面,需要携带参数才知道需要编辑的是哪一个
两种传参方式

1. 动态路由传参
   /user:id
   利于seo
2. query传参
   /user?name=?&&password=?

• 新建UserEdit页面
  

• 修改点击跳转得路由方法
  

搭建userEdit页面
使用form组件

页面返回