shop

注： 该项目由vue构建框架,鉴于这不是最主要考察前端以及相关技术不熟练或未掌握(比如路由实现局部刷新（懒加载）vue-router），就不把前端写复杂了，尽量展示API调用接口实现数据库的功能

登录界面

登录页面形式如下：

页面实现代码见components下login文件夹的login.vue文件，主要是用fetch调用后端API接口：这里不再赘述。

后端再通过数据库查询实现，通过返回信息（200，500等状态码实现登录判断）再通过前端反馈信息实现下列功能

登录功能:

登录密码错误信息显示:

通过alert警告框实现

输入密码警告框:

正确登录:

正确登录会跳出加载动画，动画结束后进入index主页

允许跳过登录:

但是跳过登录很多功能都无法使用

忘记密码界面:

暂不支持改密功能：需要改密请练习管理员

注册功能:

调用接口注册用户

注册信息提示:

用户名是必填项：密码不一致也有提示信息

两个弹窗警告：

这里注册一个mobaisilent用于演示

注册成功

主页

预览

主页预览(上部）：

主页预览（下部）：

功能区块

双开门动画演示

鼠标指针放入某个商品区域块实现”添加到购物车“按钮自动浮现:

悬浮按钮与图片自动缩放

点击图片实现图片单独展示

动态文字与导航与侵权免责声明

一键置顶与暗黑模式按键:

暗黑模式:

一键置顶

详见项目网页：暂不演示

搜索功能:

添加至购物车:

现在对这三件商品添加至购物车

同步数据更新

购物车

对上面添加到购物车的商品的信息展示

结算功能:

显示的地址是多个地址中的第一个：详情请见 “我的地址” 区块

提示功能:

微信支付:

点击已付款默认扣除余额：（请勿随意付款，谨防诈骗）

支付宝付款:

取消支付

点击取消支付自动跳转到订单界面

已付款功能:

付款之后实现修改余额，提示反馈信息:反馈信息如下

付款成功

付款失败

地址管理

预览：

功能

点击显示地址（显示地址）

点击下一页

那么添加两个地址 testaddress1 和 testaddress2

点击创建地址

点击下一页

创建成功后需要手动刷新改页面

可正常显示新增地址

删除地址

默认删除第一个地址

刷新后点击显示地址

原首地址 tt 已经变为 testaddress1了

提示信息

个人信息

预览

功能

显示余额

修改昵称

介于admin用户的特殊性，我这里新建一个用户mobaia1

用户名和密码暂不提供更改功能

​

默认新用户的余额都是10000

输入新昵称：

提示信息

刷新后显示

上传头像

选择文件点击上传

头像仅提供首次上传：之后头像已经存在的情况下上传无效

刷新显示新头像

秒杀

仅在登录的时候显示：而且只显示8s，8s后自动关闭或者点击抢购之后自动关闭

只有重新登录之后再显示秒杀界面

自动关闭

点击抢购

抢购失败

如果没有初始地址那么就无法抢购：只能重新登录加载抢购界面

技术框架

页面功能主题框架