项目4_品优购_day2

最新推荐文章于 2022-08-04 11:59:02 发布
最新推荐文章于 2022-08-04 11:59:02 发布
阅读量136 收藏
点赞数
分类专栏： 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lushizhuo9655/article/details/103443882
版权

品牌管理

AngularJS简介

AngularJS  诞生于2009年，后为Google所收购。是一款优秀的前端JS框架，

AngularJS四大特征

MVC模式    双向绑定    依赖注入   模块化设计

一:入门小demo

1.表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularjs入门小Demo-1   表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
	{{100+100}}
</body>
</html>

2.双向绑定

<!DOCTYPE html>
<html>
<head>
<title>angularjs入门小Demo-2   双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
	请输入你的姓名<input ng-model="name">
	{{name}}:你好
</body>
</html>

3.初始化指令

<!DOCTYPE html>
<html>
<head>
<title>angularjs入门小Demo-3   初始化</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='新手' ">
	请输入你的姓名<input ng-model="name">
	{{name}}:你好
</body>
</html>

4.控制器

<!DOCTYPE html>
<html>
<head>
<title>angularjs入门小Demo-4   控制器</title>
<script src="angular.min.js"></script>
<script>
	//建立模块   []是用来引入其他模块的
	var app=angular.module("myApp",[]);
	//创建控制器    $scope就是控制器和视图层直接交换数据的桥梁
	app.controller("myController",function($scope){
		$scope.add=function(){
			return parseInt($scope.x)+parseInt($scope.y)
		}
	
	})
</script>

</head>
<body ng-app="myApp" ng-controller="myController">
	第一个数字<input ng-model="x">  第二个数字<input ng-model="y">
	{{add()}}
	
</body>
</html>

5.事件指令

<!DOCTYPE html>
<html>
<head>
<title>angularjs入门小Demo-5   事件指令</title>
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myApp",[]);
	app.controller("myController",function($scope){
		$scope.add=function(){
			$scope.z=parseInt($scope.x)+parseInt($scope.y)
		}
	})
</script>

</head>
<body ng-app="myApp" ng-controller="myController">
	第一个数字<input ng-model="x">  第二个数字<input ng-model="y">
	<button ng-click="add()">运算</button>
		运算结果:{{z}}	
</body>
</html>

6.循环数组

<html>
<head>
	<title>入门小Demo-6  循环数组</title>
	<script src="angular.min.js"></script>	
	<script>
		var app=angular.module('myApp',[]); 
		app.controller('myController',function($scope){			
				$scope.list=[100,200,300,400];		
		});	
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr ng-repeat="x in list">
			<td>{{x}}</td>
		</tr>
	</table>
</body>
</html>

7.循环对象数组

<html>
<head>
	<title>入门小Demo-6  循环数组</title>
	<script src="angular.min.js"></script>	
	<script>
		var app=angular.module('myApp',[]); 
		app.controller('myController',function($scope){			
				$scope.list=[
				{name:"张三",age:18},
				{name:"李四",age:20},
				{name:"王五",age:16},
				{name:"赵六",age:22},
				];		
		});	
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
		</tr>
		<tr ng-repeat="entity in list">
			<td>{{entity.name}}</td>
			<td>{{entity.age}}</td>
		</tr>
	</table>
</body>
</html>

8.内置服务 $http.get("请求的地址")

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。注意：以下代码需要在tomcat中运行。

<!DOCTYPE html>
<html>
<head>
<title>angularjs入门小Demo-8   内置服务$http</title>
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myApp",[]);
	app.controller("myController",function($scope,$http){
		$scope.findAll=function(){
			$http.get("./data.json").success(
				function(response){
				$scope.list=response;
			});
		}
	});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">

	<table>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
		</tr>
		<tr ng-repeat="entity in list">
			<td>{{entity.name}}</td>
			<td>{{entity.age}}</td>
		</tr>
	</table>
	
</body>
</html>

data.json

[
	{"name":"张三","age":18},
	{"name":"李四","age":20},
	{"name":"王五","age":16},
	{"name":"赵六","age":22}
]

二:实现品牌列表的查询（不用分页和条件查询）效果如下：

<script src="../plugins/angularjs/angular.min.js"></script>
	<script>
		var app=angular.module("pinyougou",[]);
		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()">


 <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">                                           
	<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>                                           
	</td>
 </tr>

三:品牌列表分页的实现

后端给前端的数据   

总记录数  total 

当前页显示的数据  rows

{total:100,rows:[ ] }

方法一:

