jhades/spring-mvc-angularjs-sample-app

语言: JavaScript

git: https://github.com/jhades/spring-mvc-angularjs-sample-app

一个示例AngularJs / Spring MVC应用程序
A sample AngularJs /Spring MVC app
README.md (中文)

Spring MVC | AngularJs示例应用程序

一个示例项目,演示如何使用Spring MVC / AngularJs堆栈构建Web应用程序。前端基于Angular,lodash和requirejs,后端由基于Spring MVC / JPA的JSON REST Web服务组成,由Spring Security保护。请在此博客文章中查看该应用程序的进一步说明。

安装依赖项

以下依赖项是必需的:

  • Java 8
  • 节点0.12或更高
  • 亭子
  • maven 3

安装前端依赖项

克隆存储库后,以下命令将安装Javascript依赖项:

bower install

构建和启动服务器

要构建后端并启动服务器,请在存储库的根文件夹上运行以下命令:

mvn clean install tomcat7:run-war -Dspring.profiles.active=test

弹簧测试配置文件将激活内存数据库。服务器启动后,可以通过以下URL访问该应用程序:

http://localhost:8080/

要查看具有现有数据的用户(16餐,从2015年1月1日到8日的8天),请使用以下凭据登录:

username: test123 / password: Password2

前端概述

示例项目是一个Web应用程序,具有基于AngularJs的前端和基于Spring / Hibernate的后端。该应用程序是响应式的,因为它适应不同的屏幕尺寸。

在前端,使用这些库(除了Angular):Yahoo PureCss(纯CSS基线)和用于功能数据操作的lodash。模块系统require.js用于加载前端依赖项。通过凉亭获得的依赖关系。

angular模块angular-messages用于前端表单验证,这个jQuery插件用作datetimepicker组件。

后端概述

后端基于Java 8,Spring 4,JPA 2 / Hibernate 4. Spring配置基于Java。主要的Spring模块用于Spring MVC和Spring Security。后端是使用DDD方法构建的,其中包括用于前端/后端数据传输的域模型,服务,存储库和DTO。

REST Web服务基于Spring MVC和JSON。使用Spring测试和使用Spring测试MVC进行的REST API功能测试进行单元测试。

后端安全

Spring Security模块用于保护REST后端(这些指南通常适用)。可以通过服务器参数使应用程序在仅HTTPS模式下运行,这意味着如果用户尝试通过HTTP访问它,则不会提供任何页面。

使用了Spring Security Form登录模式,回退到非基于浏览器的HTTP客户端的HTTP-Basic身份验证。针对CSRF(跨站点请求伪造)进行保护。

前端验证仅供用户使用,也适用于后端。 Angular的使用为跨站点脚本或HTML注入等常见问题提供了良好的保护。后端上的查询是使用命名查询或条件API进行的,这可以很好地防止SQL注入。

密码策略至少为6个字符,最小一个小写,一个大写和一个数字。密码不是以纯文本形式存储在数据库中,而是以消化形式存储,使用Spring Security Bcrypt密码编码器(透明地包含盐)。

REST API

后端的REST API由3个服务组成:

验证服务
Url Verb Description
/authenticate POST authenticates the user
/logout POST ends the current session
用户服务
Url Verb Description
/user GET retrieves info for the currently logged-in user (number of calories of today, etc.)
/user PUT Used to save the user max calories per day
/user POST creates a new user
膳食服务
Url Verb Description
/meal GET searches meals for the current user by date/time
/meal POST saves a modified set of meals, might included new ones
/meal DELETE deletes a set of meals

测试代码覆盖率

此快照显示应用程序包的测试代码覆盖率:

alt Calories Tracker test Code Coverage

安装说明

克隆此存储库,安装nodejs和bower,并在存储库的根目录下运行此命令:

bower install

然后运行其中一个maven命令。

如何针对PostgreSQL数据库运行项目

此命令使用本地postgresql数据库启动应用程序:

mvn clean install tomcat7:run-war -Dspring.profiles.active=development

如何在仅HTTPS模式下运行项目

通过使用标志httpsOnly = true,可以在仅HTTPS模式下启动应用程序。这适用于两种模式,这是如何在测试模式和HTTPS中启动应用程序的示例:

