All Projects → T-Macgrady → mmall-m

T-Macgrady / mmall-m

Licence: other
从零开始打造一个企业级电商平台,包括用户端和后台,前者可了解电商网站从设计到上线整个流程;后者采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术,体验前开发端新技术!

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects
shell
77523 projects

Projects that are alternatives of or similar to mmall-m

Newbee Mall Api
新蜂商城前后端分离版本-后端API源码
Stars: ✭ 384 (+1820%)
Mutual labels:  mall
Tacomall Uniapp
基于uniapp开发的适用于微信小程序,头条小程序,支付宝小程序,H5端的商城。
Stars: ✭ 132 (+560%)
Mutual labels:  mall
Ipaotui Mall
爱跑腿外卖 微信小程序
Stars: ✭ 219 (+995%)
Mutual labels:  mall
Newbee Mall
🔥 🎉newbee-mall 项目(新蜂商城)是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
Stars: ✭ 8,319 (+41495%)
Mutual labels:  mall
Ccmall
商城项目开源
Stars: ✭ 102 (+410%)
Mutual labels:  mall
Imall
基于Laravel5.2,Vue.js1.0的微信商城,用于熟悉 Laravel、Vuejs、Webpack、Gulp 的结合使用,已不维护及更新。(1MB单核基础服务器,浏览请耐心等待图片加载...)
Stars: ✭ 168 (+740%)
Mutual labels:  mall
Wepy Mall
微信小程序--基于wepy 商城(微店)微信小程序 欢迎学习交流
Stars: ✭ 3,224 (+16020%)
Mutual labels:  mall
shop-api
A saas e-shop write by go.
Stars: ✭ 47 (+135%)
Mutual labels:  mall
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (+415%)
Mutual labels:  mall
Xmall
一套完整的社群电商系统,后端Api、后台管理系统、前台h5系统、小程序和App
Stars: ✭ 214 (+970%)
Mutual labels:  mall
Weimall
开源 微信 小程序 商城 JAVA
Stars: ✭ 39 (+95%)
Mutual labels:  mall
Wechat Mall
清欢美味食光机,也是我做的第一个小程序,功能比较简单,后台基于API工厂
Stars: ✭ 98 (+390%)
Mutual labels:  mall
Mall
基于SpringBoot的网上商城
Stars: ✭ 171 (+755%)
Mutual labels:  mall
Onemall
芋道 mall 商城,基于微服务的思想,构建在 B2C 电商场景下的项目实战。核心技术栈,是 Spring Boot + Dubbo 。未来,会重构成 Spring Cloud Alibaba 。
Stars: ✭ 5,312 (+26460%)
Mutual labels:  mall
Notadd
A microservice development architecture based on nest.js. —— 基于 Nest.js 的微服务开发架构。
Stars: ✭ 2,556 (+12680%)
Mutual labels:  mall
Mmall
📢快乐蜗牛商城springcloud版本。本项目是对慕课网电商项目进行后端架构升级,主要是采用springcloud技术栈来进行服务拆分和治理,提高系统的并发能力。含有完整的前端页面,从用户选择商品-加入购物车-生成订单-支付宝扫码支付-后台管理系统。大体实现所有功能。除了springcloud技术栈,还涉及分布式锁、MQ异步下单、redis预减库存等内容
Stars: ✭ 347 (+1635%)
Mutual labels:  mall
Taro Mall
一个项目的架构,包括设计/前端/管理后台/后端/k8s集群架构,欢迎Star,欢迎Fork
Stars: ✭ 144 (+620%)
Mutual labels:  mall
ShopDZ
ShopDZ是北京康创联盛科技有限公司重度打造的一款企业级的社交化电商系统。通过分销、拼团等社会化精准营销模式以裂变量级的速度进行推广,帮助企业真正把粉丝变成实际购买力,迅速树立并拓展企业知名度和美誉度,建立企业自己的网上营销品牌。
Stars: ✭ 67 (+235%)
Mutual labels:  mall
Galaxy
The whole galaxy system, you can customize it base on your requirements.
Stars: ✭ 230 (+1050%)
Mutual labels:  mall
Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (+815%)
Mutual labels:  mall

从零开始打造一个企业级电商平台

项目说明:

  • 项目来源于慕课,包括用户端和后台管理系统,前者可了解电商网站从设计到上线整个流程;后者采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术,体验前开发端新技术。
  • 对于前端新人,从前到后撸一把还是很有必要的,此项目旨在交流学习,后续会整理项目中笔记及相关知识放在博客上,欢迎交流学习~
  • 后台管理系统项目 >>

上线demo:

项目运行

下载项目

git clone [email protected]:happymmallmac/mmall-m.git

运行

实战目标

  • 了解一个电商网站从设计到上线的整个流程
  • 掌握开发过程中遇到各种坑的解决思路和能力

需求分析

  • 需求:用户 购买 后台 统计 运营 市场

  • 核心:用户 购买

  • 流程:展示 -> 购物车 -> 下单 -> 订单 -> 支付 -> 用户中心

  • 功能拆分: 商品 :首页、商品列表、商品详情

    购物车:购物车数量、添加删除商品、购物车提交

    订单:订单确认(地址管理)、订单提交、订单列表、订单详情

    支付:支付

    用户:登录、注册、个人信息、找回密码、修改密码

