心链2---前端开发（整合路由，搜索页面，用户信息页开发）

news2024/10/6 20:39:22

心链——伙伴匹配系统

接口调试

说书人📖：上回书说到用了两种方法查询标签1.SQL查询，2.内存查询；两种查询效率是部分上下，打的是难解难分，是时大地皴裂，天色聚变，老祖斟酌再三最后决定，使用内存查询，并封印SQL查询。

    /**
     *   根据标签搜索用户。(内存过滤版)
     * @param tagNameList  用户要搜索的标签
     * @return
     */
    @Override
    public List<User> searchUsersByTags(List<String> tagNameList){
        if (CollectionUtils.isEmpty(tagNameList)){
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        //1.先查询所有用户
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        List<User> userList = userMapper.selectList(queryWrapper);
        Gson gson = new Gson();
        //2.判断内存中是否包含要求的标签 parallelStream()
        return userList.stream().filter(user -> {
            String tagstr = user.getTags();
//            if (StringUtils.isBlank(tagstr)){
//                return false;
//            }
            Set<String> tempTagNameSet =  gson.fromJson(tagstr,new TypeToken<Set<String>>(){}.getType());
            //java8  Optional 来判断空
            tempTagNameSet = Optional.ofNullable(tempTagNameSet).orElse(new HashSet<>());

            for (String tagName : tagNameList){
                if (!tempTagNameSet.contains(tagName)){
                    return false;
                }
            }
            return true;
        }).map(this::getSafetyUser).collect(Collectors.toList());
    }


    /**
     *   根据标签搜索用户。(sql查询版)
     *   @Deprecated 过时
     * @param tagNameList  用户要搜索的标签
     * @return
     */
    @Deprecated
    private List<User> searchUsersByTagBySQL(List<String> tagNameList){
        if (CollectionUtils.isEmpty(tagNameList)){
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        //拼接tag
        // like '%Java%' and like '%Python%'
        for (String tagList : tagNameList) {
            queryWrapper = queryWrapper.like("tags", tagList);
        }
        List<User> userList = userMapper.selectList(queryWrapper);
        return  userList.stream().map(this::getSafetyUser).collect(Collectors.toList());
    }

Java 8

  1. stream / parallelStream 流失处理
  2. Optional 可选类

前端开发

前端整合路由

Vue-Router：直接看官方文档引入

https://router.vuejs.org/zh/guide/#html

Vue-Router 其实就是帮助你根据不同的 url 来展示不同的页面（组件），不用自己写 if / else
路由配置影响整个项目，所以建议单独用 config 目录、单独的配置文件去集中定义和管理。
有些组件库可能自带了和 Vue-Router 的整合，所以尽量先看组件文档、省去自己写的时间。


import { createApp } from 'vue'
import App from './App.vue'
import  {Icon,Button, NavBar,Tabbar,TabbarItem,Toast} from "vant";

// @ts-ignore
import * as VueRouter from 'vue-router';
import routes from "./config/router";


const app = createApp(App);
app.use(Button);
app.use(NavBar);
app.use(Icon);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Toast);


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

app.use(router)


app.mount('#app')

单独提出路由，新建config文件夹，新建router.ts文件。 （上面调好了的引入了router.ts）

在这里插入图片描述

然后就是主页点击跳转要使用路由的操作了。

在Tabbar 标签栏 - Vant 3

Vant 3 - Lightweight Mobile UI Components built on Vue 中有提到路由的使用。

搜索页面

Vant3中找到搜索样式

(事件监听）并添加到新建的搜索页面searchPage.vue里

在这里插入图片描述

主页搜索图标跳转路由

编程式导航 | Vue Router

在这里插入图片描述

路由挂载

在这里插入图片描述

改一下名，引入所有组件（这个是官方不推荐的，体量大。现在官网这个描述看不到了

在这里插入图片描述

在这里插入图片描述

添加分类选择

在这里插入图片描述

选择与标签连接

在这里插入图片描述

关闭标签

在这里插入图片描述

美化一下标签的间隔样式

在这里插入图片描述

<template>
  <form action="/">
    <van-search
      v-model="searchText"
      show-action
      placeholder="请输入搜索标签"
      @search="onSearch"
    @cancel="onCancel"
    />
  </form>
  <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="small" type="primary" @close="doclose(tag)">
      {{ tag }}
    </van-tag>
  </van-col>
</van-row>

  <van-divider content-position="left">已选标签</van-divider>
    <van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex"
:items="tagList"
  />
  </template>

    <script setup>
      import { ref } from 'vue';

      const searchText = ref('');

      const originTagList = [{
        text: '性别',
      children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
      { text: '嬲', id: '嬲' },
      ],
      }, {
        text: '年级',
      children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
      { text: '大五', id: '大五' },
      { text: '大六', id: '大六' },
      ],
      },
      ];
      //标签列表
      let tagList = ref(originTagList);
      /**
      *  搜索过滤
      * @param val
      */
      const onSearch = (val) => {
        tagList.value = originTagList.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 = originTagList;
      };


      //已选中的标签
      const activeIds = ref([]);
      const activeIndex = ref(0);


      //关闭标签
      const  doclose = (tag) =>{
        activeIds.value = activeIds.value.filter(item =>{
          return item !== tag;
        })
                                                
      }
                                           
    </script>
                                          
    <style scoped>
                                         
    </style>

