前端程序员：月薪5K到5万，我干了啥_36氪
市场合作，请您联系： media_
品牌广告合作，请您联系： media_
企业创新合作，请您联系： corp_
地方合作，请您联系：
满足以下场景，获得更高通过率： 1. 新融资求报道 2. 新公司求报道 3. 新产品求报道 4. 创投新闻爆料
36氪APP 让一部分人先看到未来
为你推送和解读最前沿、最有料的科技创投资讯
一级市场金融信息和系统服务提供商
聚集全球最优秀的创业者，项目融资率接近97%，领跑行业(本性如此。)
(飞絮的汪汪汪)
第三方登录：web前端开发
web前端开发
地点&:&宣化街宣化...
评论数&:&18
报名数&:&19
开发托管中
web网页制作，二次开发，响应式网站制作等都可以
bootstrap,html5,css3,jquery,javascript
使用微信扫一扫免注册，登陆
报名人列表
需要登陆才可以发布评论
报名参加此私活
简单描述你为何胜任该任务
是否允许对方查看
提交解决方案
请输入你的解决方案*
提示：1.上传附件大小不能超过100M，推荐把文件压缩成ZIP；2.解决方案仅私活主可见
报名未审核通过暂时不能提交解决方案java程序员想转web前端开发，需要学习什么技术？ 另外切图是指什么？_百度知道
java程序员想转web前端开发，需要学习什么技术？ 另外切图是指什么？
html,css.js.这些大家都知道的就不用说了，都说点有建设性的吧。...
html,css.js.这些大家都知道的就不用说了，都说点有建设性的吧。
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
获赞数：42
html，JavaScript（及其衍生的很多框架，比如：JQuery，ext等），css。切图是用制图软件（PS等）为web前端做定制的图片。
那个图片是美工做的吧？这个只负责切就行了吧。
有时候负责切小图，有时候也还是一张整图，但是需要程序员根据整图中每个小图标的大小和位置去做对应的css映射。比如某某位置用的是左箭头，某某位置用的是蓝色背景等。可以关注一下大网站在这方面的应用，比如网易邮箱，他的背景图只有那么两三张，每张上面遍布各种小图标，具体在页面什么位置用，都是css来控制的。
来自电脑网络类芝麻团
采纳数：314
获赞数：494
参与团队：
擦,绝对不要转前端,前端要求你的太多了,只是几个浏览器兼容就能搞死人再加上各种js等等,专心做你的java程序员吧..
本回答被网友采纳
浅风渐微凉
浅风渐微凉
采纳数：15
获赞数：51
前端开发工程师不仅仅需要掌握HTML+CSS+JS,还需要长时间的去了解，积累，测试各种主流的浏览器兼容问题，HACK技术，熟悉各种框架，做SEO等等。而前端开发的性能优化往往是后台的专属，但是作为前端开发的性能是极其的重要的。一个优秀的前端开发工程师写出来的代码能够让服务器压力小，承载能力翻倍，请求次数更少，合理的布局等等，这是一个普通的前端开发人员所做不到的。
IT类认证行家
采纳数：322
获赞数：3329
毕业于长沙民政职业技术学院电子商务专业，从事IT行业3年，具有丰富的编程项目。现任潭州学院技术支持。
现在前端开发是一个很火很热门的行业，小编在这里为大家详细解释一下这个高大上的行业！　　在国内大学课程里面，几乎没有前端开发这门课程，无非就是一些网页设计之类的课程，但那些课程无论是老师讲还是学生听，都是敷衍了事，这个我深有体会，我相信大家一定也有同感！所以，目前前端开发主要是通过自学，和参加正规的培训！对于培训来说，一般会分为初级、中级、高级等级别，因为凭我们自己很难掌握这些技能。但是自学是很困难的，毕竟是一个人自己摸索，网上看上去有很多视频可以学习，但是那些视频很多都是过时的，像js和h5这些想要自学根本学不会，更何况以后深入学习还要掌握框架构造！很多小伙伴就根本找不到学习的方向，最后白白浪费了自己的时间和精力！所以对于有条件的小伙伴，个人推荐最好是系统的学习一下！　　那么我们应该怎么学习前端开发这门技术呢 ？ 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 ，并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个裙，前面是四 九 四，中间是0 6 4，最后是 9 3 4 ！ 在这里有最新的HTML课程 免费学习 也有很多人指导你进步，不需要你付出什么 只要你有一颗学习的心就可以了 。　　　　传统web从业者为什么必须学习前端开发技能？——学习前端开发是晋升和加薪的捷径。传统web从业者，只要精通html+css，简单的JS效果，切切图，写写网站等就可以了，而如今的前端开发不再只是一个简单的网站，现在越来越多的云计算应用程序，比如web QQ接近我们经常使用的QQ的功能。以前用java 、J2EE、 .Net 、Object C等高级语言开发的应用程序也越来越走向web化、云端化。 BS架构应用程序已逐渐成为主流。时代变了，用最犀利的前端技术武装我们的大脑的时代已经来临！　　　　1、想要跟上潮流，想要掌握最新技术，做高精尖人才升职加薪，必须学习前端开发最新技能，毕竟做前端的就得跟上时代的潮流，如果有小伙伴想要学习前端开发，个人认为潭州学院还是蛮不错的 ！相比于线下的培训班，潭州无论是学费还是学习时间，都远远比线下的培训班更加实惠，而且只要有电脑，有网络就可以进行学习！　　　　2、前端开发的就业方向及薪资情况。　　记得有人说过，未来不再有互联网公司，因为未来所有的企业都会有互联网部门，而互联网世界离不开前端开发，像淘宝、阿里巴巴、支付宝、腾讯、京东、新浪微博等等大型的基于互联网的企业与产品，都需要优秀的前端高级开发人才。　　不仅仅是互联网企业，随着O2O模式的越来越普及，传统企业越来越互联网化、云端化，前端开发人才需求越来越多，人才缺口高达上百万。　　招聘网站上现在的前端开发工程师的平均薪酬已经达到了12926元，需求巨大，前景广阔，薪资还高。　　　　3、你适不适合学习前端开发？　　如果你已经有了传统web基础(css+div)，那么是时候提升你的前端开发技能了…　　如果你没有接触过web前端开发，那么如果你经常上网，冲浪，希望要了解互联网世界背后的故事，可以先从web前端开始了解，因为这是开启互联网世界大门的钥匙…　　web前端JS课程的核心特点。　　web前端课程的核心特点是：我们不仅仅要学会制作一个网页，一个特效。　　更多的是我们要用web前端开发传统应用程序，我们做pc端，移动端，各种响应式，web 游戏，web 企业管理系统，web 移动程序，开发一个大规模项目，html5游戏，甚至用js开发传统高级语言才能做的数据库交互，不用后台语言，就靠我们js做后台，流行大趋势……　　　　4、课程模块介绍。　　未来需要什么，我们就需要学什么：　　模块1：基础入门阶段；　　模块2：web移动开发– html5、 css3、　　模块3：html 5 游戏— html5 、canvas；　　模块4：用js去做传统java 、.NET、 PHP才能做的数据库操作，服务器编程。— ajax 、node.js；　　模块5：大型BS、云计算、项目开发（比如淘宝，京东）–面向对象、设计模式、大型项目分层架构思想（比如MVC，MVVM)、js框架、web前端架构、js组件；　　　　5、学习方法、薪资目标。　　【两大基础，内外双修】　　两大基础：js基础（蹲马步，基础中的基础–函数，事件，语句等）、面向对象（基础）。内外双修：　　【内】掌握面向对象编程思维，模块化编程思维，大型项目分层编程思维，大型项目团队如何合作；　　【外】学习一些前辈总结出来的最佳编程实践：设计模式，比如能够保证全局唯一的单例模式，创造万物的工厂模式，模拟现实中介的中介模式，代理模式，以及所有业界都在谈，都在吹，都在用的依赖倒置，依赖注入，面向切面编程等。　　结语：年前，随着iPhone的兴起，iOS开发火爆中国。当年的行动者，如今已经成为百万富翁！今天，随着HTML5等WEB前端技术兴起，前端开发的大潮已经袭来！赶快行动，让青春不留遗憾，占领行业制高点，主动权就再你的手中！
liujianguojsj
liujianguojsj
采纳数：13
获赞数：49
多看别人源程序和实现方式，多多练习，多去有名的论坛转转
FreeFlyerTang
FreeFlyerTang
jsp,photoshop,正则表达式
采纳数：51
获赞数：215
做项目的程序员不都是前端后端都搞么。node.js html5 jquerymobile 等等 一堆东西 想前后端都搞而且是WEB项目的话自己接项目成长最快。切图有人回答了
其他8条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。从MVC到前后端分离
发表于 20:46|
来源《程序员》杂志|
摘要：MVC模式早在上个世纪70年代就诞生了，直到今天它依然存在，可见生命力相当之强。MVC模式最早用于Smalltalk语言中，最后在其它许多开发语言中都得到了很好的应用，例如，Java中的Struts、Spring MVC等框架。
1. 理解MVC
MVC是一种经典的设计模式，全名为Model-View-Controller，即模型-视图-控制器。
其中，模型是用于封装数据的载体，例如，在Java中一般通过一个简单的POJO（Plain Ordinary Java Object）来表示，其本质是一个普通的Java
Bean，包含一系列的成员变量及其getter/setter方法。对于视图而言，它更加偏重于展现，也就是说，视图决定了界面到底长什么样子，在Java中可通过JSP来充当视图，或者通过纯HTML的方式进行展现，而后者才是目前的主流。模型和视图需要通过控制器来进行粘合，例如，用户发送一个HTTP请求，此时该请求首先会进入控制器，然后控制器去获取数据并将其封装为模型，最后将模型传递到视图中进行展现。
综上所述，MVC的交互过程如图1所示。
2. MVC模式的优点与不足
MVC模式早在上个世纪70年代就诞生了，直到今天它依然存在，可见生命力相当之强。MVC模式最早用于Smalltalk语言中，最后在其它许多开发语言中都得到了很好的应用，例如，Java中的Struts、Spring
MVC等框架。正是因为这些MVC框架的出现，才让MVC模式真正落地，让开发更加高效，让代码耦合度尽量减小，让应用程序各部分的职责更加清晰。
既然MVC模式这么好，难道它就没有不足的地方吗？我认为MVC至少有以下三点不足：
每次请求必须经过“控制器-&模型-&视图”这个流程，用户才能看到最终的展现的界面，这个过程似乎有些复杂。
实际上视图是依赖于模型的，换句话说，如果没有模型，视图也无法呈现出最终的效果。
渲染视图的过程是在服务端来完成的，最终呈现给浏览器的是带有模型的视图页面，性能无法得到很好的优化。
为了使数据展现过程更加直接，并且提供更好的用户体验，我们有必要对MVC模式进行改进。不妨这样来尝试，首先从浏览器发送AJAX请求，然后服务端接受该请求并返回JSON数据返回给浏览器，最后在浏览器中进行界面渲染。
改进后的MVC模式如图2所示。
也就是说，我们输入的是AJAX请求，输出的是JSON数据，市面上有这样的技术来实现这个功能吗？答案是REST。
REST全称是Representational State Transfer（表述性状态转移），它是Roy Fielding博士在2000年写的一篇关于软件架构风格的论文，此文一出，威震四方！国内外许多知名互联网公司纷纷开始采用这种轻量级的Web服务，大家习惯将其称为RESTful
Web Services，或简称REST服务。]
如果将浏览器这一端视为前端，而服务器那一端视为后端的话，可以将以上改进后的MVC模式简化为以下前后端分离模式，如图3所示。
可见，有了REST服务，前端关注界面展现，后端关注业务逻辑，分工明确，职责清晰。那么，如何使用REST服务将应用程序进行前后端分离呢？我们接下来继续探讨，首先我们需要认识REST。
3. 认识REST
REST本质上是使用URL来访问资源种方式。众所周知，URL就是我们平常使用的请求地址了，其中包括两部分：请求方式与请求路径，比较常见的请求方式是GET与POST，但在REST中又提出了几种其它类型的请求方式，汇总起来有六种：GET、POST、PUT、DELETE、HEAD、OPTIONS。尤其是前四种，正好与CRUD（Create-Retrieve-Update-Delete，增删改查）四种操作相对应，例如，GET（查）、POST（增）、PUT（改）、DELETE（删），这正是REST与CRUD的异曲同工之妙！需要强调的是，REST是“面向资源”的，这里提到的资源，实际上就是我们常说的领域对象，在系统设计过程中，我们经常通过领域对象来进行数据建模。
REST是一个“无状态”的架构模式，因为在任何时候都可以由客户端发出请求到服务端，最终返回自己想要的数据，当前请求不会受到上次请求的影响。也就是说，服务端将内部资源发布REST服务，客户端通过URL来访问这些资源，这不就是SOA所提倡的“面向服务”的思想吗？所以，REST也被人们看做是一种“轻量级”的SOA实现技术，因此在企业级应用与互联网应用中都得到了广泛应用。
下面我们举几个例子对REST请求进行简单描述：
可见，请求路径相同，但请求方式不同，所代表的业务操作也不同，例如，/advertiser/1这个请求，带有GET、PUT、DELETE三种不同的请求方式，对应三种不同的业务操作。
虽然REST看起来还是很简单的，实际上我们往往需要提供一个REST框架，让其实现前后端分离架构，让开发人员将精力集中在业务上，而并非那些具体的技术细节。下面我们将使用Java技术来实现这个REST框架，整体框架会基于Spring进行开发。
4. 实现REST框架
4.1 统一响应结构
使用REST框架实现前后端分离架构，我们需要首先确定返回的JSON响应结构是统一的，也就是说，每个REST请求将返回相同结构的JSON响应结构。不妨定义一个相对通用的JSON响应结构，其中包含两部分：元数据与返回值，其中，元数据表示操作是否成功与返回值消息等，返回值对应服务端方法所返回的数据。该JSON响应结构如下：
"success": true,
"message": "ok"
"data": ...
}为了在框架中映射以上JSON响应结构，我们需要编写一个Response类与其对应：
public class Response {
private static final String OK = "ok";
private static final String ERROR = "error";
public Response success() {
this.meta = new Meta(true, OK);
public Response success(Object data) {
this.meta = new Meta(true, OK);
this.data =
public Response failure() {
this.meta = new Meta(false, ERROR);
public Response failure(String message) {
this.meta = new Meta(false, message);
public Meta getMeta() {
public Object getData() {
public class Meta {
public Meta(boolean success) {
this.success =
public Meta(boolean success, String message) {
this.success =
this.message =
public boolean isSuccess() {
public String getMessage() {
}以上Response类包括两类通用返回值消息：ok与error，还包括两个常用的操作方法：success( )与failure(
)，通过一个内部类来展现元数据结构，我们在下文中多次会使用该Response类。
实现该REST框架需要考虑许多问题，首当其冲的就是对象序列化问题。
4.2 实现对象序列化
想要解释什么是对象序列化？不妨通过一些例子进行说明。比如，通过浏览器发送了一个普通的HTTP请求，该请求携带了一个JSON格式的参数，在服务端需要将该JSON参数转换为普通的Java对象，这个转换过程称为序列化。再比如，在服务端获取了数据，此时该数据是一个普通的Java对象，然后需要将这个Java对象转换为JSON字符串，并将其返回到浏览器中进行渲染，这个转换过程称为反序列化。不管是序列化还是反序列化，我们一般都称为序列化。
实际上，Spring MVC已经为我们提供了这类序列化特性，只需在Controller的方法参数中使用@RequestBody注解定义需要反序列化的参数即可，如以下代码片段：
@Controller
public class AdvertiserController {
@RequestMapping(value = "/advertiser", method = RequestMethod.POST)
public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {
}若需要对Controller的方法返回值进行序列化，则需要在该返回值上使用@ResponseBody注解来定义，如以下代码片段：
@Controller
public class AdvertiserController {
@RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)
public @ResponseBody Response getAdvertiser(@PathVariable("id") String advertiserId) {
}当然，@ResponseBody注解也可以定义在类上，这样所有的方法都继承了该特性。由于经常会使用到@ResponseBody注解，所以Spring提供了一个名为@RestController的注解来取代以上的@Controller注解，这样我们就可以省略返回值前面的@ResponseBody注解了，但参数前面的@RequestBody注解是无法省略的。实际上，看看Spring中对应@RestController注解的源码便可知晓：
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Controller
@ResponseBody
public @interface RestController {
String value() default "";
}可见，@RestController注解已经被@Controller与@ResponseBody注解定义过了，Spring框架会识别这类注解。需要注意的是，该特性在Spring
4.0中才引入。
因此，我们可将以上代码进行如下改写：
@RestController
public class AdvertiserController {
@RequestMapping(value = "/advertiser", method = RequestMethod.POST)
public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {
@RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)
public Response getAdvertiser(@PathVariable("id") String advertiserId) {
除了使用注解来定义序列化行为以外，我们还需要使用Jackson来提供JSON的序列化操作，在Spring配置文件中只需添加以下配置即可：
&mvc:annotation-driven&
&mvc:message-converters&
&bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/&
&/mvc:message-converters&
&/mvc:annotation-driven&若需要对Jackson的序列化行为进行定制，比如，排除值为空属性、进行缩进输出、将驼峰转为下划线、进行日期格式化等，这又如何实现呢？
首先，我们需要扩展Jackson提供的ObjectMapper类，代码如下：
public class CustomObjectMapper extends ObjectMapper {
private boolean camelCaseToLowerCaseWithUnderscores =
private String dateFormatP
public void setCamelCaseToLowerCaseWithUnderscores(boolean camelCaseToLowerCaseWithUnderscores) {
this.camelCaseToLowerCaseWithUnderscores = camelCaseToLowerCaseWithU
public void setDateFormatPattern(String dateFormatPattern) {
this.dateFormatPattern = dateFormatP
public void init() {
// 排除值为空属性
setSerializationInclusion(JsonInclude.Include.NON_NULL);
// 进行缩进输出
configure(SerializationFeature.INDENT_OUTPUT, true);
// 将驼峰转为下划线
if (camelCaseToLowerCaseWithUnderscores) {
setPropertyNamingStrategy(PropertyNamingStrategy.CAMEL_CASE_TO_LOWER_CASE_WITH_UNDERSCORES);
// 进行日期格式化
if (StringUtil.isNotEmpty(dateFormatPattern)) {
DateFormat dateFormat = new SimpleDateFormat(dateFormatPattern);
setDateFormat(dateFormat);
}然后，将CustomObjectMapper注入到MappingJackson2HttpMessageConverter中，Spring配置如下：
&bean id="objectMapper" class="com.xxx.api.json.CustomObjectMapper" init-method="init"&
&property name="camelCaseToLowerCaseWithUnderscores" value="true"/&
&property name="dateFormatPattern" value="yyyy-MM-dd HH:mm:ss"/&
&mvc:annotation-driven&
&mvc:message-converters&
&bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"&
&property name="objectMapper" ref="objectMapper"/&
&/mvc:message-converters&
&/mvc:annotation-driven&通过以上过程，我们已经完成了一个基于Spring MVC的REST框架，只不过该框架还非常单薄，还缺乏很多关键性特性，尤其是异常处理。
4.3 处理异常行为
在Spring MVC中，我们可以使用AOP技术，编写一个全局的异常处理切面类，用它来统一处理所有的异常行为，在Spring 3.2中才开始提供。使用法很简单，只需定义一个类，并通过@ControllerAdvice注解将其标注即可，同时需要使用@ResponseBody注解表示返回值可序列化为JSON字符串。代码如下：
@ControllerAdvice
@ResponseBody
public class ExceptionAdvice {
* 400 - Bad Request
@ResponseStatus(HttpStatus.BAD_REQUEST)
@ExceptionHandler(HttpMessageNotReadableException.class)
public Response handleHttpMessageNotReadableException(HttpMessageNotReadableException e) {
logger.error("参数解析失败", e);
return new Response().failure("could_not_read_json");
* 405 - Method Not Allowed
@ResponseStatus(HttpStatus.METHOD_NOT_ALLOWED)
@ExceptionHandler(HttpRequestMethodNotSupportedException.class)
public Response handleHttpRequestMethodNotSupportedException(HttpRequestMethodNotSupportedException e) {
logger.error("不支持当前请求方法", e);
return new Response().failure("request_method_not_supported");
* 415 - Unsupported Media Type
@ResponseStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE)
@ExceptionHandler(HttpMediaTypeNotSupportedException.class)
public Response handleHttpMediaTypeNotSupportedException(Exception e) {
logger.error("不支持当前媒体类型", e);
return new Response().failure("content_type_not_supported");
* 500 - Internal Server Error
@ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
@ExceptionHandler(Exception.class)
public Response handleException(Exception e) {
logger.error("服务运行异常", e);
return new Response().failure(e.getMessage());
}可见，在ExceptionAdvice类中包含一系列的异常处理方法，每个方法都通过@ResponseStatus注解定义了响应状态码，此外还通过@ExceptionHandler注解指定了具体需要拦截的异常类。以上过程只是包含了一部分的异常情况，若需处理其它异常，可添加方法具体的方法。需要注意的是，在运行时从上往下依次调用每个异常处理方法，匹配当前异常类型是否与@ExceptionHandler注解所定义的异常相匹配，若匹配，则执行该方法，同时忽略后续所有的异常处理方法，最终会返回经JSON序列化后的Response对象。
4.4 支持参数验证
我们回到上文所提到的示例，这里处理一个普通的POST请求，代码如下：
@RestController
public class AdvertiserController {
@RequestMapping(value = "/advertiser", method = RequestMethod.POST)
public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {
}其中，AdvertiserParam参数包含若干属性，通过以下类结构可见，它是一个传统的POJO：
public class AdvertiserParam {
private String advertiserN
// 省略 getter/setter 方法
}如果业务上需要确保AdvertiserParam对象的advertiserName属性必填，如何实现呢？
若将这类参数验证的代码写死在Controller中，势必会与正常的业务逻辑搅在一起，导致责任不够单一，违背于“单一责任原则”。建议将其参数验证行为从Controller中剥离出来，放到另外的类中，这里仅提供一个@Valid注解来定义AdvertiserParam参数，并在AdvertiserParam类中通过@NotEmpty注解来定义advertiserName属性，就像下面这样：
@RestController
public class AdvertiserController {
@RequestMapping(value = "/advertiser", method = RequestMethod.POST)
public Response createAdvertiser(@RequestBody @Valid AdvertiserParam advertiserParam) {
public class AdvertiserParam {
private String advertiserN
// 省略 getter/setter 方法
}这里的@Valid注解实际上是Validation Bean规范提供的注解，该规范已由Hibernate Validator框架实现，因此需要添加以下Maven依赖到pom.xml文件中：
&dependency&
&groupId&org.hibernate&/groupId&
&artifactId&hibernate-validator&/artifactId&
&version&${hibernate-validator.version}&/version&
&/dependency&需要注意的是，Hibernate Validator与Hibernate没有任何依赖关系，唯一有联系的只是都属于JBoss公司的开源项目而已。
要实现@NotEmpty注解的功能，我们需要做以下几件事情。
首先，定义一个@NotEmpty注解类，代码如下：
@Documented
@Target({ElementType.FIELD, ElementType.PARAMETER})
@Retention(RetentionPolicy.RUNTIME)
@Constraint(validatedBy = NotEmptyValidator.class)
public @interface NotEmpty {
String message() default "not_empty";
Class&?&[] groups() default {};
Class&? extends Payload&[] payload() default {};
}以上注解类必须包含message、groups、payload三个属性，因为这是规范所要求的，此外，需要通过@Constraint注解指定一个验证器类，这里对应的是NotEmptyValidator，其代码如下：
public class NotEmptyValidator implements ConstraintValidator&NotEmpty, String& {
public void initialize(NotEmpty constraintAnnotation) {
public boolean isValid(String value, ConstraintValidatorContext context) {
return StringUtil.isNotEmpty(value);
}以上验证器类实现了ConstraintValidator接口，并在该接口的isValid( )方法中完成了具体的参数验证逻辑。需要注意的是，实现接口时需要指定泛型，第一个参数表示验证注解类型（NotEmpty），第二个参数表示需要验证的参数类型（String）。
然后，我们需要在Spring配置文件中开启该特性，需添加如下配置：
&bean class="org.springframework.validation.beanvalidation.MethodValidationPostProcessor"/&
最后，需要在全局异常处理类中添加参数验证处理方法，代码如下：
@ControllerAdvice
@ResponseBody
public class ExceptionAdvice {
* 400 - Bad Request
@ResponseStatus(HttpStatus.BAD_REQUEST)
@ExceptionHandler(ValidationException.class)
public Response handleValidationException(ValidationException e) {
logger.error("参数验证失败", e);
return new Response().failure("validation_exception");
}至此，REST框架已集成了Bean Validation特性，我们可以使用各种注解来完成所需的参数验证行为了。
看似该框架可以在本地成功跑起来，整个架构包含两个应用，前端应用提供纯静态的HTML页面，后端应用发布REST API，前端需要通过AJAX调用后端发布的REST
API，然而AJAX是不支持跨域访问的，也就是说，前后端两个应用必须在同一个域名下才能访问。这是非常严重的技术障碍，一定需要找到解决方案。
4.5 解决跨域问题
比如，前端应用为静态站点且部署在http://web.xxx.com域下，后端应用发布REST API并部署在http://api.xxx.com域下，如何使前端应用通过AJAX跨域访问后端应用呢？这需要使用到CORS技术来实现，这也是目前最好的解决方案了。
[CORS全称为Cross Origin Resource Sharing（跨域资源共享），服务端只需添加相关响应头信息，即可实现客户端发出AJAX跨域请求。]
CORS技术非常简单，易于实现，目前绝大多数浏览器均已支持该技术（IE8浏览器也支持了），服务端可通过任何编程语言来实现，只要能将CORS响应头写入response对象中即可。
下面我们继续扩展REST框架，通过CORS技术实现AJAX跨域访问。
首先，我们需要编写一个Filter，用于过滤所有的HTTP请求，并将CORS响应头写入response对象中，代码如下：
public class CorsFilter implements Filter {
private String allowO
private String allowM
private String allowC
private String allowH
private String exposeH
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)
HttpServletResponse response = (HttpServletResponse)
if (StringUtil.isNotEmpty(allowOrigin)) {
List&String& allowOriginList = Arrays.asList(allowOrigin.split(","));
if (CollectionUtil.isNotEmpty(allowOriginList)) {
String currentOrigin = request.getHeader("Origin");
if (allowOriginList.contains(currentOrigin)) {
response.setHeader("Access-Control-Allow-Origin", currentOrigin);
if (StringUtil.isNotEmpty(allowMethods)) {
response.setHeader("Access-Control-Allow-Methods", allowMethods);
if (StringUtil.isNotEmpty(allowCredentials)) {
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
if (StringUtil.isNotEmpty(allowHeaders)) {
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
if (StringUtil.isNotEmpty(exposeHeaders)) {
response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
chain.doFilter(req, res);
public void destroy() {
}以上CorsFilter将从web.xml中读取相关Filter初始化参数，并将在处理HTTP请求时将这些参数写入对应的CORS响应头中，下面大致描述一下这些CORS响应头的意义：
Access-Control-Allow-Origin：允许访问的客户端域名，例如：http://web.xxx.com，若为*，则表示从任意域都能访问，即不做任何限制。
Access-Control-Allow-Methods：允许访问的方法名，多个方法名用逗号分割，例如：GET,POST,PUT,DELETE,OPTIONS。
Access-Control-Allow-Credentials：是否允许请求带有验证信息，若要获取客户端域下的cookie时，需要将其设置为true。
Access-Control-Allow-Headers：允许服务端访问的客户端请求头，多个请求头用逗号分割，例如：Content-Type。
Access-Control-Expose-Headers：允许客户端访问的服务端响应头，多个响应头用逗号分割。
需要注意的是，CORS规范中定义Access-Control-Allow-Origin只允许两种取值，要么为*，要么为具体的域名，也就是说，不支持同时配置多个域名。为了解决跨多个域的问题，需要在代码中做一些处理，这里将Filter初始化参数作为一个域名的集合（用逗号分隔），只需从当前请求中获取Origin请求头，就知道是从哪个域中发出的请求，若该请求在以上允许的域名集合中，则将其放入Access-Control-Allow-Origin响应头，这样跨多个域的问题就轻松解决了。
以下是web.xml中配置CorsFilter的方法：
&filter-name&corsFilter&/filter-name&
&filter-class&com.xxx.api.cors.CorsFilter&/filter-class&
&init-param&
&param-name&allowOrigin&/param-name&
&param-value&http://web.xxx.com&/param-value&
&/init-param&
&init-param&
&param-name&allowMethods&/param-name&
&param-value&GET,POST,PUT,DELETE,OPTIONS&/param-value&
&/init-param&
&init-param&
&param-name&allowCredentials&/param-name&
&param-value&true&/param-value&
&/init-param&
&init-param&
&param-name&allowHeaders&/param-name&
&param-value&Content-Type&/param-value&
&/init-param&
&filter-mapping&
&filter-name&corsFilter&/filter-name&
&url-pattern&/*&/url-pattern&
&/filter-mapping&完成以上过程即可实现AJAX跨域功能了，但似乎还存在另外一个问题，由于REST是无状态的，后端应用发布的REST
API可在用户未登录的情况下被任意调用，这显然是不安全的，如何解决这个问题呢？我们需要为REST请求提供安全机制。
4.6 提供安全机制
解决REST安全调用问题，可以做得很复杂，也可以做得特简单，可按照以下过程提供REST安全机制：
当用户登录成功后，在服务端生成一个token，并将其放入内存中（可放入JVM或Redis中），同时将该token返回到客户端。
在客户端中将返回的token写入cookie中，并且每次请求时都将token随请求头一起发送到服务端。
提供一个AOP切面，用于拦截所有的Controller方法，在切面中判断token的有效性。
当登出时，只需清理掉cookie中的token即可，服务端token可设置过期时间，使其自行移除。
首先，我们需要定义一个用于管理token的接口，包括创建token与检查token有效性的功能。代码如下：
public interface TokenManager {
String createToken(String username);
boolean checkToken(String token);
}然后，我们可提供一个简单的TokenManager实现类，将token存储到JVM内存中。代码如下：
public class DefaultTokenManager implements TokenManager {
private static Map&String, String& tokenMap = new ConcurrentHashMap&&();
public String createToken(String username) {
String token = CodecUtil.createUUID();
tokenMap.put(token, username);
public boolean checkToken(String token) {
return !StringUtil.isEmpty(token) && tokenMap.containsKey(token);
}需要注意的是，如果需要做到分布式集群，建议基于Redis提供一个实现类，将token存储到Redis中，并利用Redis与生俱来的特性，做到token的分布式一致性。
然后，我们可以基于Spring AOP写一个切面类，用于拦截Controller类的方法，并从请求头中获取token，最后对token有效性进行判断。代码如下：
public class SecurityAspect {
private static final String DEFAULT_TOKEN_NAME = "X-Token";
private TokenManager tokenM
private String tokenN
public void setTokenManager(TokenManager tokenManager) {
this.tokenManager = tokenM
public void setTokenName(String tokenName) {
if (StringUtil.isEmpty(tokenName)) {
tokenName = DEFAULT_TOKEN_NAME;
this.tokenName = tokenN
public Object execute(ProceedingJoinPoint pjp) throws Throwable {
// 从切点上获取目标方法
MethodSignature methodSignature = (MethodSignature) pjp.getSignature();
Method method = methodSignature.getMethod();
// 若目标方法忽略了安全性检查，则直接调用目标方法
if (method.isAnnotationPresent(IgnoreSecurity.class)) {
return pjp.proceed();
// 从 request header 中获取当前 token
String token = WebContext.getRequest().getHeader(tokenName);
// 检查 token 有效性
if (!tokenManager.checkToken(token)) {
String message = String.format("token [%s] is invalid", token);
throw new TokenException(message);
// 调用目标方法
return pjp.proceed();
}若要使SecurityAspect生效，则需要添加如下Spring 配置：
&bean id="securityAspect" class="com.xxx.api.security.SecurityAspect"&
&property name="tokenManager" ref="tokenManager"/&
&property name="tokenName" value="X-Token"/&
&aop:config&
&aop:aspect ref="securityAspect"&
&aop:around method="execute" pointcut="@annotation(org.springframework.web.bind.annotation.RequestMapping)"/&
&/aop:aspect&
&/aop:config&最后，别忘了在web.xml中添加允许的X-Token响应头，配置如下：
&init-param&
&param-name&allowHeaders&/param-name&
&param-value&Content-Type,X-Token&/param-value&
&/init-param&
本文从经典的MVC模式开始，对MVC模式是什么以及该模式存在的不足进行了简述。然后引出了如何对MVC模式的改良，让其转变为前后端分离架构，以及解释了为何要进行前后端分离。最后通过REST服务将前后端进行解耦，并提供了一款基于Java的REST框架的主要实现过程，尤其是需要注意的核心技术问题及其解决方案。希望本文对正在探索前后端分离的读者们有所帮助，期待与大家共同探讨。
作者简介：黄勇，从事近十年的
JavaEE 应用开发工作，曾任阿里巴巴公司系统架构师，现任特赞（tezign.com）公司 CTO。对分布式服务架构与大数据技术有深入研究，具有丰富的
B/S 架构开发经验与项目实战经验，擅长敏捷开发模式。国内开源软件推动者之一，活跃于“开源中国”社区网站，Smart Framework 开源框架创始人。热爱技术交流，乐于分享自己的工作经验。
【相关阅读】（责编/
，关注架构和算法领域，寻求报道或者投稿请发邮件，交流探讨可加微信qshuguang2008，备注姓名+公司+职位）
本文来自《程序员》电子刊10月B架构专题文章，，包含：iPad版、Android版、PDF版。
值得一提的是，由CSDN举办的
将于11月19-21日在北京举行，本次大会涵盖：新型数据库、编程语言、工具与平台、产品与设计、前端开发、算法、微信开发、架构实践、安全等九大分
论坛，届时国外知名讲师将分享所在领域的最佳实践。【】
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章