一、前端框架AngularJS入门
1、AngularJS简介
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。
2、AngularJS四大特征
(1)、MVC模式
Angular 遵循软件工程的 MVC 模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular 为客户端的 Web 应用带来了传统服务端的服务。
例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的 Web 应用。
Model:数据,其实就是 angular 变量($scope.XX);
View:数据的呈现,Html+Directive(指令);
Controller:操作数据,就是 function,数据的增删改查;
(2)、双向绑定
AngularJS 是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。
(3)、依赖注入
依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的 service 和 provider 两类对象,都可以根据形参名称实现 DI.
(4)、模块化设计
高内聚低耦合法则
官方提供的模块 ng、ngRoute、ngAnimate
用户自定义的模块 angular.module('模块名',[ ])
3、入门程序
(1)、表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
</head>
<body>
<!--
ng-app表示标签下的所有符合angularjs的表达式都执行angular的运算
ng-app 可以加载任何的标签内,加入ng-app的标签中的表达式都默认按照angular的规则进行运算
-->
<div ng-app>
<!-- {{中间的内容是需要进行计算的表达式}} -->
{{100+100}}
</div>
{{100+100}}
</body>
</html>
(2)、双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
<!-- 使用js实现双向绑定 -->
<input οnkeyup="show()" type="password" id="content" />
输入框的内容为:<span id="span"></span>
<script type="text/javascript">
function show(){
//使用js实现双向绑定
var content = document.getElementById("content").value;
//获取span标签,写入input中获取的内容
document.getElementById("span").innerHTML = content;
}
</script>
<hr/>
<!-- 使用angularjs实现双向绑定 -->
<input type="password" ng-model="content"/>
输入框的内容为:<span>{{content}}</span>
</body>
</html>
(3)、控制器和mvc模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
<script type="text/javascript">
//$scope相当于域,在方法中给变量赋值之后,通过ng的表达式可以取出对应的数值
function myController($scope){
$scope.name = "你好呀";
$scope.age = 18;
$scope.user = {name:"zs", age:19};
}
</script>
<div ng-controller="myController">
名称是:<span>{{name}}</span>
<br>
年龄是:<span>{{age}}</span>
<br>
对象是:<span>{{user}}</span>
<br>
对象的姓名是:<span>{{user.name}}</span>
<br>
对象的年龄是:<span>{{user.age}}</span>
</div>
</body>
</html>
(4)、模块化设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
//自定义模块,模块名称为:myApp
var app = angular.module("myApp", []);
//自定义控制器,名称为:myController
app.controller("myController", function($scope){
//需要加上$scope,否则在使用表达式获取时无法获取到返回值
$scope.getName = function(){
return "TOME";
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
{{getName()}}
</body>
</html>
(5)、初始化指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app ng-init="name='JERRY'">
{{name}}
</body>
</html>
(6)、事件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.add = function(){
$scope.c = parseInt($scope.a) + parseInt($scope.b);
}
$scope.jian = function(){
$scope.f = parseInt($scope.d) - parseInt($scope.e);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<input ng-model="a" />+<input ng-model="b" /><button ng-click="add()">等于</button><input ng-model="c" />
<br>
<br>
<input ng-model="d" />-<input ng-model="e" /><button ng-click="jian()">等于</button><input ng-model="f" />
</body>
</html>
(7)、循环数组、循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
//定义数组
$scope.array = ['a','b','c','d','e'];
//定义对象集合
$scope.list = [{name:"zs", age:19},{name:"ls", age:20},{name:"ww", age:21}]
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<!-- 循环数组 -->
<div ng-repeat="i in array">
{{i}}
</div>
<hr>
<!-- 循环对象 -->
<div ng-repeat="user in list">
{{user.name}} : {{user.age}}
</div>
</body>
</html>
(8)、内置服务
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope, $http){
$scope.findAllBrand = function(){
//$http就是内置服务, .get(url)表示发送get请求 .success()表示成功的回调函数
$http.get("../brand/findAll.do").success(function(resp){
$scope.list = resp;
});
}
})
</script>
</head>
<body ng-init="findAllBrand()" ng-app="myApp" ng-controller="myController">
<!-- 循环数组 -->
<div ng-repeat="brand in list">
{{brand}}
</div>
</body>
</html>
二、品牌列表的实现
1、html页面引入angularjs的文件、编写angularjs的自定义模块和控制器、在标签中加入遍历操作的属性以及表达式
三、品牌列表分页的实现
1、创建分页查询时需要返回的javaBean对象
package com.eneity;
import java.io.Serializable;
import java.util.List;
public class PageResult implements Serializable {
private Long total;
private List rows;
public PageResult(Long total, List rows) {
this.total = total;
this.rows = rows;
}
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
2、编写brand.html页面中的angularjs代码
<!-- 引入angluarjs的文件 -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 引入angularjs分页插件的js和css -->
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script type="text/javascript">
//自定义模块名,其中引入分页的模块
var app = angular.module("pinyougou", ['pagination']);
//自定义控制器
app.controller("brandController", function($scope, $http){
//分页插件
$scope.paginationConf = {
currentPage : 1, //当前页,由angularjs查询出来
totalItems : 10, //数据总条数,由后台查询出来
itemsPerPage : 10, //每页显示的条数,由angularjs控制
perPageOptions : [10, 20, 30, 40, 50],
onChange : function(){ //此方法会在初始化页面的时候就被触发,因此ng-init属性就不需要写了
$scope.reloadList(); //重新加载
}
};
//定义加载分页数据的方法
$scope.reloadList = function(){
var page = $scope.paginationConf.currentPage;
var pageSize = $scope.paginationConf.itemsPerPage;
$scope.findByPage(page, pageSize);
};
//定义查询分页数据的方法
$scope.findByPage = function(page, pageSize){
$http.get("../brand/findByPage.do?page="+page+"&pageSize=" + pageSize).success(function(data){
/*
data返回值为:
{
"rows":[
{"firstChar":"L","id":1,"name":"联想"},
{"firstChar":"H","id":2,"name":"华为"},
{"firstChar":"S","id":3,"name":"三星"},
{"firstChar":"X","id":4,"name":"小米"},
{"firstChar":"O","id":5,"name":"OPPO"}],
"total":22
}
*/
//返回的数据集合
$scope.list = data.rows;
//返回的总条数
$scope.paginationConf.totalItems = data.total;
});
}
});
</script>
3、编写后台分页查询的代码
TbBrandController.java
/**
* 分頁查詢
* @param page
* @param pageSize
* @return
*/
@RequestMapping("/findByPage")
public PageResult findByPage(Integer page, Integer pageSize) {
PageResult rest = service.findByPage(page, pageSize);
return rest;
}
TbBrandServiceImpl.java
/**
* 使用PageHelper进行分页查询
*/
public PageResult findByPage(Integer pageNum, Integer pageSize) {
PageHelper.startPage(pageNum, pageSize);
Page page = (Page) mapper.selectByExample(null);
return new PageResult(page.getTotal(), page.getResult());
}
四、增加品牌
1、html中点击新建时清空实体类
2、html中绑定点击保存按钮事件
3、自定义控制器中添加保存的方法
4、编写页面信息返回结果的javaBean
package com.eneity;
import java.io.Serializable;
public class MessageResult implements Serializable {
private Boolean success;
private String message;
public MessageResult(Boolean success, String message) {
this.success = success;
this.message = message;
}
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
5、编写后台代码
TbBrandController.java
/**
* 保存品牌的方法
* @param brand
* @return
*/
@RequestMapping("/saveBrand")
public MessageResult saveBrand(@RequestBody TbBrand brand) {
MessageResult rest = null;
try {
service.saveBrand(brand);
rest = new MessageResult(true, "保存成功");
} catch (Exception e) {
e.printStackTrace();
rest = new MessageResult(false, "保存失败");
}
return rest;
}
TbBrandServiceImpl.java
/**
* 保存的方法
*/
public void saveBrand(TbBrand brand) {
mapper.insert(brand);
}
五、修改品牌
1、html页面绑定修改按钮的angularjs事件
2、编写angularjs事件
3、编写后台代码
TbBrandController.java
/**
* 根据id查询品牌
* @param id
* @return
*/
@RequestMapping("/findOne")
public TbBrand findOne(Long id) {
TbBrand brand = service.findById(id);
return brand;
}
/**
* 修改品牌
* @param brand
* @return
*/
@RequestMapping("/updateBrand")
public MessageResult updateBrand(@RequestBody TbBrand brand) {
MessageResult rest = null;
try {
service.updateBrand(brand);
rest = new MessageResult(true, "修改成功");
} catch (Exception e) {
e.printStackTrace();
rest = new MessageResult(false, "修改失败");
}
return rest;
}
TbBrandServiceImpl.java
/**
* 根据id查询
*/
public TbBrand findById(Long id) {
return mapper.selectByPrimaryKey(id);
}
/**
* 修改品牌
*/
public void updateBrand(TbBrand brand) {
mapper.updateByPrimaryKey(brand);
}
六、删除品牌
1、html页面给复选框绑定点击事件
2、html页面给删除按钮绑定angularjs点击事件
3、编写angularjs点击复选框和删除按钮事件的方法
//定义选中的选项的id数组
$scope.selectIds = [];
//复选框点击事件触发时执行的方法
$scope.updateSelectIds = function($event, id){
//判断复选框是是否为勾选状态,$event.target 代表当前操作的对象,是一个复选框
if($event.target.checked){
$scope.selectIds.push(id); //向数组中放入数据
}else{
//复选框被取消,将数组中对应的id移除
//$scope.selectIds.splice(当前值的索引值, 删除的数量);
var index = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idnex, 1);
}
}
//定义删除品牌的方法
$scope.del = function(){
if($scope.selectIds.length == 0){
return;
}else{
if(window.confirm("是否需要删除选中的品牌?")){
$http.post("../brand/del.do?ids=" + $scope.selectIds).success(function(resp){
if(resp.success){
//删除成功,重新获取列表数据
$scope.reloadList();
}else{
alert(resp.message);
}
});
}
}
}
4、编写后台代码
TbBrandController.java
/**
* 删除ids
* @param ids
* @return
*/
@RequestMapping("/del")
public MessageResult delete(Long[] ids) {
MessageResult rest = null;
try {
service.delete(ids);
rest = new MessageResult(true, "删除成功");
} catch (Exception e) {
e.printStackTrace();
rest = new MessageResult(false, "删除失败");
}
return rest;
}
TbBrandServiceImpl.java
/**
* 根据id删除
*/
public void delete(Long[] ids) {
for (Long id : ids) {
mapper.deleteByPrimaryKey(id);
}
}
七、品牌按条件查询
1、html添加搜索框以及按钮事件
2、html中添加搜索方法以及改写reloadList方法
3、后台代码
TbBrandController.java
/**
* 按条件查询品牌数据
* @param page
* @param pageSize
* @param TbBrand
* @return
*/
@RequestMapping("search")
public PageResult findByPage(Integer page, Integer pageSize, @RequestBody TbBrand searchEntity) {
PageResult rest = service.findPageByExample(page, pageSize, searchEntity);
return rest;
}
TbBrandServiceImpl.java
/**
* 分页条件查询
*/
public PageResult findPageByExample(Integer page, Integer pageSize, TbBrand brand) {
PageHelper.startPage(page, pageSize);
TbBrandExample example = new TbBrandExample();
Criteria criteria = example.createCriteria();
if(StringUtils.isNotEmpty(brand.getFirstChar())) {
criteria.andFirstCharEqualTo(brand.getFirstChar());
}
if(StringUtils.isNotEmpty(brand.getName())) {
criteria.andNameLike("%" + brand.getName() + "%");
}
Page list = (Page) mapper.selectByExample(example);
return new PageResult(list.getTotal(), list.getResult());
}