Web全栈开发—移动端商城项目开发 Vue.js+express+MySQL

全栈开发—移动端商城项目开发 Vue.js+express+MySQL

本项目是基于Vue.js+express+MySql的移动端全栈项目
前端项目Github地址：https://github.com/fu-x/pdd
后端服务器项目Github地址: https://github.com/fu-x/pdd-server
项目演示地址:项目演示地址

本项目为移动端项目，pc端演示请在开发者模式中调至移动设备模式
喜欢的朋友记得关注我哦😘😘😘
有疑问的小伙伴欢迎可以向我提问哦。
QQ: 731719510

项目采用前后端分离模式

前端

• 项目搭建和配置
  1. 使用vue-cli脚手架
  2. CSS编译器选择——stylus的安装和配置
  3. 视口（viewport）配置
  4. 解决点击响应延迟3毫秒
• 路由配置
  • home ——商城主页
    • hot——主页热门页面（主页面）
    • dress
    • box
    • mbaby
    • general
    • food
    • shirt
    • man
    • ele
  • recommend——商品推荐页面
  • search——商品搜索与分类页面
  • cart——购物车页面
  • me——个人信息页面
  • login——登录页面
  • selectlogin——选择登录页面
  • mesetting——设置页面
  • medetail——修改个人信息页面
  • cipher——修改密码页面

数据请求axios和管理vuex

1. 安装并引入axios模块
2. 封装通用的基于Promise的get和post请求函数
3. 前端解决跨域问题——设置代理
4. 引入vuex模块
5. 配置vuex支持全局数据

底部Tabbar实现路由跳转

home/hot主页页面

• 首页头部选项
  1. 借助第三方库ly-lab
  2. 创建配置二级路由以及子组件
  3. 实现路由切换
• 首页轮播图
  1. 借助第三方库swiper
  2. 配置轮播图
• 自定义首页nav导航
  1. 界面实现
  2. 借助第三方库better-scroll实现滚动效果
  3. 逻辑实现，完成自定义滚动条
• 完成商品列表界面搭建

recommend推荐页面

• 完成页面布局
• 实现动态数据渲染
• 分页请求数据，实现上拉加载更多
• 实现点击添加商品到购物车功能

search搜索和分类页面

1. 完成搜索框以及搜索页面搭建
2. 完成一级分类和二级分类页面布局
3. 实现动态数据渲染
4. 通过滚动公式计算，完成一级分类和二级分类左右联动效果

login登录页面

1. 完成登录页面搭建
2. 实现两种方式登录切换——手机验证码登录和账号密码登录
3. 判断用户所输入的信息是否合法
4. 获取手机验证码计时
5. 安装
6. 点击重新获取图形验证码
7. 登陆完成跳转至个人中心页面
8. 验证用户是否已经登录，请求用户信息

me个人中心页面

1. 完成个人中心页面搭建
2. 实现个人中心页面数据动态渲染
3. 完成设置界面搭建
4. 实现退出功能
5. 完成个人信息界面搭建
6. 实现修改个人信息功能
7. 实现修改密码功能

cart购物车页面

1. 完成购物车页面搭建
2. 判断是否登录
3. 实现购物车页面数据动态渲染
4. 实现单选和全选功能，以及二者之间的联动效果
5. 实现购物车商品数量加减，以及手动修改input时的输入限制
6. 实现总价格的计算
7. 实现删除功能

性能优化

1. 图片懒加载
2. 路由懒加载
3. keep-alive组件缓存
4. webpack打包编译

后端

项目构建

• 使用Express应用生成器。通过应用生成器工具 express 可以快速创建一个应用的骨架。
• 数据库选择: MySql数据库

第三方模块

1. express-session: 使用session存储登录用户ID判断用户是否已经登陆，以及存储图形验证码信息，判断用户提交验证码是否正确。
2. body-parser: 获取用户POST提交的数据。
3. mysql: 连接MySQL数据库。
4. svg-captcha: 生成图形验证码。

配置接口

api	请求方式	参数	说明
/api/homecasual	get		首页轮播图数据
/api/homenav	get		首页导航数据
/api/homeshoplist	get		首页商品列表数据
/api/searchgoods	get		搜索分类列表数据
/api/recommendshoplist	get		推荐商品列表数据
/api/captcha	get		图形验证码数据
/api/usercode	get	phone	手机验证码数据
/api/logincode	post	phone, code	手机验证码登录
/api/loginpwd	post	username, password, captcha	账号密码登录
/api/islogin	get		判断是否已经登录
/api/logout	get		退出登陆
/api/alterinfo	post	id, name, sex, address, birthday, signature	更改个人信息
/api/addcart	post	goods_id, goods_name, thumb_url, price, number	添加商品到购物车
/api/cart	get		获取购物车商品数据
/api/alertcart	post	{cartgoods}	修改购物车商品数据
/api/	post	oldCipher, newCipher	修改密码

打包部署至服务器