纯JS实现人员查询系统 | 无需后端和数据库

2022年09月13日 10:52

我正在学习《SSR 实战：官网开发指南》小册！字节跳动前端开发工程师祯民，带你基于 SSR 技术，全链路还原官网实际开发场景！现在 6 折优惠，仅需 17.94 元哦～微信图片_20220920110236.jpg

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

如果一个班级、一个小型公司，人数只有几十个，为了让大家了解每个人的职责，用数据库感觉有点太多余了，所以使用JS来实现。

材料不知道交给谁，搜索就可以显示出来给谁，负责人忘记事情给谁负责？把每个人负责的事情写进去，等需要找人的时候直接搜索。

QQ录屏20220913102334.gif

原理就是把姓名、职位或者介绍写在JavaScript里，姓名前面加#就是定义名字，下一行就是职位或者介绍。

这里就写一小部分。

在线体验

设计

标题

写标题就相当于是一个简易的教程，大概告诉他功能。

<h1>查询系统</h1>
复制代码

h1 {
    text-align: center;
    color: red;
    margin-top: 60px;
}
复制代码

查询盒子

desc部分是显示区域，将找到的职位或者介绍显示在此地。

<div class="box">
    <input class="word" type="text" placeholder="请输入名字">
    <div class="desc"></div>
</div>
复制代码

.box {
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: lightblue;
    border: 1px solid #000;
    margin: 100px auto 0;
    border-radius: 20px;
}

.word {
    width: 200px;
    height: 30px;
    font-size: 18px;
    outline: none;
    border: none;
    padding-left: 8px;
    box-sizing: border-box;
    border-radius: 10px;
}

.desc {
    width: 200px;
    height: 150px;
    margin-top: 20px;
    background-color: lightgreen;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}
复制代码

到这里制作是算制作好了

看一下总体效果吧！

差不多差不多，能用就行。

功能

数据

查询肯定是先要有数据，数据使用字符串格式，使用#和换行区分，#是名字，换行是职位或介绍。

格式大概就是这种。

#对应名字，换行就是介绍。

查找

数据有了，现在需要把数据找出来，怎么找呢？

首先把数据进行分割，用换行为条件进行分割。

let arr = word.split("\n");
复制代码

现在得到的数据是这样的

创建一个Map，用来存放职位名字对应的职位。

let map = new Map();
复制代码

使用for循环，把#后面的添加进去，再把下一行的职位或者介绍添加进去。

for (let i = 0; i < arr.length - 1; i += 2) {
    map.set(arr[i].substring(1), arr[i + 1]);
}
复制代码

这样我们的map数据就是这样的格式。

显示

获取输入框和显示区域

let oWord = document.querySelector('.word');
let oDesc = document.querySelector('.desc');
复制代码

键盘弹起一次，在map里面查找input里输入的字符。

如果找到返回字符对应的值，没有找到则返回“库里没有这个人”

oWord.onkeyup = function() {
    let value = map.get(this.value);
    if (value) {
        oDesc.innerHTML = value;
    } else {
        oDesc.innerHTML = "库里没有这个人";
    }
}
复制代码

总结

这东西总体来说是非常简单的，可以实现一些没必要用后端的小功能，比如我把我的朋友和同学都录进去了，是不是觉得没必要。其实不然，我们需要收集材料，这种材料那种材料，非常多，所以使用这个可以很好的找到材料需要交给谁。

QQ录屏20220913104328.gif

总体来说还是可以的