UI框架
SUI Mobile能够方便迅速搭建手机H5应用,是自适应(自动适应网页宽度并相应调整的设计)网页UI框架
在示例中选择好表单-右键-显示网页源码-复制
在src/main/webapp 下创建index.html
将前端源码复制进来
但css、js代码并没有引入进来
点击“开始使用” http://m.sui.taobao.org/getting-started/
将页面模板的css地址复制,替换掉工程里的css
JS同理
修改好后启动Tomcat,输入http://localhost:8080/o2oDemo/index.html
修改HTML
我们需要以下表单
注意:
1、在原来代码的基础上修改,如下拉框是以下代码:
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Gender</div>
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
要修改为
<!-- 商铺分类 下拉列表-->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">商铺分类</div>
<div class="item-input">
<select id = "shop-category">
</select>
</div>
</div>
</div>
</li>
<select> 要加上id 一遍JS可以操作,分类信息从数据库读取
2、上传空间,input type 为file
<!-- 缩略图 上传控件-->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">缩略图</div>
<div class="item-input">
<input type="file" id = "shop-img">
</div>
</div>
</div>
</li>
页面查看
这里我们不希望用户直接访问http://localhost:8080/o2oDemo/index.html 就能查看页面,因此可以将它放入WEB-INF中
因此修改如下:
在修改名字为shopoperation.html
但这样通过URL无法直接访问该页面了
因此要配置该页面的路由
创建ShopAdminController文件
上图中
1 为HTML的名字
2 为这个URL所在的文件夹地址,没有前后缀是因为在spring-web.xml中已配置前后缀
配置好后按照shopadmin/shopoperation的路由就可以访问
在提交按钮里加id,便于JS操作
小结:
想访问WEB-INF下的文件,只有通过后台转发才能得到