品优购第二篇——AngularJs


阅读数: 次   

EverydayOneCat

Celloimg

一、AngularJS入门

1.AngularJS简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

image-20200627192005324

2.AngularJS四大特征

2.1MVC 模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的Web应用。

image-20200627192051281

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

2.2双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

image-20200627192127553

2.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI。

2.4模块化设计

高内聚低耦合法则

1)官方提供的模块 ng、ngRoute、ngAnimate

2)用户自定义的模块 angular.module(‘模块名’,[ ])

3.用法

3.1双向绑定

表达式的写法是 表达式可以是变量或是运算式

ng-app 指令 作用是告诉子元素一下的指令是归angularJs的，angularJs会识别的

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

我们如果希望有些变量具有初始值，可以使用ng-init指令来对变量初始化

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
	<title>入门小Demo-1  双向绑定</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='jy'"><!-- 初始化变量内容 -->
请输入你的姓名：<input ng-model="myname">
<br>
<!-- 双{}表示引用变量 -->
{{myname}},你好
</body>
</html>

image-20200627192456240

3.2控制器/循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门小Demo——控制器/事件指令/循环</title>
		<script src="angular.min.js"></script>
		<script>
			//建立模块——第一个参数为模块名，第二个为引用的其他模块数组
			var app = angular.module("myApp",[]);
			//创建控制器	$scope就是控制层与视图层之间交换数据的桥梁
			app.controller("myController",function($scope){
				//只有$scope后面跟上的方法才可以在视图层调用，普通的无法之间通过双{}调用
				/* $scope.add = function(){
					return parseInt($scope.x)+parseInt($scope.y);
				} */
				$scope.add = function(){
					$scope.z = parseInt($scope.x)+parseInt($scope.y);
				}
				
				$scope.list= [100,192,203,434 ];//定义数组
				$scope.Oblist= [
								{name:'张三',shuxue:100,yuwen:93},
								{name:'李四',shuxue:88,yuwen:87},
								{name:'王五',shuxue:77,yuwen:56}
							];//定义对象数组		

			});
			
			
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		第一个数:<input ng-model="x" />
		第二个数：<input ng-model="y" />
		<!-- 运算结果：{{add()}} -->
		<button type="button" ng-click="add()">运算</button>
		运算结果：{{z}}
		<table>
			<tr ng-repeat="x in list"><!-- x任意取 list为上面数组名称 -->
				<td>{{x}}</td>
			</tr>
			<tr>
				<td>姓名</td>
				<td>语文</td>
				<td>数学</td>
			</tr>
			<tr ng-repeat="entity in Oblist">
				<td>{{entity.name}}</td>
				<td>{{entity.shuxue}}</td>
				<td>{{entity.yuwen}}</td>
			</tr>
		</table>
	</body>
</html>

image-20200627192620894

3.3内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。

建立文件 data.json

1
2
3
4
5
6
7
[
	{"name":"张三","shuxue":100,"yuwen":93},
	{"name":"李四","shuxue":88,"yuwen":87},
	{"name":"王五","shuxue":77,"yuwen":56},
	{"name":"赵六","shuxue":67,"yuwen":86}
]

注意：以下代码需要在tomcat中运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
    //定义控制器
    app.controller('myController',function($scope,$http){		
        $scope.findAll=function(){
            $http.get('data.json').success(
                function(response){
                    $scope.list=response;
                }					
            );				
        }			
    });	
</script>

二、品牌管理

下面我们通过品优购品牌管理部分来对AngularJs进行更加深入的了解与使用。也会简要概述后端实现，基本都是增删改查，着重还是看前端用AngularJs如何实现。

1.列表

实现品牌列表的查询（不用分页和条件查询）

1.1后端

1
2
3
4
@Override
public List<TbBrand> findAll() {
    return brandMapper.selectByExample(null);
}
1
2
3
4
5
//返回全部列表
@RequestMapping("/findAll")
public List<TbBrand> findAll(){			
    return brandService.findAll();
}

1.2前端

1
2
3
4
5
6
7
8
9
10
11
12
<script src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
    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加上 ng-app=”pinyougou” ng-controller=”brandController” ng-init=”findAll()”

1
2
3
4
5
6
7
8
9
10
<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>

image-20200627200158208

2.分页

在品牌管理下方放置分页栏，实现分页功能

这里关于分页插件PageHelper的具体介绍可以看我的另一篇博客

2.1后端

