Maven + Spring MVC＋Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用（三）前后台交互

上一节http://blog.csdn.net/shymi1991/article/details/51985371

该章节实现实现用户注册、登录、发表微博、评论微博等功能。

1. 配置文件

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beans            http://www.springframework.org/schema/beans/spring-beans-4.2.xsd            http://www.springframework.org/schema/context             http://www.springframework.org/schema/context/spring-context-4.2.xsd            http://www.springframework.org/schema/mvc             http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd            http://www.springframework.org/schema/context             http://www.springframework.org/schema/context/spring-context-4.2.xsd"><!-- 使Spring支持自动检测组件，如注解的Controller --><mvc:annotation-driven/><context:component-scan base-package="com.weibo.dashboard.controller" /><bean id="mappingJacksonHttpMessageConverter"          class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">          <property name="supportedMediaTypes">              <list>                  <value>apolication/json;charset=UTF-8</value>                <value>text/html;charset=UTF-8</value>                <value>text/plain;charset=UTF-8</value>            </list>          </property>      </bean>      <!-- 启动SpringMVC的注解功能，完成请求和注解POJO的映射 -->      <bean          class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">          <property name="messageConverters">              <list>                  <ref bean="mappingJacksonHttpMessageConverter" /> <!-- JSON转换器 -->              </list>          </property>      </bean>  </beans>

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"id="WebApp_ID" version="3.0"><display-name>web app</display-name><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list><!--    初始化参数,加载spring容器配置 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:conf/spring-mybatis.xml</param-value></context-param>        <!-- 编码过滤器 -->      <filter>          <filter-name>encodingFilter</filter-name>          <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>          <async-supported>true</async-supported>          <init-param>              <param-name>encoding</param-name>              <param-value>UTF-8</param-value>          </init-param>      </filter>      <filter-mapping>          <filter-name>encodingFilter</filter-name>          <url-pattern>/*</url-pattern>      </filter-mapping>      <!-- Spring监听器,服务器一启动就加载spring的配置文件-->     <listener>          <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>      </listener>      <!-- 防止Spring内存溢出监听器 -->      <listener>          <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>      </listener>    <!-- springmvc的前端控制器 --><servlet><servlet-name>dispatch</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:conf/spring-mvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dispatch</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 对静态资的请求交由默认的servlet进行处理 --><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.html</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.js</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.css</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.eot</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.svg</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.ttf</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.woff</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.json</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.txt</url-pattern></servlet-mapping></web-app>

2. spring mvc controller

封装响应数据

package com.weibo.util;public class ResponseData {public Object data;public ResponseData(Object data){this.data = data;}}

UserControler.java

package com.weibo.dashboard.controller;import javax.annotation.Resource;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.ResponseBody;import org.springframework.web.bind.annotation.RestController;import com.weibo.dashboard.entity.User;import com.weibo.dashboard.service.UserService;import com.weibo.util.ResponseData;@RestController@RequestMapping(value="/user")public class UserController {@Resource UserService userService;@ResponseBody@RequestMapping(value="/{name}",method=RequestMethod.GET)public ResponseData findUser(@PathVariable("name")String name){User user = userService.select(name);return new ResponseData(user);}@ResponseBody@RequestMapping(value="/login",method=RequestMethod.POST)public ResponseData accountValid(@RequestBody User user){boolean res = userService.accountValid(user);return new ResponseData(res);}@ResponseBody@RequestMapping(value="/new",method=RequestMethod.POST)public ResponseData insert(@RequestBody User user){userService.insert(user);return new ResponseData(user);}}

PostController.java

