我将struts2与约定的gingin结合使用angularjs。我有一个动作类和jsp,如下所示:
IndexAction.java
package sm.hris.struts2.base.modules.order;
import java.util.ArrayList;
import java.util.Date;
import org.apache.struts2.convention.annotation.InterceptorRef;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import sm.hris.struts2.base.SmBaseAction;
import sm.hris.struts2.base.db.Order;
import sm.hris.struts2.base.db.OrderDAO;
import sm.hris.struts2.base.modules.order.IndexAddAction;
@Results({
@Result(name="add", location="/base/modules/order/index-add", type="redirect"),
})
@ParentPackage(value = "hris")
public class IndexAction extends SmBaseAction {
private static final long serialVersionUID = 7353477345330099548L;
private Order order = new Order();
private OrderDAO orderDAO = new OrderDAO();
private ArrayList<Order> orders;
private String idOrder = new String();
private String searchKey = new String();
private ArrayList<String> formArg = new ArrayList<String>();
private ArrayList<String> idOrders = new ArrayList<String>();
private String proc = new String();
private String res = new String();
private IndexAddAction indexAddAction = new IndexAddAction();
public String execute() throws Exception{
//super.listMenu();
if(proc.equals("Add")){
order.setOrderDate(new Date());
orderDAO.setOrder(order);
String strIdOrderCounter = orderDAO.orderAdd();
ArrayList<String> argArray = new ArrayList<String>();
argArray.add(0,strIdOrderCounter);
orderDAO.setArgArray(argArray);
orders = orderDAO.searchOrderByIdOrder();
order = orders.get(0);
res= "add";
}
if(proc.equals("Delete")){
res = orderDelete();
}
if(!(proc.equals("Add")||proc.equals("Delete"))){
if (!searchKey.equals("")) {
formArg.add("%"+searchKey+"%");
orderDAO.setArgArray(formArg);
orders = orderDAO.searchOrderByAnyLike();
res="success";
}
else {
orders = orderDAO.searchOrder();
res="success";
}
}
return res;
}
public String orderDelete() throws Exception {
orderDAO.setArgArray(idOrders);
orderDAO.orderDelete();
return "success";
}
public String orderAdd() throws Exception {
return "add";
}
//---- Getter Setter ----//
public String getIdOrder(){
return idOrder;
}
public void setIdOrder(String idOrder){
this.idOrder=idOrder;
}
public String getSearchKey(){
return searchKey;
}
public void setSearchKey(String searchKey){
this.searchKey=searchKey;
}
public ArrayList<String> getIdOrders(){
return idOrders;
}
public void setIdOrders(ArrayList<String> idOrders){
this.idOrders=idOrders;
}
public ArrayList<Order> getOrders(){
return orders;
}
public void setOrders(ArrayList<Order> orders){
this.orders = orders;
}
public Order getOrder(){
return order;
}
public void setOrder (Order order){
this.order = order;
}
public void setProc(String proc) {
this.proc = proc;
}
}
index-add.jsp:
<!DOCTYPE html>
<html>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="hris, company, resources, management, showcase" />
<meta name="description" content="A Showcase for the Human Resporce Management System" />
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<sb:head includeScripts="true" includeScriptsValidation="false"/>
<sj:head jqueryui="true"/>
<style type="text/css">
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
h5 {padding-left: 210px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<!--
<script data-require="[email protected]" data-server="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
-->
<script>
//function show_unitlist() {
// dojo.event.topic.publish("show_unitlist");
//}
</script>
<script>
var app = angular.module("orderApp", []);
app.controller("orderAppCtrl", function($scope,$http,$window,$compile) {
//$scope.orderDetails = [{id: 'orderDetail1', name: 'orderDetail1'}, {id: 'orderDetail2', name: 'orderDetail2'}, {id: 'orderDetail3', name: 'orderDetail3'}];
$scope.orderDetails = [];
$scope.orderDetail={
'idOrderDetail' :"",
'idOrder' :"",
'idProduct' :"",
'amount' :"",
'unit' :"",
'unitPrice' :"",
'subTotal' :""
};
$scope.addNewOrderDetail = function() {
var murl ="/sm-hris/base/modules/orderdetail/select-id-order-detail-counter-json";
$http.get(murl)
.then(function(response) {
$scope.idOrderDetailCounter = response.data.idOrderDetailCounter;
});
$scope.orderDetails.push({
'idOrderDetail' : ($scope.idOrderDetailCounter),
'idOrder' :'<s:property value="order.idOrder"/>',
'idProduct' :'',
'amount' :'',
'unit' :'',
'unitPrice' :'',
'subTotal' :''
});
};
$scope.removeNewOrderDetail = function(nId) {
//var index = $scope.orderDetails.indexOf(item);
//$scope.orderDetails.splice($scope.orderDetails.indexOf(nId), 1);
//var oOrderDetail = $scope.orderDetails.filter(orderDetail = function() {return orderDetail.id === nId});
//var vIndex = $scope.orderDetails.indexOf(oOrderDetail);
//var vIndex = $scope.orderDetails.findIndex(orderDetail=>orderDetail.id === nId);
var found = $scope.orderDetails.find(function(orderDetail){return orderDetail.id = nId});
var vIndex = $scope.orderDetails.indexOf(found);
$scope.orderDetails.splice(vIndex,1);
//$scope.orderDetails.splice(nId,1);
};
$scope.showAddOrderDetail = function(orderDetail) {
return orderDetail.id === $scope.orderDetails[$scope.orderDetails.length-1].id;
};
$scope.idProductNgBlur = function (idProduct,idx){
$scope.orderDetails[idx].unitPrice = 0;
var murl ="/sm-hris/base/modules/orderdetail/select-product-by-id-json?idProduct="+ idProduct;
$http.get(murl)
.then(function(response) {
var product = response.data.products[0];
$scope.orderDetails[idx].unitPrice = product.unitPrice;
$scope.orderDetails[idx].subTotal = $scope.orderDetails[idx].amount * $scope.orderDetails[idx].unitPrice;
})
}
$scope.amountNgBlur = function (amount,unitPrice,idx){
$scope.orderDetails[idx].subTotal = amount * unitPrice;
}
});
</script>
</head>
<body ng-app="orderApp">
<div class="container" ng-controller="orderAppCtrl">
<div class="row">
<div class="panel-heading">
<h1>Adding Order</h1>
</div>
<div class="container">
<!-- <s:form id="frmOrder" action="index-edit" enctype="multipart/form-data" theme="bootstrap" cssClass="form-horizontal"> -->
<div class="form-group">
<div class="row">
<div class="col-md-9">
<s:textfield
label="Order ID"
name="order.idOrder"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Enter ID Order"
value="%{order.idOrder}"
ng-model="idOrder"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Total"
name="order.total"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Total"
value="%{order.total}"
ng-model="total"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Total Discount"
name="order.totalDiscount"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Total Discount"
value="%{order.total}"
ng-model="totalDiscount"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:textfield
label="VAT"
name="order.vat"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="VAT"
value="%{order.vat}"
ng-model="vat"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Cash"
name="order.cash"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Cash"
value="%{order.cash}"
ng-model="cash"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Changes"
name="order.changes"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Changes"
value="%{order.changes}"
ng-model="changes"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Payment Method Id"
name="order.idPaymentMethod"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Payment Method Id"
value="%{order.idPaymentMethod}"
ng-model="idPaymentMethod"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Payment Remark"
name="order.paymentRemark"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Payment Remark"
value="%{order.paymentRemark}"
ng-model="paymentRemark"
/>
</div>
<div class="col-md-9">
<s:textfield
label="Order Date"
name="order.orderDate"
cssClass="input-sm"
elementCssClass="col-sm-3"
tooltip="Order Date"
value="%{order.orderDate}"
ng-model="orderDate"
readonly="true"
/>
</div>
<div class="col-md-9">
<s:submit cssClass="btn btn-primary" id="proc" name="proc" value="Save" />
<!-- <button ng-click="orderAddClick()">Add</button> -->
</div>
<div class="row">
<div class="col-md-9">
<h1>Order Detail</h1>
<div class="row" ng-repeat="orderDetail in orderDetails">
<!-- <s:submit cssClass="btn btn-primary" ng-click="removeNewOrderDetail('{{orderDetail.id}}')" value="Remove Order Detail" /> -->
<div class="col-md-3">
<s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.idOrderDetail" name="orderDetails[{{$index}}].idOrderDetail" id="orderDetails[{{$index}}].idOrderDetail" placeholder="Id Order Detail" value="{{orderDetail.idOrderDetail}}" /></div>
<div class="col-md-3">
<s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.idProduct" name="orderDetails[{{$index}}].idProduct" id="orderDetails[{{$index}}].idProduct" placeholder="Id Product" value="{{orderDetail.idProduct}}" ng-blur="idProductNgBlur(orderDetail.idProduct,$index)"/></div>
<div class="col-md-2">
<s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.amount" name="orderDetails[{{$index}}].amount" id="orderDetails[{{$index}}].amount" placeholder="Amount" value="{{orderDetail.amount}}" ng-blur="amountNgBlur(orderDetail.amount,orderDetail.unitPrice,$index)"/></div>
<div class="col-md-2">
<s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.unitPrice" name="orderDetails[{{$index}}].unitPrice" id="orderDetails[{{$index}}].unitPrice" placeholder="Unit Price" value="{{orderDetail.unitPrice}}" /></div>
<div class="col-md-2">
<s:textfield type="text" ng-if="orderDetail.idOrderDetail" ng-model="orderDetail.subTotal" name="orderDetails[{{$index}}].subTotal" id="orderDetails[{{$index}}].subTotal" placeholder="Sub Total" value="{{orderDetail.subTotal}}" /></div>
</div>
</div>
</div>
<!-- </s:form> -->
<div class="row">
<s:submit cssClass="btn btn-primary" id="addOrderDetail" ng-click="addNewOrderDetail()" value="Add Order Detail" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-10">
<p class="pull-right"><a href="#">Back to top</a></p>
</div>
</div>
</div>
</body>
</html>
我的问题是:为什么,似乎订单没有从动作类传递给jsp。从order.idOrder可以看出我没有尝试显示在jsp中。有人可以帮忙吗?非常感谢
如何在Web应用程序中结合Struts2和AngularJS取决于控制器的配置。通过约定插件创建的配置Struts2可以用于Struts MVC框架生成的前端,也可以用于AngularJS MVW框架创建的前端。
请参见MVVM architectural pattern with AngularJS的示例和说明。
在第一种情况下,您使用Java并在服务器上使用Java,并结合使用诸如jsp,freemarker,speed等的模板语言。要从视图访问模型对象,可以使用诸如EL,OGNL之类的表达式语言等
在第二种情况下,您使用模型并结合JavaScript和AngularJS在client上进行查看。在这种情况下,为了从服务器获取数据,应用程序将使用http客户端和支持的服务,这些服务以JSON格式返回数据。如果您在后端使用struts 2,则应创建AngularJS应用程序可以使用的相应API。
这是example如何使用AngularJS的API。在这种情况下,通过rest插件创建的struts 2后端。可以在AngularJS应用程序的后端上使用。
在this答案中,您可以找到在为angularJS应用程序创建struts 2后端时如何将约定和rest插件结合在一起的示例