架构设计

前后端完全分离

  • 把纯静态的html模板完全放在前端,数据全部通过RESTful接口来进行交互

分层架构

 工具层

  • 优点: 易维护、易复用、易扩展

模块化

  • 在分层的基础上利用commonjs进行模块化的拆分,通过组件化的拼装达到业务的实现

模块化 模块化

  • 优点: 进一步的解耦 支持并行开发,提高团队效率 ###技术选型&工具

框架?

项目 用户端 后台
特点 要求稳定 用户类型多样 兼容性好 有SEO要求 多页应用 开发快 企业内部使用 不要求兼容性和SEO 单页应用
选型 javascript + jquery + commonjs + hogan html5 + css3 + sass + Bootstrap + React16 + React-Router4 + ES6

构建工具

构建工具将源代码转换成可以执行的JavaScript、CSS、HTML 代码,用来让我们不再做机械重复的事情,解放我们的双手的。

项目 Gulp webpack
优点 好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用 天生支持CommonJS,专注于处理模块化的项目,完整好用又不失灵活性;
缺点 集成度不高,要写很多配置后才可以用 只能用于采用模块化开发的项目
选择 ×

版本控制工具

毫无疑问,非git莫属

  • 工具一栏
工具 构建工具 依赖环境 包管理 自动化发布脚本 代码编写 代码调试 请求挟持 版本控制
名称 webpack NodeJS NPM Shell sublime chrome charles/fiddler4 git

注:更新[email protected]后webpack-dev-server新增了devServer的配置,用自带的代理就可以访问接口

业务部分

通用功能开发

  • 为业务开发打下基础,加快开发速度
/*
* @Author: Lizh
* @Date:   2018-04-09 13:09:41
* @Last Modified by:   Lizh
* @Last Modified time: 2018-05-16 23:04:43
*/

var config = {
    serverHost:''
};
var _mm = {
    // 网络请求
    request : function(param){
        var _this = this;
        $.ajax({
            type     : param.method || 'get',
            url      : param.url    || '',
            dataType : param.type   || 'json',
            data     : param.data   || '',
            success  : function(res){
                //登陆成功
                if( 0 === res.status){
                    typeof param.success === 'function' && param.success(res.data , res.msg );
                }
                //无登陆状态需请求登陆
                else if (10 === res.status){               
                    _this.doLogin();
                }
                // 请求数据错误
                else if (1 === res.status) {
                    typeof param.error === 'function' && param.error( res.msg );
                } 
            },
            error    : function(err){
                    typeof param.error === 'function' && param.error( err.statusText );
                }
        });
    },
    // 获取服务器地址
    getServerUrl:function(path) {
        return config.serverHost+path;
    },
    //请求url参数
    getUrlParam : function(name) {
        var reg         = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        var result      = window.location.search.substr(1).match(reg);
        return result ? decodeURIComponent(result[2]) : null;
    },
    //渲染html模板
    renderHtml : function(htmlTemplate, data){
        var template    = Hogan.compile(htmlTemplate),
            result      = template.render(data);
        return result;
    },
    //成功提示
    successTips : function(msg){
        alert(msg || '操作成功!');
    },
    //错误提示
    errorTips : function(msg){
        alert(msg || '哪里不对了~');
    },
    //字段的验证,支持非空、手机、邮箱的判断
    validate : function(value, type){
        var _value = $.trim(value);
        //非空验证
        if('require' === type){
            return !!_value;
        }
        //手机号验证
        if('phone' === type){
            return /^1\d{10}$/.test(_value);
        }
        //邮箱格式验证
        if('email' === type){
            return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(_value);
        }
    },
    // 统一请求处理
    doLogin :function() {
        window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);
    },
    //go home
    goHome : function(){
         window.location.href = './index.html'; 
    }  
};
module.exports = _mm;

业务开发

业务开发

生产环境适配及基本SEO

生产环境适配

  • 利用webpack添加favicon
  • 线上域名分离,HTML路径简化
文件 html js + css image
位置 www/admin. + 根域名 s. + 根域名 img. + 根域名
  • 添加dns-prefecth
  • 对线上打包结果进行回归测试,防止压缩后显示不一致

基本SEO

  • 增加页面数量
  • 减少页面层级
  • 关键词密度
  • 高质量友链
  • 分析竞对
  • SEO数据监控

项目上线

上线准备

生产环境配置

  1. 使用git bash远程连接服务器

  2. 安装nodejs环境,使用v6.12.3

  3. 安装[email protected],也可使用npm,推荐yarn

  4. 安装git,可使用yum安装 : yum install git

  5. 建立developer product 文件夹,拉取代码至developer

  6. 安装nginx : yum install nginx

发布脚本编写

  1. 编写发布脚本前先手动执行一次,确保脚本准确

  2. 编写自动发布脚本 ####nginx和域名配置(这次没有进行域名分离)

  3. 新建vhost/*.conf并将其引入nginx.conf主文件

  4. nginx配置域名

  5. 域名解析 >>

  6. 查看网站并测试 >>

说明

  • 如果对您有帮助,您可以点 "Star" 支持一下 十分感谢!

相关链接

本人博客 对应后台管理系统

项目截图

用户端

首页-用户端 订单确认-用户端

后台管理系统

首页-后台 商品-后台

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].