AngularJS实现订单案例

最新推荐文章于 2020-07-10 19:25:59 发布

华科易迅

最新推荐文章于 2020-07-10 19:25:59 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/qixiang_chen/article/details/86553288

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的订单管理系统，包括订单列表展示、添加、编辑和删除等功能。系统通过Ajax与后端交互，实现了数据的动态加载和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>列表</title>
	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/js/base.css">
</head>
  <body>
  	<!-- 定义Angular应用的根Dom对象 -->
  	<!-- 绑定Controller OrderCtrl -->
  	<!-- 初始化方法loadorderlist() -->
    <div ng-app="OrderApp" ng-controller="OrderCtrl" ng-init="loadorderlist()">
		<!-- 绑定 添加按钮事件 doadd()-->
		<input type="button" value="添加" ng-click="doadd()"/>
		<table>
			<tr>
				<th>全选</th>
				<th>名称</th>
				<th>时间</th>
				<th>金额</th>
				<th>省份</th>
				<th>地区</th>
				<th>县市</th>
			</tr>
			<!-- 循环遍历数据对象 -->
			<!-- 点击每行触发openorder(o.id) -->
			<tr ng-repeat="o in orderlist" ng-click="openorder(o.id)">
				<!-- 插值绑定 -->
				<td>{{o.id}}</td>
				<td>{{o.name}}</td>
				<td>{{o.ts}}</td>
				<td>{{o.amount}}</td>
				<td>{{o.provinceName}}</td>
				<td>{{o.cityName}}</td>
				<td>{{o.countyName}}</td>
			</tr>
		</table>
		<!-- 订单输入窗口 -->
		<div id="orderadd" style="display:{{showorder}}">
			<table>
				<tr>
					<td colspan="2">
						<!-- 绑定按钮事件 -->
						订单主表
						<input type="button" value="关闭" ng-click="doclose()"/>
						<input type="button" value="添加订单明细" ng-click="additem()"/>
						<input type="button" value="保存订单" ng-click="saveorder()"/>
					</td>
				</tr>
				<tr>
					<td>名称</td>
					<!-- 绑定数据到Dom控件 -->
					<td><input type="text" ng-model="order.name"/></td>
				</tr>
				<tr>
					<td>时间</td>
					<td><input type="text" ng-model="order.ts"/></td>
				</tr>
				<tr>
					<td>金额</td>
					<td><input type="text" ng-model="order.amount"/></td>
				</tr>
				<tr>
					<td>省份</td>
					<td>
						<!-- 绑定省份数据、下拉事件 -->
						<select ng-model="order.provinceCode" ng-change="selectcity()"
							ng-options="p.code as p.name for p in provicelist">
							{{p.name}}</select>
					</td>
				</tr>
				<tr>
					<td>地区</td>
					<td>
						<!-- 绑定地区数据、下拉事件 -->
						<select ng-model="order.cityCode" ng-change="selectcounty()"
							ng-options="p.code as p.name for p in citylist">
							{{p.name}}</select>
					</td>
				</tr>
				<tr>
					<td>县市</td>
					<td>
						<!-- 绑定县市数据-->
						<select ng-model="order.countyCode" 
							ng-options="p.code as p.name for p in countylist">
							{{p.name}}</select>
					</td>
				</tr>
			</table>
			<!-- 订单明细  -->
			<table>
				<tr>
					<td colspan="10">
						订单明细
					</td>
				</tr>
				<tr>
					<th>主键</th>
					<th>产品</th>
					<th>数量</th>
					<th>价格</th>
					<th>金额</th>
					<th>操作</th>
				</tr>
				<!-- 遍历订单明细 -->
				<tr ng-repeat="oi in order.items">
					<td>{{oi.id}}</td>
					<td>
						<select ng-model="oi.prdtId"
							ng-options="p.code as p.name for p in prdtlist">
							{{p.name}}</select>
					</td>
					<td><input type="text" ng-model="oi.num"/></td>
					<td><input type="text" ng-model="oi.price"/></td>
					<td>{{oi.num*oi.price}}</td>
					<td><button ng-click="dodelete(oi.uuid)">删除</button></td>
				</tr>
			</table>
		</div>
    </div>