package com.weibo.dashboard.controller;import java.util.List;import javax.annotation.Resource;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.ResponseBody;import org.springframework.web.bind.annotation.RestController;import com.weibo.dashboard.entity.Post;import com.weibo.dashboard.service.PostService;import com.weibo.util.ResponseData;@RestController@RequestMapping(value="/post")public class PostController {@ResourcePostService postService;@ResponseBody@RequestMapping(value="/show",method=RequestMethod.GET)public ResponseData findList(){List<Post> list = postService.findList();return new ResponseData(list);}@ResponseBody@RequestMapping(value="/show/{userName}",method=RequestMethod.GET)public ResponseData findList(@PathVariable("userName") String userName){List<Post> list = postService.postByUser(userName);return new ResponseData(list);}@RequestMapping(value="/{id}",method=RequestMethod.DELETE)public int delete(@PathVariable("id") int id){int res = postService.delete(id);return res;}@ResponseBody@RequestMapping(value="/new",method=RequestMethod.POST)public ResponseData add(@RequestBody Post post){postService.insert(post);return new ResponseData(post);}@RequestMapping(value="/likes/{id}/{flag}",method=RequestMethod.GET)public void likeOrDislike(@PathVariable("id") int id,@PathVariable("flag") boolean flag){if(flag){postService.like(id);}else{postService.dislike(id);}}}

CommentController.java

package com.weibo.dashboard.controller;import javax.annotation.Resource;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;import com.weibo.dashboard.entity.Comment;import com.weibo.dashboard.service.CommentService;import com.weibo.util.ResponseData;@RestController@RequestMapping(value="/comment")public class CommentController {@ResourceCommentService commentService;@RequestMapping(value="/new",method=RequestMethod.POST)public ResponseData add(@RequestBody Comment comment){commentService.insert(comment);return new ResponseData(comment);}@RequestMapping(value="/{id}",method=RequestMethod.DELETE)public void delete(@PathVariable("id") int id){commentService.delete(id);}}

3. 前端框架

该工程的前端引用了angularJS库、bootstrap库和jquery库（因为bootstrap依赖jquery）。我们重点关注的是js文件夹下的与本项目逻辑直接相关的js文件。

index.html

<!DOCTYPE html><html lang="en" data-ng-app="app"><head><meta charset="utf-8" /><title>Web Project</title><link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"type="text/css" /><link rel="stylesheet" href="css/font-awesome.min.css"type="text/css" /><link rel="stylesheet" href="css/app.css" type="text/css" /><link rel="stylesheet" href="css/font.css" type="text/css" /></head><body ng-app="app"><div ng-view></div><div ng-include="commonviews/page_footer.html"></div><!--Angular   --><script src="vendor/angular/angular.min.js"></script><script src="vendor/angular/angular-resource.min.js"></script><script src="vendor/angular/angular-route.min.js"></script><script src="vendor/angular/angular-cookies.min.js"></script><!-- jquery --><script src="vendor/jquery/jquery-1.11.1.js"></script><!-- bootstrap --><script src="vendor/bootstrap/js/bootstrap.js"></script><!-- App --><script src="js/app/app.js"></script><script src="js/app/common.js"></script><script src="js/controllers/homeController.js"></script><script src="js/controllers/signinController.js"></script><script src="js/controllers/signupController.js"></script><script></script></body></html>

app.js 依赖注入、配置路由

'use strict';var app = angular.module('app', ['ngRoute','ngResource',]);app.config(['$routeProvider',function ($routeProvider) {$routeProvider.when('/signin',{templateUrl:'commonviews/signin.html',controller:'signinCtrl'}).when('/signup',{templateUrl:'commonviews/signup.html',controller:'signupCtrl'}).when('/home',{templateUrl:'dashboard/home.html',controller:'homeCtrl'}).otherwise({redirectTo:'/signin'});}]);app.run(['$rootScope','$resource',function($rootScope,$resource){ $rootScope.user={};}]);

common.js设置、读取cookies

function setCookie(c_name, value, expiredays) {var exdate = new Date()exdate.setDate(exdate.getDate() + expiredays)document.cookie = c_name + "=" + escape(value)+ ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())}function getCookie(c_name) {if (document.cookie.length > 0) {c_start = document.cookie.indexOf(c_name + "=")if (c_start != -1) {c_start = c_start + c_name.length + 1c_end = document.cookie.indexOf(";", c_start)if (c_end == -1)c_end = document.cookie.lengthreturn unescape(document.cookie.substring(c_start, c_end))}}return ""}