Map map=new HashMap();

map.put('total',100);

map.put('rows',list);

return map;

方法二:

创建类  包含total 和 rows 属性

前端给后端的数据    当前页   当前页显示的条数

public class PageResult implements Serializable{
	private long total;//总记录数
	private List rows;//当前页结果		
	public PageResult(long total, List rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
     //getter  and setter .....
}

public PageResult findPage(int pageNum,int pageSize);

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

@RequestMapping("/findPage")
	public PageResult findPage(int currentPage,int pageSize){
		return brandService.findPage(currentPage, pageSize);
	}

分页使用mybatis分页插件PageHelper

要记得将pojo和interface重新install下

 

分页前端

1.引入分页组件

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

2.构建app模块时引入pagination模块

var app=angular.module('pinyougou',['pagination']);//定义品优购模块

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

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

4.分页控件配置 

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

完整的前面列表页面分页前端

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

<script>
	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;
	});
	}
			
	$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?currentPage="+page+"&pageSize="+rows).success(
	function(response){
	$scope.list=response.rows;  //当前页数据
	$scope.paginationConf.totalItems=response.total; //总记录数
	}		
	)
	}
	});
</script>

<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">                                           
	<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" 
data-target="#editModal"  >修改</button>                                           
	</td>
</tr>

 <!--数据列表/-->                        
	<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>

四:增加品牌

Controller层里面的实体类对象,需要用到@requestBody注解,并且告诉前端保存成功还是失败.

方法一:

{success:true,message:"保存成功"}

Map map=new HashMap();

map.put('success',true);

map.put('message',"保存成功");

方法二:

创建类:包含success 和 message

public interface BrandService {
	public void save(TbBrand tbBrand);
}

@Service
public class BrandServiceImpl implements BrandService{
	@Autowired
	private TbBrandMapper brandMapper;
	@Override
	public void save(TbBrand tbBrand) {
		brandMapper.insert(tbBrand);
	}
}

//返回结果封装
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.....
}

public class BrandController {
	@Reference
	public BrandService brandService;
	@RequestMapping("/add")
	public Result save(@RequestBody TbBrand tbBrand){
		try {
			brandService.save(tbBrand);
			return new Result(true, "添加成功");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "添加失败");
		}
	}
//新增
$scope.save=function(){
	$http.post("../brand/add.do",$scope.entity).success(
		function(response){
			if(response.success){
				$scope.reloadList();
			}else{
				alert(response.message);
			}
		}
	);
}

<tr>
	<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>	

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

//为了每次打开窗口没有遗留上次的数据，我们可以修改新建按钮，对entity变量进行清空操作
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}"> 新建</button>

五:修改品牌(保存和修改的时候,也可以在后端Controller里面判断是否有id,然后决定是添加还是修改)

//根据id查询品牌
public TbBrand findOne(Long id); 
//修改品牌
public void update(TbBrand tbBrand);


public TbBrand findOne(Long id) {
    return brandMapper.selectByPrimaryKey(id);
}


public void update(TbBrand tbBrand) {
	brandMapper.updateByPrimaryKey(tbBrand);
}

@RequestMapping("/findOne")
public TbBrand findOne(Long id){
	return brandService.findOne(id);
}
	
@RequestMapping("/update")
public Result update(@RequestBody TbBrand tbBrand){
	try {
		brandService.update(tbBrand);	
		return new Result(true,"修改成功");
	} catch (Exception e) {
		e.printStackTrace();
		return new Result(true,"修改失败");
	}
}
//新增
$scope.save=function(){
	var methodName='add';//方法名称
		if($scope.entity.id !=null){//如果有ID
			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){
			$scope.entity=response;						
		}		
	);
}

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

六:批量删除品牌

//批量删除品牌
public void deleteById(Long[] ids);

public void deleteById(Long[] ids) {
	if(ids !=null && ids.length>0){
		for (Long id : ids) {
			brandMapper.deleteByPrimaryKey(id);
		}
	}
}

@RequestMapping("/delete")
public Result deleteById(Long[] ids){
	try {
		brandService.deleteById(ids);	
		return new Result(true,"删除成功");
	} catch (Exception e) {
		e.printStackTrace();
		return new Result(false,"删除失败");
	}
}

主要思路：我们需要定义一个用于存储选中ID的数组，当我们点击复选框后判断是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。在点击删除按钮时需要用到这个存储了ID的数组。

这里我们补充一下JS的关于数组操作的知识

(1) 数组的push方法：向数组中添加元素

