AngularJS 实现管理系统中的增删改查

最新推荐文章于 2018-08-28 14:41:22 发布
最新推荐文章于 2018-08-28 14:41:22 发布
阅读量216 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ljr001/p/7631421.html
版权

  前 言

AngularJS

在一个管理系统中，不外乎都是增删改查。

现在有如下图书管理系统，实现简单的增删改查。

需要用到bootstrap.css 、angular.js和angular-route.js

代码：

<body ng-app="app" ng-controller="ctrl">
        
        <div class="container" >
            <div class="row">
                <div class="col-xs-2">
                    <div class="list-group">
                      <a class="list-group-item active">
                            操作列表
                      </a>
                      <a href="#/" class="list-group-item">返回首页</a>
                      <a href="#/all" class="list-group-item">全部图书</a>
                      <a href="#/add" class="list-group-item">新增图书</a>
                      <a href="#/del" class="list-group-item disabled">删除图书</a>
                      <a href="#/sea" class="list-group-item disabled">查询图书</a>
                    </div>
                    
                    <a class="btn btn-danger" href="login.html" οnclick="xiu()">修改密码</a>
                    <a class="btn btn-danger" href="login.html" οnclick="func()">退出系统</a>
                </div>
                
                <div class="col-xs-10" ng-view>
                    
                </div>    
                
            </div>
        </div>
        
    </body>

CSS代码：

<style type="text/css">
            body{
                margin: 0 auto;
                padding: 0 auto;
                background-color: #F0F2F4;
            }
            .container{
                width: 1000px;
                margin: 50px auto;
            }
            .list-group-item{
                text-align: center;
            }
            .moren{
                height: 400px;
                background-color: grey;
                font-size: 70px;
                color: #FFFFFF;
                text-align: center;
                font-weight: bold;
                line-height: 120px;
                padding-top: 65px;
            }
            .panel-primary .row{
                margin-bottom: 10px;
            }
            
            .btn-danger{
                display: block;
                margin: 40px auto;
            }
            
        </style>

这些是各按钮跳转的页面：

.config(function($routeProvider){
            $routeProvider
            .when("/",{templateUrl:"moren.html"})
            .when("/all",{templateUrl:"showbook.html"})
            .when("/add",{templateUrl:"addbook.html"})
            .when("/del",{template:"这是删除图书页面"})
            .when("/sea",{template:"这是查询图书页面"})
            .when("/update",{templateUrl:"updatebook.html"})
            .otherwise({redirectTo:"/"})
        })

