对于大神，这篇文章可以自动忽略。
对于一个暑假的懵逼的学习，或许对前台和后台的交互有了一点的认识。当初很迷茫的在项目上走了一个暑假的路，开始是学习的android方面的，帮实验室维护一个项目，开始的时候感觉那些学长以前写的那些项目很高大上（以前曾经看过他们的源码，结果没看懂），认真看了之后，顺便学了一点RxJava， Retrofit2.0方面东西，再在一个学长的帮助下，学习了一点开发的小知识，使用MVP框架，看来两个星期他们的源码，似乎看懂了一点。使用后台学长提供的接口，我感觉很懵的状态，写了两个新功能加到原来的项目中，然后就可以上传照片文字什么的。感觉有一种坑的感觉，但是对前台的向后台索要数据和上传数据有了一点的认识。
之后开始学习jsp方面的知识。在学习的最后，作者附上了一个案例的源代码，然后我顺便看了一下，是一个包含后台和前台的网页的小小小的程序，但是我似乎看到了大概的流程。


1.对于前台界面和后台的交互，我们一般是前台向后台索要数据，然后后台提供数据，比如图片，文字等等，前台把这些数据加以整理，就是我们刚看到的网页的开始的界面
2.之后我们会点击一些链接什么的，这个时候，前台会向后台发送一个标志信号，然后后台接受到这个标志信号的时候，会根据这个标志信号向数据库中去查找前台想要的数据（这里是一个重点），然后返还个前台
3.一些时候，我们会向后台上传一些数据，比如上传一个照片什么的，之后后台会把这个数据是否上传成功的信息返回给前台，然后前台就会个用户一个提示信息




对于简单的应用，基本就是这样来处理数据的，当然一些界面的优化，后台查找数据的速度之类的，安全性什么的，这些是要具体情况具体讨论，但是上面的那些形式基本就是目前比较简单应用的处理过程。


本人新手，若有错误，欢迎指正

据小鸿了解到，多数小白刚开始接触编程的时候并不知道自己

真正想学什么，也不知道自己究竟适合学习什么样的技术，有部分同学就会盲目的寻找资料去学，不要着急，小鸿这里带大家了解什么是前端。前端入门需要学习哪些技术。学习前端需要具备什么样的学习条件。

 

 

什么是前端？

 

前端-顾名思义：就是端茶倒水的工作，端着茶杯，在公司门前端茶倒水，称之为前端。（这里是小鸿开个玩笑让大家放松下心情啦~~）

 

对于初学者首先要了解的是，什么是前端？前端是做什么的？前端即网站前台的部分，通俗的讲就是我们平时在浏览器搜索出来的网页都属于前端，前端分为移动端（手机端）和PC端（电脑端）两部分。

前端页面又分为静态页面和动态页面，在最开始时，前端页面主要是静态网页，所谓的静态网页就是没有与任何用户进行交互，仅仅只是供读者浏览的网页。随着时代的发展、技术的提升，单一的图片和文字并不能满足用户的需求，动态网页就慢慢的演变而来，所谓动态网页是指用户不仅仅可以浏览网页，还可以与服务器进行交互。怎么与服务器交互呢？比如用户想在网站登录自己的账户，在登录表单中故意输错账号密码，这时客户端（即浏览器）会向服务器发起验证请求，服务器检测到用户输入的账号密码不正确，则会给用户返回“您输入的账号密码不正确”标识。

 

前端网页开发就如同在写字板上画画，学会灵活运用纸笔，在写字板上画出你想要的结构布局，颜色填充。实际上前端就是这样，灵活运用html（结构），css（样式），javascript（行为），就能开发出你想要的页面。

 

在很早以前，开发网站的一个页面需要分为两部分页面代码（移动端和PC端），那个时候并没有响应式布局的说法，响应式的诞生是为了解决网页在不同的终端可以自适应，通过响应式能使用户在浏览网页在手机和平板电脑上有更好的阅读体验。但是响应式布局有些缺点就是兼容终端设备工作量大，效率低下、代码容易混淆。

 

"响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。"

 -- 百度百科

 

 

 

前端入门需要学习哪些技术？

 

 简单的从初学者方面来说，需要掌握的知识有HTML、CSS、JavaScript、jQuery框架。这些都是初学者入门必学的知识点

 

