angularJS修改 品优购修改品牌(新增和修改用同一个方法)

前端代码 brand.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
    href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入angularJS -->
<script src="../plugins/angularjs/angular.min.js"></script>

<!-- 分页插件使用 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<script type="text/javascript">
    var app = angular.module("pingyougou", [ "pagination" ]);
    app.controller("brandController", function($scope, $http) {
        //分页查询品牌列表
        //【其实在分页插件内部就有当页面一加载就执行一遍请求的方法调用,所以我们在这块代码中不用再显示的写一遍$scope.reloadList()】

        //分页控件配置
        /*
         currentPage: 当前页
         totalItems: 总记录数
         itemsPerPage: 每页记录数
         perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】
         onChange: 当页面变更后自动触发的方法

         */
        $scope.paginationConf = {
            currentPage : 1,
            totalItems : 10,
            itemsPerPage : 10,
            perPageOptions : [ 10, 20, 30, 40, 50 ],
            onChange : function() {
                $scope.reloadList();//重新加载
            }
        };

        //刷新列表【因为要频繁使用,避免写很长代码,这里封装成一个方法】
        $scope.reloadList = function() {
            //调用分页请求方法
            $scope.findPage($scope.paginationConf.currentPage,
                    $scope.paginationConf.itemsPerPage);
        }

        //分页请求方法
        $scope.findPage = function(page, size) {
            $http.get("../brand/findPage.do?page=" + page + "&size=" + size)
                    .success(function(response) {
                        $scope.list = response.rows; //显示当前页数据
                        $scope.paginationConf.totalItems = response.total;//更新总记录数
                    });
        }

        //新增方法(为了新增和修改都用同一个方法,将此方法改名为save)
        $scope.save = function(){ //entity是我们在$scope中自定义的一个ang变量
            //默认是新增
            var methodName="add";
            //不为空说明是修改
            if($scope.entity.id != null){
                methodName="update";
            }
            $http.post("../brand/"+methodName+".do?",$scope.entity).success(
                    function(response){
                        if(response.success){
                            $scope.reloadList();//刷新
                        }else{
                            alert(response.message);
                        }
                    }
            );
        }

        //查询实体
        $scope.findOne=function(id){
            $http.get("../brand/findOne.do?id="+id).success(
                    function(response){
                        //利用ang的双向绑定特性,实现前台取值的更新
                        $scope.entity = response;
                    }
            );
        }

    });
</script>

</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pingyougou"
    ng-controller="brandController">
    <!-- .box-body -->
    <div class="box-header with-border">
        <h3 class="box-title">品牌管理</h3>
    </div>

    <div class="box-body">

        <!-- 数据表格 -->
        <div class="table-box">

            <!--工具栏-->
            <div class="pull-left">
                <div class="form-group form-inline">
                    <div class="btn-group">
                    <!-- ng-click="entity={}" 用于清空上次数据使每次点新建打开的都是干净的表单;因为逻辑简单所以不用封装方法,若逻辑复杂可以封装方法-->
                        <button type="button" class="btn btn-default" title="新建"
                            data-toggle="modal" data-target="#editModal" ng-click="entity={}">
                            <i class="fa fa-file-o"></i> 新建
                        </button>
                        <button type="button" class="btn btn-default" title="删除">
                            <i class="fa fa-trash-o"></i> 删除
                        </button>
                        <button type="button" class="btn btn-default" title="刷新"
                            onclick="window.location.reload();">
                            <i class="fa fa-refresh"></i> 刷新
                        </button>
                    </div>
                </div>
            </div>
            <div class="box-tools pull-right">
                <div class="has-feedback"></div>
            </div>
            <!--工具栏/-->

            <!--数据列表-->
            <table id="dataList"
                class="table table-bordered table-striped table-hover dataTable">
                <thead>
                    <tr>
                        <th class="" style="padding-right: 0px">
                            <input id="selall" type="checkbox" class="icheckbox_square-blue">
                        </th>
                        <th class="sorting_asc">品牌ID</th>
                        <th class="sorting">品牌名称</th>
                        <th class="sorting">品牌首字母</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="entity in list">
                        <td><input type="checkbox"></td>
                        <td>{{entity.id}}</td>
                        <td>{{entity.name}}</td>
                        <td>{{entity.firstChar}}</td>
                        <td class="text-center">
                            <!-- ng-click="findOne(entity.id) 注意:方法的参数中直接写ang变量及其属性即可不用加任何大括号 -->
                            <button type="button" class="btn bg-olive btn-xs"
                                data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
                        </td>
                    </tr>

                </tbody>
            </table>
            <!-- 分页 -->
            <tm-pagination conf="paginationConf"></tm-pagination>

        </div>
        <!-- 数据表格 /-->

    </div>
    <!-- /.box-body -->

    <!-- 编辑窗口 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h3 id="myModalLabel">品牌编辑</h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr><!-- 只要你在当前文本框中填值,那么它就会自动封装到entity变量中的name属性中,这样entity变量就自动产生了 -->
                            <td>品牌名称</td>
                            <td><input class="form-control" placeholder="品牌名称" ng-model="entity.name">
                            </td>
                        </tr>
                        <tr>
                            <td>首字母</td>
                            <td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer"><!-- 用ng-click指令绑定点击时执行ang中定义的方法 -->
                    <button class="btn btn-success" data-dismiss="modal"
                        aria-hidden="true" ng-click="save()">保存</button>
                    <button class="btn btn-default" data-dismiss="modal"
                        aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

