電商項目之多功能增刪改查案例

時間  2019-11-13
標籤 項目 之多 功能 增刪 查案 简体版
原文   原文鏈接

先構建框架

Controller層javascript

@Controller
@RequestMapping("/brand")
public class BrandController {
    @Reference
    private BrandService brandService;
}

Service層接口css

public interface BrandService {}

Service層接口實現類html

@Service
public class BrandServiceImpl implements BrandService {
    @Autowired
    private BrandDao brandDao;
}

1：查

先從數據庫中查詢全部得數據java

Controller層 @RequestMapping("/findAll") @ResponseBody public List<Brand> fingAllBrand(){ return brandService.findAllBrand(); } Service接口 List<Brand> findAllBrand(); Service接口實現類 @Override public List<Brand> findAllBrand() { BrandQuery query = new BrandQuery(); BrandQuery.Criteria criteria = query.createCriteria(); List<Brand> brands = brandDao.selectByExample(query); return brands; }

html頁面模塊angularjs

修改brand.html ，引入JS數據庫

 

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

 

指定模塊和控制器，並指定初始化方法
數組

 

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

 

ng-controller 指令用於爲你的應用添加控制器。ng-app 指令中定義的就是模塊的名稱  ng-init指定初始化
app

在控制器中，你能夠編寫代碼，製做函數和變量，並使用 scope 對象來訪問。框架

編寫JS代碼ide

 

<script type="text/javascript">
    var app=angular.module('youlexuan', ['pagination']);//定義模塊
 app.controller('brandController' ,function($scope,$http){ //讀取列表數據綁定到表單中
 $scope.findAll=function(){ $http.get('../brand/findAll.do').success( function(response){ $scope.list=response; } ); }
　　}) </script>

循環顯示錶格數據

 

 

 

<tbody>
    <tr ng-repeat="entity in list">
        <td><input ng-click="updateSelection($event,entity.id)" type="checkbox" ></td>
    <td>{{entity.id}}</td>
    <td>{{entity.name}}</td>
    <td>{{entity.firstChar}}</td>
    <td class="text-center">
    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
    </td>
    </tr>
</tbody>

 

下面是帶分頁的列表展現

注意：須要將上面的初始化 ng-init="findAll()" 去掉

實體類：注意須要實現序列化接口

public class PageResult implements Serializable {
    private Long total;
    private List rows;
    //省略set，get，構造方法和toString     
}

 

html模塊

在brand.html引入分頁組件

 

<!-- 分頁組件開始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分頁組件結束 -->

 

構建app模塊時引入pagination模塊 

var app=angular.module('youlexuan',['pagination']);//定義模塊，增長分頁模塊

頁面的表格下放置分頁組件 

 <!-- 分頁 -->
<tm-pagination conf="paginationConf"></tm-pagination>

在brandController中添加以下 JS代碼

 

//分頁控件配置 $scope.paginationConf = { currentPage: 1, totalItems: 5, //總記錄數 itemsPerPage: 5, //每頁顯示的數據量 perPageOptions: [5, 10, 20, 30, 50], onChange: function(){ $scope.reloadList();//從新加載 } }; //從新加載列表 數據 $scope.reloadList=function(){ //切換頁碼,獲取當前頁面和數據量 $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分頁 $scope.findPage=function(page,rows){ $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success( function(response){ //從新給list值，從新遍歷 $scope.list=response.rows; $scope.paginationConf.totalItems=response.total;//更新總記錄數 } ); }

 

paginationConf 變量各屬性的意義：在頁面的body元素上去掉ng-init指令的調用

currentPage：當前頁碼

totalItems:總條數

itemsPerPage:

perPageOptions：頁碼選項

onChange：更改頁面時觸發事件

後臺代碼

Controller代碼 @RequestMapping("/findPage") @ResponseBody public PageResult findPage(Integer page,Integer rows){ return brandService.findPage(page,rows); } Service接口 PageResult findPage(Integer page, Integer rows); Service接口實現類 @Override public PageResult findPage(Integer page, Integer rows) { PageHelper.startPage(page,rows); Page<Brand> pages = (Page<Brand>) brandDao.selectByExample(null); return new PageResult(pages.getTotal(),pages.getResult()); }

2：增

 HTML模塊

在綁定表單元素，咱們用ng-model指令，綁定按鈕的單擊事件咱們用ng-click

<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>
       <td>品牌名稱</td>
       <td><input class="form-control" ng-model="entity.name" placeholder="品牌名稱" >  </td>
       </tr>       
       <tr>
       <td>首字母</td>
       <td><input class="form-control" ng-model="entity.firstChar" placeholder="首字母">  </td>
       </tr>       
 </table>
</div>
<div class="modal-footer">
<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>

爲了每次打開窗口沒有遺留上次的數據，咱們能夠修改新建按鈕，對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>

JS代碼

$scope.save=function(){
    var methodName = 'add';
$http.post('../brand/'+methodName+'.do',$scope.brand).success(
        function(response){
            if(response.success){
                //從新查詢
                $scope.reloadList();//從新加載
            }else{
                alert(response.message);
            }
        }
    );
}

邏輯代碼