用户信息页

在vant文档里寻找到适合的组件来编写用户信息页面，这里选择了cell单元格，将其黏贴到UserPage.vue中

在这里插入图片描述

在src目录下建立models目录，并创建user.d.ts文件，将规范粘贴进去并适当修改如下

/**
 * 用户类别
 */
export type CurrentUser = {
    id: number;
    username: string;
    userAccount: string;
    avatarUrl?: string;
    gender: number;
    phone: string;
    email: string;
    userStatus: number;
    userRole: number;
    planetCode: string;
    tags: string[];
    createTime: Date;
};

在UserPage.vue中引入，自己写点假数据

<template>
  <van-cell title="昵称" is-link to='/user/edit' :value="user.username"/>
  <van-cell title="账号" is-link to='/user/edit' :value="user.userAccount" />
  <van-cell title="头像" is-link to='/user/edit'>
    <img style="height: 48px" :src="user.avatarUrl"/>
  </van-cell>
  <van-cell title="性别" is-link to='/user/edit' :value="user.gender" />
  <van-cell title="电话" is-link to='/user/edit' :value="user.phone" />
  <van-cell title="邮箱" is-link to='/user/edit' :value="user.email" />
  <van-cell title="星球编号" :value="user.planetCode" />
  <van-cell title="注册时间" :value="user.createTime.toISOString()" />
</template>

<script setup>
const user = {
  id: 1,
  username: '阿尼亚',
  userAccount: 'aniya',
  avatarUrl: 'https://profile.csdnimg.cn/2/B/1/1_qq_56098191',
  gender: '男',
  phone: '12131133313',
  email: '23432444@qq.com',
  planetCode: '2220',
  createTime: new Date(),
};
</script>

<style scoped>

</style>

编辑页面

新建一个用户编辑页,命名为UserEditPage.vue

在route.ts添加新路由

在这里插入图片描述

对UserPage.vue和UserEditPage.vue进行修改 UserPage.vue：

在这里插入图片描述

UserEditPage页面添加form表单，并完成获取数值和修改。

<template>
  <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>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {ref} from "vue";
const route = useRoute();
const editUser = ref({
  editKey: route.query.editKey,
  currentValue: route.query.currentValue,
  editName: route.query.editName,
})
const onSubmit = (values) => {
  //todo 把editKey currentValue editName提交到后台
  console.log('onSubmit',values);
}

</script>

在这里插入图片描述

页面返回

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1695357.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库-SQL性能分析

数据库-SQL性能分析

SQL执行频率 慢查询日志 慢查询日志记录了所有执行时间超过指定参数&#xff08;long_query_time&#xff0c;单位&#xff1a;秒&#xff0c;默认10秒&#xff09;的所有 SQL语句的日志。 MySQL的慢查询日志默认没有开启&#xff0c;我们可以查看一下系统变量 slow_query_l…
阅读更多...
leetcode328. 奇偶链表，附详细解析和代码注释

