伙伴匹配系统——前端路由整合以及搜索页面和个人信息页面搭建

前端整合路由

Vue Router

官方文档介绍 Vue Router （注意是4.0）

安装

npm install vue-router@4

在main.js当中引入路由并且创建路由实例

import * as VueRouter from 'Vue-Router'  
import routes from "./router";  
  
const app = createApp(App);  

const router = VueRouter.createRouter({  
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。  
    history: VueRouter.createWebHashHistory(),  
    routes, // `routes: routes` 的缩写  
})  
  
app.use(router)  
app.mount('#app')

创建单独的路由文件便于集中管理
然后把文件引入到main.js就可以

import index from '../pages/index.vue';  
import tem from '../pages/tem.vue';  
import user from '../pages/user.vue';  
  
const routes = [  
    { path: '/', component: index },  
    { path: '/tem', component: tem },  
    { path: '/user', component: user },  
]  
  
export default routes;

使用 router-view 组件指定路由对应组件的渲染位置（可以看成一个占位符）

<div id="content">  
   <router-view></router-view>  
</div>

在页面中使用，在配置路由的时候可以先看一下组件库的官方文档，里面可能会配置相关路由的信息，可以节省我们开发时间。

标签栏支持路由模式，用于搭配 Vue Router 使用。路由模式下会匹配页面路径和标签的 to 属性，并自动选中对应的标签。

<van-tabbar router @change="onChange">  
  <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>  
  <van-tabbar-item to="/tem" icon="search" name="tem">队伍</van-tabbar-item>  
  <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>  
</van-tabbar>

这样在页面切换的时候我们就可以看到上方地址的变化

前端搜索页

引入搜索框组件

官方文档介绍：search

<form action="/">  
  <van-search  
      v-model="searchText"  
      show-action  
      placeholder="请输入搜索关键词"  
      @search="onSearch"  
      @cancel="onCancel"  
  />  
</form>

搜索标签过滤

const onSearch = (val) => {  
  tagList.value = originalTagList.map(parentTag => {  
    const tempChildren = [...parentTag.children];  
    const tempParentTag = {...parentTag};  
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));  
    return tempParentTag;  
  });}  
const onCancel = () => {  
  searchText.value='';  
  tagList.value=originalTagList;  
};

添加已选标签和分割线

官方文档介绍： tag

已选标签展示在已选标签处。

通过绑定activeIds进行绑定，然后使用v-for进行循环遍历。然后使用插值语法展示。

<van-divider content-position="left">已选标签</van-divider>  
<div v-if="activeIds.length === 0">请选择标签</div>  
<van-row gutter="16" style="padding: 0 16px;">  
  <van-col v-for="tag in activeIds">  
    <van-tag closeable size="medium" type="primary" @close="doClose(tag)">  
      {{ tag }}  
    </van-tag>  
  </van-col>  
</van-row>

关闭已选标签
只有当item的值不等于传入的tag时，才会将该item保留在新数组中。

const doClose = (tag) => {  
  activeIds.value =  activeIds.value.filter(item =>{  
    return item !== tag;  
  });};

添加可选标签

官方文档介绍： tree-select

<van-divider class="van-divider" content-position="left">  
  <van-tree-select  
      width="300px"  
      v-model:active-id="activeIds"  
      v-model:main-active-index="activeIndex"  
      :items="tagList"  
  />  
</van-divider>

最终页面效果：

个人信息页面

创建个人信息页面
使用单元格组件： cell

<template>  
  <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username', '昵称',user.username)"/>  
  <van-cell title="账户" :value="user.userAccount" @click="toEdit('userAccount', '账户',user.userAccount)"/>  
  <van-cell title="头像" :value="user.avatarUrl" @click="toEdit('avatarUrl', '头像',user.avatarUrl)">  
    <img :src="user.avatarUrl"/>  
  </van-cell>  
  <van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender', '性别',user.gender)"/>  
  <van-cell title="手机号" is-link :value="user.phone" @click="toEdit('phone', '手机号',user.phone)"/>  
  <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', '邮箱',user.email)"/>  
  <van-cell title="星球编号" :value="user.planetCode" />  
  <van-cell title="标签信息" is-link :value="user.tags" @click="toEdit('tags', '标签信息',user.tags)" />  
  <van-cell title="注册时间" :value="user.createTime" />  
</template>

const user = {  
  id: 1,  
  username: "Ghost",  
  userAccount: "Ghost",  
  avatarUrl: "https://himg.bdimg.com/sys/portraitn/item/public.1.e137c1ac.yS1WqOXfSWEasOYJ2-0pvQ",  
  gender: '男',  
  phone: '18056743536',  
  email: '20890470@qq.com',  
  planetCode: '1',  
  tags: 'Java,大三',  
  createTime: '2023-12-03 16:18:43',  
};

点击单元格时通过路径传参的方式进行参数传递

const toEdit = (editKey: string, editName: string, currentValue: string) => {  
  router.push({  
    path: '/user/edit',  
    query: {  
      editKey,  
      editName,  
      currentValue,  
    }  })}

在另一个页面使用useRoute();进行接收参数

const route = useRoute();  
  
const editUser = ref({  
  editKey: route.query.editKey,  
  editName: route.query.editName,  
  currentValue: route.query.currentValue,  
});

使用form表单在另一个页面使用

<van-form @submit="onSubmit">  
  <van-field  
      v-model="editUser.currentValue"  
      :name="editUser.editKey"  
      :label="editUser.editName"  
      :placeholder="`请输入${editUser.editName}`"  
  />  
  <div style="margin: 16px;">  
    <van-button round block type="primary" native-type="submit">  
      提交  
    </van-button>  
  </div>  
</van-form>

页面效果