spring和angularJS实现前后端分离

来源：互联网发布：二叉排序树的建立算法编辑：程序博客网时间：2024/05/22 05:22

1、何为前后端分离

简单说就是前端和后端实现解耦，前端专注于页面的展现，后端专注于业务逻辑的实现，前端和后端的职责将会更清新。前后端分离的终极目标是前端和后端完全成为独立的项目。

2、解决方案

利用Spring MVC提供RESTful风格的api，angularJS作为前端框架通过JSON数据格式与后端进行交互。

3、实现

直接上代码

项目结构：

@Controller

public classLoginController {

@ResponseBody

@RequestMapping(value="/login/{userName}/{pwd}")

public String login(@PathVariable("userName")StringuserName,@PathVariable("pwd")Stringpwd) {

Stringresult= "";

if(userName.equals("admin")&&pwd.equals("admin")){

result = "true";

}else{

result = "false";

}

returnresult;

}

前端代码：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<title>前后端分离登录</title>

</head>

<bodyng-app="myApp">

<div>

<ulid="loginForm"ng-controller="LoginForm">

<liid="loginBtn"><inputtype="button"value="提交"ng-click="submit()"/>

<inputtype="button"value="重置"ng-click="resetInfo()"/></li>

</ul>

</div>

<scriptsrc="../js/lib/angular.min.js"></script>

angular.module("myApp", [])

.controller("LoginForm",function($scope,$http) {

$scope.resetInfo=function() {

$scope.userNmae="";

$scope.pwd="";

}

$scope.submit=function() {

var url ="../../login/" + $scope.userName +"/" + $scope.pwd;

$http.post(url).success(function(data) {

if(data) {

window.location.href= 'success.html';

} else{

window.location.href= 'error.html';

}

});

}

});

</script>

</body>

</html>

完整代码：http://download.csdn.net/detail/myvernal/9658164

4、后记

后端接口不用任何修改就可以完全支持与web、app进行通信，静态文件也可以从项目中分离出来后部署在单独的服务器上，真正实现了前后端的分离。

0 1