leetcode328. 奇偶链表，附详细解析和代码注释

leetcode328. 奇偶链表 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推。 请注意&#xff0…
阅读更多...
初出茅庐的小李博客之用MQTT.fx软件进行消息发布与订阅【 基于EMQX Cloud】

初出茅庐的小李博客之用MQTT.fx软件进行消息发布与订阅【 基于EMQX Cloud】

MQTT.fx软件使用简单介绍 MQTT.fx 的软件界面如下图所示&#xff0c;最上方为 MQTT Broker 连接地址栏&#xff0c;及其连接配置。其下方功能 Tabs 含有 Publish 发布栏、Subscribe 订阅栏、Scripts 脚本栏、Broker Status 状态消息栏、Log 日志信息控制栏。 连接之前要明确几…
阅读更多...
惊艳的数据大屏ui设计风格

惊艳的数据大屏ui设计风格

阅读更多...
Distributed Transactions Mit 6.824

Distributed Transactions Mit 6.824

Topic1&#xff1a;distributed transactions concurrency control atomic commit 传统计划&#xff1a;事务 程序员标记代码序列的开始/结束作为事务。 事务示例 x 和 y 是银行余额——数据库表中的记录。x 和 y 位于不同的服务器上&#xff08;可能在不同的银行&#x…
阅读更多...
NDIS小端口驱动(九)

NDIS小端口驱动(九)

PCIe设备难免会遇到一些重置设备的请求&#xff0c;例如重置总线的时候&#xff0c;但是由于NIC网卡的多样性&#xff0c;重置设备确实也有许多要注意的地方&#xff0c;另外还有一些包含WDM的NDIS驱动 微型端口驱动程序硬件重置 微型端口驱动程序必须向 NdisMRegisterMinipo…
阅读更多...
10款免费黑科技软件，强烈推荐！

10款免费黑科技软件，强烈推荐！

1.AI视频生成——巨日禄 网页版https://aitools.jurilu.com/ "巨日禄 "是一款功能强大的文本视频生成器&#xff0c;可以快速将文本内容转换成极具吸引力的视频。操作简单&#xff0c;用户只需输入文字&#xff0c;选择喜欢的样式和模板&#xff0c; “巨日禄”就会…
阅读更多...
qemu+gdb调试linux内核

qemu+gdb调试linux内核

打开CONFIG_DEBUG_INFO，编译内核 通过图形菜单配置该宏，执行make menuconfig。 kernel hacking —> compile-time checks and compiler options —> compile the kernel with debug info 验证是否打开成功，grep -nr “CONFIG_DEBUG_INFO” .config。 打开成功，然后…
阅读更多...
初识Spring Boot

初识Spring Boot

初识Spring Boot SpringBoot是建立在Spring框架之上的一个项目,它的目标是简化Spring应用程序的初始搭建以及开发过程。 对比Spring Spring Boot作为Spring框架的一个模块&#xff0c;旨在简化Spring应用程序的初始搭建和开发过程&#xff0c;以下是Spring Boot相对于传统Spri…
阅读更多...
【通义千问—Qwen-Agent系列2】案例分析（图像理解图文生成Agent||多模态助手|| 基于ReAct范式的数据分析Agent）

【通义千问—Qwen-Agent系列2】案例分析（图像理解图文生成Agent||多模态助手|| 基于ReAct范式的数据分析Agent）

目录 前言一、快速开始1-1、介绍1-2、安装1-3、开发你自己的Agent 二、基于Qwen-Agent的案例分析2-0、环境安装2-1、图像理解&文本生成Agent2-2、 基于ReAct范式的数据分析Agent2-3、 多模态助手 附录1、agent源码2、router源码 总结 前言 Qwen-Agent是一个开发框架。开发…
阅读更多...
iZotope RX 11 for Mac：音频修复的终极利器

iZotope RX 11 for Mac：音频修复的终极利器

