hjr-JavaScript：springmvc+mongodb+angular.js搭建网站后台
2017-06-20 11:42
330 查看
angular.js
主要指令有：ng-app 把整个html文件当成一个app
ng-controller 一个模块、一个数据区域
ng-model 模块里的一个标签
ng-click 点击事件
ng-bind 数据绑定
新建一个html文件，
<!DOCTYPE html>
<html ng-app="app_name">
<head>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="controller_name">
<div>
<textarea ng-model="model_name" cols="40" rows="10"></textarea>
</div>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
<p>
剩余字数：
<span ng-bind="left()"></span>
</p>
</div>
</body>
<!--每个app对应一段js-->
<script>
var app = angular.module("app_name",[]);
app.controller("controller_name",function($scope){
$scope.model_name = "";
$scope.left = function(){ //数据绑定
return 100 - $scope.model_name.length;
};
$scope.clear = function(){ //清除model_name内容
$scope.model_name = "";
}
$scope.save = function(){ //按钮事件
alert("保存成功");
};
})
</script>
</html>由以上可知，在angular.js的控制器代码里ajax访问springmvc的控制器，执行数据库操作或者返回的数据直接绑定到界面。
后台架构
新建admin/js文件夹，下载angula.js和angula-route.js放到js里，
下载后台模板，全部另外放一个
templet文件夹里，把angula.js和angula-route.js引入到后台模板中的index.html里，并把index.html的body标签加上
ng-app="mainApp"。
新建
admin/js/app.js作为angularjs主js文件，
在app.js里写
var baseurl = "../admin/";
var mainApp = angular.module('mainApp', [ 'ngRoute']);
mainApp.config(function ($routeProvider) {
$routeProvider.
when('/user/show', {
templateUrl: baseurl+'user/show.html',
controller: 'UserController'
}).
when('/user/add', {
templateUrl: baseurl+'user/add.html',
controller: 'UserController'
}).
when('/user/edit', {
templateUrl: baseurl+'user/edit.html',
controller: 'UserController'
}).
otherwise({
redirectTo: '/404'
});
});
//用户配置好路由与其对应的控制器，这里注意，控制器必须在理由里定义，如果在路径对应的html文件定义会报错，现在配置的4个html文件的控制器就是
UserController。接下来新建
admin/user/add.html
admin/user/edit.html
admin/user/show.html
admin/user/ctrl.js
admin/user/add.html
其中ctrl.js就是之前的
UserController
mainApp.controller('UserController',function ($scope,$http,$location) {
$scope.users = [];
$http({
url:'/xh/user/show.html',
method: 'POST'
}).then(function (result) { //正确请求成功时处理
console.info(result);
console.info(result.data);
$scope.users = result.data;
}).catch(function (result) { //捕捉错误处理
console.info(result);
alert(result.data.Message);
});
$scope.add = function(){ //按钮事件
$location.path("user/add");
};
$scope.formData = {};
$scope.submit = function(){ //按钮事件
console.log($scope.formData);
$http({
url:'/xh/user/add.html',
method: 'POST',
data: JSON.stringify($scope.formData),
}).then(function (result) { //正确请求成功时处理
console.info(result);
console.info(result.data);
$scope.users = result.data;
alert('新增成功');
$location.path("user/show");
}).catch(function (result) { //捕捉错误处理
132d7
console.info(result);
alert(result.data.Message);
});
};
});该文件作为刚才路由定义的几个html文件的控制器，最后在模板文件夹中index.html中引用user控制器
<!-- 用户 --> <script src="../admin/user/ctrl.js"></script> <!-- 用户 -->
上面的user文件夹作为一个模块，而每个功能以如add.html文件的形式实现，统一由一个ctrl.js做控制器
之后每次新建一个模块可以保留上面的结构，需要把它的ctrl.js也在模板首页
index.html引入。
通过
http://localhost:8080/projectname/templet/index.html访问网站。
form
angularjs表单有自动验证的功能<form name="myForm" novalidate> <div class="form-group-col-2"> <div class="form-label">真实姓名：</div> <div class="form-cont"> <input ng-model="formData.realname" name="realname" type="text" placeholder="100%输入框..." class="form-control form-boxed" ng-maxlength="5" required> <span style="color:red"> <span ng-show="myForm.realname.$error.required">该字段是必填的</span> <span ng-show="myForm.realname.$error.maxlength">不能超过5个字</span> </span> </div> </div> <div class="form-group-col-2"> <div class="form-label">用户名：</div> <div class="form-cont"> <input ng-model="formData.username" name="username" type="text" placeholder="100%输入框..." class="form-control form-boxed" ng-maxlength="8" required> <span style="color:red"> <span ng-show="myForm.username.$error.required">该字段是必须的。</span> <span ng-show="myForm.username.$error.maxlength">不能超过8个字</span> </span> </div> </div> <div class="form-group-col-2"> <div class="form-label">密码：</div> <div class="form-cont"> <input ng-model="formData.password" name="password" type="password" placeholder="100%输入框..." class="form-control form-boxed" ng-maxlength="15" required> <span style="color:red"> <span ng-show="myForm.password.$error.required">该字段是必须的。</span> <span ng-show="myForm.password.$error.maxlength">不能超过15个字</span> </span> </div> </div> <div class="form-group-col-2"> <div class="form-label">角色：</div> <div class="form-cont"> <select ng-model="formData.role" name="role" style="width:auto;" required> <option>a</option> <option>b</option> </select> <span style="color:red"> <span ng-show="myForm.role.$error.required">该字段是必须的。</span> </span> </div> </div> <div class="form-group-col-2"> <div class="form-label">状态：</div> <div class="form-cont"> <label class="radio"> <input ng-model="formData.state" name="state" type="radio" value="1" ng-checked="true"/> <span>启用</span> </label> <label class="radio"> <input ng-model="formData.state" name="state" type="radio" value="0" /> <span>禁用</span> </label> </div> </div> <input type="submit" class="btn btn-primary" value="提交表单" type="submit" ng-disabled="myForm.$invalid " ng-click="submit()"/> </form>
表单数据与控制器交互非常简单，在控制器定义
$scope.formData = {};，当表单填充带有ng-model="formData.username"的输入框时控制器的数据会自动填充，表单填好后，只需要给提交按钮一个事件，触发后直接通过$http把
$scope.formData提交到后台就行。
接收后台json数据后展示
<table class="table table-bordered table-striped mb-15"> <thead> <tr> <th>真实姓名</th> <th>用户名</th> <th>角色</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr class="cen" ng-repeat="u in users track by $id(u)"> <td><span ng-bind="u.realname"></td> <td><span ng-bind="u.username"></td> <td><span ng-bind="u.role"></span></td> <td><span ng-bind="u.course"></span></td> <td><span ng-bind="u.state"></span></td> <td> <a title="编辑" class="mr-5">编辑</a> <a title="详情" class="mr-5">详情</a> <a title="删除">删除</a> </td> </tr> </tbody> </table>
主要通过ng-repeat遍历，注意
ng-repeat="u in users track by $id(u)"后面的
track by $id(u)如果返回的数据是
[{a:x}{a:xx}]这样有两个a的数据必须加上。
springmvc接收与操作mongodb
applicationContext.xml配置见我的其他博客@Controller
@RequestMapping("/user")
public class UserController {
ApplicationContext ctx = new ClassPathXmlApplicationContext("applicationContext.xml");
MongoOperations mongoOperation = (MongoOperations) ctx.getBean("mongoTemplate");
@ResponseBody
@RequestMapping(value="/show",method=RequestMethod.POST)
public List<User> show(@RequestBody User user){
List<User> users = mongoOperation.findAll(User.class);
return users;
}
@ResponseBody
@RequestMapping(value="/add",method=RequestMethod.POST)
public List<User> add(@RequestBody User user){
mongoOperation.insert(user);
List<User> users = mongoOperation.findAll(User.class);
return users;
}
}springmvc+普通ajax提交
//前端
$.ajax({
url:'/carlt/loginForm',
method: 'POST',
contentType:'application/json;charset=UTF-8',
data:JSON.stringify({"name":"jquery","password":"pwd"}),
dataType:'json',
success:function(data){
//...
}
});
//后端控制器
@Controller
public class UserController {
@ResponseBody
@RequestMapping(value="/loginForm",method=RequestMethod.POST)
public User loginPost(@RequestBody User user){
System.out.println("username:"+user.getName());
System.out.println("password:"+user.getPassword());
return user;
}
}
//后端模型
public class User {
private String name;
private String password;
private int age;
//setter getter method
}springmvc+angular.js提交
//前端
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
UserName:<br>
<input type="text" ng-model="user.username"><br>
PassWord:<br>
<input type="text" ng-model="user.pwd">
<br><br>
<button ng-click="login()">登录</button>
</form>
</div>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
$scope.login = function() {
$http({
url:'/xh/user/add.html',
method: 'POST',
data: JSON.stringify($scope.formData),
}).then(function (result) { //正确请求成功时处理
console.info(result);
console.info(result.data);
$scope.users = result.data;
alert('新增成功');
$location.path("user/show");
}).catch(function (result) { //捕捉错误处理
console.info(result);
alert(result.data.Message);
});
};
});后端不变，因为提交和返回的都是json数据，所以后端有
@RequestBody @ResponseBody，这个做了两件事，一是json转换，二是模型参数自动匹配。
静态化处理
springmvc控制器返回view为html，需要先在spring-mvc.xml中加上
<!-- 静态资源访问处理 --> <mvc:default-servlet-handler/>
这样html页面就作为静态资源了，不能够使用springmvc返回modelandview的数据，因此可以使用ajax双方用json数据交互（angular.js使用http方法），单纯的返回html可能会发生html中引用js、css文件不到的错误。在spring-mvc中添加映射
<mvc:resources mapping="/js/**" location="/WEB-INF/js/" /> <mvc:resources mapping="/css/**" location="/WEB-INF/css/" /> <mvc:resources mapping="/images/**" location="/WEB-INF/images/" /> <mvc:resources mapping="/front/**" location="/WEB-INF/front/" />
在web.config中
<servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置Spring mvc下的配置文件的位置和名称 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>*.gif</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>*.ttf</url-pattern> </servlet-mapping>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- springMVC+angular+bootstrap+mysql的简易购物网站搭建
- REST架构网站改写：前端MVC - Angular.js，Web框架 - Express.js， 数据库 - MongoDB
- 基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
- Maven + Spring MVC＋Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用（三）前后台交互
- Maven + Spring MVC＋Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用（一）环境搭建
- springmvc+mongodb+maven 项目搭建配置
- Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
- bootstrap + angularjs + springmvc + mybatis框架之图片上传和展示
- SpringMvc+AngularJS通过CORS实现跨域方案
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- Node.js + Express + Mongodb 开发搭建个人网站（一）
- Spring MVC + AngularJS Integration
- Javascript MVC/MVVM 框架对比, AngularJS vs Backbone vs Knockout
- bootstrap + angularjs + springmvc + mybatis框架之多个输入框（可为空）组合查询
- nodejs+express+mongodb搭建网站
- 【js类库AngularJs】解决angular+springmvc的post提交问题
- SpringMvc+AngularJS通过CORS实现跨域方案
- CRUD using Spring MVC 4.0 RESTful Web Services and AngularJS
- springmvc+mongodb+maven 项目搭建配置
- Angular JS + Express JS入门搭建网站