hjr-JavaScript：springmvc+mongodb+angular.js搭建网站后台

最新推荐文章于 2017-09-26 16:12:19 发布

架构师小侯

最新推荐文章于 2017-09-26 16:12:19 发布

阅读量853

点赞数 1

分类专栏：前端、JS、VUE、Angular、elementUI 文章标签： angularjs spring mvc

本文链接：https://blog.csdn.net/hjrcrj/article/details/73483017

版权

前端、JS、VUE、Angular、elementUI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

#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) { //捕捉错误处理  
	        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"的输入框时控制器的数据会自动填充，表单填好后，只需要给提交按钮一个事件，触发后直接通过 $h t t p 把 ‘$ 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>

架构师小侯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
hjr-JavaScript：springmvc+mongodb+angular.js搭建网站后台

angular.js主要指令有：ng-app 把整个html文件当成一个appng-controller 一个模块、一个数据区域ng-model 模块里的一个标签ng-click 点击事件ng-bind 数据绑定新建一个html文件，&lt;!DOCTYPE html&gt; &lt;html ng-app="app_name"&gt; &lt;head&g...
复制链接

扫一扫