郑州网站建设郑州网站建设推广营销软件

系列文章目录
 今天收到了表弟发过来的一个需求,前端电商系统设计,想让我帮他设计一下.

---

要求一: 

综合 应 用 HTML、CSS、JS、 Vue 等 前 端 技术 ， 开发 一 个完 整的 微 商城前端项目 。 请 自 行 设 计 页 面 结 构 和 项 目 框 架 ， 要 求 能 完 成 选 定 专题的基础业务逻辑。 购物类网站 ， 要 能 完 成 登 录 、 注 册 、 浏 览 商 品、观察商品的详情、添加商品到购物车、购物车中对商品进行增 删改 查 、支 付 购买 等 。

要求二: 

要求三: 

该网 站 包含一 个 主 页 和 至 少 两 个 子 页（要求子页 有 明 显 区 别 ，从

布局到内容都要有每一个子页自己的特点）

要求四: 

一、根据这个要求我设计了一个前端,因为没有设计到数据存储那就不用设计后端

使用vue2+ element-ui搭建的项目

二、页面效果

     首页效果包括:

          轮播图,  二级菜单, 页面跳转  

   产品页面效果: 

登录页面效果:

注册页面效果:

购物车页面效果: 

三 , 页面代码

        首页代码:

  

<template><section><div class="home"><!-- 轮播图 --><div class="lunbobox"><el-carousel><el-carousel-item v-for="(item, index) in lunboImgs" :key="index"><img :src="item.urlimg" alt="" class="lunboimg" /></el-carousel-item></el-carousel><div class="gbox"><ul><li><span>手机</span><span>&gt;</span><div><span><img src="@/assets/goodsImg/phone/001.webp" alt="" /></span><span><img src="@/assets/goodsImg/phone/002.webp" alt="" /></span><span><img src="@/assets/goodsImg/phone/003.webp" alt="" /></span><span><img src="@/assets/goodsImg/phone/004.webp" alt="" /></span><span><img src="@/assets/goodsImg/phone/005.webp" alt="" /></span><span><img src="@/assets/goodsImg/phone/006.webp" alt="" /></span></div></li><li><span>耳机</span><span>&gt;</span><div style="top: -60px"><span><img src="@/assets/goodsImg/ear/001.webp" alt="" /></span><span><img src="@/assets/goodsImg/ear/002.webp" alt="" /></span><span><img src="@/assets/goodsImg/ear/003.webp" alt="" /></span><span><img src="@/assets/goodsImg/ear/004.webp" alt="" /></span></div></li><li><span>电脑</span><span>&gt;</span><div style="top: -110px"><span><img src="@/assets/goodsImg/computer/001.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/002.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/003.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/004.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/005.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/006.webp" alt="" /></span><span><img src="@/assets/goodsImg/computer/007.webp" alt="" /></span></div></li></ul></div></div><!-- 商品展示 --><div class="pbox"><div class="tb">手机专区</div><div class="titembox"><divclass="titem"v-for="(item, index) in phList":key="index"@click="godetail(item)"><div class="imgdiv"><img :src="item.imgurl" alt="" /></div><div class="contentdiv"><p>{{ item.name }}</p><p>{{ item.dec }}</p><p><span>{{ item.jf }}</span></p><p>¥{{ item.price }}</p></div></div></div></div><div class=&#