这是系统原有的：

    $scope.bookList = [
                {"name": "姜浩真帅1","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅2","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅3","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅4","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅5","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅6","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅7","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅8","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅9","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅10","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅11","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅12","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅13","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅14","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},
                {"name": "姜浩真帅15","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"}
            ];

添加图书，一个新book

$scope.book={
            "name": "",
            "author": "",
            "date": "",
            "price": "",
            "num": "",
            "printer": ""
        }

提交按钮的函数设为addBook()，设置提交后是否继续添加，否则清零，代码：

    $scope.addBook=function(){
            $scope.bookList.unshift($scope.book)
             if(!confirm("添加成功！是否继续添加！")){
                    $location.path("/all");
                }
             $scope.book={
            "name": "",
            "author": "",
            "date": "",
            "price": "",
            "num": "",
            "printer": ""
        }
             
        }

删除图书比较简单，函数为delBook($index)，用的是splice，代码：

$scope.delBook=function($index){
                  $scope.bookList.splice($index,1);
                 

            }

 

修改按钮函数为loadData($index)，为不妨碍修改项设一个updateIndex=-1，当点击修改时跳到修改页面，页面的内容为点击那一项的原有内容，代码：

    $scope.updateIndex = -1;
            $scope.loadData = function(index){
                $scope.updateIndex = index;
                $scope.book = {
                    "name": $scope.bookList[index].name,
                    "author": $scope.bookList[index].author,
                    "date": $scope.bookList[index].date,
                    "price": $scope.bookList[index].price,
                    "num": $scope.bookList[index].num,
                    "printer": $scope.bookList[index].printer
                }
            }

 

 

 

 提交函数为update()，将bookList[$scope.updateIndex]的内容替换为copy的book

$scope.update = function(){
                $scope.bookList[$scope.updateIndex] = angular.copy($scope.book);
                $location.path("/all");
                $scope.book = {
                    "name": "",
                    "author": "",
                    "date": "",
                    "price": "",
                    "num": "",
                    "printer": ""
                }
            }

查找设定的按书名查找，用到.filter服务

.filter("filterByName",function(){
                return function(bookList,search){
                    if(!search) return bookList;
                    var arr=[]
                    for(var i=0;i<bookList.length;i++){
                        
                var index=    bookList[i].name.indexOf(search);
                if(index>-1){
                    arr.push(bookList[i]);
                    
                  }
                }
                    return arr;
                }
                
            })

 @唯芸熙

 

 

转载于:https://www.cnblogs.com/ljr001/p/7631421.html

weixin_30649859
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angularjs 实现增删改查
01-28
angularjs 实现mysql数据库的增删改查demo 后台使用java
Angular实现的图书管理 demo
waterDjj的博客
10-12 856
1页面的编写 Title 图书列表 编辑 图书名称 价格 数量
angularJS/路由实现增删改查
weikai_的博客
10-22 547
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
AngularJs实现增,删,改,查(全)
baipenggui_bo
12-18 3305
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <...
angularJS简易增删改查
梵韵
03-30 641
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
angularJs实现学生信息的增删改查以及翻页
01-23
总结，AngularJS提供了丰富的功能和工具，使得开发具有增删改查及分页功能的学生信息管理系统变得简单易行。通过合理的数据模型设计、控制器逻辑和视图呈现，可以创建出界面优美、操作流畅的应用。在这个过程中，...
angularjs 实现mysql数据库的增删改查demo 后台使用java.zip
最新发布
06-16
在本项目中，我们探讨了如何使用AngularJS前端框架与Java后端技术相结合，实现对MySQL数据库的增、删、改、查（CRUD）操作。AngularJS是Google推出的一款强大的MVC（Model-View-Controller）框架，常用于构建交互式...
EFCore+WebAPi增删改查
03-20
在本项目中，"EFCore+WebApi增删改查"是一个使用Entity Framework Core（简称EFCore）和Web API技术构建的.NET应用示例。这个框架主要用于演示如何通过Web服务接口进行数据操作，如添加、删除、修改和查询，前端展示...
angularJS实现增删改查等
weikai_的博客
10-22 976
html> html lang="en"> head> meta charset="UTF-8"> title>weicytitle> script src="angular.js">script> script> var app = angular.module("myApp",[]); app.controller("myCtrl
angularjs之增删改查2
天纵神武的博客
10-22 201
html> html> head> meta charset="utf-8" /> title>Angularjs的增删改查，排序，查询年龄范围title> //需要导入angular.js库文件 script type="text/javascript" src="angular-1.3.0.js">script> script type="text
图书馆信息管理系统
01-03
【系统实现功能】 1、图书管理员处理系统。 （1）用户信息管理：①批量创建普通读者账号（用户名为学生学号，用户密码可统一初始化。并将用户信息存储到文件“userinfo.dat”中），②批量删除普通读者账号，③可重置单个用户密码。 （2）图书信息管理：①新书入库。书籍信息可保存到文件“bookinfo.dat”中。②图书信息查询。支持以下几种查询方式：(a)按书名查询（精确查找，或模糊查找） (b)按作者名查询(c)按出版社查询(d)按书名和作者名查询（多条件查询）。③图书信息修改，④旧书下架。将指定图书删除，可(a)按书名删除（单种删除），或(b)按出版时间删除（批量删除）。 2、普通读者管理系统。 （1）用户信息管理。用户可更改自己账号的密码。 （2）查询图书信息。支持的查询方式同管理员模式下的查询功能。 3、扩展功能：可以按照自己对图书管理系统的理解和解决问题的程度对系统进行扩展。比如：（1）支持新书批量导入(从文件中导入)；（2）可以添加“学生借阅图书信息”的管理模块；统计功能等。总之，可以根据自己需求进行分析功能。
Angular+SpringBoot 学校期末作业(图书管理)
10-30
比较久之前写的作业了， 今天上传到CSDN上面来纪念一下。 当时和朋友一起肝作业的时光挺有意思的，转眼间大四快要走完一半了。 大学时光是真的很不错， 希望离毕业还早的同学们加油！！
设计一个图书管理系统，实现增删改查，借书还书等操作
11-10
需要完成的任务 ：该系统的基本需求是，系统要实现如下的基本管理功能： （1）用户分为两类：系统管理员，一般用户。 （2）提供用户注册和用户登录验证功能；其中一个登录用户的信息有：登录用户名，登录密 码。 （3）管理员可以实现对注册用户的管理（删除），并实现对图书的创建、查询、修改和删除 等有关的操作 （4）一般用户，只能查询图书，并进行借书、还书操作，每个用户最多借阅8 本，即当目前 借书已经是8 本，则不能再借书了，只有还书后，才可以再借阅。 （5）技术实现：基于(JSP+Servlet+JavaBean+DAO+JDBC)的Web 架构设计该系统。
AngularJS实现表格的增删改查（仅限前端）
12-11
用AngularJS实现对表格的增删改查（仅限前端），具体代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/h
angularjs的增删改查
不知道的博客
08-28 631
&lt;!DOCTYPE html&gt; &lt;html ng-app="xsk"&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&
angularjs实现 - 增删改查+排序+敏感字（最终版）
人走丿茶凉
10-26 2368
本篇博客将要实现的效果，包括添加信息、修改信息、查询信息、删除信息、对信息排序/敏感字过滤！与上一篇文章不同的是：优化了界面效果，实现敏感字过滤，bug修复将要用到：HTML，CSS，AngularJS，jQuery先来看一下主界面效果： 新增订单表单界面： 修改订单信息界面： 想要实现所有的功能，要实现以下几点： 首先看一下主界面实现的代码（HTML文件）：<!DOCTYPE html>
angularjs增删改查
qq_41636736的博客
01-16 224
.an1{background-color: chartreuse;}    .an2{background-color: chartreuse;}    .an3{background-color:red;}        tbody tr:nth-child(even) {     background-color: aqua;    }        tbody tr:nth
nodejs图书管理系统
09-10
你可以使用 Node.js 来开发一个图书管理系统。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以使你在服务器端运行 JavaScript。 在开发这样的系统时，你可以考虑以下步骤： 1. 安装 Node.js：首先，确保你已经安装了 Node.js。你可以从 Node.js 的官方网站 https://nodejs.org 下载并安装适合你操作系统的版本。 2. 创建项目：使用命令行工具，在你想要创建项目的目录中运行 `npm init` 命令，根据提示创建一个新的 Node.js 项目。这将生成一个 `package.json` 文件，用于管理项目的依赖项和配置。 3. 安装依赖项：对于一个图书管理系统，你可能需要使用一些第三方库或框架来简化开发过程。在 `package.json` 文件所在的目录下，可以使用 `npm install` 命令来安装这些依赖项。例如，你可以尝试使用 Express.js 来构建后端 API，使用 MongoDB 数据库来存储图书信息。 4. 设计数据库结构：决定所需的数据字段和关系，设计适合图书管理系统的数据库结构。你可以使用 MongoDB 或其他关系型数据库（如 MySQL 或 PostgreSQL）来存储图书信息。 5. 创建后端 API：使用 Express.js 或其他类似框架创建后端 API，用于处理客户端请求并与数据库交互。你可以创建路由，实现图书的增删改查功能，并进行身份验证和授权等操作。 6. 创建前端界面：使用 HTML、CSS 和 JavaScript 创建一个用户友好的前端界面，用于与后端 API 进行交互。你可以使用一些流行的前端框架（如 React、Angular 或 Vue.js）来简化开发过程。 7. 测试和部署：确保你的系统能够正常运行，并进行适当的测试。你可以使用一些测试框架和工具来自动化测试过程。最后，将你的图书管理系统部署到一个合适的服务器上，使其可以被用户访问。 以上是一个简要的指导，帮助你开始创建一个基于 Node.js 的图书管理系统。当然，具体的实现取决于你的需求和技术选择。祝你成功！如果你有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值