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

心链——伙伴匹配系统

接口调试

说书人📖：上回书说到用了两种方法查询标签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>

在这里插入图片描述

页面返回

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

（十一）统计学基础练习题五（50道选择题）

（十一）统计学基础练习题五（50道选择题）

本文整理了统计学基础知识相关的练习题&#xff0c;共50道&#xff0c;适用于想巩固统计学基础或备考的同学。来源&#xff1a;如荷学数据科学题库&#xff08;技术专项-统计学二&#xff09;。序号之前的题请看往期文章。 201&#xff09; 202&#xff09; 203&#xff09; 2…
阅读更多...
指纹识别概念解析

指纹识别概念解析

目录 1. 指纹是物证之首 1.1 起源于中国 1.2 发展于欧洲 1.3 流行于全世界 2. 指纹图像 3. 指纹特征 4. 指纹注册 5. 指纹验证 6. 指纹辨识 1. 指纹是物证之首 指纹识别技术起源于中国、发展于欧洲、流行于全世界。自20世纪以来&#xff0c;指纹在侦破刑事案件、解决诉…
阅读更多...
《图解支付系统设计与实现》电子书_V20240525

《图解支付系统设计与实现》电子书_V20240525

相较于上次公开发布的V20240503版本&#xff0c;变更内容如下&#xff1a; 根据掘金网友zz67373&#xff08;李浩铭&#xff09;的勘误建议&#xff0c;优化了部分描述。增加&#xff1a;金额处理规范&#xff0c;低代码报文网关实现完整代码&#xff0c;分布式流控等内容。扩…
阅读更多...
CSS语法介绍

CSS语法介绍

文章目录 前言一、CSS引入方式1.行内操作2.内部操作3.外部操作 二、常用选择器1.标签选择器2.类选择器3.id选择器4.群组选择器5.后代选择器 三、字体常用设置1.字体类型2.字体大小3.字体样式4.字体粗细 四、div盒子模型1.盒子边框2.外边距3.内边距4.浮动 综合实战案例 前言 以…
阅读更多...
每日一题 求和

每日一题 求和

1.题目解析 求和_牛客题霸_牛客网 (nowcoder.com) 这一题&#xff0c;主要描述的就是求满足和为m的子序列&#xff0c;对与子序列的问题可以使用决策树。 2.思路分析 决策树如下图所示: 递归结束条件&#xff1a; 当当前和 sum 等于目标和 m 时&#xff0c;说明找到了一个满…
阅读更多...
Java+Swing+Mysql实现飞机订票系统

Java+Swing+Mysql实现飞机订票系统

一、系统介绍 1.开发环境 操作系统&#xff1a;Win10 开发工具 &#xff1a;Eclipse2021 JDK版本&#xff1a;jdk1.8 数据库&#xff1a;Mysql8.0 2.技术选型 JavaSwingMysql 3.功能模块 4.数据库设计 1.用户表&#xff08;users&#xff09; 字段名称 类型 记录内容…
阅读更多...
aws 接入awsIOT平台的证书签发逻辑

aws 接入awsIOT平台的证书签发逻辑

参考资料 https://aws.amazon.com/cn/blogs/china/certification-vending-machine-intelligent-device-access-aws-iot-platform-solution/ IoT 设备与 AWS IoT Core 的 MQTT 通信使用基于证书的 TLS 1.2双向认证体系。所谓的双向认证&#xff0c;即意味着 IoT 设备端需安装 …
阅读更多...
Redis 性能管理

Redis 性能管理

一、Redis 性能管理 #查看Redis内存使用 172.168.1.11:6379> info memory 1. 内存碎片率 操作系统分配的内存值 used_memory_rss 除以 Redis 使用的内存总量值 used_memory 计算得出。内存值 used_memory_rss 表示该进程所占物理内存的大小&#xff0c;即为操作系统分配给…
阅读更多...
谈谈你对 vue 的理解 ？

谈谈你对 vue 的理解 ？

1.谈谈你对 vue 的理解 ？ 官方： Vue是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层 2. 声明式框架 Vue 的核心特点，用起来简单。那我们就有必要知道命令式和声明式的区别！ 早在 JQ 的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程 声明…
阅读更多...
13个PyTorch深度学习案例简介

13个PyTorch深度学习案例简介

本文整理《PyTorch深度学习与企业级项目实战》中项目案例所使用的模型&#xff0c;方便大家在学习、研究深度学习过程中做训练使用&#xff0c;这些案例也适合作为课程论文、毕业论文的素材&#xff0c;值得收藏和推荐。 第6章 迁移学习花朵识别项目实战 花朵数据集 ResNet…
阅读更多...
Unity射击游戏开发教程：（26）创建绕圈跑的效果

