# B站会员购

**Repository Path**: rousongMing/bilibili

## Basic Information

- **Project Name**: B站会员购
- **Description**: 项目周项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://rousongming.gitee.io/bilibili
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-07
- **Last Updated**: 2023-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# B站会员购

#### 介绍
项目周项目

#### 软件架构
--|conf 

----|index.js 文件路径配置文件

--|dev 编译

----|dist 打包压缩

----|node_modules 所有的依赖文件

----|src

------|images 图标库

------|scripts js区

--------|cart 	购物车js

--------|detail 	详情页js

--------|index 	主页面js

--------|login 	登录js

--------|register	注册页js

--------|renderCart 渲染购物车js

--------|libs

----------|common 封装方法js

----------|jquery-3.4.0 jQuery js

------|scss

--------|carts
----------|carts  购物车css

--------|detail

----------|detail  详情页css

--------|index

-------  -|index 主页css

--------|register

----------|register 登录注册css

--------|reset 

----------|reset  重置样式css

------|server

--------|connect.php 数据库连接php

--------|login.php  登录php

--------|regist.php  注册php

------|util

--------|index.js 工具配置文件

------|.gitignore 忽略文件上传至git仓库

------|build.js 压缩环境搭建

------|gulpfile.js gulp前端工程化搭建文件

------|package-lock.json 依赖锁定版本文件

------|package.json 依赖文件

------|README.md


#### 安装教程

1. npm install

#### 项目页面说明
1. `index.html` 主页面
2. `top.html` 页面相同部分-顶部
3. `footer.html` 页面相同部分-底部
4. `carts.html` 购物车列表页面
5. `detail.html `详情页
6. `regLoginNav.html`登录注册导航
7. `login.html`登录页
8. `register.html`注册页

#### 使用说明

**1.主页面：**

- 页面的列表渲染使用json渲染，同时使用懒加载
- 当页面向上卷动一定距离时，出现“顶部”按钮，点击可以返回页面顶部；
- 分页是根据数据自动划分进行分页
- 二级菜单；
- 轮播图。
- 头部和底部是使用js引入
- 点击导航栏内容，页面滚动，使导航栏居于顶部位置

**2.详情页：**

- 点击主页列表，点击不同的商品会渲染出不同的详情页
- 点击获取当前元素后，动态渲染对应详情页
- 点击“+”“—”可以改变加入购物车的商品数量
- 点击加入购物车可以存储数据

**3.注册：**

- 点击页面顶部的“注册”，进入注册页面。
- 填写注册内容时会进行验证
  > a.输入用户名时，检验输入用户名是否合法，不合法时显示错误信息，正确时不显示任何内容；
  >当该输入框失去焦点时验证是否为空，若为空显示错误信息
  > b.输入密码时，检验是否合法
  > c.再次输入密码，并于上一行输入对比，如不相同则显示错误信息
  > d.输入手机号，并验证手机号的合法性，不合法显示错误信息
  > e.当未选择“同意”时，注册按钮处于禁用状态，鼠标悬停时鼠标样式改变
  > e.注册成功，将数据存入数据库
  > f.点击“已有账号，直接登录”进入登录页面

**4.登录**

- 点击页面顶部的“登录”，或者注册页的“已有账号，直接登录”，进入登录页面。
- 输入用户名密码，检验是否为空，为空则显示对应错误信息
- 点击登录按钮，将输入数据与数据库中数据进行比较，输入正确则在主页的原“登录注册”位置显示：xxx(用户名)已登录
- 点击导航栏的“会员购”可以回到主页面

**5.购物车**

- 购物车页面通过加入购物车时存储的数据进行动态渲染

[哔哩哔哩会员购](https://show.bilibili.com/platform/home.html?msource=pc_web)