淘淘大型购物项目

最新推荐文章于 2021-02-27 16:59:04 发布

yyy_wj

最新推荐文章于 2021-02-27 16:59:04 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/103300991

版权

一、项目介绍

淘淘大型购物项目主要分为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框架只能适配移动端（流式布局）
学习官网 http://dev.dcloud.net.cn/mui/
官方文档 http://dev.dcloud.net.cn/mui/ui/
组件展示 http://dcloud.io/hellomui/

特点

最接近原生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/

https://www.hcharts.cn/demo/highcharts

yyy_wj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘淘大型购物项目

一、项目介绍淘淘大型购物项目主要分为web移动端和pc端后台管理，采用前后端分离模式。前端编写过程中很依赖与后端环境，需要依赖后台提供的接口。这种模式可认为是前后分离模式，也是接口化开发。web移动端主要包括首页、分类（一级分类、二级分类）、商品（搜索中心，商品列表、商品详情）、购物车（购物车管理）、用户（登录、注册、账户管理）、收获地址（展示、添加、编辑、删除）。pc后台管理页面包括登...
复制链接

扫一扫