1. UI Hyogo: SUI Mobile
Front-end knowledge there is a short board, can only use front-end development of some very UI library used to compensate for the lack of knowledge of front-end, it is recommended SUI Mobile
official description: SUI Mobile is a lightweight, compact and elegant UI library, easily and quickly build mobile phone H5 applications. We meet a set of templates to respond to a variety of equipment exhibition needs.
Features: a framework for adaptive web design. Automatic identification screen width, and adjust accordingly web design, using a variety of behavioral trends in the main terminal for Internet users to browse the same page.
2. Registration page
Registration page using the form page template
2.1 to copy their page source code, then modify the related controls to
New html index.html file in webapp, a copy of the registration template source code to the newly created index.html.
2.2 redistribute static file
For this html files, some of which rely on static resources, such as file css, js files. These documents did not come in the introduction, so pages will not display correctly.
...
<!--所有的css和js文件全部删除-->
<link rel="stylesheet" href="/dist/css/sm.css">
<link rel="stylesheet" href="/dist/css/sm-extend.css">
<link rel="stylesheet" href="/assets/css/demos.css">
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-114x114.png">
<script src="/assets/js/zepto.js"></script>
<script src="/assets/js/config.js"></script>
...
<script src="/dist/js/sm.js"></script>
<script src="/dist/js/sm-extend.js"></script>
<script src="/dist/js/sm-city-picker.js"></script>
<script src="/assets/js/demos.js"></script>SUI start using specified by CDN can address it provides when creating the page, directly to the remote download related resources in the form of a URL. It is downloaded static resources through the CDN network, so the rate is quite high.
CDN content distribution network, and its purpose is to add a new layer of network architecture in the existing Internet, the website will publish content to the network edge closest to the user, the user can go to obtain the desired content to improve user access to the site corresponding speed. Taobao's CDN over the country, so we can directly use it to improve our static resource loading speed, so use it directly in the CDN address here.
All css and js index.html file is deleted and replaced with a page template and css files js
...
<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 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>
...Start tomcat, browser and enter http: // localhost: 18080 / o2o / index.html, such as demo page as normal show
2.3 modify the control
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI Mobile Demo</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">
<link rel="apple-touch-icon-precomposed"
href="/assets/img/apple-touch-icon-114x114.png">
<script>
//ga
</script>
<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">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-inner">
<!-- 修改item-title label类目文案、placeholder输入框默认问案，增加id，便于在js代码做控制 -->
<div class="item-title label">商铺名称</div>
<div class="item-input">
<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">
<select id="shop-category">
<!--商铺分类的option从后台读取，此处删除
<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="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">
<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">
<input type="text" id="shop-phone" placeholder="联系电话">
</div>
</div>
</div>
</li>
<!-- 缩略图 上传控件 -->
<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>
<!-- 店铺简介 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>
<!-- 验证码 keptcha -->
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="#" class="button button-big button-fill button-danger">取消</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-fill button-success">提交</a>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
Store categories, belongs to the region, and there is no corresponding list of front-end lists, it is necessary to obtain information from the background store category.
Codes until later reprocessing.
2.4 page limit access rules
We do not want users to directly access the page directly by index.html, we hope to be able to access it in accordance with our defined routing rules.
WEB-INF: as long as the page into the WEB-INF below, the user can not access the page by name to the html page.
Establish html folder under WEB-INF, build shop folder html.
The index.html rename shopoperation.html, and move to the WEB-INF / html / shop directory, then http: // localhost: 18080 / o2o / WEB-INF / html / shop / shopoperation.html is not accessible the need to route through backstage will guide it in the past.
New Controller files in com.csj2018.o2o.web.shopadmin
package com.csj2018.o2o.web.shopadmin;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping(value="shopadmin", method=RequestMethod.GET)
public class ShopAdminController {
@RequestMapping(value="/shopoperation")
public String shopOperation() {
return "shop/shopoperation"; //返回中间路径
}
}Browser and enter http: // localhost: 18080 / o2o / shopadmin / shopoperation
The above Controller returns only the middle path shop / shopoperation, why did not return to the previous path and suffix it?
In the Spring configuration file which has been set up for him before the suffix, so the return to the middle path
<!-- 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>