概述

在开发完DAO层、Service层、Controller层之后，我们来实现下View层的部分

前端框架选择

我们这里选择阿里的SUI Mobile

具体的介绍，这里我们就不多说了，直接访问官网即可（尴尬，SUI Mobile貌似不维护了。。。）

页面目录结构

这里写图片描述

搭建商铺注册页面

我们选择使用http://m.sui.taobao.org/demos/form/label-input/ 这个表单作为我们我们的商铺注册页面，基于这个页面来进行修改

这里写图片描述

根据http://m.sui.taobao.org/getting-started/的指导，结合我们的数据模型，成型的页面如下


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商铺注册</title>
<meta name="description"
    content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- 
<link rel="shortcut icon" href="/favicon.ico">
 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<!-- Google Web Fonts -->

<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</head>
<body>
    <div class="page-group">
        <div id="page-label-input" class="page">
            <header class="bar bar-nav">
                <!--
                <a class="button button-link button-nav pull-left back"
                    href="/demos/form"> <span class="icon icon-left"></span> 返回
                </a>
                  -->
                <h1 class="title">商铺注册</h1>
            </header>
            <div class="content">
                <div class="list-block">
                    <!--根据tb_shop中的字段，店铺信息的页面编写出来-->
                    <ul>
                        <!-- 商铺名称 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺名称</div>
                                    <div class="item-input">
                                        <!-- 添加id 便于在js中操作 -->
                                        <input type="text" id="shop-name" placeholder="商铺名称">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- 商铺分类  下拉列表 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺分类</div>
                                    <div class="item-input">
                                        <!-- 增加id,便于js中操作，需要从后台读取数据 -->
                                        <select id="shop-category">

                                        </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-area">

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- 详细地址   text-->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <!-- 添加id 便于在js中操作 -->
                                        <input type="text" id="shop-addr" placeholder="详细地址">
                                    </div>
                                </div>
                            </div>
                        </li>


                        <!-- 商铺电话   text-->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺电话</div>
                                    <div class="item-input">
                                        <!-- 添加id 便于在js中操作 -->
                                        <input type="text" id="shop-phone" placeholder="商铺电话">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- 商铺图片  上传组件-->
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-inner">
                                    <div class="item-title label">商铺图片</div>
                                    <div class="item-input">
                                        <input type="file" id="shop-img">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- 商铺简介 textarea-->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺简介</div>
                                    <div class="item-input">
                                        <textarea id="shop-desc" placeholder="商铺简介"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- 验证码  kapa-->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">验证码</div>
                                    <input type="text" id="j_kaptcha" placeholder="验证码">
                                    <div class="item-input">
                                        <img id="kaptcha_img" alt="点击更换" title="点击更换"
                                            onclick="changeVerifyCode(this)" src="../Kaptcha"> <!-- src是找到web.xml中 对应的servlet的名字 -->
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-50">
                            <!-- 点击返回，回到商铺管理页面 TODO -->
                            <a href="#" class="button button-big button-fill button-danger">返回</a>
                        </div>
                        <div class="col-50">
                            <!-- 增加id ,便于js操作 -->
                            <a href="#" class="button button-big button-fill button-success" id="submit">提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 将css写在头部，将js写在尾部，为了更好地用户体验 -->
    <script type='text/javascript'
        src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <!-- 加载自定义的JS -->
    <script type='text/javascript'
        src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
    <script type='text/javascript'
        src='../resources/js/common/common.js' charset='utf-8'></script>    
</body>
</html>

Chrome浏览器，F12进入开发者模式，选择下图右上角的图标

这里写图片描述

这个页面是整个调测完的页面，js以及kaptcha组件也配置调测完了，如果是第一次搭建，验证码部分是不会有的。

JS部分

shopoperation.js


/**
 * 
 */
