电商全端(一)

回眸只為那壹抹淺笑 提交于 2020-03-26 03:21:14

项目介绍

项目描述

乐淘商城是一个针对鞋类商品的在线交易平台,合适就穿,不合适就换。乐淘为您支付退换货的物流费用,以最快速度把换好的鞋子送到您手中,最好的品牌,最低的价格。乐淘族凭借雄厚的资金实力和在电子商务业界的诚信积累,与Nike、Adidas、Converse、NewBalance等国际大牌深度合作。保证了产品与专卖店同步更新,让您不出家门能最快速度买到当季新款名牌鞋。乐淘族坚持自营,减少中间环节,让利给用户,因此所有产品价格均低于传统销售渠道。

功能介绍

后端管理(pc端)

  • 登录功能/退出功能(bootstrap-validator)基于bootstrap 的表单校验插件
  • 首页功能模块(echarts)
  • 用户管理功能(bootstrap-paginator)
  • 分类管理功能(jquery-fileupload)
  • 商品管理功能

前端展示(移动端)

  • 首页(mui框架)
  • 用户登录页
  • 分类页面(一级分类与二级分类)
  • 搜索页
  • 商品展示页
  • 商品详情页
  • 购物车页面
  • 个人中心页面

项目架构

开发模式

  • 后端渲染模式

前端写好静态页面,交给后端渲染,后端准备数据,渲染页面。

缺点:

  1. 渲染工作交给后端,后端需要懂前端的知识。

  2. 前后端职责纠缠不清。

  • 接口化开发(前后端分离模式)

前端写静态页面,渲染页面, 后端只负责提供数据和接口。

优点:

  1. 前后端职责清晰,分工明确。

环境搭建

安装node

在前后端分离开发时,首先需要配好 本地化开发环境,也就是说需要在本地搭建后台开发环境。由于我们的后台 使用的是nodejs,因此需要先搭建nodejs环境

  1. 下载node安装包(官网下载即可)
  2. 双击安装(推荐安装在C盘,方便查找)
  3. 在cmd命令行中输入node -v以及npm -v查看是否安装成功

获取项目代码

已经提供letao.zip文件夹

  1. 下载代码解压到D盘根目录( 任意目录都可以, 根目录只是比较好找, 最好目录不带中文 )
  2. D:\letao目录下打开cmd,执行npm i,此时项目就已经初始化好了

数据库初始化

使用数据库可视化软件, 进行数据库初始化, 数据库文件参照letao初始化.sql

注意字符集: UTF-8

修改数据库配置

介绍文件夹

修改modules文件夹中db.js文件

const pool  = mysql.createPool({
    host : '127.0.0.1',//主机地址,不用改
    user : 'root',//用户名,不用改
    password : 'root',//密码,填写自己数据库的密码
    database : 'letao'//数据库名,不用改
});

启动项目

  1. 首先启动你mysql服务器
  2. 使用npm start启动项目,启动后窗口不能关闭。

移动端商城页面访问:http://localhost:3000/mobile

后端管理页面访问:http://localhost:3000/manage

唯一管理员账号:root 唯一管理员密码:123456

注意:项目启动后窗口不能关闭,如果项目报错了,需要重启服务

使用git管理项目

  1. git init初始化项目
  2. git add .添加代码
  3. git commit -m '项目初始化'提交代码
  4. 在github创建一个仓库,用于存放项目代码
  5. 设置仓库别名:git remote add origin git@github.com:jepsongithub/letao.git
  6. 将代码推送到github上:git push origin master

pc端管理系统

我们后端管理系统所有的代码都写到back文件夹下面

  • 搭建了后台管理系统的架子(css image js)

登录功能

开启分支:git branch login

切换分支:git checkout login

在login在开发登录登录功能,等功能开发完成后将代码合并到master分支。

静态页面

  1. 设置登录页面的背景颜色为#222d32
  2. 使用面板组件
  3. 使用按钮组件

使用bootstrap的各种组件

栅格系统
面板组件(带标题)
表单组件
按钮组件

提交代码到login分支

使用bootstrap-validator插件

校验规则:

  1. 用户名不能为空
  2. 用户密码不能为空
  3. 用户密码长度为6-12位

参照文档:《bootstrap-validator使用笔记.md》

$form.bootstrapValidator({
    //设置小图标
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
  
  //设置校验规则
  fields:{
    
    username:{
        validators:{
            notEmpty:{
                message:""
            },
          	stringLength:{
                min:6,
              	max:12,
              	message:""
            }
        }
    },
    password:{
        
    }
    
  }
  
});

表单校验成功,注册表单校验成功的事件,阻止默认提 交,使用ajax提交

$form.on("success.form.bv", function(e){
  //阻止表单的默认提交
  e.preventDefault();
  //使用ajax进行提交
  $.ajax({
    type:"",
    url:"",
    data:{},
    dataType:"json",
    success:function(data){
      
    }
  });
})

处理响应结果

  • 如果是success,需要跳转到首页
  • 如果是error
    • 如果error是1000,提示用户名错误
    • error是1001,提示密码错误

$form.data("bootstrapValidator").updateStatus("username", "INVALID", "callback")动态的改变状态

重置功能

点击重置按钮时,还需要重置表单的错误提示信息。

$("[type='reset']").on("click", function(){
  
  //重置表单样式
  $("form").data("bootstrapValidator").resetForm();
  
});

git操作

提交代码到login分支,合并功能到master分支

进度条功能

//注册了全局事件,所有的ajax只要开始就会开启进度条
$(document).ajaxStart(function () {
  NProgress.start();
});

//所有的ajax只要结束,延迟500毫秒,结束进度条
$(document).ajaxStop(function () {
  setTimeout(function () {
    NProgress.done();
  }, 500);

});

首页主体布局

侧边栏布局

右侧布局

js实现二级分类显示隐藏

侧边栏显示隐藏效果

共用退出功能

模态框组件的使用

主页echarts的使用

提交代码

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!