商城web端开发前分析过程

需求分析

模板设计  组件设计 数据结构设计 接口设计
- SEO
- 集成商动态链接(SEO)
- OOS上传
- 获取定位
- 微信支付
- 阿里实名认证
......
经分析选定NUXT前端框架解决SPA项目SEO问题,KOA2作为中间件拉通前后端。集成商界面采用nuxt动态路由

原型分析

- 网站框架
    - 网站顶部
        - 城市定位*
            - 城市筛选
        - 登录信息
        - 个人中心*
            - 头部快捷入口
            - 左侧导航栏
            - 基本资料
                - 上传头像
                - 用户阿里实名认证
                - 省市选择
                - 证书上传
            - 消息中心*
            - 我的订单*
            - 我的钱包*
            - 我的方案*
            - 我的积分*
            - 我的邀请*
            - 我的关注*
            - 我的问答*
            - 我的项目*
            - 保养保修*
            - 企业账号*
            - 收货地址*
            - 修改密码*
        - 工作台
        - 登录/退出
            - 登录界面*
            - 注册界面*
        - 小程序入口
    - 网站头部
        - logo
        - 查询框
        - 购物车
        - 菜单栏
    - 网站底部
        - 网站/商家版权
- 首页
    - 展示页*
        - 商品三级导航栏
        - 商品轮播图
        - 左侧悬浮导航滚动轴
        - 右侧悬浮栏
            - 购物车
            - 在线客服
            - 返回顶部
        - 品牌推荐
        - 集成商推荐
        - 商品推荐
    - 搜索结果*
        - 栏目路由
        - 商品过滤栏
        - 商品排序条件
        - 商品推荐
    - 品牌馆*
        - 品牌过滤栏
        - 品牌一级分类推荐栏
    - 集成商*
        与网站首页功能/布局一致
    - 商品详情页*
        - 基本信息
        - 关联服务
        - 关联商品
        - 店铺信息
        - 商品详情
        - 商品评价*
            - 过滤条件
            - 评价条目
            - 分页组件
        - 产品问答*
        - 资料下载
        - 采购说明
        - 视频
    - 购物车*
        - 商品列表
        - 商品结算
        - 确认订单*
            - 收货地址
            - 订单信息
            - 服务人信息
            - 开票信息
            - 配送方式
            - 积分抵扣
            - 支付方式
            - 提交订单
        - 支付成功*
        - 支付失败*
- 方案馆
- 项目案例
- 咨询问答
- 关于我们

UI分析

- 整体布局分析
- 整理颜色分析
- 拆分公用组件
- 框架确认
确定用主流的elment UI框架,抽出全局配色样式,构建项目公用组件全局观

接口设计

- 同界面多组件共用接口
- 多界面同功能共用接口
- 按交互拆分接口
参照原型,前后端讨论规划接口设计,加深业务理解且前后端达成一致加快后续开发节奏,减少返工问题。共一百多个接口

前端开发

- nuxt项目搭建
- koa2项目搭建

发表评论

电子邮件地址不会被公开。 必填项已用*标注