一、项目介绍
淘淘大型购物项目主要分为web移动端和pc端后台管理,采用前后端分离模式。前端编写过程中很依赖与后端环境,需要依赖后台提供的接口。 这种模式可认为是前后分离模式,也是接口化开发。
web移动端主要包括首页、分类(一级分类、二级分类)、商品(搜索中心,商品列表、商品详情)、购物车(购物车管理)、用户(登录、注册、账户管理)、收获地址(展示、添加、编辑、删除)。pc后台管理页面包括登录(管理员登录)、用户管理、分类管理(一级分类、二级分类管理)、商品管理(商品录入、删除、修改、展示)。
web前端页面用到的技术:artTemplate模板引擎、fontAwersome字体图标、MUI移动端框架、zepto.js
pc后台管理所用到的技术:artTemplate模板引擎、bootstrap、bootstrap-paginator分页插件、bootstrap-validator校验功能插件、echarts插件快速画出图表、jquery、jquery-fileupload、nprogress加载进度显示。
二、主要技术介绍
Mui介绍
-
bootstrap 也是一个ui框架 响应式的ui框架 兼容不同终端 可以适配pc端 也可以适配 移动端
-
Mui 是一个ui框架 针对移动端开发的ui框架 只能适配移动端(流式布局)
特点
-
最接近原生APP体验的高性能前端框架
-
轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征; MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
-
原生UI 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件
-
流畅体验 下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上, DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div, 而是一个完整的webview(子webview),回弹动画使用原生动画
页面架子搭建:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title>淘淘首页</title>
<link rel="stylesheet" href="assets/mui/css/mui.css"/>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div class="lt_container">
<header class="lt_topBar"></header>
<div class="lt_content">
1
</div>
<footer class="lt_tabBar"></footer>
</div>
<script src="assets/mui/js/mui.js"></script>
</body>
</html>
- 初始区域滚动插件
/*初始化区域滚动组件 当超过了父容器大小的时候生效*/
mui('.mui-scroll-wrapper').scroll();
- 初始化轮播图
/*轮播图的初始化*/
mui('.mui-slider').slider({
interval:4000
});
bootstrap-validator校验功能插件
参考文档:http://blog.csdn.net/nazhidao/article/details/51542508
http://blog.csdn.net/u013938465/article/details/53507109
http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
http://bootstrapvalidator.votintsev.ru/api/
常用的属性:
between:检测输入的值是否在两个指定的值之间。
callback:通过回调函数返回验证信息。
creditCard:验证信用卡格式。
different:如果输入值和给定的值不同返回true。
digits:如果输入的值只包含数字返回true。
emailAddress:验证电子邮件格式是否有效。
greaterThan:如果输入的值大于或等于指定的值返回true。
hexColor:验证一个hex格式的颜色值是否有效。
identical:验证输入的值是否和指定字段的值相同。
lessThan:如果输入的值小于或等于指定的值返回true。
notEmpty:检测字段是否为空。
regexp:检测输入值是否和指定的javascript正则表达式匹配。
remote:通过AJAX请求来执行远程代码。
stringLength:验证字符串的长度。
uri:验证URL地址是否有效。
usZipCode:验证美国的邮政编码格式。
defaultSubmit
默认提交表单 -
disableSubmitButtons
禁用或启用提交按钮 -
enableFieldValidators
启用/禁用所有给定的字段验证器 (如果 true,使字段验证器。如果 false禁用字段验证器) -
getFieldElements
检索字段元素的名字 -
isValid
返回 true如果所有的表单字段是有效的。否则,返回 false. -
resetForm
重置表单 -
updateElementStatus
更新验证给定元素的结果 -
updateStatus(field, status, validatorName)
更新为给定字段验证器的结果,status可以 NOT_VALIDATED, VALIDATING, INVALID或 VALID,validatorName 字符串 验证器的名称。如果 null所有验证器,更新方法有效性的结果
nprogress
参考文档:http://blog.csdn.net/joyhen/article/details/24458427
数据可视化插件
echarts http://echarts.baidu.com/