在pinyougou-pojo工程中创建entity包，用于存放通用实体类，创建类PageResult

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 分页结果封装对象
 * @author Administrator
 *
 */
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 .....
}
1
2
3
4
5
6
@Override
public PageResult findPage(int pageNum, int pageSize) {
    PageHelper.startPage(pageNum, pageSize);		
    Page<TbBrand> page=   (Page<TbBrand>) brandMapper.selectByExample(null);
    return new PageResult(page.getTotal(), page.getResult());
}
1
2
3
4
5
//返回分页列表
@RequestMapping("/findPage")
public PageResult findPage(int page,int rows) {
    return brandService.findPage(page, rows);
}

2.2前端

引入分页组件

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

构建app模块时引入pagination模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var app = angular.module("pinyougou",["pagination"]);//定义模块	
//重新加载列表 数据
    		$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指令的调用，因为onChange在第一次加载时也会触发，所以不需要初始化的指令

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

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

3.增加

3.1后端

在pinyougou-pojo的entity包下创建类Result.java用来返回状态及提示信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 返回结果封装
 * @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.....
}
1
2
3
4
@Override
public void add(TbBrand brand) {
    brandMapper.insert(brand);	
}
1
2
3
4
5
6
7
8
9
10
11
//增加
@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, "增加失败");
    }
}

3.2前端

1
2
3
4
5
6
7
8
9
10
11
12
//保存 
$scope.save=function(){
	$http.post('../brand/add.do',$scope.entity ).success(
		function(response){
			if(response.success){
				 $scope.reloadList();//重新加载
			 }else{
				 alert(response.message);
			 }
		}		
	);				
}

为了每次打开窗口没有遗留上次的数据，我们可以修改新建按钮，对entity变量进行清空操作

1
2
3
<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.修改

4.1后端

1
2
3
4
5
6
7
8
9
@Override
public void update(TbBrand brand) {
    brandMapper.updateByPrimaryKey(brand);
}

@Override
public TbBrand findOne(Long id) {
    return brandMapper.selectByPrimaryKey(id);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//修改
@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, "修改失败");
    }
}	

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

4.2前端

由于我们修改和增加用的是同一个表单，只有一个保存按钮，我们需要对保存事件进行修改，使得两个都兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//保存
$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;
    })
}

5.删除

点击列表前的复选框，点击删除按钮，删除选中的品牌

5.1后端

1
2
3
4
5
6
@Override
public void delete(Long[] ids) {
    for(Long id:ids){
        brandMapper.deleteByPrimaryKey(id);
    }		
}
1
2
3
4
5
6
7
8
9
10
11
//批量删除
@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.2前端

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

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

（1）数组的push方法：向数组中添加元素

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$scope.selectIds=[];//选中的ID集合 
//更新复选
$scope.updateSelection = function($event,id){//$event是源，$event.target是特指那个标签
    if($event.target.checked){//如果是被选中,则增加到数组
        $scope.selectIds.push(id);
    }else{
        var idx = $scope.selectIds.indexOf(id);//查找值的位置
        $scope.selectIds.splice(idx,1);//参数1：移除的位置	参数2：移除的个数
    }
}
//批量删除 
$scope.dele = function(){
    //获取选中的复选框	
    $http.get("../brand/delete.do?ids="+$scope.selectIds).success(function(response){
        if(response.success){
            $scope.reloadList();//刷新列表
        }else{
            alert(response.message);
        }	
    });
}

修改列表的复选框

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

修改删除按钮

1
<button type="button" class="btn btn-default" title="删除" ng-click="dele()">

6.条件查询

实现品牌条件查询功能，输入品牌名称、首字母后查询，并分页。

6.1后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
public PageResult findPage(TbBrand brand, int pageNum, int pageSize) {
    PageHelper.startPage(pageNum, pageSize);
    TbBrandExample example = new TbBrandExample();
    Criteria criteria = example.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<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
    return new PageResult(page.getTotal(), page.getResult());
}
1
2
3
4
5
//查询+分页
@RequestMapping("/search")
public PageResult search(@RequestBody TbBrand brand, int page, int rows  ){
    return brandService.findPage(brand, page, rows);		
}

6.2前端

增加条件选项

1
2
品牌名称:<input ng-model="searchEntity.name"> 品牌首字母:<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="reloadList()"></button> 
1
2
3
4
5
6
7
8
$scope.searchEntity={};//定义搜索对象 	
//条件查询
$scope.search = new 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;//给列表变量赋值 
    });
}

修改reloadList方法

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

结语

2020死亡套餐：

张东升带你去爬山拍照

徐静带你游泳

严良带你到楼顶吹口哨

严良爸请你吃梨

晶晶踩你鞋子

普普喊你上五楼

周春红让你喝牛奶

马主任带你去六峰宾馆给你剥橘子

王瑶为你广播

王立带你去冷库

朱朝阳把你写在日记里

总结：我还有机会吗？

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家