一、前端框架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());
}
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
