likes
comments
collection

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

作者站长头像
站长
· 阅读数 12

我正在学习《SSR 实战:官网开发指南》小册!字节跳动前端开发工程师祯民,带你基于 SSR 技术,全链路还原官网实际开发场景!现在 6 折优惠,仅需 17.94 元哦~ 纯JS实现人员查询系统 | 无需后端和数据库

前言

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

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

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

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

这里就写一小部分。

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

在线体验

设计

标题

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

<h1>查询系统</h1>
h1 {
    text-align: center;
    color: red;
    margin-top: 60px;
}

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

查询盒子

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;
}

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

到这里制作是算制作好了

看一下总体效果吧!

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

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

功能

数据

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

格式大概就是这种。

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

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

查找

数据有了,现在需要把数据找出来,怎么找呢?

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

let arr = word.split("\n");

现在得到的数据是这样的

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

创建一个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数据就是这样的格式。

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

显示

获取输入框和显示区域

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 = "库里没有这个人";
    }
}

总结

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

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

总体来说还是可以的