在音频处理的世界里&#xff0c;纯净与清晰是每一个创作者追求的目标。iZotope RX 11 for Mac&#xff0c;这款专为Mac用户打造的音频修复软件&#xff0c;凭借其卓越的音频修复能力和丰富的功能&#xff0c;已经成为众多音频工程师和音乐制作人的首选工具。 iZotope RX 11 for…
阅读更多...
线程生命周期

线程生命周期

创建线程的两种方法 1.继承Thread类 2.实现Runnable接口 线程从创建到消亡分为新建、就绪、运行、阻塞、死亡5种状态。 新建状态 创建一个线程就处于新建状态。此时线程对象已经被分配了内存空间&#xff0c;并且私有数据也被初始化&#xff0c;但是该线程还不能运行。 就…
阅读更多...
nodeJs学习（第一周）

nodeJs学习（第一周）

文章目录 学习总结nodejs基础知识核心模块&#xff08;内置模块&#xff09;fs&#xff08;file-system&#xff09;文件系统fs增删查改urlQuery String httprequest根据不同的请求路径发送不同的响应结果requireip地址和端口号Content-Type 第三方模块 express登录接口逻辑分析…
阅读更多...
【LeetCode:2769. 找出最大的可达成数字 + 模拟】

【LeetCode:2769. 找出最大的可达成数字 + 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
MySQL--执行计划

MySQL--执行计划

一、执行计划 1.介绍 执行计划是sql在执行时&#xff0c;优化器优化后&#xff0c;选择的cost最低的方案 通过desc、explain可以查看sql的执行计划 2.如何查看执行计划 table语句操作的表&#xff0c;在多表时才有意义type查找类型possible_keys可能会用到的索引key最终选择的…
阅读更多...
基于python数据挖掘在淘宝评价方面的应用与分析，技术包括kmeans聚类及情感分析、LDA主题分析

基于python数据挖掘在淘宝评价方面的应用与分析，技术包括kmeans聚类及情感分析、LDA主题分析

随着电子商务的蓬勃发展&#xff0c;淘宝作为中国最大的在线购物平台之一&#xff0c;吸引了大量的消费者进行购物并留下了大量的客户评价。这些客户评价中包含了丰富的消费者意见和情感信息&#xff0c;对于商家改进产品、提升服务质量以及消费者决策都具有重要的参考价值。 …
阅读更多...
JVM学习-垃圾回收(一)

JVM学习-垃圾回收(一)

什么是垃圾 垃圾是指在运行程序中没有任何指针指向的对象&#xff0c;这个对象就是需要被回收的垃圾如果不及时对内存的垃圾进行清理&#xff0c;垃圾对象所占用的内存空间会一直保留到应用程序结束&#xff0c;被保留的空间无法被其它对象所用&#xff0c;甚至可能导致内存溢…
阅读更多...
视频批量剪辑神器大揭秘：一键删减片头片尾，高效打造精彩视频内容！

视频批量剪辑神器大揭秘：一键删减片头片尾，高效打造精彩视频内容！

在数字化时代的浪潮中&#xff0c;视频已经成为人们传递信息、分享生活的重要载体。无论是制作一部精美的宣传片&#xff0c;还是剪辑一段有趣的短视频&#xff0c;视频时长都是至关重要的因素。然而&#xff0c;很多视频创作者在调整视频时长时遇到了困难&#xff0c;耗费了大…
阅读更多...
实体-联系图

实体-联系图

为了把用户的数据要求清楚、准确地描述出来,系统分析员通常建立一个概念性的数据模型(也称为信息模型)。概念性数据模型是一种面向问题的数据模型,是按照用户的观点对数据建立的模型。它描述了从用户角度看到的数据,它反映了用户的现实环境, 而且与在软件系统中的实现方法无关。…
阅读更多...
计算几何-扫描线算法

计算几何-扫描线算法

1、定义 计算几何中&#xff0c;扫描线算法&#xff08;Sweep Line Algorithm&#xff09;或平面扫描算法&#xff08;Plane Sweep Algorithm&#xff09;是一种算法模式&#xff0c;虚拟扫描线或扫描面来解决欧几里德空间中的各种问题&#xff0c;一般被用来解决图形面积&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023