Controller層
@RequestMapping("/add")
@ResponseBody
public Result addBrand(@RequestBody Brand brand){
    try {
        brandService.addBrand(brand);
        return new Result(true,"添加成功");
    }catch (Exception ex){
        String message = ex.getMessage();
        return new Result(false,message);
    }
}

Service接口
void addBrand(Brand brand);

Service接口實現類
@Override
public void addBrand(Brand brand) {
    brandDao.insertSelective(brand);
}

3：改

修改列表中的「修改」按鈕，調用此方法執行查詢實體的操做

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

實現數據的回填

 

//查詢實體,實現數據的回填 $scope.findOne=function(id){ $http.get('../brand/findOne.do?id='+id).success( function(response){ $scope.brand= response; } ); }

在上面填的的js代碼中添加

//保存 $scope.save=function(){ var methodName = 'add';  //在這裏進行方法的判斷，當有id時，執行的是修改方法 if($scope.brand.id != null){ methodName = 'update'; } $http.post('../brand/'+methodName+'.do',$scope.brand).success( function(response){ if(response.success){ //從新查詢 $scope.reloadList();//從新加載 }else{ alert(response.message); } } ); }

頁面邏輯代碼

Controller層
@RequestMapping("/findOne")
@ResponseBody
public Brand findByIdBrand(Long id){
    return brandService.findByIdBrand(id);
}
@RequestMapping("/update")
@ResponseBody
public Result updateByIdBrand(@RequestBody Brand brand){
    return brandService.updateByIdBrand(brand);
}

Sercice接口
Brand findByIdBrand(Long id);
Result updateByIdBrand(Brand brand);

Service接口的實現類
@Override
public Brand findByIdBrand(Long id) {
    return brandDao.selectByPrimaryKey(id);
}
@Override
public Result updateByIdBrand(Brand brand) {
    try {
        brandDao.updateByPrimaryKeySelective(brand);
        return new Result(true,"更新成功");
    }catch (Exception ex){
        return new Result(false,ex.getMessage());
    }
}

4：刪

html模塊

修改列表的複選框

<input type="checkbox" ng-click="updateSelection($event,entity.id)">

修改刪除按鈕

 

<button type="button" class="btn btn-default" title="刪除" ng-click="dele()"><i class="fa fa-trash-o"></i> 刪除</button>

 

js代碼

$scope.selectIds=[];//選中的ID集合
//更新複選
$scope.updateSelection = function($event, id) {
    if($event.target.checked){//若是是被選中,則增長到數組
        $scope.selectIds.push(id);
    }else{
        //indexOf() 方法可返回數組中某個指定的元素索引。沒有的返回-1
        var idx = $scope.selectIds.indexOf(id);
        //splice()從數組中刪除指定元素(第一個參數)，第二個參數表示刪除的個數
        $scope.selectIds.splice(idx, 1);//刪除
    }
}
//批量刪除
$scope.dele=function(){
    //獲取選中的複選框
    $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
        function(response){
            if(response.success){
                $scope.reloadList();//刷新列表
            }
        }
    );
}

後臺代碼

Controller層
    @RequestMapping("/delete")
    @ResponseBody
    public Result deleteByIds(Long[] ids){
        try {
            brandService.deleteByIds(ids);
            return new Result(true,"刪除成功");
        }catch (Exception ex){
            return new Result(false,ex.getMessage());
        }

    }
Service接口層
    void deleteByIds(Long[] ids);
Service接口實現
    @Override
    public void deleteByIds(Long[] ids) {
        for (Long id : ids) {
            brandDao.deleteByPrimaryKey(id);
        }
    }

5：模糊查詢

html模塊

修改brand.html，增長查詢條件、查詢按鈕

 

<div class="box-tools pull-right">
<div class="has-feedback">品牌名稱:<input ng-model="searchEntity.name"> 品牌首字母:<input ng-model="searchEntity.firstChar">  
<button class="btn btn-default" ng-click="reloadList()">查詢</button>
</div>
</div>

 

修改reloadList方法

 

//刷新列表
$scope.reloadList=function(){
    $scope.search( $scope.paginationConf.currentPage,             
    $scope.paginationConf.itemsPerPage);
}

 

js

//條件模糊查詢 $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;//給列表變量賦值 } ); }

後臺代碼

Controller層 @RequestMapping("/search") @ResponseBody public PageResult findByLike(@RequestBody Brand brand,Integer page,Integer rows){ return brandService.findByLike(brand,page,rows); } Service接口 PageResult findByLike(Brand brand, Integer page, Integer rows); Service接口實現類 @Override public PageResult findByLike(Brand brand, Integer page, Integer rows) { PageHelper.startPage(page,rows); BrandQuery brandQuery = new BrandQuery(); BrandQuery.Criteria criteria = brandQuery.createCriteria(); if(brand != null){ if(brand.getName()!=null && brand.getName().length()>0){ criteria.andNameLike("%"+brand.getName()+"%"); } if(brand.getFirstChar()!=null && brand.getFirstChar().length()>0){ criteria.andFirstCharEqualTo(brand.getFirstChar()); } } Page<Brand> pages = (Page<Brand>)brandDao.selectByExample(brandQuery); return new PageResult(pages.getTotal(),pages.getResult()); }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程