AngularJS RESTful Web服务使用$HTTP示例
时间：2020-02-23 14:29:36 来源:igfitidea点击:
在本教程中，我们将使用AngularJS来调用REST CRUD API。
所以我们将创建一个视图，然后在按钮点击的基础上执行CRUD操作。
以下是使用jersey创建简单的RESFFUR Web服务(JAXW)的步骤
1)使用名为"Jaxrsjsoncrudexample"的Eclipse中的Maven创建动态Web项目
Maven依赖项
2)我们需要在类路径中添加泽西jar utility。
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-servlet</artifactId>
<version>${jersey.version}</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-json</artifactId>
<version>${jersey.version}</version>
</dependency>
jersey内部使用Hymanson 的JSON处理，因此它将用于将Pojo对象定为JSON。
现在创建pom.xml如下：pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.arpit.theitroad</groupId>
<artifactId>JAXRSJsonExample</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>JAXRSJsonExample Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<jersey.version>1.18.3</jersey.version>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-servlet</artifactId>
<version>${jersey.version}</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-json</artifactId>
<version>${jersey.version}</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<finalName>JAXRSJsonExample</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>
</project>
应用程序配置：
3)创建Web.xml如下所示：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>jersey-serlvet</servlet-name> <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class> <init-param> <param-name>com.sun.jersey.config.property.packages</param-name> <param-value>org.arpit.theitroad.controller</param-value> </init-param> <init-param> <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>jersey-serlvet</servlet-name> <url-pattern>/rest/*</url-pattern> </servlet-mapping> </web-app>
如果我们不使用相同的包，请更改initparam"com.sun.packey.config.property.package"属性以提供正确的控制器包名称。
创建bean类
4)在org.arpit.theitroad.Bean中创建Bean名称"country.java"。
package org.arpit.theitroad.bean;
public class Country{
int id;
String countryName;
long population;
public Country() {
super();
}
public Country(int i, String countryName,long population) {
super();
this.id = i;
this.countryName = countryName;
this.population=population;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
public long getPopulation() {
return population;
}
public void setPopulation(long population) {
this.population = population;
}
}
创建控制器
5)在包org.arpit.theitroad.Controller中创建名为"countrycontroller.java"的控制器
package org.arpit.theitroad.controller;
import java.util.List;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import org.arpit.theitroad.bean.Country;
import org.arpit.theitroad.service.CountryService;
@Path("/countries")
public class CountryController {
CountryService countryService=new CountryService();
@GET
@Produces(MediaType.APPLICATION_JSON)
public List getCountries()
{
List listOfCountries=countryService.getAllCountries();
return listOfCountries;
}
@GET
@Path("/{id}")
@Produces(MediaType.APPLICATION_JSON)
public Country getCountryById(@PathParam("id") int id)
{
return countryService.getCountry(id);
}
@POST
@Produces(MediaType.APPLICATION_JSON)
public Country addCountry(Country country)
{
return countryService.addCountry(country);
}
@PUT
@Produces(MediaType.APPLICATION_JSON)
public Country updateCountry(Country country)
{
return countryService.updateCountry(country);
}
@DELETE
@Path("/{id}")
@Produces(MediaType.APPLICATION_JSON)
public void deleteCountry(@PathParam("id") int id)
{
countryService.deleteCountry(id);
}
}
@path(/your_path_at_class_level)：将路径设置为基本URL +/your_path_at_class_Level。
基本URL基于应用程序名称，servlet和web.xml"配置文件的URL模式。
@path(/your_path_at_method_level)：将路径设置为base url +/your_path_at_class_level +/your_path_at_method_level
@Produces(Mediatype.application_json [，more-types])：@produces定义了用@get注释的方法传递的mime类型。
在示例文本中，生成"文本/JSON")。
创建服务类
6)在package org.arpit.theitroad.onitoad.service中创建一个countryservice.java .service它只是一个辅助类，应该由数据库实现替换。
写类不是很好的，它只是用于演示。
package org.arpit.theitroad.service;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import org.arpit.theitroad.bean.Country;
import org.arpit.theitroad.exception.CountryNotFoundException;
/*
* It is just a helper class which should be replaced by database implementation.
* It is not very well written class, it is just used for demonstration.
*/
public class CountryService {
static HashMap<Integer,Country> countryIdMap=getCountryIdMap();
public CountryService() {
super();
if(countryIdMap==null)
{
countryIdMap=new HashMap<Integer,Country>();
//Creating some object of countries while initializing
Country San FrancecoCountry=new Country(1, "San Franceco",10000);
Country chinaCountry=new Country(4, "China",20000);
Country nepalCountry=new Country(3, "Nepal",8000);
Country bhutanCountry=new Country(2, "Bhutan",7000);
countryIdMap.put(1,San FrancecoCountry);
countryIdMap.put(4,chinaCountry);
countryIdMap.put(3,nepalCountry);
countryIdMap.put(2,bhutanCountry);
}
}
public List getAllCountries()
{
List countries = new ArrayList(countryIdMap.values());
return countries;
}
public Country getCountry(int id)
{
Country country= countryIdMap.get(id);
if(country == null)
{
throw new CountryNotFoundException("Country with id "+id+" not found");
}
return country;
}
public Country addCountry(Country country)
{
country.setId(getMaxId()+1);
countryIdMap.put(country.getId(), country);
return country;
}
public Country updateCountry(Country country)
{
if(country.getId()<=0)
return null;
countryIdMap.put(country.getId(), country);
return country;
}
public void deleteCountry(int id)
{
countryIdMap.remove(id);
}
public static HashMap<Integer, Country> getCountryIdMap() {
return countryIdMap;
}
//Utility method to get max id
public static int getMaxId()
{ int max=0;
for (int id:countryIdMap.keySet()) {
if(max<=id)
max=id;
}
return max;
}
}
AngularJS View.
7)在WebContent文件夹中创建AngularJscrudexample.html，其中包含以下内容：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<title>AngularJS $http Rest example</title>
<script type="text/javascript">
var app = angular.module("CountryManagement", []);
//Controller Part
app.controller("CountryController", function($scope, $http) {
$scope.countries = [];
$scope.countryForm = {
id : -1,
countryName : "",
population : ""
};
//Now load the data from server
_refreshCountryData();
//HTTP POST/PUT methods for add/edit country
//with the help of id, we are going to find out whether it is put or post operation
$scope.submitCountry = function() {
var method = "";
var url = "";
if ($scope.countryForm.id == -1) {
//Id is absent in form data, it is create new country operation
method = "POST";
url = 'rest/countries';
} else {
//Id is present in form data, it is edit country operation
method = "PUT";
url = 'rest/countries';
}
$http({
method : method,
url : url,
data : angular.toJson($scope.countryForm),
headers : {
'Content-Type' : 'application/json'
}
}).then( _success, _error );
};
//HTTP DELETE- delete country by Id
$scope.deleteCountry = function(country) {
$http({
method : 'DELETE',
url : 'rest/countries/' + country.id
}).then(_success, _error);
};
//In case of edit, populate form fields and assign form.id with country id
$scope.editCountry = function(country) {
$scope.countryForm.countryName = country.countryName;
$scope.countryForm.population = country.population;
$scope.countryForm.id = country.id;
};
/* Private Methods */
//HTTP GET- get all countries collection
function _refreshCountryData() {
$http({
method : 'GET',
url : 'http://localhost:8080/AngularjsJAXRSCRUDExample/rest/countries'
}).then(function successCallback(response) {
$scope.countries = response.data;
}, function errorCallback(response) {
console.log(response.statusText);
});
}
function _success(response) {
_refreshCountryData();
_clearFormData()
}
function _error(response) {
console.log(response.statusText);
}
//Clear the form
function _clearFormData() {
$scope.countryForm.id = -1;
$scope.countryForm.countryName = "";
$scope.countryForm.population = "";
};
});
</script>
<style>
.blue-button{
background: #25A6E1;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:3px 5px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
.red-button{
background: #CD5C5C;
padding:3px 5px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:4px;
border:1px solid #CD5C5C
}
table {
font-family: "Helvetica Neue", Helvetica, sans-serif;
width: 50%;
}
caption {
text-align: left;
color: silver;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
}
th {
background: SteelBlue;
color: white;
}
tbody tr:nth-child(even) {
background: WhiteSmoke;
}
tbody tr td:nth-child(2) {
text-align:center;
}
tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
text-align: center;
font-family: monospace;
}
tfoot {
background: SeaGreen;
color: white;
text-align: right;
}
tfoot tr th:last-child {
font-family: monospace;
}
td,th{
border: 1px solid gray;
width: 25%;
text-align: left;
padding: 5px 10px;
}
</style>
<head>
<body ng-app="CountryManagement" ng-controller="CountryController">
<h1>
AngularJS Restful web services example using $http
</h1>
<form ng-submit="submitCountry()">
<table>
<tr>
<th colspan="2">Add/Edit country</th>
</tr>
<tr>
<td>Country</td>
<td><input type="text" ng-model="countryForm.countryName" </td>
</tr>
<tr>
<td>Population</td>
<td><input type="text" ng-model="countryForm.population" </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="blue-button" </td>
</tr>
</table>
</form>
<table>
<tr>
<th>CountryName</th>
<th>Population</th>
<th>Operations</th>
</tr>
<tr ng-repeat="country in countries">
<td> {{ country.countryName }}</td>
<td >{{ country.population }}</td>
<td><a ng-click="editCountry(country)" class="blue-button">Edit</a> | <a ng-click="deleteCountry(country)" class="red-button">Delete</a></td>
</tr>
</table>
</body>
</html>
解释 ：
- 我们已经注入$HTTP，因为我们通过控制器构造函数在Ajax示例中完成了$HTTP。
app.controller("CountryController", function($scope, $http) {
$scope.countries = [];
...
- 我们已经确定了各种方法，具体取决于EditCountry，Deletectry，SubmitCountry等操作
- 单击表单上的"提交"按钮时，它实际上会根据操作调用帖子或者放置。如果我们单击"编辑"并提交数据，那么它将被按照现有资源更新。如果直接提交数据，那么它将是创建新资源的发布操作，
- 每次提交数据时，它都会调用引用COUNtRyData()来刷新下面的国家表。
- 当我们调用$HTTP时，我们需要通过方法类型和URL，它将根据Web应用程序的上下文根目录放置绝对URL或者相对URL。
//HTTP GET- get all countries collection
function _refreshCountryData() {
$http({
method : 'GET',
url : 'http://localhost:8080/JAXRSJsonCRUDExample/rest/countries'
}).then(function successCallback(response) {
$scope.countries = response.data;
}, function errorCallback(response) {
console.log(response.statusText);
});
}
8)是时候做Maven建造了。
右键单击项目 - >运行AS - > Maven Build
9)将目标作为清洁安装(下面给出)，然后单击运行
运行应用程序
10)右键单击AngularJscrudexample.html - >运行AS - >在服务器上运行
选择Apache Tomcat，然后单击"完成"
10)你应该能够看到下面的网页网址："http：//localhost：8080/angularjsjaxrscrudexample/angularjscrudexample.html"
让我们检查REST API的方法
11)测试Get方法REST服务URL： “http://localhost:8080/AngularjsJAXRSCRUDExample/rest/countries/”.
