AngularJS实例教程

时间 2019-12-06

原文原文链接

实例代码前台采用目前比较流行的AngularJS, 后台为spring而且能够对数据进行查询与保存, 代码实现了一个购物车功能:<1>添加商品，对购买的商品进行编辑,包括：产品编号，产品名称，购买数量，产品单价<2>商品数量修改时，总价格动态变化<3>提交商品信息而且进行后台保存javascript

实例下载：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=42css

Demo中使用的工具能够在百度云下载:html

Eclipse: http://pan.baidu.com/s/1c4f5zojava

Tomcat: http://pan.baidu.com/s/1c1KGqPEmysql

Maven: http://pan.baidu.com/s/1kVeKHDlangularjs

MySql服务器: http://pan.baidu.com/s/1b7ThBgspring

MySql客户端(sqlyog): http://pan.baidu.com/s/1hs5Vmbqsql

JDK1.7: http://pan.baidu.com/s/1pLBMCHH数据库

为了更好的学习，下面先简单介绍下AngularJsjson

1.AngularJS

AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。如今是由谷歌维护。它的最新版本是1.3.14。项目中对AngularJS进行了集成,下载demo后能够查看, 也能够到官网: https://angularjs.org/ 进行下载

1.1AngularJs开发js库的引入:

<script type="text/javascript" src="<%=contextPath%>/jsLib/angular/angularjs.js"></script>

1.2AngularJs在html中的申明

<div ng-app='shopCarApp' ng-controller="carShopController">

一个html页面中只能有一个ng-app, 却能够有多个ng-controller

js中对ng-app和ng-controller的初始化

var appShopCar = angular.module("shopCarApp", [], function($provide){ });

appShopCar.controller("carShopController", function ($scope, $http) { });

1.3数据双向绑定:

AngularJs最大的特性即是双向绑定,也就是Js中的数据变更时，能够实时动态将数据结果根据预先写好的规则反应到界面上

好比: $scope.data = 1;

<td>{{item.data}}</td> 则页面中应该显示为1；

若是$scope.data被动态修改成 2,页面会动态显示为 2

双向绑定带来的好处是开发人员只须要专一于业务逻辑的处理，页面上元素的变化不须要过多的关注与处理

1.4数据通信:

POST方法:

$http.post("/AngularJs/goods/saveGoods.htm", //后台URL地址 { goodsList : JSON.stringify($scope.carShop), //请求参数 }) .success(function (data, header, config, status) { if(data.stateCode == 0){ //结果处理 alert(data.desc); } }) .error(function (data, header, config, status) { console.log(data); });

GET方法：

$http.get("/AngularJs/user/get.htm", //后台URL地址{params: {param: $scope.param}}) //请求参数 .success(function (data, header, config, status) { console.log(data); //结果处理 }) .error(function (response) { console.log(response); });

好了，有关更多的AngularJs的信息能够到网上进行查阅

2 运行效果

启动项目，访问地址： http://localhost:8080/AngularJs/jsp/shopCar.jsp

效果图:

2.1 点击清空购物车,则商品会被所有清空

2.2 点击添加商品按钮，弹出商品编辑对话框，编辑产品编辑，产品名称，购买数量，产品单价

2.3 点击提交商品按钮，将前台商品信息传到后台进行保存

2.4 点击购买数量上的+-按钮时，商品数量会相应的+1,-1, 对应的产品总价进行变化，总购买价也会进行变化

3. 代码介绍:

代码框架如图:

3.1 数据库表:

建立数据表:t_goods

CREATE TABLE `t_goods` ( `GoodsId` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '商品主键', `GoodsNo` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '商品编号', `GoodsName` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '商品名字', `GoodsNum` int(10) DEFAULT NULL COMMENT '购买数量', `GoodsPrice` decimal(10,2) DEFAULT NULL COMMENT '商品单价', PRIMARY KEY (`GoodsId`)) ENGINE=InnoDB AUTO_INCREMENT=47 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

3.2 修改jdbc.properties链接数据库的用户名与密码

url=jdbc:mysql://127.0.0.1:3306/t_angular?characterEncoding=utf-8&allowMultiQueries=true#url=jdbc:mysql://www.ad186.com:3306/hctl?characterEncoding=utf-8username=rootpassword=ajqnhwvia

3.2 前台代码

3.2.1 前台代码使用了bootstrap进行效果上的渲染, bootstrap下载: http://v3.bootcss.com/

3.2.2 商品列表页面代码:

<body ng-app='shopCarApp' ng-controller="carShopController"><div class="container"><table class="table" ng-show="carShop.length"><thead><tr><th>产品编号</th><th>产品名字</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操做</th></tr></thead><tbody><tr ng-repeat="item in carShop"><td>{{item.goodsNo}}</td><td>{{item.goodsName}}</td><td><form class="form-inline"><div class="form-group"><button type="button" ng-click="reduce(item.goodsNo)" class="btn btn-primary">-</button><input type="text" class="form-control" id="exampleInputName2" value="{{item.goodsNum}}" ng-model="item.goodsNum" ><button type="button" ng-click="add(item.goodsNo)" class="btn btn-primary">+</button></div></form></td><td>{{item.goodsPrice}}</td><td>{{item.goodsPrice * item.goodsNum}}</td><td><button type="button" ng-click="remove(item.goodsNo)" class="btn btn-danger">移除</button></td></tr><tr><td></td><td></td><td></td><td></td><td colspan="2"></td></tr></tbody></table><b>总购买价:</b>{{totalPrice()}} &nbsp;&nbsp;&nbsp;<b>总购买数量:</b>{{totalQuantity()}}<br><p ng-show="!carShop.length">您的购物车为空</p><button type="button" ng-click="clearShop()" class="btn btn-danger">清空购物车</button><button type="button" ng-click="addCarShop()" class="btn btn-danger">添加商品</button><button type="button" ng-click="saveGoods()" class="btn btn-danger">提交商品</button></div>

3.3 商品编辑框代码:

<!-- 添加商品 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel" style="float: left;">新增商品</h4><button type="button" class="close closeModel" aria-label="Close" onClick="closeMod()"><span aria-hidden="true">&times;</span><tton></div><form id="goodsInfoForm" class="form-horizontal" role="form" style="margin-left: 30px; margin:30px;"><div class="form-group"><label for="goodsNo" class="col-sm-3 control-label"><span class="star_tip">*</span>产品编号：</label><div class="col-sm-8"><input ng-model="goods.goodsNo" type="text" class="form-control" id="goodsNo" name="goodsNo" value='1111' placeholder="产品编号"/></div></div><div class="form-group"><label for="goodsName" class="col-sm-3 control-label"><span class="star_tip">*</span>产品名称：</label><div class="col-sm-8"><input ng-model="goods.goodsName" type="text" class="form-control" id="goodsName" name="goodsName" value='iphone8' placeholder="产品名称"></div></div><div class="form-group"><label for="goodsNum" class="col-sm-3 control-label"><span class="star_tip">*</span>购买数量：</label><div class="col-sm-8"><input ng-model="goods.goodsNum" type="text" class="form-control" id="goodsNum" name="goodsNum" value='12' placeholder="购买数量"></div></div><div class="form-group"><label for="goodsPrice" class="col-sm-3 control-label"><span class="star_tip">*</span>产品单价：</label><div class="col-sm-8"><input ng-model="goods.goodsPrice" type="text" class="form-control" id="goodsPrice" name="goodsPrice" value='12' placeholder="产品单价"></div></div><div class="modal-footer" style="text-align:center;"><button type="button" class="btn btn-primary" id="save" ng-click="addGoods()">保存<tton><button type="button" class="btn btn-default closeModel" onClick="closeMod()">关闭<tton></div></form></div></div></div>

3.4 js逻辑代码处理

包括:AngularJs模块初始化，商品信息的加载，商品信息的增长，删除，提交

var appShopCar = angular.module("shopCarApp", [], function($provide){// 从服务器上获取初始化数据$provide.service('carShop',function($http){ var carShop = []; return carShop; })});appShopCar.controller("carShopController", function ($scope, $http) {console.log('加载 carShopController');$http.get("/AngularJs/goods/getGoods.htm") .success(function (data, header, config, status) { console.log(data); $scope.carShop = data.data; }) .error(function (response) { console.log(response); }); /** * 计算购物总价 */ $scope.totalPrice = function () { var total = 0; angular.forEach($scope.carShop, function (item) { total += item.goodsNum * item.goodsPrice; }) return total; } /** * 计算总购买数 */ $scope.totalQuantity = function () { var total = 0; angular.forEach($scope.carShop, function (item) { total += parseInt(item.goodsNum); }) return total; } /** * 找一个元素的索引 */ var findIndex = function (goodsNo) { var index = -1; angular.forEach($scope.carShop, function (item, key) { if (item.goodsNo === goodsNo) { index = key; return; } }); return index; } /** * 为某个产品添加一个数量 */ $scope.add = function (goodsNo) { var index = findIndex(goodsNo); if (index !== -1) { ++$scope.carShop[index].goodsNum; } } /** * 为某个产品减小一个数量 */ $scope.reduce = function (goodsNo) { var index = findIndex(goodsNo); if (index !== -1) { var item = $scope.carShop[index]; if(item.goodsNum > 1){ --item.goodsNum; }else{ var returnKey = confirm('是否从购物车内删除该产品!'); if(returnKey){ $scope.remove(goodsNo); } } } } /** * 移除一项 */ $scope.remove = function (goodsNo) { var index = findIndex(goodsNo); // 若是找到了那个itemif (index !== -1) { $scope.carShop.splice(index, 1); } // 自动作脏检查 } /** * 清空购物车 */ $scope.clearShop = function(){ $scope.carShop.length = 0; } /** * 添加商品 */ $scope.addCarShop = function(){ addCarShop(); } /** * 保存商品 */ $scope.addGoods = function() { //$('#goodsInfoForm').bootstrapValidator('validate');var bSuccess = $('#goodsInfoForm').data("bootstrapValidator").isValid(); if(bSuccess){ console.log($scope.goods); console.log(JSON.stringify($scope.goods)); /*$scope.goods.goodsNum = 4; $scope.goods.goodsPrice = 23000;*/ var goods = {}; goods.goodsNo = $scope.goods.goodsNo; goods.goodsName = $scope.goods.goodsName; goods.goodsNum = $scope.goods.goodsNum; goods.goodsPrice = $scope.goods.goodsPrice; $scope.carShop.push(goods); closeMod(); } } /** * 提交商品 */ $scope.saveGoods = function(){ if($scope.carShop.length == 0){ alert('没有商品提交'); return; } var postCfg = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: function (data) { return $.param(data); } }; $http.post("/AngularJs/goods/saveGoods.htm", { goodsList : JSON.stringify($scope.carShop), }, postCfg) .success(function (data, header, config, status) { if(data.stateCode == 0){ alert(data.desc); } }) .error(function (data, header, config, status) { console.log(data); }); }});$(function () {//校验form表单//校验bootstrap form表单$('#goodsInfoForm') .bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'goodsNo': { validators: { notEmpty: { message: '产品编号不能为空' }, stringLength: { min: 4, message: '产品编号最少4位' }, numeric: { message: '税额只能输入数字' } } }, 'goodsName': { validators: { notEmpty: { message: '产品名称不能为空' } } }, 'goodsNum': { validators: { notEmpty: { message: '购买数量不能为空' }, numeric: { message: '税额只能输入数字' } } }, 'goodsPrice': { validators: { notEmpty: { message: '产品单价不能为空' }, numeric: { message: '税额只能输入数字' } } } } }).on('success.form.bv', function(e) { alert('aaaaa'); });});/*** 清除控件元素中的内容 */function formClear() {}//添加数据function addCarShop() { formClear();//这个modal函数是bootstrap.js中的函数$("#myModal").modal("show"); }/**关闭窗口*/function closeMod(){//重置form表单$('#goodsInfoForm').data('bootstrapValidator').resetForm(true);$("#myModal").modal("hide");}

3.5 后台处理, 前台与后台通信的数据格式为json

保存商品信息

@RequestMapping("/saveGoods.htm") @ResponseBody public Result saveGoods(ModelMap map, HttpServletRequest request) { String strGoodsList = request.getParameter("goodsList"); List<Goods> lstGoods = JSON.parseArray(strGoodsList, Goods.class); Result result = new Result(); result.setStateCode("0"); result.setDesc("提交商品成功"); int nCount = goodsService.insertBatchGoods(lstGoods); return result; }

查询商品信息

@RequestMapping("/getGoods.htm") @ResponseBody public Result getGoods(ModelMap map, HttpServletRequest request) { Goods goods = new Goods(); List<Goods> lstGoods = goodsService.selectGoods(goods); Result result = new Result(); result.setStateCode("0"); result.setDesc("查询成功"); result.setData(lstGoods); return result;