用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除

最新推荐文章于 2022-05-10 13:28:06 发布

Dewey666

最新推荐文章于 2022-05-10 13:28:06 发布

阅读量4.6k

点赞数 1

分类专栏：效果初现工程搭建文章标签： AngularJS+路由ngRoute 模糊查询修改密码批量和全部删除非空验证添加

本文链接：https://blog.csdn.net/IT666DHW/article/details/78303980

版权

效果初现同时被 2 个专栏收录

107 篇文章 3 订阅

订阅专栏

工程搭建

36 篇文章 0 订阅

订阅专栏

需求：

1. 搭建页面

2. 显示所有用户信息

3. 根据用户名实现用户查询显示

4. 根据年龄范围下拉菜单实现用户显示

5. 根据用户年龄实现用户显示

6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。

7. 点击添加用户，下方页面显示添加用户界面，填写用户信息，满足条件如下进行添加

a) 用户名非空

b) 两次密码一致

c) 年龄在10到60之间

8. 点击修改密码按钮，下方页面显示修改密码页面（如下），默认把要修改的用户名显示在用户名输入框，并且不能更改用户名，实现密码修改，要求如下

a) 旧密码要跟之前的密码一致

b) 两次输入的密码一致。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除</title>
    <style type="text/css">
        .addUser{
            font-size: 18px;
            background-color: #0c60ee;
        }
    </style>
        <!--    导入AngularJS+路由ngRoute 库文件-->
    <script src="../js/angular.js"></script>
    <script src="../js/angular-route.js"></script>
    <script>
        var app = angular.module("myApp",['ngRoute']);
        // 0 .使用config配置路由规则
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                .when("/addUser",{               //添加用户 路由地址
                    controller:"addUserCtrl",
                    templateUrl:"addUser.html"
                })
                .when("/updatePwd/:name",{       //修改密码 路由地址
                    controller:"updatePwdCtrl",
                    templateUrl:"updatePwd.html"
                })
                .otherwise({redirectTo:"/addUser"});
        }]);

        // 1. 主控制器
        app.controller("myCtrl",function ($scope,$location) {
            $scope.users = [
                {
                    "id": 1,
                    "name":"张三",
                    "pwd":"123",
                    "age":22,
                    "sex":"男",
                    "state":false
                },
                {
                    "id": 2,
                    "name":"李四",
                    "pwd":"456",
                    "age":33,
                    "sex":"女",
                    "state":false
                },
                {
                    "id": 3,
                    "name":"王五",
                    "pwd":"789",
                    "age":44,
                    "sex":"男",
                    "state":false
                }
            ];

            //定义页面跳转方法：给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址
            $scope.goToUrl = function (path) {
                $location.path(path);
            }

            //点击全部删除按钮的点击事件
            $scope.del = function () {
                if(confirm("确定全部删除吗？")){
                    $scope.users = [];
                }
            }

            //点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息
            $scope.deleteSel = function () {
                var userNames = [];         //定义空数组，保存选中项的name
                //根据下标遍历数据源，把选中项的名字添加到数组中。
                for (index in $scope.users) {
                    //判断选项是否为选中的的状态？
                    if($scope.users[index].state == true){
                        userNames.push($scope.users[index].name);
                    }
                }
                //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。
                if(userNames.length > 0){
                    if (confirm("是否删除选中项？")){
                        for(i in userNames){
                            var name = userNames[i];
                            //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。
                            for(i2 in $scope.users){
                                if($scope.users[i2].name == name){
                                    $scope.users.splice(i2,1);
                                }
                            }
                        }
                    }
                }else {
                    alert("请选择要删除的项");
                }
            }
            //复选框全选按钮的全选方法
            $scope.selectAll = false;
            $scope.selectAllFun = function () {
                if ($scope.selectAll){
                    //如果点击全选按钮，就把数组的state状态变为true
                    for(index in $scope.users){
                        $scope.users[index].state = true;
                    }
                }else {
                    for(index in $scope.users){
                        $scope.users[index].state = false;
                    }
                }
            }

            //根据数组的角标检测内容是否全选
            $scope.checkSelect = function (index) {
                var temp = 0;
                if($scope.users[index].state == true){
                    temp++;
                }else {
                    temp--;
                }

                if (temp == $scope.users.length){
                    $scope.selectAll = true;
                }else {
                    $scope.selectAll = true;
                }

                var checkState = false;
                for(i in $scope.users){
                    if($scope.users[i].state == true){

                    }else {
                        checkState = true;
                    }
                }
                if(checkState){
                    $scope.selectAll = false;
                }else {
                    $scope.selectAll = true;
                }
            }

            //确定年龄范围的点击事件
            $scope.ageSize = "---请选择---";
            $scope.ageTest = function (age,ageSize) {
                if(ageSize == "---请选择---"){
                    return true;
                }else {
                    var arr  = ageSize.split("-");
                    var ageMin = arr[0];
                    var ageMax = arr[1];
                    if(age >= ageMin  &&  age <= ageMax){
                        return true;
                    }else {
                        return false;
                    }
                }
            }

            //根据性别选择用户信息的点击事件
            $scope.sexSize = "---请选择---";
            $scope.sexTest = function (sex,sexSize) {
                if(sexSize == "---请选择---"){
                    return true;
                }else {
                    if(sex == sexSize){
                        return true;
                    }else {
                        return false;
                    }
                }
            }
        });

        // 2 .定义添加用户界面控制器
        app.controller("addUserCtrl",function ($scope) {
            $scope.name = "";
            $scope.pwd1 = "";
            $scope.pwd2 = "";
            $scope.age = "";
            $scope.sex = "";
            $scope.state = false;
            //点击添加用户信息的按钮,验证非空情况后，再添加
            $scope.sub = function () {
                $scope.flag1 = false;
                $scope.flag2 = false;
                $scope.flag3 = false;
                $scope.flag4 = false;
                $scope.flag5 = false;
                $scope.flag6 = false;
                //a)用户名非空
                if ($scope.name == null || $scope.name == ""){
                    alert("用户名不得为空！");
                }else {
                    $scope.flag1 = true;
                }

                //b)密码长度
                if ($scope.pwd1 == null || $scope.pwd1 == ""){
                    alert("密码不能为空！");
                }else if($scope.pwd1.length < 6){
                    alert("密码长度不能小于6位！");
                }else {
                    $scope.flag2 = true;
                }
                //确认密码
                if ($scope.pwd2 == null || $scope.pwd2 == ""){
                    alert("确认密码不能为空！");
                }else if($scope.pwd2 != $scope.pwd1 ){
                    alert("两次密码输入不一致！");
                }else {
                    $scope.flag3 = true;
                }

                //c)年龄在10到60之间
                if ($scope.age == "" || $scope.age == null){
                    alert("年龄不能为空！");
                }else if ($scope.age < 10 || $scope.age > 60){
                    alert("年龄必须在10到60之间！");
                }else {
                    $scope.flag4 = true;
                }
                //判断年龄是否包含字母（汉字）
                //定义正则表达式
                var reg = /\D/;
                if(reg.test($scope.age)) {
                    alert("年龄不能含字母！");
                }else {
                    $scope.flag5 = true;
                }

                if ($scope.sex == null || $scope.sex == ""){
                    alert("性别不得为空！");
                }else if($scope.sex != "男" && $scope.sex != "女"){
                    alert("请正确填写性别！");
                }else {
                    $scope.flag6 = true;
                }

                if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true){
                    alert("注册成功！");
                    //注册成功后清空信息
                    var inputs = document.getElementsByTagName("input");
                    for(i=0;i<inputs.length;i++){
                        inputs.item(i).value = "";
                    }

                    var newUser = {
                                id:$scope.users.length + 1,
                                name:$scope.name,
                                pwd:$scope.pwd1,
                                age:$scope.age,
                                sex:$scope.sex,
                                state:$scope.state
                            }
                            //添加新用户
                            $scope.users.push(newUser);
                }else {
                    return false;
                }
            }
        });

        // 3. 定义修改用户控制器:传入路由参数
        app.controller("updatePwdCtrl",function ($scope,$routeParams) {
            var name = $routeParams.name;        //获得要修改的用户的用户名
            $scope.name = name;                  //将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。
            $scope.oldPwd = "";                  //原来的旧密码
            $scope.newOldPwd = "";               //现在重新的旧密码
            $scope.pwd1 = "";                    //双向数据绑定用户输入的新密码
            $scope.pwd2 = "";                    //用户输入的第二次 确认密码

            //点击修改密码按钮，执行修改密码方法
            $scope.updatePwd = function () {
                //遍历数据源，拿到当前这个要修改密码的用户,,,取出他的原来的旧密码
                for (var i = 0;i<$scope.users.length;i++){
                    if($scope.name == $scope.users[i].name){
                        $scope.oldPwd = $scope.users[i].pwd;
                    }
                }

                var flag = true ;
                //判断现在重新的旧密码
                if($scope.newOldPwd == "" || $scope.newOldPwd == null){
                    alert("旧密码不能为空！");
                    flag = false;
                }else{
                    //判断原来的旧密码是否和现在输入的旧密码是否一样
                    if($scope.oldPwd == $scope.newOldPwd){

                    }else {
                        alert("旧密码输入错误！");
                        flag = false;
                    }
                }

                //判断新密码
                if($scope.pwd1  == "" || $scope.pwd1  == null){
                    alert("新密码不能为空！");
                    flag = false;
                }

                //判断 确认密码
                if($scope.pwd2  == "" || $scope.pwd2  == null){
                    alert("确认密码不能为空！");
                    flag = false;
                }else{
                    if($scope.pwd2 == $scope.pwd1){

                    }else {
                        alert("确认密码输入错误！");
                        flag = false;
                    }
                }

                if(flag){
                    //遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改
                    for(index in $scope.users){
                        if($scope.users[index].name == name){
                            //获得用户输入的新密码，赋值给当前用户要修改的密码。
                            $scope.users[index].pwd = $scope.pwd1;
                        }
                    }
                }
            }
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <center>
        <h2>用户信息表</h2>

            <!--   1. 用户信息操作界面    -->
        <div>
            <input ng-model="search" placeholder="用户名查询" size="10"/>
            <!--绑定年龄数据，进行查询-->
            年龄：<select id="age" ng-model="ageSize">
                          <option>---请选择---</option>
                          <option>11-20</option>
                          <option>21-30</option>
                          <option>31-40</option>
                          <option>41-50</option>
                          <option>51-60</option>
                 </select>
            <!--绑定性别数据，进行查询-->
            性别：<select  ng-model="sexSize">
                    <option>---请选择---</option>
                    <option>男</option>
                    <option>女</option>
                  </select>
            <button  ng-click="del()">全部删除</button>
            <button  ng-click="deleteSel()">批量删除</button>
        </div>    <br/>
        <div>
            <table border="1" cellspacing="0" cellpadding="18">
                <thead>
                <tr>
                    <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
                    <th>id</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody align="center">
                        <!--   用ng-repaet指令将对象遍历并渲染到页面中    -->
                        <!--   filter指令实现模糊查询name的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息    -->
                    <tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,ageSize)"  ng-show="sexTest(user.sex,sexSize)">
                        <th><input ng-click="checkSelect($index)"  ng-model="user.state" type="checkbox"/></th>
                        <td>{{user.id}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.pwd}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.sex}}</td>
                        <td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
                    </tr>
                </tbody>
            </table>
        </div>  <br/>
        <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button>    <br/><br/>

            <!--    2.添加用户页面 -->
        <script type="text/ng-template" id="addUser.html">
            <form action="#">
                <table border="1" cellspacing="0" cellpadding="18">
                    <tr>
                        <th>用户名：</th>
                        <td><input ng-model="name" placeholder="请输入用户名"/></td>
                    </tr>
                    <tr>
                        <th>密码：</th>
                        <td><input ng-model="pwd1" placeholder="请输入密码"/></td>
                    </tr>
                    <tr>
                        <th>确认密码：</th>
                        <td><input ng-model="pwd2" placeholder="请确认密码"/></td>
                    </tr>
                    <tr>
                        <th>年龄：</th>
                        <td><input ng-model="age" placeholder="请输入年龄"/></td>
                    </tr>
                    <tr>
                        <th>性别：</th>
                        <td><input ng-model="sex" placeholder="请输入性别"/></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2"><button  ng-click="sub()">提交</button></td>
                    </tr>
                </table>
            </form>
        </script>

            <!--  3.修改用户信息页面 -->
        <script type="text/ng-template" id="updatePwd.html">
            <form action="#">
                <table border="1" cellspacing="0" cellpadding="18">
                    <tr>
                        <th>用户名：</th>
                        <td><input  disabled="disabled"  ng-model="name" placeholder="请输入用户名"/></td>
                    </tr>
                    <tr>
                        <th>旧密码：</th>
                        <td><input  ng-model="newOldPwd" placeholder="请输入旧密码"/></td>
                    </tr>
                    <tr>
                        <th>新密码：</th>
                        <td><input ng-model="pwd1" placeholder="请输入新密码"/></td>
                    </tr>
                    <tr>
                        <th>确认密码：</th>
                        <td><input ng-model="pwd2" placeholder="请确认密码"/></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2"><input type="button" ng-click="updatePwd()" value="提交"/></td>
                    </tr>
                </table>
            </form>
        </script>

            <!--    4. 显示指定内容  -->
        <div ng-view>

        </div>
    </center>
</body>
</html>

Dewey666

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除

效果图：代码：html>html lang="en">head> meta charset="UTF-8"> title>用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除title> style type="text/css"> .addUser{ font-size: 18
复制链接

扫一扫