Unity射击游戏开发教程：（26）创建绕圈跑的效果

unity游戏 在本文中，我将介绍如何为敌人创建圆周运动。gif 中显示的确切行为是敌人沿着屏幕向下移动，直到到达某个点，一旦到达该点，它就会绕圈移动。
阅读更多...
F28034中断

F28034中断

DSP中断 中断中断概述中断机制 中断 当CPU正在执行程序时&#xff0c;由于发生了某种随机的事件&#xff08;外部或内部&#xff09;&#xff0c;使CPU的执行中断&#xff0c;转而去执行某一段特殊的程序&#xff08;中断子程序或中断处理程序&#xff09;&#xff0c;以处理该…
阅读更多...
LeetCode算法题：42. 接雨水（Java）

LeetCode算法题：42. 接雨水（Java）

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…
阅读更多...
（完全解决）Python字典dict如何由键key索引转化为点.dot索引

（完全解决）Python字典dict如何由键key索引转化为点.dot索引

文章目录 背景解决方案基础版升级版 背景 For example, instead of writing mydict[‘val’], I’d like to write mydict.val. 解决方案 基础版 I’ve always kept this around in a util file. You can use it as a mixin on your own classes too. class dotdict(dict)…
阅读更多...
前端 JS 经典：Web 性能指标

前端 JS 经典：Web 性能指标

什么是性能指标&#xff1a;Web Performance Metrics 翻译成 Web 性能指标&#xff0c;一般和时间有关系&#xff0c;在短时间内做更多有意义的事情。 一个站点表现得好与不好&#xff0c;标准在于用户体验&#xff0c;而用户体验好不好&#xff0c;有一套 RAIL 模型来衡量。这…
阅读更多...
基于SpringBoot的网盘系统设计与实现

基于SpringBoot的网盘系统设计与实现

第1章 绪论... 1 1.1 研究背景与意义... 1 1.1.1 研究背景... 1 1.1.1 研究意义... 1 1.2 国内外研究现状... 2 1.2.1 国内研究现状... 2 1.2.2 国外研究现状... 3 1.3 论文组织架构... 4 第2章 关键技术介绍... 5 2.1 SpringBoot. 5 2.2 MySQL数据库... 5 2.3 MVC架…
阅读更多...
Altium Designer 中键拖动，滚轮缩放，并修改缩放速度

Altium Designer 中键拖动，滚轮缩放，并修改缩放速度

我的版本是AD19&#xff0c;其他版本应该都一样。 滚轮缩放 首先&#xff0c;要用滚轮缩放&#xff0c;先要调整一下AD 设置&#xff0c;打开Preferences&#xff0c;在Mouse Wheel Configuration 里&#xff0c;把Zoom Main Window 后面Ctrl 上的对勾取消掉&#xff0c;再把…
阅读更多...
下载和安装AD19 - Altium Designer 19.1.9 Build 167

下载和安装AD19 - Altium Designer 19.1.9 Build 167

虽然有AD24 的安装资源&#xff0c;但是我比较喜欢19 这个数字[doge] 下载 仍然是从毛子网站源头进货&#xff1a;https://rutracker.net/forum/viewtopic.php?t5754276&#xff0c;网盘: https://pan.baidu.com/s/1ic31N4h7HS2FBu7JFll0YQ?pwdvjum 提取码: vjum 安装 压…
阅读更多...
IDEA主题Drcula个性化改造

IDEA主题Drcula个性化改造

Darcula 主题整体色调看着舒服&#xff0c;但是代码区分不直观&#xff0c;比如直接看代码是看不出这个这个是类、接口、抽象类、枚举还是啥&#xff0c;而且左侧图标也很难区分。 该主题基于Darcula主题对类、接口、抽象类、注解在编辑区按颜色做了区分&#xff0c;同时图标也…
阅读更多...
Nature期刊的等级和分类

Nature期刊的等级和分类

Nature期刊不用过多介绍&#xff0c;学术界人员都对其有所了解&#xff0c;可以和Science&#xff0c;Cell比肩&#xff0c;Nature旗下创办了很多子刊&#xff0c;系列期刊有一百多种&#xff0c;当然其含金量各有不同&#xff0c;nature旗下的期刊等级你是否都了解了。 Nature…
阅读更多...
最新文章

Copyright @ 2022~2023