mi-shopping: 仿小米商城技术栈：Html、Scss、JavaScript、Iconfont、Vue、Vuex、Uni-App、Vant Weapp、Nodejs、Express、MySQL。项目描述：此项目基于uni-App框架，完成了商品搜索、扫一扫、轮播图、宫格、上拉加载更多、商品分享到微信、朋友圈、使用Vuex实现购物车增删改功能、用户结算、模拟支付，调用系统指纹识别，将订单写入数据库、我的订单，从数据库获取已购买的订单详细信息。

# mi-shopping 仿小米商城

## 1.开发环境：
windows10操作系统、Hbuilder X2.7.9、MySQL 5.5.24、Node 12.15.0
## 2.技术栈：
1.	Html：超文本标记语言。
2.	Scss：强大的专业级CSS扩展语言。
3.	JavaScript、Es6语法：Web页面脚本语言。
4.	Iconfont：阿里巴巴矢量图标库。
5.	Vue：渐进式 JavaScript 框架。
6.	Vuex：一个专为 Vue.js 应用程序开发的状态管理模式。
7.	Vuex-persistedstate：持久化vuex状态插件。
8.	Uni-App：使用 Vue.js 开发所有前端应用的框架，开发一次，多端覆盖。
使用到的有uni-app全局的配置、组件的使用、API网络的请求、路由页面跳转、获取位置、生物指纹认证、动画、下拉刷新、第三方授权登录、分享等。
9.	Vant Weapp：轻量、可靠的移动端 Vue UI 组件库。
10.	Node.js： 基于 Chrome V8 引擎的 JavaScript 运行环境。
11.	Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
12.	Cors：跨域资源共享。
13.	Body-parser：HTTP请求体解析中间件。
14.	MySQL：关系型数据库管理系统。

## 3.实现功能
1.	商品搜索，高亮搜索关键字，从数据库模糊搜索商品，保存搜索关键字的记录等。
2.	扫一扫，调用系统相机。
3.	轮播图、九宫格渲染，从数据库获取数据。
4.	上拉加载更多商品，从数据库每次获取10条商品数据。
5.	商品页面的渲染、商品分享到微信、朋友圈、商品加入购物车等。
6.	菜单导航栏分类的切换，补齐全部商品分类。
7.	底部栏分类页面的渲染，滑动屏幕自动切换分类。
8.	底部栏购物车页面的渲染，对购物车商品的操作有：商品数量添加或减少、选中状态切换、选中的商品删除、商品全选、商品全不选、计算总价等。
9.	微信登录、获取账号信息、注销操作，登录信息写入数据库等。
10.	提交订单对用户的登录状态进行判断，用户结算页面，编辑收货地址，自动获取用户的地理位置，也可以手动选择三级联动。用户选择支付方式，模拟支付，调用系统的指纹识别，指纹验证成功则将购买的商品、用户信息、对时间的格式化等写入数据库。
11.	底部栏个人中心页面的渲染，显示账号信息，功能列表。
12.	我的订单页面，从数据库获取用户已购买的订单详细信息。

## 4.数据库设计
![首页](image/1.png "首页")

使用node搭建的后台，先创建一个名为“webshopping”数据库，运行“webshopping.sql”。

在api文件夹先装包，修改index.js中数据库配置。完成之后执行 node index.js启动，共有18个接口，端口为3000；

## 5.页面结构图

![首页](image/2.jpg "首页")

## 6.主要配置文件及说明

主要的配置文件在项目下的pages.json文件，对 uni-app 进行全局配置，对每个页面文件的路径、窗口样式、原生的导航栏、图标、底部的原生tabbar 等进行了配置。
manifest.json文件，对项目的基本配置、分享消息及朋友圈等。
请求api的接口在项目main.js文件中。

![首页](image/3.png "首页")
![首页](image/4.png "首页")
![首页](image/5.png "首页")

## 7.项目截图

![](image/6.jpg)

![](image/7.jpg)

![](image/8.jpg)

![](image/9.jpg)

![](image/10.jpg)

![](image/11.jpg)

![](image/12.jpg)

![](image/13.jpg)

![](image/14.jpg)

![](image/15.jpg)

![](image/16.jpg)

![](image/17.jpg)

![](image/18.jpg)

webbabyking/mi-shopping

简介

发行版

贡献者

近期动态