mvn clean install tomcat7:run-war -Dspring.profiles.active=test -DhttpsOnly=true

可以通过以下URL访问该项目:

https://localhost:8443/

将显示一条警告消息,因为浏览器不接受测试证书,接受证书后将显示登录页面。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

Spring MVC | AngularJs Sample App

A sample project to demonstrate how a web app can be built using a Spring MVC / AngularJs stack. The frontend is based on Angular, lodash and requirejs, and the backend is composed of JSON REST web services based on Spring MVC / JPA, secured with Spring Security. See a further description of the app on this blog post.

Installation dependencies

The following dependencies are necessary:

  • Java 8
  • Node 0.12 or higher
  • bower
  • maven 3

Installing frontend dependencies

After cloning the repository, the following command installs the Javascript dependencies:

bower install

Building and starting the server

To build the backend and start the server, run the following command on the root folder of the repository:

mvn clean install tomcat7:run-war -Dspring.profiles.active=test

The spring test profile will activate an in-memory database. After the server starts, the application is accessible at the following URL:

http://localhost:8080/

To see a user with existing data (16 meals, 8 days from 1st of January 2015 to the 8th), login with the following credentials:

username: test123 / password: Password2

Frontend Overview

The sample project is a web application with an AngularJs-based frontend and a Spring/Hibernate based backend. The application is responsive, as it adapts to different screen sizes.

On the frontend, these libraries where used (besides Angular): Yahoo PureCss (pure CSS baseline) and lodash for functional data manipulation. The module system require.js was used to load frontend dependencies. The dependencies where obtained via bower.

The angular module angular-messages was used for frontend form validation, and this jQuery plugin was used as the datetimepicker component.

Backend Overview

The backend is based on Java 8, Spring 4, JPA 2/ Hibernate 4. The Spring configuration is based on Java. The main Spring modules used where Spring MVC and Spring Security. The backend was built using the DDD approach, which includes a domain model, services, repositories and DTOs for frontend/backend data transfer.

The REST web services are based on Spring MVC and JSON. The unit tests are made with spring test and the REST API functional tests where made using Spring test MVC.

Backend Security

The Spring Security module was used to secure the REST backend (these guidelines are in general applied). The application can be made to run in HTTPS-only mode via a server parameter, meaning no pages will be served if the user tries to access it via HTTP.

The Spring Security Form Login mode was used, with fallback to HTTP-Basic Authentication for non-browser based HTTP clients. Protection is in-place against CSRF (cross-site request forgery).

Frontend validations are for user convenience only, and where also made on the backend. The use of Angular gives good protection against common problems like cross-site scripting or HTML injection. The queries on the backend are made using either named queries or the criteria API, which gives good protection against SQL injection.

The password policy is of at least 6 characters with minimum one lower case, one upper case and one numeric. The passwords are not stored in the database in plain text but in a digested form, using the Spring Security Bcrypt password encoder (transparently includes a salt).

REST API

The REST API of the backend is composed of 3 services:

Authentication Service
Url Verb Description
/authenticate POST authenticates the user
/logout POST ends the current session
User Service
Url Verb Description
/user GET retrieves info for the currently logged-in user (number of calories of today, etc.)
/user PUT Used to save the user max calories per day
/user POST creates a new user
Meal Service
Url Verb Description
/meal GET searches meals for the current user by date/time
/meal POST saves a modified set of meals, might included new ones
/meal DELETE deletes a set of meals

Testing code coverage

This snapshot shows the test code coverage for the app package:

alt Calories Tracker test Code Coverage

Installation instructions

Clone this repository, install nodejs and bower and on the root of the repository run this command:

bower install

Then run one of the maven commands bellow.

How to run the project against a PostgreSQL database

This command starts the application with a local postgresql database:

mvn clean install tomcat7:run-war -Dspring.profiles.active=development

How to run the project in HTTPS-only mode

The application can be started in HTTPS only mode by using the flag httpsOnly=true. This works in both modes, this is an example of how to start the application in test mode and HTTPS only:

mvn clean install tomcat7:run-war -Dspring.profiles.active=test -DhttpsOnly=true

The project can be accessed via this URL:

https://localhost:8443/

A warning message is displayed because the test certificate is not accepted by the browser, by accepting the certificate the login page is then displayed.