4-9 店铺注册之前端设计

 

UI框架

SUI Mobile能够方便迅速搭建手机H5应用，是自适应（自动适应网页宽度并相应调整的设计）网页UI框架

http://m.sui.taobao.org/

在示例中选择好表单-右键-显示网页源码-复制

 在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下的文件，只有通过后台转发才能得到