后台:

    @RequestMapping("/findOne")
    public TbBrand findOne(Long id){
        return brandService.findOne(id);
    }

    @RequestMapping("/update")
    public Result update(@RequestBody TbBrand brand){
        try {
            brandService.update(brand);
            return new Result(true, "修改成功");
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "修改失败");
        }
    }

原文地址:https://www.cnblogs.com/libin6505/p/10075715.html

时间: 2024-11-08 15:47:54

angularJS修改 品优购修改品牌(新增和修改用同一个方法)的相关文章

品优购商城项目(二)mybatis分页插件

品优购商城项目第二天,使用mybatis分页插件实现分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config

【project】品优购——01

需求分析与系统设计 品优购网上商城主要分为网站前台.运营商后台.商家管理后台三个子系统. 简介 网站前台:主要包括网站首页.商家首页.商品详细页..搜索页.会员中心.订单与支付相关页面.秒杀频道等 运营商后台:是运营商的运营人员的管理后台. 主要包括商家审核.品牌管理.规格管理.模板管理.商品分类管理.商品审核.广告类型管理.广告管理.订单查询.商家结算等 商家管理后台:入驻的商家进行管理的后台,主要功能是对商品的管理以及订单查询统计.资金结算等功能 系统架构 该项目采用SOA架构,即面向服务的

002 --品优购的系统架构

品优购采用的是SOA系统架构,为什么会采用这种架构风格?当然有他自己的好处! 1.1SOA的概念? 面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台.操作系统和编程语言.这使得构建在各种各样的系统中的服务可以以一种统一和通用的方式进行交互.    SOA系统架构得优点: 1:简单系统的开发:由于SOA具有组合性,可以利用现有的SOA资源,根据同样的开放标准,不

品优购商城项目(三)安全框架SpringSecurity

品优购商城项目第三阶段 1.springSecurity的基本用法与shiro类似. 2.BCrypt加密算法比MD5更加智能和安全,能自动加盐再加密,生成的密码是60位比md5的32位更占空间(可以忽略不计),由于密码长度增加安全系数更高,且盐不是明文由算法自动生成和解析,用户不需要关心. 3.set的使用,在下面这个引用类中用注解@[email protected]报错,后在类中用set方法成功 <!-- 认证类 --> <beans:bean id="userDetail

品优购项目

项目技能: 1.使用AngularJS前端框架完成前后端交互 2.完成品牌的基本管理功能的开发 AngularJS四大特性: 1.MVC 2.双向绑定 3.依赖注入 4.模块化设计 指令:显示变量的值得表达式: {{ }} ng-app 在angularJS的作用范围 ng-model: 绑定变量 ng-init: 初始化 ng-click: 点击事件 ng-repeat:循环 { }: 对象 [ ]: 集合 控制器: 控制器页面元素-->对页面的数据进行操作,也就是说,所有的页面上的js操作都

Java之品优购部署_day01(3)

2.2 搭建 Zookeeper 集群 2.2.1 搭建要求 真实的集群是需要部署在不同的服务器上的,但是在我们测试时同时启动十几个虚拟机内存会吃不消,所以我们通常会搭建伪集群,也就是把所有的服务都搭建在一台虚拟机上, 用端口进行区分. 我们这里要求搭建一个三个节点的 Zookeeper 集群(伪集群). 2.2.2 准备工作 重新部署一台虚拟机作为我们搭建集群的测试服务器. (1)安装 JDK [此步骤省略]. (2)Zookeeper 压缩包上传到服务器 (3)将 Zookeeper 解压

大型分布式电商项目---品优购

概述 这是一个综合性的B2B2C平台,类似京东商城.天猫商城.网站采用商家入驻的模式.该项目采用Spring+SpirngMVC+Mybatis框架搭建的maven工程,并采用分布式架构按功能将系统分为不同的子系统,将不同的子系统部署到不同的节点服务器独立运行.在各个系统之间采用dubbox+zookeeper进行通信,实现了基于SOA面向服务的架构,使得服务层与表现层分离,此项目为本人学习项目,为传智播客,最后一个商城实战项目,前前后后花了2个月左右,后面几天的内容暂时没做,因为电脑吃不消,完

品优购工程创建

parent工程 首先创建一个 maven Project   maven工程 ,pom类型 pojo工程 然后建立 maven Model 模块,jar类型 dao工程 maven Model 模块,jar类型 技巧:创建模块工程时可以先选中 parent 工程,然后再 ctrl+n 创建,这样就会自动继承 parent了: 下面 Parent 会自动填好的. 原文地址:https://www.cnblogs.com/libin6505/p/9962663.html

品优购dubbox文档bug连环计,还是自己敲最实在!!!!!!

之前看文档拷贝代码,然后报错,上网各种搜没用,一天... 隔过去这个垃圾文档,看视频,结合实际一步一行写代码,搭配置环境,一下运行,真是一发入魂.... 原文地址:https://www.cnblogs.com/CreatorKou/p/10043166.html