大型电商项目第三天的总结

最新推荐文章于 2024-07-18 16:29:57 发布

cb123_45678

最新推荐文章于 2024-07-18 16:29:57 发布

阅读量165

点赞数

文章标签： angular java

本文链接：https://blog.csdn.net/cb123_45678/article/details/104452051

版权

今天我们利用前端框架AngularJS对项目的页面做一个前后端的展示功能，具体如下：

目标1：完成品牌管理的列表功能
目标2：完成品牌管理的分页列表功能
目标3：完成品牌管理的增加功能
目标4：完成品牌管理的修改功能
目标5：完成品牌管理的删除功能

对于目标1，先在指定的页面上引入AngularJS的JS

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
        var app=angular.module('pinyougou', ['pagination']);//定义模块
        app.controller('brandController' ,function($scope,$http){
            //读取列表数据绑定到表单中
            $scope.findAll=function(){
                $http.get('../brand/findAll.do').success(
                    function(response){
                        $scope.list=response;
                    }
                );
            }
                });
	</script>

和

<body class="hold-transition skin-red sidebar-mini" 
ng-app="pinyougou"   ng-controller="brandController"   ng-init="findAll()">
以及
 <tbody>
			                          <tr ng-repeat="entity in list">
			                              <td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></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>

结果如图：
在这里插入图片描述
目标2：完成品牌管理的分页列表功能

@1.在pojo工程中创建entity包，用于存放通用实体类，创建类PageResult
@2.在servic接口中增加方法：
public PageResult findPage(Integer pageNum, Integer pageSize);
@3.在service实现层实现该方法：

	@Override
	public PageResult findPage(Integer pageNum, Integer pageSize) {
		PageHelper.startPage(pageNum, pageSize);		
		Page<TbBrand> page=   (Page<TbBrand>) brandMapper.selectByExample(null);
		return new PageResult(page.getTotal(), page.getResult());
	}
PageHelper为MyBatis分页插件

@4.控制层
@RequestMapping("/findPage")
public PageResult findPage(Integer page, Integer rows){
return brandService.findPage(page, rows);
}
@5.前端代码
在brand.html引入分页组件

<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->

构建app模块时引入pagination模块
var app=angular.module(‘pinyougou’,[‘pagination’]);//定义品优购模块

页面的表格下放置分页组件

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

2.3.2 JS代码
在brandController中添加如下代码
//重新加载列表数据
$scope.reloadList=function(){
//切换页码
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加载
}
};
//分页
$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;//更新总记录数
}
);
}
在页面的body元素上去掉ng-init指令的调用
paginationConf 变量各属性的意义：
currentPage：当前页码
totalItems:总条数
itemsPerPage:每页默认显示多少条记录
perPageOptions：页码选项
onChange：更改页面时触发事件
目标3：完成品牌管理的增加功能
@1.对于增加功能，点击新建会在原先的页面上出现一个div的弹框，而不是更改页面，
service接口中的方法：

public void add(TbBrand brand);

@2.实现接口的方法：
@Override
public void add(TbBrand brand) {
brandMapper.insert(brand);
}
@3.
/**

返回结果封装
@author Administrator

/
public class Result implements Serializable{
private boolean success;
private String message;
public Result(boolean success, String message) {
super();
this.success = success;
this.message = message;
}
//getter and setter…
}
@4.对于控制层
/*
* 增加
* @param brand
* @return
*/
@RequestMapping("/add")
public Result add(@RequestBody TbBrand brand){
try {
brandService.add(brand);
return new Result(true, “增加成功”);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, “增加失败”);
}
}
@5.对于页面

$scope.save=function(){
	$http.post('../brand/add.do',$scope.entity ).success(
		function(response){
			if(response.success){
				//重新查询 
				 $scope.reloadList();//重新加载
			 }else{
				 alert(response.message);
			 }
		}		
	);				
}
绑定表单元素，我们用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>

***目标4：***点击列表的修改按钮，弹出窗口，修改数据后点“保存”执行保存操作
点击修改，根据id查询要修改的id行，然后数据回显，修改完成后，显示修改成功并查询所有的数据

***目标5：***点击列表前的复选框，点击删除按钮，删除选中的品牌。
主要思路：我们需要定义一个用于存储选中ID的数组，当我们点击复选框后判断是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。在点击删除按钮时需要用到这个存储了ID的数组。
这里我们补充一下JS的关于数组操作的知识
（1）数组的push方法：向数组中添加元素
（2）数组的splice方法：从数组的指定位置移除指定个数的元素，参数1为位置，参数2位移除的个数
（3）复选框的checked属性：用于判断是否被选中
$scope.selectIds=[];//选中的ID集合
//更新复选
$s c o p e . u p d a t e S e l e c t i o n = f u n c t i o n ($ event, id) {
if($event.target.checked){//如果是被选中,则增加到数组
$scope.selectIds.push( id);
}else{
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx, 1);//删除
}
}
//批量删除
$scope.dele=function(){
//获取选中的复选框
$h t t p . g e t (^{'} . . / b r a n d / d e l e t e . d o ? i d s =^{'} +$ scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表
}
}
);
}
5.3.2 HTML
（1）修改列表的复选框

<tr ng-repeat="entity in list">
	<td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></td>

（2）修改删除按钮

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

cb123_45678

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大型电商项目第三天的总结

今天我们利用前端框架AngularJS对项目的页面做一个前后端的展示功能，具体如下：目标1：完成品牌管理的列表功能目标2：完成品牌管理的分页列表功能目标3：完成品牌管理的增加功能目标4：完成品牌管理的修改功能目标5：完成品牌管理的删除功能对于目标1，先在指定的页面上引入AngularJS的JS<script type="text/javascript" src="../plug...
复制链接

扫一扫