$(function() {
    // 获取基本信息的URL
    var initUrl = '/o2o/shopadmin/getshopinitinfo';
    // 注册店铺的URL
    var registerShopUrl = '/o2o/shopadmin/registshop';

    // 调用函数，加载数据
    getShopInitInfo();


    // 验证表单输入，省略。。。。
    /**
     * 从后台加载获取下拉菜单的值
     */
    function getShopInitInfo() {
        $.getJSON(initUrl, function(data) {
            if (data.success) {
                var tempShopCategoryHtml = '';
                var tempShopAreaHtml = '';
                data.shopCategoryList.map(function(item, index) {
                    tempShopCategoryHtml += '<option data-id="'
                            + item.shopCategoryId + '">' + item.shopCategoryName
                            + '</option>';
                });

                data.areaList.map(function(item, index) {
                    tempShopAreaHtml += '<option data-id="' + item.areaId
                            + '">' + item.areaName + '</option>';
                });
                // 获取html中对应标签的id 赋值
                $('#shop-category').html(tempShopCategoryHtml);
                $('#shop-area').html(tempShopAreaHtml)

            }else{
                $.toast(data.errMsg);
            }
        });
    };


    /**
     * submit按钮触发的操作
     */
    $('#submit').click(function() {
        // 获取页面的值
        var shop = {};
        // 注意： 这个地方的变量名称要和Shop实体类中的属性保持一致，因为后台接收到shopStr后，会将Json转换为实体类，如果不一致会抛出异常
        // com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException
        shop.shopName = $('#shop-name').val(); 
        shop.shopAddr = $('#shop-addr').val();
        shop.phone = $('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();
        // 选择id,双重否定=肯定
        shop.shopCategory = {
            // 这里定义的变量要和ShopCategory.shopCategoryId保持一致，否则使用databind转换会抛出异常
            shopCategoryId:$('#shop-category').find('option').not(function(){
                return !this.selected;
                }).data('id')
        };
        shop.area = {
            // 这里定义的变量要和Area.areaId属性名称保持一致，否则使用databind转换会抛出异常
            areaId:$('#shop-area').find('option').not(function(){
                return !this.selected;
                }).data('id')
            };


        // 图片
        var shopImg = $('#shop-img')[0].files[0];

        // 验证码
        var verifyCodeActual =$('#j_kaptcha').val();
        console.log('verifyCodeActual:'+verifyCodeActual);
        if(!verifyCodeActual){
            $.toast('请输入验证码');
            return;
        }

        // 接收数据
        var formData = new FormData();
        // 和后端约定好，利用shopImg和 shopStr接收 shop图片信息和shop信息
        formData.append('shopImg',shopImg);
        // 转成JSON格式，后端收到后将JSON转为实体类
        formData.append('shopStr',JSON.stringify(shop));

        // 将数据封装到formData发送到后台
        formData.append('verifyCodeActual',verifyCodeActual);


        // 利用ajax提交
        $.ajax({
            url:registerShopUrl,
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            cache:false,
            success:function(data){
                if(data.success){
                    $.toast('提示信息:'+data.errMsg);
                }else{
                    $.toast('提示信息:' + data.errMsg);
                }
                // 点击提交后 不管成功失败都更换验证码，防止重复提交
                $('#kaptcha_img').click();
            }
        });

    });
});

common.js

/**
 * 
 */

function changeVerifyCode(img){
    img.src="../Kaptcha?" + Math.floor(Math.random() * 1000)
}

作用为：点击更换验证码

当然了，加上这个也会显示出来验证码，下拉框的初始化数据也不会存在，后文继续更新

乱码问题

如果部署后，前台页面乱码，需要在web.xml中加入CharacterEncodingFilter

<!-- 为避免编码不一致,一般情况下都需要增加编码过滤器 -->
    <filter>
        <filter-name>SpringEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>SpringEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

将页面迁到WEB-INF目录下

为了安全，我们将shopoperation.html 迁移到/o2o/src/main/webapp/WEB-INF/html/shop/shopoperation.html。通过servlet来控制访问，这样的话，我们就需要来根据请求路径来进行页面的跳转

Controller层的编写

package com.artisan.o2o.web.shopadmin;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/shopadmin")
public class ShopAdminController {

    @RequestMapping(value = "/shopregist", method = RequestMethod.GET)
    public String shopRegist(){
        return "shop/shopoperation";
    }
}

根据/o2o/src/main/resources/spring/spring-web.xml中的定义

    <!-- 3.定义视图解析器 -->
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/html/"></property>
        <property name="suffix" value=".html"></property>
    </bean>

可知会转发到/WEB-INF/html/目录下，文件后缀以html结尾的文件中，符合我们的定义。

访问

启动tomcat，根据RequestMapping，可知访问

http://localhost:8080/o2o/shopadmin/shopregist

这里写图片描述

实战SSM_O2O商铺_12【商铺注册】View层之前台页面

概述

前端框架选择

页面目录结构

搭建商铺注册页面

JS部分

shopoperation.js

common.js

乱码问题

将页面迁到WEB-INF目录下

Controller层的编写

访问

猜你喜欢