# vue-tel

**Repository Path**: liaoyia/vue-tel

## Basic Information

- **Project Name**: vue-tel
- **Description**: vue+node 茶叶商城
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: feature/home
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-12-11
- **Last Updated**: 2024-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-tel

#### 介绍
基于 vue+node 茶叶商城项目

#### 软件架构

本项目前端是采用vue-cli，后端采用nodejs，前端功能有：注册、登录、短信验证码SDK、找回密码、分类、购物车、订单、支付宝支付SDK（沙箱）、地址管理等。后端采用nodejs，自己搭建接口以及sdk对接等。对于axios进行二次封装，引入token，以及token验证和过期时间操作。


#### 项目展示



![输入图片说明](public/images/Snipaste_2021-12-22_11-40-40.png)




##### 现在实现的功能有：

1. 首页
      - 点击茶叶类型切换到对应商品
      - 首页搜索、历史搜索、删除历史搜索、点击历史搜索发起搜索


2. 商品列表页面点击类型切换商品

3. 全页面实现懒加载 只有用户下拉到页面才发起请求

4. 商品详情页

      - 只有点击不同的商品才会发起第二次请求，二次点击同一个商品不会发起第二次请求。
      - 添加商品到购物车


5. 短信验证码登入

      - 登入后储存用户信息和token，用于加载和请求用户的购物车及收获地址。
      - 短信注册、找回密码、退出登陆

6. 购物车页面
      - 在购物车别页面复选框的联动和价格计算
      - 添加收获地址
      - 修改收货地址
      - 设置为默认地址


7. 不同登录的用户添加到购物车

8. 支付宝沙箱支付功能


#### 安装教程

1.  代码上传在feature/home分支上，拉取时候注意切换到 feature/home分支。


#### 使用说明

> 开发中我碰到的一些问题都放在项目开发笔记里面 [仅供参考]。

##### 拉取feature/home分支后

###### 一、 前端

注意： 我的页面数据基本都是从后端请求回来渲染的页面，你需要先配置后端数据库，再运行后端，再运行vue，不然页面无法加载。

```
npm install 
npm run serve
```
###### 一、 后端

1. 新建一个  MySQL 数据库 [ 或直接新建vue_store数据库]

2. 找到根目录的 .sql 文件，在数据库内执行根目录的.sql文件，创建表。


3. 去 vue-tel\server\db\sql.js 修改数据库配置：

```
const mysql = require('mysql');
let connection = mysql.createConnection({
	host: 'localhost',   //本地路径
	user: 'root',    // 用户名
	password: "liaoyi",  // 数据库密码
	database: 'vue_store'  // 数据库名
})
module.exports = connection;
```

接下来就可以运行了：

```
cd serve  // 切换到后端目录
npm install   // 下载包
npm run start  // 运行
```


PS：如果项目运行存在问题：可以加我 vx：2417276459
#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request