1.HTML

 



 

HTML（HyperText Mark-up Language）超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，即平常上网所看到的的网页。是开发网页必备的编程语言，也是目前web领域应用最广泛的语言。

 

2.CSS

 

 

 



CSS（Cascading Style Sheets）层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。可以为网页自定义样式，使得CSS达到美化页面排版的目的，使得网页更加生动形象。

 

3.JavaScript

 



JavaScript是网页的直译式脚本语言，也是弱类型语言，它可以运行在HTML网页，添加各式各样的动态功能，比如用户登录的表单验证，创建cookies，检测访客的浏览器信息等。

 

4.jQuery框架

 



jQuery框架也被称为jQuery函数库，是一个快捷、简洁的JavaScript框架，里面对原生的JavaScript封装了各式各样常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

 

 

 

学习前端需要具备什么样的学习条件？

 

根底深，内功深厚，悟性要极高者7年可成，次者14年可成（开玩笑的啦，能保住头发才是重点~~）

 

对于初学者来讲，学习前端开发并没有很多条件，因为前端的门槛相对于其它行业而言是很低的，学习曲线是先易后难，很适合初学者入门。相对较难的是JavaScript，如果是学过java的再去学JavaScript会简单很多。

 

小鸿建议大家边学边练，基础入门知识学完以后可以模仿一些比较大型的网站，一个网站页面分为很多部分，正所谓“学着会，拿起键盘，哎，我刚要干嘛来着”。在做网站之前可以把相同的部分抽离出来，划分一下网站网页面的每一块，方便多个页面之前可以共用同一套相同的代码，节省代码空间，修改起来也简单，多理解自己写代码的用意，多想想还有没有其他需要改进的地方。

 

好啦，如果有疑问的同学可以搜索微信关注公众号"程序员小鸿"，小鸿等你来撩~

1、结构：(组件名为：selfRegistration)
     这是joomla前台组件必须的基本结构
        
      
	红色为文件夹
2、主要文件的骨干代码
     selfRegistration.php
	<?php
/**
 * @date       2009-07-15
 * @author     Pandar
 * @package    selfRestration
 * @subpackage Components
 * @link       
 * @license    GNU/GPL
 */
 
defined('_JEXEC') or die('Restricted access');
 
// Require the base controller
require_once (JPATH_COMPONENT.DS.'controller.php');
 
// Require specific controller if requested
if($controller = JRequest::getVar('controller')) {
	require_once (JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php');
}
 
// Create the controller
$classname	= 'SelfRegistrationController'.$controller;
$controller = new $classname( );
 
// Perform the Request task
$controller->execute( JRequest::getVar('task'));
 
// Redirect if set by the controller
$controller->redirect();
 
?>
   controller.php
          <?php
/**
 * @date       2009-07-15
 * @author     Pandar
 * @package    selfRestration
 * @subpackage Components
 * @link       
 * @license    GNU/GPL
 */
 
jimport('joomla.application.component.controller');
 
class SelfRegistrationController extends JController
{
 
	function display()
	{
		parent::display();
	}
 
}
?> 
   view.html.php（这个是从models类里面传递参数到defined.php）
        <?php
jimport('joomla.application.component.view');
class SelfRegistrationViewSelfRegistration extends JView
{
	function display($tpl=NULL)
	{
		$model=&$this->getModel();
		$this->assignRef('greeting',$greeting);
		$this->assignRef('pandar',$pandar);
		parent::display($tpl);
	}
}
?> 
  defined.php主要是网页布局的
  models下的selfRegistration.php包含了models类，可以创建连接操作数据库的函数之类
   

　　json数据格式在接口调用中、html页面中比较常用，json格式比较简单，解析也比较方便，所以使用很普遍。在springmvc中，也支持对json数据的解析和转换，这篇文章主要总结一下springmvc中如何和前台交互json数据。



1. 两种交互形式

　　springmvc和前台交互主要有两种形式，如下图所示： 


　　可以看出，前台传过来的方式有两种，一种是传json格式的数据过来，另一种就是在url的末尾传普通的key/value串过来，针对这两种方式，在controller中会有不同的解析，但是在controller中返回的json格式的数据都是一样的。下面来具体分析一下springmvc是如何与前台进行json数据的交互的。



2. 环境的准备



2.1 加载json的jar包

　　springmvc3和springmvc4针对json交互的jar包有区别，我用的是springmvc4，需要导入如下三个jar包（下载地址）。 




2.2 配置json转换器

　　配置json转换器有两种方式，如果是配置了注解适配器org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter的话，需要在该适配器中配置json转换器， 如下：



<!-- 用于将对象转换为 JSON  -->  
<bean id="stringConverter"  
    class="org.springframework.http.converter.StringHttpMessageConverter">  
    <property name="supportedMediaTypes">  
        <list>  
            <value>text/plain;charset=UTF-8</value>  
        </list>  
    </property>  
</bean>  
<bean id="jsonConverter"   class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>  

<bean      class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
    <property name="messageConverters">  
        <list>  
            <ref bean="stringConverter" />  
            <ref bean="jsonConverter" />  
        </list>  
    </property>  
</bean>  

　　但是如果使用<mvc:annotation-driven />注解驱动的话就不用以上的配置了，默认已经配好了。建议使用这种，比较方便。



3. json交互的测试



3.1 前台传输的是json格式的数据

　　我们使用jquery的ajax提交json串，对输出的json结果进行解析。前台的程序如下：



//请求json，输出是json
function requestJson(){

    var jsonData = {  
            "name" : "手机",  
            "price" : "999"  
    };
    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath }/requestJson.action',
        contentType:'application/json;charset=utf-8',//指定为json类型
        //数据格式是json串，商品信息
        data:JSON.stringify(jsonData),
        success:function(data){//返回json结果
            alert(data.name);
        }       
    }); 
}