(2) 数组的splice方法：从数组的指定位置移除指定个数的元素 ，参数1为位置  ，参数2位移除的个数

(3) 复选框的checked属性：用于判断是否被选中

$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.dele=function(){			
		//获取选中的复选框			
		$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
				function(response){
					if(response.success){
							$scope.reloadList();//刷新列表
					}						
				}		
		);				
}

//修改列表的复选框
<input  type="checkbox" ng-click="updateSelection($event,entity.id)">
//修改删除按钮
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"> 删除</button>

七:品牌条件查询

//品牌条件查询
public PageResult findPage(TbBrand tbBrand,int pageNum,int pageSize);

@Override
public PageResult findPage(TbBrand tbBrand, int pageNum, int pageSize) {
	PageHelper.startPage(pageNum, pageSize);
	TbBrandExample example=new TbBrandExample();
	Criteria criteria = example.createCriteria();
	if(tbBrand !=null){
		if(tbBrand.getName() !=null && tbBrand.getName().length()>0){
			criteria.andNameLike("%"+tbBrand.getName()+"%");
		}
		if(tbBrand.getFirstChar() !=null && tbBrand.getFirstChar().length()>0){
			criteria.andFirstCharEqualTo(tbBrand.getFirstChar());
		}
	}
	Page<TbBrand> page=(Page<TbBrand>) brandMapper.selectByExample(example);
	return new PageResult(page.getTotal(), page.getResult());
}

@RequestMapping("/search")
public PageResult search(@RequestBody TbBrand tbBrand,int currentPage,int pageSize){
	return brandService.findPage(tbBrand,currentPage, pageSize);
}
<div class="has-feedback">
    品牌名称:<input ng-model="searchEntity.name">    品牌首字母:<input ng-model="searchEntity.firstChar">  
     <button class="btn btn-default" ng-click="reloadList()">查询</button>
</div>

$scope.searchEntity={};//定义搜索对象 
$scope.search=function(page,rows){
$http.post("../brand/search.do?currentPage="+page+"&pageSize="+rows,$scope.searchEntity).success(
	function(response){
		$scope.paginationConf.totalItems=response.total;//总记录数 
		$scope.list=response.rows;//当前页数据
	}			
);
}
/刷新列表 
$scope.reloadList=function(){
	  $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);				
}

 