3.1 用户注册

signupController.js

app.controller('signupCtrl',function ($rootScope,$scope,$resource,$location) {$scope.user={};$scope.validUsername=true;    $scope.signup = function () {        var userResource = $resource('user/new', {}, {add:{method:'POST',responseType:"application/json;charset=UTF-8"}});    userResource.save({},$scope.user, function (res) {            alert("signup success");            var user = res.data;            $rootScope.user.name=$scope.user.name;$location.path("/signin");        }, function (data) {        alert("signup faliure");        });    };            $scope.validateName = function(){    var userResource = $resource('user/:name',{name:$scope.user.name},{query:{method:'GET',isArray:false}});    if($scope.user.name!=undefined){    userResource.query({name:$scope.user.name},function(res){    if(res.data!=null){    $scope.validUsername=false;    }else{    $scope.validUsername=true;    }    });    }    else{    $scope.validUsername=true;    }    };});

signup.html

<div class="container w-xxl w-auto-xs"><a href class="navbar-brand block m-t">Weibo</a><div class="m-b-lg"><div class="wrapper text-center"><strong>Signup</strong></div><form name="form" class="form-validation"><div class="text-danger wrapper text-center" ng-show="authError">{{authError}}</div><div class="list-group list-group-sm"><div class="list-group-item"><input id="username" placeholder="nick name"class="form-control no-border" ng-model="user.name"ng-blur="validateName()" required><div class="tip" style="top: 13px; left: 332px;"ng-show="!validUsername">Username exits!</div></div><div class="list-group-item"><input type="password" placeholder="Password"class="form-control no-border" ng-model="user.password" required></div></div><div class="checkbox m-b-md m-t-none"><label class="i-checks"> <input type="checkbox"ng-model="agree" required><i></i> Agree the <a href>termsand policy</a></label></div><button type="submit" class="btn btn-lg btn-primary btn-block"ng-click="signup()" ng-disabled='form.$invalid||!validUsername'>Signup</button><div class="line line-dashed"></div><p class="text-center"><small>Already have an account?</small></p><a href="#signin" class="btn btn-lg btn-default btn-block">Signin</a></form></div></div>

3.2 用户登录

signinController.js

app.controller('signinCtrl', ['$rootScope', '$scope', '$resource','$location', function($rootScope, $scope, $resource, $location) {    $scope.user = $rootScope.user;    $scope.authError = null;    $scope.login = function() {    var userResource = $resource('user/login', {}, {login:{method:'POST'}});    userResource.login({},$scope.user, function (res) {    if(res.data==true){    setCookie("username", $scope.user.name,1);    $location.path("/home");    }else{    $scope.authError = "Authentication faliure";    }    }, function (res) {        $scope.authError = "Server error";        });    };  }]);

signin.html

<div class="container w-xxl w-auto-xs"><a href class="navbar-brand block m-t">Weibo</a><div class="m-b-lg"><div class="wrapper text-center"><strong>Sign in</strong></div><form name="form" class="form-validation"><div class="text-danger wrapper text-center" ng-show="authError">{{authError}}</div><div class="list-group list-group-sm"><div class="list-group-item"><input type="text" placeholder="nick name"class="form-control no-border" ng-model="user.name"></div><div class="list-group-item"><input type="password" placeholder="Password"class="form-control no-border" ng-model="user.password"></div></div><button type="submit" class="btn btn-lg btn-primary btn-block"ng-click="login()" ng-disabled='form.$invalid'>Log in</button><div class="text-center m-t m-b"><a href="#forgotpwd">Forgot password?</a></div><div class="line line-dashed"></div><p class="text-center"><small>Do not have an account?</small></p><a href="#signup" class="btn btn-lg btn-default btn-block">Createan account</a></form></div></div>

3.3 主界面

homeController.js