<script>
//定义模块
var myApp = angular.module('OrderApp', []);
//在模块OrderApp中定义Controller
//OrderCtrl中依赖注入'$scope','$http'
//构造方法必须包含此两个参数function($scope,$http)
myApp.controller('OrderCtrl', ['$scope','$http',
	function($scope,$http){
	//定义数据对象
	$scope.showorder = 'none';
	$scope.prdtlist=[{code:'1',name:'手机'},{code:'2',name:'笔记本'},{code:'3',name:'数码相机'}],
    //定义方法
    $scope.doclose = function() {
    	$scope.showorder = 'none';
    },
    $scope.doadd = function() {
    	$scope.showorder = 'block';
    },
	$scope.loadorderlist = function()
	{
    	//请求订单列表数据
		$scope.method = 'GET';
		$scope.url = '/orderlist.action';
		$http({method: $scope.method, url: $scope.url})
		.then(function(response) 
		{
			//赋值订单列表对象
			$scope.orderlist = response.data.rows;
		}, function(response) {
			$scope.orderlist = response.data || 'Request failed';
		});
	},
	//根据订单ID请求后台Order对象
	$scope.openorder = function(id)
	{
		$scope.method = 'GET';
		$scope.url = '/loadorder.action?id='+id;
		$http({method: $scope.method, url: $scope.url})
		.then(function(response) 
		{
			//赋值订单对象
			$scope.order = response.data;
			$scope.loadaddress($scope.order.provinceCode,
	        		  $scope.order.cotuCode,$scope.order.countyCode);
			$scope.showorder = 'block';
		}, function(response) {
			$scope.orderlist = response.data || 'Request failed';
		});
	},
	//选择省份时查询后台地区数据
	$scope.selectcity = function()
	{
		//加载地区
		$scope.method = 'GET';
		$scope.url = '/city.action?pcode='+$scope.order.provinceCode;
		$http({method: $scope.method, url: $scope.url})
		.then(function(cityResponse) 
		{
			$scope.citylist = cityResponse.data;
			$scope.order.cityCode=cityResponse.data[0].code;
			//根据默认地区选择县市列表
			city=cityResponse.data[0].code;
			$scope.selectcounty();
		});
	},
	//选择县市列表
	$scope.selectcounty = function()
	{
		//加载县市
		$scope.method = 'GET';
		$scope.url = '/county.action?city='+$scope.order.cityCode;
		$http({method: $scope.method, url: $scope.url})
		.then(function(countyResponse) 
		{
			$scope.countylist = countyResponse.data;
			$scope.order.countyCode=countyResponse.data[0].code;
		});
	},
	//点击添加订单调用的方法
	$scope.additem = function()
	{
		//向订单对象的明细对象添加默认数据
		$scope.order.items.push({
			id:'',
			prdtId:'1',
			num:1,
			price:1,
			uuid:Math.random()
		});
	},
	//删除订单明细调用的方法
	$scope.dodelete = function(id)
	{
		var len = $scope.order.items.length;
		for(var i=0;i<len;i++)
		{
			//循环遍历删除订单明细，根据uuid匹配选中删除
			if($scope.order.items[i] && $scope.order.items[i].uuid == id)
			{
				$scope.order.items.splice(i,1);
			}
		}
	},
	//保存订单方法
	$scope.saveorder = function()
	{
		$scope.method = 'POST';
		$scope.url = '/ordersave.action';
		$http({method: $scope.method, url: $scope.url,data:$scope.order})
		.then(function(response) 
		{
			$scope.order = response.data;
			$scope.loadorderlist();
			//$scope.openorder($scope.order.id);
		});
	},
	//根据参数选中地址下拉框
	$scope.loadaddress = function(province,city,county)
	{
		$scope.method = 'GET';
		$scope.url = '/province.action';
		$http({method: $scope.method, url: $scope.url})
		.then(function(response) 
		{
			$scope.provicelist = response.data;
			//设置默认省份
			if(province=='' || province == null)
			{
				$scope.order.provinceCode=response.data[0].code;
				province=response.data[0].code;
			}
			//加载地区
			$scope.method = 'GET';
			$scope.url = '/city.action?pcode='+province;
			$http({method: $scope.method, url: $scope.url})
			.then(function(cityResponse) 
			{
				$scope.citylist = cityResponse.data;
				//判断地区是否为空
				if(city == '' || city == null)
				{
					$scope.order.cityCode=cityResponse.data[0].code;
					city=cityResponse.data[0].code;
				}
				//加载县市
				$scope.method = 'GET';
				$scope.url = '/county.action?city='+city;
				$http({method: $scope.method, url: $scope.url})
				.then(function(countyResponse) 
				{
					$scope.countylist = countyResponse.data;
					//判断地区是否为空
					if(city == '' || city == null)
					{
						$scope.order.countyCode=countyResponse.data[0].code;
					}
				});
			});
			
		}, function(response) {
			$scope.orderlist = response.data || 'Request failed';
		});

	
	}
}]);
</script>
  </body>
