jQuery实现本地存储用户管理后台

 

目录

一、本项目基于jQuery实现的对本地存储增删改查功能

1、效果图 

本项目适应于没有后端，用假数据渲染测试 

二、实现的功能 

1、新增用户，判断是否空，判断是否有重复用户名，渲染数据

2、删除用户，渲染数据

3、修改用户，判断是否重复用户名，判断是否修改，渲染数据

4、查询用户，查询所有用户名包含的字符，渲染，可以修改，删除用户，当查询框空时渲染全部 

三、具体代码

 1、本项目引入阿里图标库的几个图标

 2、HTML代码

 3、CSS代码

 4、jQuery代码

四、不懂地方可留言 

---

一、本项目基于jQuery实现的对本地存储增删改查功能

1、效果图 

 

本项目适应于没有后端，用假数据渲染测试 

二、实现的功能 

1、新增用户，判断是否空，判断是否有重复用户名，渲染数据

2、删除用户，渲染数据

3、修改用户，判断是否重复用户名，判断是否修改，渲染数据

4、查询用户，查询所有用户名包含的字符，渲染，可以修改，删除用户，当查询框空时渲染全部 

三、具体代码

 1、本项目引入阿里图标库的几个图标

     

 2、HTML代码

 

<div class="first">
	<a class="adduser_btn"><i class="iconfont icon-tianjia"></i>添加用户</a>
	<input type="text" placeholder="请输入用户名" class="search_user">
    <a class="search_btn"><i class="iconfont icon-sousuo"></i>查询</a> 
	<div class="userlist">
		<div class="wrap">
			<span>id</span>
			<span>username</span>
			<span>userpwd</span>
		</div>
        <!--用户列表 -->
		<div class="item"></div>
	</div>
</div>
<!-- 修改、新增共用弹窗 -->
<div class="adduser_box"></div>
<!-- 遮罩 -->
<div class="zezao"></div>

 3、CSS代码

* {
				margin: 0;
				padding: 0;
			}

			.adduser_btn {
				background-color: rgb(50, 122, 183);
				color: white;
				display: block;
				padding: 10px;
				width: 80px;