开发测试平台（六），组件化

使用bootstrap，复制之前的bootstrap表格，在templates下新建一个component包，并且新建一个模板componentList.ftl，然后引入layout模板和 <@body></@body>，把bootstrap表格复制到component.ftl里面

2、在controller 里新建一个ComponentController，component方法，启动component.ftl ，

3、修改第一模块叫组件市场，并且在href上写上后端请求路劲，修改接口类型为，组件类型，并且添加mysql、redis、mq，

4、需要一个表单的页面，所以创建一个表单页面，同样把 layout 引进来，并且调用body方法，

5、写一个controller 打开表单页面

6、绑定点击新增按钮事件，

7、这时候要写一个js方法，这个js里面实现跳转的页面（有个疑问点击按钮直接用href 跳转页面不可以吗，

<li><a href="/dubbo/dubboPage"><i class="fa fa-circle-o"></i>dubbo接口测试</a></li>

），绑定到新增按钮上，流程上就是登陆后 进入组件市场，在点击新增按钮，进入新增页面，

8、修改新增表单页面，form表单样式有三种， 水平表单， 放到form上面，form-horizontal  水平的表单

form-group 放到div上的form-group        获取最佳间距所必需的

label上加的样式control-label form在validate之后，会添加上has-warning之类的class，这个时候
conrol-label就会显示特定的css效

class="form-control" 百分之百的，，例如

<form method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="interfaceAliasName">接口别名</label>
        <div class="col-sm-3">
            <input class="form-control" name="interfaceAliasName" type="text" id="interfaceAliasName"/>
        </div>
</div>
</form>

9、新增controller 提交表单的方法