</html>

Controller

package com.gf.ctrl;

import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.gf.model.AddressInfo;
import com.gf.model.OrderInfo;
import com.gf.model.OrderItemInfo;
import com.gf.service.OrderService;
import com.gf.statusflow.UUID;
import com.gf.statusflow.Util;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Controller
public class OrderCtrl {
	@Autowired
	private OrderService serv;
	
	@RequestMapping(value="/order.action")
	public String list()
	{	
		return "ordervue";
	}
	
	@RequestMapping("/orderagl.action")
	public String orderagl()
	{
		return "orderagl";
	}
	
	@RequestMapping("/orderangular.action")
	public String orderangula()
	{
		return "orderangular";
	}
	
	@RequestMapping("/province.action")
	@ResponseBody
	public List<AddressInfo> province()
	{
		return serv.getProviceList();
	}
	
	@RequestMapping("/city.action")
	@ResponseBody
	public List<AddressInfo> city(String pcode)
	{
		return serv.getCityList(pcode);
	}

	@RequestMapping("/county.action")
	@ResponseBody
	public List<AddressInfo> county(String city)
	{
		return serv.getCountyList(city);
	}
	
	@RequestMapping("/orderlist.action")
	@ResponseBody
	public Map<String,Object> orderlist(Integer page,Integer rows)
	{
		System.out.println("page==="+page+",rows==="+rows);
		if(page == null)
			page = 1;
		if(rows == null)
			rows = 4;
		Map<String,Object> m = new HashMap<String,Object>();
		PageHelper.startPage(page, rows);
		List<OrderInfo> list = serv.findOrder();
		PageInfo<OrderInfo> pi = new PageInfo<OrderInfo>(list);
		m.put("total",pi.getTotal());
		m.put("rows", pi.getList());
		
		return m;
	}
	
	@RequestMapping("/loadorder.action")
	@ResponseBody
	public OrderInfo loadorder(String id)
	{
		OrderInfo oi = serv.findOrderById(id);
System.out.println("id==="+id+",oi="+oi);
		List<OrderItemInfo> items = serv.findOrderItem(oi.getId());
		oi.setItems(items);
		return oi;
	}
	
	@RequestMapping("/ordersave.action")
	@ResponseBody
	public OrderInfo ordersave(HttpServletRequest req)
	{
		try
		{
			ByteArrayOutputStream baos = new ByteArrayOutputStream();
			InputStream is = req.getInputStream();
			FileCopyUtils.copy(is, baos);
			String json = new String(baos.toByteArray());
			//{id:'1',name:'Java',items:[{},{}]}
			JSONObject jsonObj = JSONObject.parseObject(json);
			OrderInfo oi = (OrderInfo)JSONObject.toJavaObject(jsonObj, OrderInfo.class);
			String id = oi.getId();
			System.out.println("Id="+id);
			if("".equals(Util.fmtStr(id)))
			{
				id = UUID.create("order");
				oi.setId(id);
				serv.saveOrder(oi);
				List<OrderItemInfo> items = oi.getItems();
				for(OrderItemInfo oii:items)
				{
					oii.setId(UUID.create("oitem"));
					oii.setOrderId(id);
					Integer num = oii.getNum();
					BigDecimal price = oii.getPrice();
					BigDecimal amount = price.multiply(new BigDecimal(num));
					oii.setAmount(amount);
					serv.saveOrderItem(oii);
				}
			}
			else
			{
				serv.updateOrder(oi);
				serv.deleteOrderItem(id);
				List<OrderItemInfo> items = oi.getItems();
				for(OrderItemInfo oii:items)
				{
					oii.setId(UUID.create("oitem"));
					oii.setOrderId(id);
					Integer num = oii.getNum();
					BigDecimal price = oii.getPrice();
					BigDecimal amount = price.multiply(new BigDecimal(num));
					oii.setAmount(amount);
					serv.saveOrderItem(oii);
				}
			}
			return oi;
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
		return null;
	}
	
	public static void main(String[] args)
	{
		List lst = new ArrayList();
		lst.add("Java");
	}
}

效果图：
在这里插入图片描述