品有购项目--day02AngularJS介绍,后台品牌的增删改查!!

最新推荐文章于 2021-07-08 15:44:47 发布

骚包周

最新推荐文章于 2021-07-08 15:44:47 发布

阅读量286

点赞数 1

分类专栏：品有购项目文章标签： Angular PageHelper

本文链接：https://blog.csdn.net/qq_43332423/article/details/88582543

版权

品有购项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.前言:所有需要的文件我到时候整理下,上传上来,大家可以下载,到时候跟着做就行了.
AngularJS

是一个 JavaScript 框架,
添加此标签在HTML:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

他的一些教学文档在我已经上传了大家可以去下载练习一下,几个练习题介绍.
2.后台的品牌的增删改查

前面咱们已经将环境搭建好了,
那么提前准备,虚拟机开启,zokeerper开启,tomcat开启
2.1品牌的查询所有.

前端页面

我们找到Brand.html页面,导入Angular.js标签,
在body添加属性

ng-app=“pinyougou”

ng-controller=“brandController”

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-app="findAll()"
      ng-init="reloadList()">

 <script type="text/javascript">
        /*创建model*/
        var app = angular.module('pinyougou', [ ]);//这个是创建model
        app.controller('brandController', function ($scope, $http) {//定义控制器
            /* //查询所有
                $scope.findAll=function () {   //ng-app="findAll()"
                    $http.get('../brand/findAll.do').success(//Controller层./brand/findAll.do路径+方法+拦截 .do
                        function(response){//后端响应的数据
                      $scope.list=response;//   $scope是 Angular js 特有的$scope域 类似session
                        }
                    );
                };
 <script>

2.2 BrandController层

 @RestController
@RequestMapping("/brand")
public class BrandController {

    @Reference
    BrandService brandService;

    //查询所有
    @RequestMapping("findAll")
    public List<Brand> finAll() {
        return brandService.findAll();
    +++}

2.3 BrandService 接口层,BrandServiceImpl实现层

/**
* 查询所有品牌信息
*/接口层
public List findAll();

实现层
    //调用dao层
    @Autowired
   private BrandDao brandDao;


    //查询品牌信息
    @Override
    public List<Brand> findAll() {
      
        return brandDao.selectByExample(null);

3品牌分页

这里我们会用到前端的/pagination.js插件后台的PageHelper这个分页插件
依赖PageHelper <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <pagehelper.version>4.0.0</pagehelper.version> </dependency>

前端的分页JS插件:

3.1 前端代码

固定写法不用太在意

 //分页
            // $scope.findPage=function(page,rows){
            //    $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
            //        function(response){
            //            //返回的结果集
            //            $scope.list=response.rows;
            //            $scope.paginationConf.totalItems=response.total;//更新总记录数
            //        }
            //    );
            // }

 //重新加载列表 数据
            $scope.reloadList=function(){
                //切换页码, 第一个参数是当前页, 第二个参数: 每页显示条数
                //$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);

 //分页控件配置
            $scope.paginationConf = {
                //当前页
                currentPage: 1,
                //初始化页面的时候, 页面加载的总记录数, 如果执行完sql语句, 查询到的总记录数返回后会将这个值给覆盖掉
                totalItems: 10,
                //每页默认显示的条数
                itemsPerPage: 10,
                //页面上的下拉框, 如果选择对应的数字, 那么页面就显示对应条数的数据
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function(){
                    $scope.reloadList();//重新加载
                }
            };

<tm-pagination conf="paginationConf"></tm-pagination>

3.2后台分页代码
–
2.1 BrandController层


    /**
     * 分页查询
     *
     * @param page
     * @param rows
     * @return
     */
    @RequestMapping("findPage")
    public PageResult findPage(Integer page, Integer rows) {

        return brandService.findPage(page, rows, null);

    }

2.2BrandService 接口层,BrandServiceImpl实现层

BrandService接口层
/**
* 分页查询
*/
public PageResult findPage(Integer page, Integer rows,Brand brand);

BrandServiceImpk 实现层

 /**
     * 分页查询
     * @param page
     * @param rows
     * @return
     */
    @Override
    public PageResult findPage(Integer page, Integer rows,Brand brand) {

        //开启分页
        PageHelper.startPage(page,rows);
 
        /*封装page对象*/

        Page<Brand> brandPage=(Page<Brand>) brandDao.selectByExample(brandQuery);

        return new PageResult(brandPage.getTotal(),brandPage.getResult());
    }

4.添加和修改品牌信息

这里主要注意修改的时候,根据id修改,那么要有一个回显品牌信息的内容
这里写下:
根据id查品牌信息
4.1前端页码

修改有个事件

<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"
                            ng-click="firstOne(entity.id)">修改
                    </button>

 //回显根据id
            $scope.firstOne = function (id) {
                $http.get('../brand/firstOne.do?id=' + id).success(
                    function (response) {
                        $scope.entity = response;
                    }
                )
            };

  //保存
            $scope.save = function () {
                var methodName = 'add';
                if ($scope.entity.id != null) { //如果id不为空
                    methodName = 'update';//进行修改商品信息
                } else {
                    methodName = 'add';
                }
                $http.post('../brand/' + methodName + '.do', $scope.entity).success(
                    function (response) {
                        if (response.success) {
                            //重新查询
                            $scope.reloadList();//重新加载
                        } else {
                            alert(response.message);
                        }
                    }
                );

            };

*4.2BrandController层保存以及修改数据回显

 /**
     * 保存品牌信息
     */
    @RequestMapping("/add")
    public Result add(@RequestBody Brand brand) {
        //保存完重定向到查询所有品牌

        try {
            brandService.add(brand);

            return new Result(true, "添加成功");

        } catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
            return new Result(false, "添加失败");

        }

    }

    //数据回显
    @RequestMapping("firstOne")
    public Brand firstOne(Long id) {
        Brand brand = brandService.firstOne(id);

        return brand;

    }

    //修改品牌信息
    @RequestMapping("update")
    public Result update(@RequestBody Brand brand) {
        try {
            brandService.update(brand);
            return new Result(true, "修改成功");

        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "修改失败");

        }
    }
**```
4.3 BrandService 接口层 BrandServiceImpl实现层**
	//保存品牌信息
    void add(Brand brand);

    /**
     * 回显品牌信息
     * @param id
     * @return
     */
    Brand firstOne(Long id);
//修改品牌信息
    void update(Brand brand);
...................................................................
//保存品牌信息
    @Override
    public void add(Brand brand) {
        brandDao.insertSelective(brand);
        //clearReids();
    }
//回显 商品信息
    @Override
    public Brand firstOne(Long id) {
        Brand brand = brandDao.selectByPrimaryKey(id);

        return brand;
    }
    //修改商品信息
    @Override
    public void update(Brand brand) {
        brandDao.updateByPrimaryKeySelective(brand);
       // clearReids();
    }
5.删除品牌信息
-
这里是通过ng-click="delete()"事件来进行删除品牌信息
那么有个问题 :
 1. 点击一个 删一个信息
  2.那么点击多个呢? 返回给后台的id是 集合呢?还是数组呢?还是别的呢?
  3.还有一个问题就是如果点击上了,那么再点一下,取消了,那么这个id是不是取消了呢?
 解答:
   1.点一个删一个不现实,×
   2.给后台的是数组,不是集合, 数组的特性是什么,**去重**,
   3.这里我们补充一下JS的关于数组操作的知识
（1）数组的push方法：向数组中添加元素
（2）数组的splice方法：从数组的指定位置移除指定个数的元素 ，参数1为位置  ，参数2位移除的个数 
（3）复选框的checked属性：用于判断是否被选中

**5.1前端代码**

   //删除品牌信息
            $scope.selectIds = [];//选中的ID集合
            //更新复选
            $scope.updateSelection = function ($event, id) {
                if ($event.target.checked) {//如果是被选中,则增加到数组
                    $scope.selectIds.push(id);
                } else {
                    var idx = $scope.selectIds.indexOf(id);
                    $scope.selectIds.splice(idx, 1);//删除
                }
            };
            $scope.delete=function () {
                $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
                    
                    function (response) {//获得响应
                        if (response.success){//如果成功
                            $scope.reloadList();//重新刷新
                        }
                    }
                )
                
            };
       **5.2BrandController层**
        //删除品牌信息
    @RequestMapping("delete")
    public Result delete(Long[] ids) {

        try {
            brandService.delete(ids);
            return new Result(true, "删除成功");
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "删除失败");
        }
    }
    **5.3BrandService接口层 BrandServiceImpl实现类层**
    **接口层**
    //删除品牌信息
    void delete(Long[] ids);
    **实现层**
//删除品牌信息
    @Override
    public void delete(Long[] ids) {
        if (ids!=null) {
            for (Long id : ids) {

                brandDao.deleteByPrimaryKey(id);
            }
        }
    }
6.搜索框查询品牌信息
--
**前端代码: 搜索框**
 <div class="box-tools pull-right">
            <div class="has-feedback">
                品牌名称:<input type="text" ng-model="searchEntity.name">
                品牌首字母:<input type="text" ng-model="searchEntity.firstChar">
                <input class="btn btn-default" ng-click="reloadList()" type="button" value="查询">

            </div>
        </div>
       **其实和分页查询一个样 ,只不过是有条件查询**
       
            $scope.searchEntity={};//定义搜索对象
            //条件查询
            $scope.search=function(page,rows){
                $http.post('../brand/search.do?page='+page+"&rows="+rows, $scope.searchEntity).success(
                    function(response){
                        $scope.paginationConf.totalItems=response.total;//总记录数
                        $scope.list=response.rows;//给列表变量赋值
                    }
                );
            };


            //重新加载列表 数据
            $scope.reloadList=function(){
                //切换页码, 第一个参数是当前页, 第二个参数: 每页显示条数
                //$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                //根据高级查询条件查询
                $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            };
            //分页控件配置
            $scope.paginationConf = {
                //当前页
                currentPage: 1,
                //初始化页面的时候, 页面加载的总记录数, 如果执行完sql语句, 查询到的总记录数返回后会将这个值给覆盖掉
                totalItems: 10,
                //每页默认显示的条数
                itemsPerPage: 10,
                //页面上的下拉框, 如果选择对应的数字, 那么页面就显示对应条数的数据
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function(){
                    $scope.reloadList();//重新加载
                }
            };
            **6.1Brandcontroller层**
             //搜索框查询
    @RequestMapping("search")
    public PageResult searchBrand(Integer page, Integer rows, @RequestBody Brand brand) {

        PageResult pageResult = brandService.findPage(page, rows, brand);
        return pageResult;


    }
    **6.2BrandService接口层 BradServiceImpl实现层**
    其实就是之前的分页查询 只是在里面加了 条件查询
    BrandService接口层
/**
     * 分页查询    
     */
    public PageResult findPage(Integer page, Integer rows,Brand brand);

BrandServiceImpk 实现层

/**
* 分页查询
* @param page
* @param rows
* @return
*/
@Override
public PageResult findPage(Integer page, Integer rows,Brand brand) {

    //开启分页
    PageHelper.startPage(page,rows);

    /*封装page对象*/

    Page<Brand> brandPage=(Page<Brand>) brandDao.selectByExample(brandQuery);

    return new PageResult(brandPage.getTotal(),brandPage.getResult());
}

   ---写的不好,大家多多谅解,多多提意见,谢谢啦!!

骚包周

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
品有购项目--day02AngularJS介绍,后台品牌的增删改查!!

1.前言:所有需要的文件我到时候整理下,上传上来,大家可以下载,到时候跟着做就行了.AngularJS是一个 JavaScript 框架,添加此标签在HTML:&lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;他的一些教学文档在我已经上传了大家可以去...
复制链接

扫一扫