guoyebing
关注
专栏目录
品优购-dubbo2.8.4.jar
10-22
品优购项目dubbox2.8.4.jar 执行命令： 手动打包maven包 mvn install:install-file -Dfile=d:\dubbox\dubbo-2.8.4.jar -DgroupId=com.alibaba -DartifactId=dubbo -Dversion=2.8.4 -Dpackaging=jar
品优购_day13_SpringJms_V1.31
08-08
【品优购电商系统开发第13章：SpringJms_V1.31】课程主要讲解了消息中间件解决方案，特别是Java消息服务（JMS）的使用，旨在帮助开发者理解和掌握消息中间件的重要概念和实际操作。以下是相关知识点的详细说明： 1....
品优购_AngularJs_前端框架的八种常用指令
天蓬元帅的博客
08-31 433
1 表达式:np-app ng-app 定义anglar起作用的范围,在body里面器作用,用来定义模块的 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;入门demo1_表达式&lt;/title&gt;       
品优购---品优购项目规划---8.3
weixin_50768118的博客
08-04 1390
​网站制作流程、品优购项目搭建工作、网站favicon图标、网站TDK三大标签SEO优化
品优购项目html+css+js
weixin_42872310的博客
07-14 6041
品优购项目html+css+js 跟着pink老师学前端，第一个完成的项目，总共有三个页面，分别是index.html、list.html和detail.html，下面是该项目的一些总结，最后有源码呦 ico图标，显示浏览器中的网页图标 获取网页ico图标，在地址后面加/favicon.ico，即可获得 要在html中加入到head中 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 制作ico图标，把想
品优购电商系统开发 第九章 四
qq_40208605的博客
06-04 268
4.品优购-关键字搜索4.1需求分析打开搜索页面，在搜索框输入要搜索的关键字，点击搜索按钮即可进行搜索，展示搜索结果4.2后端代码4.2.1服务接口层（1）创建pinyougou-search-interface模块（搜索服务接口），依赖pinyougou-pojo（2）创建com.pinyougou.search.service包，创建业务接口 public interface ItemSearchService { /** * 搜索 * @param keywords * @retu...
项目4_品优购_day5
郭叶兵的博客
01-03 192
一:实现三级商品分类列表查询功能 //根据上级ID返回列表 public List<TbItemCat> findByParentId(Long parentId); public List<TbItemCat> findByParentId(Long parentId) { TbItemCatExample example=new TbItemCatExample...
项目4_品优购_day7
郭叶兵的博客
01-19 220
一:商家后台-商品管理【商品列表】(在商家后台，显示该商家的商品列表信息) 不能修改service层代码,因为会影响运营商和商家后台 因此只能在商家后台的Controller修改代码 并且在service层将模糊查询改成精确查询 @RequestMapping("/search") public PageResult search(@RequestBody TbGoods goods, in...
项目4_品优购_day1
郭叶兵的博客
12-07 234
一:主要电商模式 B2B--企业对企业 案例：阿里巴巴、慧聪网 （ Business to Business） C2C--个人对个人 案例：淘宝、瓜子二手车 B2C--企业对个人案例：唯品会 C2B--个人对企业 个人把需求告诉企业,企业按照个人的需求定制提供产品 案列: 海尔商城(装修 家具) O2O--线上到线下 案例：美团、饿了吗 F2C--工厂到个人...
项目4_品优购_day4
郭叶兵的博客
12-26 199
安全框架与商家入驻审核 一:最简单Demo 1.创建maven项目,war包 pom.xml <properties> <spring.version>4.2.4.RELEASE</spring.version> </properties> <dependencies> <dependency>...
项目4_品优购_day3
郭叶兵的博客
12-21 179
规格及模板管理 一:如何将代码进行分离 <script> var app=angular.module("pinyougou",['pagination']); //定义品优购模块 app.controller("brandController",functi...
品优购_day20_课程讲义_V1.31
08-08
【品优购电商系统开发第20章：品优购系统业务分析】 在电商系统开发中，业务分析是至关重要的一步，它涉及到系统的各种核心功能和流程设计。本章节主要聚焦于两个技术点：SpringTask任务调度和MavenProfile环境切换...
品优购_day01_课程讲义_V1.31
08-08
【品优购电商系统开发】的课程主要聚焦于分布式框架Dubbox在电商行业的应用，旨在帮助学习者深入理解电商行业的特性和架构设计。课程目标包括： 1. 了解电商行业特点：课程首先会解析电商行业的快速发展背景，强调...
品优购_day15_课程讲义_V1.31
08-08
在实际的品优购电商系统开发中，通过学习和实践上述内容，可以实现整个系统的单点登录功能，提高用户访问的便利性和系统的整体安全性。在后续的学习中，还会涉及到CAS与Spring Security的集成，以及自定义登录页面和...
javaWeb项目2_网上商城_day4
郭叶兵的博客
11-06 712
一:商品订单 购物车用Map是因为要对购物车操作,比如删除 修改,但是订单不需要操作删除,只需要存数据 (订单提交后,就不能修改了) public class OrderItem { private String itemid;//订单项的id private int count;//订单项内商品的购买数量 private double subtotal;//订单项小计 ...
javase项目1_管家婆
郭叶兵的博客
07-27 333
实现以下的效果(该项目需要的资料放在下面的链接里) 使用DBUtils操作数据库完成增删改查 分层来解决 完成步骤: 1.查询所有 2.按照条件查询(日期) 3.添加 4.修改(没有数据校验) 5.删除 ...
项目7_ssm_宜立方商城_day7
郭叶兵的博客
10-16 267
linux上安装solr服务器 https://blog.csdn.net/lushizhuo9655/article/details/109033855 配置业务域 schema.xml中定义 1、商品Id 2、商品标题 3、商品卖点 4、商品价格 5、商品图片 6、分类名称 创建对应的业务域。需要制定中文分析器。 创建步骤： 第一步：把中文分析器添加到工程中。 1、把IKAnalyzer2012FF_u1.jar添加到solr工程的lib目录下 2、把扩展词典、配置文件放到solr工程的W.
javaweb项目之旅游网第三天
郭叶兵的博客
05-23 243
一:旅游线路名称查询 获取页面传过来的值 比如这个http://localhost:8081/travel/route_list.html?cid=5 获取到的值就是5 //根据传递过来的参数name获取对应的值 function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = location.search.substr...
品优购项目全功能源代码实现指南
品优购项目源代码的打包文件名称为“pinyougou”，这可能是一个项目名称或者是一个用于标识项目的关键词。资源文件可能包含了所有必要的HTML页面文件、CSS样式表文件以及JavaScript脚本文件，这些文件在进行项目部署...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

guoyebing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值