Spring MVC AngularJS示例
时间：2020-02-23 14:35:54 来源:igfitidea点击:
在本教程中，我们将通过调用REST API来创建Spring MVC REST API并使用AngularJS执行CRUD操作。
以下是创建一个简单的Spring REST API的步骤，该API将提供CRUD WHIperions和AngularJS来调用Spring MVC API。
1)使用名为"AngularJsspringRestexample"的Eclipse中使用Maven创建动态Web项目
Maven依赖项
2)现在创建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.igi.theitroad</groupId>
<artifactId>AngularjsSpringRestExample</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>AngularjsSpringRestExample Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.Hymanson.core</groupId>
<artifactId>Hymanson-databind</artifactId>
<version>2.4.1</version>
</dependency>
</dependencies>
<build>
<finalName>AngularjsSpringRestExample</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>${jdk.version}</source>
<target>${jdk.version}</target>
</configuration>
</plugin>
</plugins>
</build>
<properties>
<spring.version>4.2.1.RELEASE</spring.version>
<jdk.version>1.7</jdk.version>
</properties>
</project>
应用程序配置：
3)创建Web.xml如下所示：
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>springrest</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springrest</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
4)在/Web-Inf /文件夹中创建名为springrest-servlet.xml的XML文件。
请更改上下文：组件扫描如果要使用不同的包来搜索控制器。
请参阅Spring MVC Hello World Examples更多的理解。
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<mvc:annotation-driven
<context:component-scan base-package="org.igi.theitroad.controller"
<mvc:default-servlet-handler
</beans>
创建bean类
5)在org.igi.theitroad.Bean中创建bean名称"country.java"。
package org.igi.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;
}
}
创建控制器
6)在Package org.igi.theitroad.Controller中创建名为"CountryController.java"的控制器
package org.igi.theitroad.controller;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.igi.theitroad.bean.Country;
import org.igi.theitroad.service.CountryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CountryController {
@Autowired
private HttpServletRequest request;
CountryService countryService = new CountryService();
@RequestMapping(value = "/countries", method = RequestMethod.GET, headers = "Accept=application/json")
public List getCountries() {
List listOfCountries = countryService.getAllCountries();
return listOfCountries;
}
@RequestMapping(value = "/country/{id}", method = RequestMethod.GET, headers = "Accept=application/json")
public Country getCountryById(@PathVariable int id) {
return countryService.getCountry(id);
}
@RequestMapping(value = "/countries", method = RequestMethod.POST, headers = "Accept=application/json")
public Country addCountry(@RequestBody Country country) {
return countryService.addCountry(country);
}
@RequestMapping(value = "/countries", method = RequestMethod.PUT, headers = "Accept=application/json")
public Country updateCountry(@RequestBody Country country) {
return countryService.updateCountry(country);
}
@RequestMapping(value = "/country/{id}", method = RequestMethod.DELETE, headers = "Accept=application/json")
public void deleteCountry(@PathVariable("id") int id) {
countryService.deleteCountry(id);
}
}
创建服务类
7)在package org.igi.theitroad中创建一个类countryservice.java.service它只是一个辅助类，应该由数据库实现替换。
写类不是很好的，它只是用于演示。
package org.igi.theitroad.service;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import org.igi.theitroad.bean.Country;
/*
* 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 objects of Country while initializing
Country NetherlandsCountry=new Country(1, "Netherlands",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,NetherlandsCountry);
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);
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.
8)使用以下内容创建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 = '/AngularjsSpringRestExample/countries';
} else {
//Id is present in form data, it is edit country operation
method = "PUT";
url = '/AngularjsSpringRestExample/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 : '/AngularjsSpringRestExample/country/' + 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/AngularjsSpringRestExample/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/AngularjsSpringRestExample/rest/countries'
}).then(function successCallback(response) {
$scope.countries = response.data;
}, function errorCallback(response) {
console.log(response.statusText);
});
}
9)这是时候做Maven Build。
右键单击项目 - >运行AS - > Maven Build
10)将目标提供为清洁安装(如下所示)，然后单击运行
运行应用程序
10)右键单击AngularJscrudexample.html - >运行AS - >在服务器上运行
选择Apache Tomcat，然后单击"完成"
11)我们应该能够看到以下页面网址："http：//localhost：8080/angularjsjaxrscrudexample/angularjscrudexample.html"
让我们单击与尼泊尔对应的删除按钮，我们将看到以下屏幕：
让我们添加新的国家法国15000
单击"提交"，我们将看到下面的屏幕。
现在单击对应于荷兰的编辑按钮，将人口从10000变为100000。
点击提交，我们将看到以下屏幕：
让我们检查REST API的方法
12)测试Get方法REST服务URL："http：//localhost：8080/angularjsspringrestexample/cations /"。