app.controller('homeCtrl',['$scope','$resource','$location',function($scope,$resource,$location){var username = getCookie("username");console.log("cookies...",username);if(username=='undefined'){$location.path("/signin");}$scope.showPosts = function() {    var postResource = $resource('post/show', {}, {query:{method:'GET',isArray:false}});    postResource.query({},function(res){    $scope.postList = res.data;    }, function (res) {        console.log("error");        });    };        $scope.addPost = function() {    var postResource = $resource('post/new', {}, {save:{method:'POST'}});    $scope.post.authorName = username;    postResource.save({},$scope.post,function (res) {    $scope.showPosts();    }, function (res) {        console.log("error");        });    };    $scope.setReplyPostId = function(id){    $scope.replyPostId = id;    }    $scope.addComment = function() {    $scope.comment.cAuthorName = username;    $scope.comment.postId=$scope.replyPostId;    var commentResource = $resource('comment/new', {}, {save:{method:'POST'}});    commentResource.save({},$scope.comment,function (res) {    $scope.showPosts();    }, function (res) {        console.log("error");        });    };    $scope.likeOrNot = function(id,flag) {    console.log(id,'...',flag);    var postResource = $resource('post/likes/:id/:flag', {id:id,flag:flag}, {save:{method:'GET'}});    postResource.save({id:id,flag:flag},function (res) {    $scope.showPosts();         }, function (res) {        console.log("error");        });    };    $scope.showPosts();}]);

home.html

<div class="container" style="margin-top: 20px;"><!-- .comment-list --><div class="m-b b-l m-l-md streamline" ng-repeat="item in postList" on-finish-render="ngRepeatFinished"><div class="post"><a class="pull-left m-l-n-md"><div>{{item.authorName}}</div></a><div class="m-l-lg panel b-a"><div class="panel-heading pos-rlt b-b b-light"><span class="arrow left"></span> <span>{{item.content}}</span> <labelclass="label bg-info m-l-xs" ng-if="item.authorName==username">Delete</label> <spanclass="text-muted m-l-sm pull-right"> <iclass="fa fa-clock-o"></i> {{item.date|date:'shortTime'}}  {{item.date|date:'mediumDate' }}</span></div><div class="panel-body"><div class="">{{item.likes}} <a class="btn btn-default btn-xs" ng-click="likeOrNot(item.id,item.liked=!item.liked)"> <iclass="fa fa-star-o text-muted" ng-if="!item.liked"></i> <iclass="fa fa-star text-danger" ng-if="item.liked"></i> Like</a> <a class="btn btn-default btn-xs" data-toggle="modal" data-target="#replyModal" ng-click="setReplyPostId(item.id)"> <iclass="fa fa-mail-reply text-muted" ></i>Reply</a></div></div></div></div><!-- .comment-reply --><div class="m-l-lg" ng-repeat="cItem in item.commentList"><a class="pull-left m-l-n-sd"><div>{{cItem.cAuthorName}}</div></a><div class="m-l-xxl panel b-a"><div class="panel-heading pos-rlt"><span class="arrow left pull-up"></span> {{cItem.cContent}} <spanclass="text-muted m-l-sm pull-right"> <iclass="fa fa-clock-o"></i> {{cItem.cDate | date:'shortTime'}}  {{cItem.cDate | date: 'mediumDate'}}</span></div></div></div></div><div class="clearfix m-b-lg"><div class="m-l-xxl"><form class="m-b-none"><div class="input-group"><input type="text" class="form-control input-lg"ng-model="post.content" placeholder="Input your post here"><span class="input-group-btn"><button class="btn btn-info btn-lg" type="button"ng-click="addPost()">POST</button></span></div></form></div></div></div><!-- Modal --><div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn btn-xs" data-dismiss="modal" aria-hidden="true">cancel</button> <button type="button" class="btn btn-warning btn-xs" data-dismiss="modal" aria-hidden="true" style="float:right;" ng-click="addComment()">send</button></div><div class="modal-body"><input type="text" class="form-control" ng-model="comment.cContent" placeholder="reply sth..."/></div></div><!-- /.modal-content --></div><!-- /.modal --></div>

项目代码地址 https://github.com/sommer1991/javaWeb.git