需求分析
模板设计 组件设计 数据结构设计 接口设计
- SEO
- 集成商动态链接(SEO)
- OOS上传
- 获取定位
- 微信支付
- 阿里实名认证
......
经分析选定NUXT前端框架解决SPA项目SEO问题,KOA2作为中间件拉通前后端。集成商界面采用nuxt动态路由
原型分析
- 网站框架
- 网站顶部
- 城市定位*
- 城市筛选
- 登录信息
- 个人中心*
- 头部快捷入口
- 左侧导航栏
- 基本资料
- 上传头像
- 用户阿里实名认证
- 省市选择
- 证书上传
- 消息中心*
- 我的订单*
- 我的钱包*
- 我的方案*
- 我的积分*
- 我的邀请*
- 我的关注*
- 我的问答*
- 我的项目*
- 保养保修*
- 企业账号*
- 收货地址*
- 修改密码*
- 工作台
- 登录/退出
- 登录界面*
- 注册界面*
- 小程序入口
- 网站头部
- logo
- 查询框
- 购物车
- 菜单栏
- 网站底部
- 网站/商家版权
- 首页
- 展示页*
- 商品三级导航栏
- 商品轮播图
- 左侧悬浮导航滚动轴
- 右侧悬浮栏
- 购物车
- 在线客服
- 返回顶部
- 品牌推荐
- 集成商推荐
- 商品推荐
- 搜索结果*
- 栏目路由
- 商品过滤栏
- 商品排序条件
- 商品推荐
- 品牌馆*
- 品牌过滤栏
- 品牌一级分类推荐栏
- 集成商*
与网站首页功能/布局一致
- 商品详情页*
- 基本信息
- 关联服务
- 关联商品
- 店铺信息
- 商品详情
- 商品评价*
- 过滤条件
- 评价条目
- 分页组件
- 产品问答*
- 资料下载
- 采购说明
- 视频
- 购物车*
- 商品列表
- 商品结算
- 确认订单*
- 收货地址
- 订单信息
- 服务人信息
- 开票信息
- 配送方式
- 积分抵扣
- 支付方式
- 提交订单
- 支付成功*
- 支付失败*
- 方案馆
- 项目案例
- 咨询问答
- 关于我们
UI分析
- 整体布局分析
- 整理颜色分析
- 拆分公用组件
- 框架确认
确定用主流的elment UI框架,抽出全局配色样式,构建项目公用组件全局观
接口设计
- 同界面多组件共用接口
- 多界面同功能共用接口
- 按交互拆分接口
参照原型,前后端讨论规划接口设计,加深业务理解且前后端达成一致加快后续开发节奏,减少返工问题。共一百多个接口
前端开发
- nuxt项目搭建
- koa2项目搭建