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、在原来代码的基础上修改，如下拉框是以下代码：

          

            

              
Gender
              

                
                  Male
                  Female
                
              
            
          
        

要修改为

 
         

          

            

              
商铺分类
              

                
                  
                
              
            
          
        

要加上id 一遍JS可以操作，分类信息从数据库读取

2、上传空间，input type 为file

        

          

            

              
缩略图
              

                

 

页面查看

 这里我们不希望用户直接访问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下的文件，只有通过后台转发才能得到