zoukankan      html  css  js  c++  java
  • 小米商城

    1、前台与后台

    (1)前台系统(对后台系统的数据进行展示)

    登录、注册

    • 注册时会涉及到头像上传
    • 登录时,短信验证码

    首页数据展示

    • 分类信息展示、不同模块的信息展示
    • 商品详情页

    购物车

    • 添加购物车
    • 购物车展示
    • 购物车商品的增加、删除

    订单

    • 结算
    • 支付

    (2)后台系统(维护数据)

    核心

    • 对数据进行维护(增删改查)

    维护

    • 商品分类维护
    • 商品维护
    • 订单维护

    2、技术选型

    (1)架构(MVC)

    高内聚、低耦合,完全遵照面向对象的编程思想。各司其职、互不干扰、协同合作、完成任务。

    (2)必备知识点

    前端

    • 样式:css
    • 行为:js、jq(后端java程序员必须掌握)

    数据库(mysql)

    • jdbc:服务器与数据库交互(Dbutils+druid)

    后台技术

    • jsp
    • servlet

     (3)前端详细知识点

    form:收集、提交数据(一次提交多个)

    属性

    • action:表单提交的地址
    • method:提交数据的方式

    标签

    • input:用户名、密码
    • select---option:下拉选择,如:性别
    • textarea:文本域

     table:显示数据

    • 表头:<tr><th>
    • 内容:<tr><td>

    css选择器:通过选择器选择标签,然后添加样式

    • 标签选择器:选择同一个标签
    • ID选择器:#开头,id属性调用
    • 类选择器:点开头
    • 后代选择器:如:ul下的li,可以写作:# ul li

    js:原生js、jq:封装的js

    jq的引入

    jq操作页面中的内容

    改变标签的内容:样式、文本(text、html,这两个方法无参的话是获取内容,有参的话是修改内容,html可以将内容中的html进行解析,text是纯文本)

    为标签添加事件:鼠标事件、表单事件

    获取标签:选择器$

     数据库

    数据库本质上是一个文件系统,是持久化存储。可以进行数据库的备份数据库的恢复等操作。

    mysql、oracle等是管理数据库的软件,不能称之为数据库,它们是数据库管理系统。我们说的mysql数据库本质上是管理mysql数据库的软件,说mysql数据库存在一定的错误。

    想要完成数据库的操作都必须使用sql语句,分为DDL(数据定义语言)、DML(数据操作语言)、DCL(数据控制语言)、DQL(数据查询语言)

    DDL:数据库及表的操作,如:创建数据库、表(https://www.cnblogs.com/zhai1997/p/11372853.html

    DML:对数据库表中的数据进行更新操作(添加、删除、修改)(https://www.cnblogs.com/zhai1997/p/11373232.html

    DCL:分配操作用户、为用户设置操作权限

    DQL:数据库查询语言,获取到存储在数据库表中的数据

    3、注册模块

    (1)数据库

    Field        Type          Collation        Null    Key     Default  Extra           Privileges                       Comment  
    -----------  ------------  ---------------  ------  ------  -------  --------------  -------------------------------  ---------
    uid          int(11)       (NULL)           NO      PRI     (NULL)   auto_increment  select,insert,update,references           
    uname        varchar(30)   utf8_general_ci  NO              (NULL)                   select,insert,update,references           
    gender       int(11)       (NULL)           YES             (NULL)                   select,insert,update,references           
    phone        varchar(11)   utf8_general_ci  YES     UNI     (NULL)                   select,insert,update,references           
    area         varchar(20)   utf8_general_ci  NO              (NULL)                   select,insert,update,references           
    username     varchar(15)   utf8_general_ci  YES     UNI     (NULL)                   select,insert,update,references           
    password     varchar(15)   utf8_general_ci  NO              (NULL)                   select,insert,update,references           
    photo        varchar(100)  utf8_general_ci  NO              (NULL)                   select,insert,update,references           
    manager      int(11)       (NULL)           YES             1                        select,insert,update,references           
    create_time  datetime      (NULL)           YES             (NULL)                   select,insert,update,references           

    (2)注册页面的表单校验

    非空校验:用户名、电话、密码等

    结合表单事件blur,输入框失去焦点的时候触发校验,这里用到了jq的选择器选择元素,获取输入框中的内容,并利用jq的dom操作,将结果展示给用户。

    格式校验:手机号

    正则表达式实现

    唯一性校验:手机号、用户名

    利用ajax在不刷新网页的情况下向服务器发起请求,查询数据库,完成唯一性校验

    当以上校验不能满足时,不能提交表单。

    (3)上传用户头像

    • 通过UUID来定义图片名,避免了用户的头像在一个文件夹下存储,所造成的重名问题(如:用户1注销账户,那么与用户1头像同名的用户2的头像也就被删除了)
    • 将上传图片的代码封装为一个工具类,可以用于图片的上传,减少代码的冗余
    • 将图片存储在本地,避免项目在服务器上的下架造成图片的丢失,需要将本地磁盘的文件夹挂载到服务器
    • 接收上传的文件用part对象,上传文件内容全部在Part里面,我们可以直接从Part对象中获取到上传的文件名等文件信息

    (4)用户信息添加

    表单完成校验确定用户输入的信息有效后,用户提交数据给服务器,将用户信息写入数据库

    4、登录模块

    注册成功后跳转到登录页面,登录分为两种方式:手机验证码登录和账号密码登录

    (1)手机验证码登录

    在获取验证码的按钮上添加点击事件来确认该手机号是否已经注册,是通过ajax来实现的

    如果已经注册60秒倒计时开始并将验证码和生成验证码的手机号存储到session中,

    点击登录按钮的时候获取输入框中的用户手机号和验证码,并与session中存储的验证码与手机号进行对比,对比成功就可以进入系统首页

    (2)账号密码登录

    输入用户注册的用户名和密码进行登录

    5、后台管理

    (1)用户信息管理

    对用户信息的增删查,对于普通用户可以设置为管理员

    (2)商品类别

    涉及到对商品类别的增删改查

    (3)商品管理

    对商品的增删改查,商品与商品的类别存在外键关系,因此,在相应的类别的商品还存在的情况下是不能删除该商品的分类信息的

    6、前台展示

    (1)展示商品&动态获取商品的分类

    后台负责对商品和商品分类的管理,前台获取到后台管理的商品和商品的分类信息。

    (2)购物车

    (3)支付模块

    https://www.cnblogs.com/zhai1997/p/13466382.html

  • 相关阅读:
    社交网站后端项目开发日记(一)
    如何快速实现一个虚拟 DOM 系统
    你真的懂 export default 吗?
    vue项目中生产环境禁用debugger,关闭console
    css响应式设计
    浏览器对象-BOM
    js中的this关键字
    js类型转换
    console对象
    html DOM事件
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13253284.html
Copyright © 2011-2022 走看看