　　看一下controller中是如何操作的。



//测试请求的是json串(商品信息)，输出json(商品信息)
//@RequestBody将请求的商品信息的json串转成itemsCustom对象
//@ResponseBody将itemsCustom对象转成json输出
@RequestMapping("/requestJson")
public @ResponseBody ItemsCustom requestJson(@RequestBody ItemsCustom itemsCustom) {

    return itemsCustom; //由于@ResponseBody注解，将itemsCustom转成json格式返回
}

　　由于前台传的是name和price两个属性，所以在后台就用ItemsCustom来接收了，这个类中也有这两个属性。重点是@RequestBody注解，它是将前台传过来的json串穿换成itemsaCustom对象，然后再将该对象return回去，通过@ResponseBody注解将itemsCustom对象转成json格式返回给前台。这样前台接收到了后就可以解析了。我们看一下测试的结果： 


　　响应的结果，null表示空值而已，这里就返回了原对象，也就只有name和price属性 




3.2 前台传输的是key/value格式的数据

　　我们还是使用jquery的ajax提交key/value串，对输出的json结果进行解析。前台的程序如下：



//请求key/value，输出是json
function responseJson(){

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath }/responseJson.action',
        //请求是key/value这里不需要指定contentType，因为默认就 是key/value类型
        //数据格式是key/value，商品信息
        data:'name=手机&price=999',
        success:function(data){//返回json结果
            alert(data.name);
        }       
    }); 
}

　　因为key/value串不是json格式的，所以controller在接收的时候就不需要@RequestBody的注解了，但是返回到前台的json格式的数据还是需要@ResponseBody注解的，如下：



//测试请求的是key/value(商品信息)，输出json(商品信息)
//@ResponseBody将itemsCustom对象转成json输出
@RequestMapping("/responseJson")
public @ResponseBody ItemsCustom responseJson(ItemsCustom itemsCustom) {

    return itemsCustom; //由于@ResponseBody注解，将itemsCustom转成json格式返回
}

　　测试结果如下： 


　　springmvc与前台json数据的交互就总结这么多。 

　　

　　相关阅读：http://blog.csdn.net/column/details/spring-mvc.html  

　　学习笔记源码下载地址：https://github.com/eson15/SpringMVC_Study

欢迎关注我新搭建的博客：http://www.itcodai.com/ 

文末福利：“程序员私房菜”，一个有温度的公众号~ 


—–乐于分享，共同进步！  

—–我的博客主页：http://blog.csdn.net/eson_15