前端商城系统设计与实现

最新推荐文章于 2024-05-31 11:44:26 发布

月下星辰

最新推荐文章于 2024-05-31 11:44:26 发布

阅读量486

点赞数 5

分类专栏： vue vue技术文章标签： html vue javascript

本文链接：https://blog.csdn.net/qq_33449702/article/details/137004185

版权

vue 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

vue技术

6 篇文章 1 订阅

订阅专栏

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

要求一:

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

要求二:

网站整体风格统一、美观大方、页面结构完整；站内导航明确，

页面之间链接能正确切换

要求三:

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

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

要求四:

首页页面结构完整；页面高度不得低于两屏；导航区要有二级菜单；

banner 区需要设置动效，并添加网站 logo；要求添加侧边栏菜单；

底部区域功能丰满，详情可参阅各大门户网站首页底部效果；其余

特效或细节可以根据自己的理解适当添加。

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

使用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">
          <div
            class="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="pbox">
        <div class="tb">电脑专区</div>
        <div class="titembox">
          <div
            class="titem"
            v-for="(item, index) in cmList"
            :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="pbox">
        <div class="tb">耳机专区</div>
        <div class="titembox">
          <div
            class="titem"
            v-for="(item, index) in eList"
            :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>
  </section>
</template>

<script>
export default {
  data() {
    return {
      lunboImgs: [
        { urlimg: require("@/assets/goodsImg/lunbo/lunbo01.webp") },
        { urlimg: require("@/assets/goodsImg/lunbo/lunbo02.webp") },
        { urlimg: require("@/assets/goodsImg/lunbo/lunbo03.webp") },
        { urlimg: require("@/assets/goodsImg/lunbo/lunbo04.webp") },
      ],
      gboxList: [],
      phList: [
        {
          imgurl: require("@/assets/goodsImg/phone/001.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/002.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/003.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/004.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
      ],
      cmList: [
        {
          imgurl: require("@/assets/goodsImg/computer/001.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/002.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/003.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/004.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
      ],
      eList: [
        {
          imgurl: require("@/assets/goodsImg/ear/001.webp"),
          name: "FreeBuds SE 2 无线耳机",
          dec: "40小时长续航|快速充电",
          jf: "增积分",
          price: "179",
        },
        {
          imgurl: require("@/assets/goodsImg/ear/002.webp"),
          name: "MateBook D 16",
          dec: "40小时长续航|快速充电",
          jf: "增积分",
          price: "299",
        },
        {
          imgurl: require("@/assets/goodsImg/ear/003.webp"),
          name: "MateBook D 16",
          dec: "40小时长续航|快速充电",
          jf: "增积分",
          price: "499",
        },
        {
          imgurl: require("@/assets/goodsImg/ear/004.webp"),
          name: "MateBook D 16",
          dec: "40小时长续航|快速充电",
          jf: "增积分",
          price: "599",
        },
      ],
      user: {},
    };
  },
  created() {
    let loginUser = JSON.parse(localStorage.getItem("userInfo"));
    if (loginUser.username) {
      this.user = loginUser;
    }
  },
  methods: {
    godetail(item) {
      let loginUser = JSON.parse(localStorage.getItem("userInfo"));

      if (loginUser) {
        this.$router.push({
          path: "/detail",
          query: {
            goodsDetail: JSON.stringify(item),
          },
        });
      } else {
        this.$message.error("请登录");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: auto;
  background-color: #f8f8f8;
}

/deep/.el-carousel__container {
  height: 500px;
}

.lunbobox {
  position: relative;
  height: 500px;

  .lunboimg {
    width: 100%;
    height: 500px;
  }

  .gbox {
    position: absolute;
    width: 1100px;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    height: 100%;
    z-index: 100;

    ul {
      width: 200px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 10px 10px 10px 10px;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px #ccc;

      li {
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        span {
          color: #666464;
        }

        &:hover div {
          display: block;
        }

        div {
          position: absolute;
          left: 180px;
          top: -10px;
          height: 500px;
          width: 400px;
          display: none;
          background-color: #fff;
          z-index: 300;
          box-shadow: 8px 0px 8px 0px #ccc;

          span {
            float: left;
            width: 50%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}

.pbox {
  width: 1200px;
  margin: 50px auto;
  height: 500px;

  .tb {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .titembox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;

    .titem {
      width: 24%;
      height: 400px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20px;

      .imgdiv {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 50%;
          height: 80%;
        }
      }

      .contentdiv {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;

        p {
          text-align: center;
          display: inline;
          padding: 10px;

          &:nth-child(2) {
            color: #ccc;
            font-size: 14px;
          }

          &:nth-child(3) {
            span {
              padding: 3px;
              border-radius: 5px;
              border: 1px solid #000;
            }
          }
        }
      }
    }
  }
}
</style>

产品页面

手机产品:

<template>
  <section>
    <div class="home">
      <!-- 轮播图 -->
      <!-- 商品展示 -->
      <div class="pbox">
        <div class="tb">手机专区</div>
        <div class="titembox">
          <div
            class="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>
  </section>
</template>

<script>
export default {
  data() {
    return {
      phList: [
        {
          imgurl: require("@/assets/goodsImg/phone/001.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/002.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/003.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/004.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/005.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/006.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/007.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
        {
          imgurl: require("@/assets/goodsImg/phone/008.webp"),
          name: "Mate60",
          dec: "超可靠玄武架构|全焦段超清影像",
          jf: "增积分",
          price: "5499",
        },
      ],
    };
  },
  methods: {
    godetail(item) {
      let loginUser = JSON.parse(localStorage.getItem("userInfo"));

      if (loginUser) {
        this.$router.push({
          path: "/detail",
          query: {
            goodsDetail: JSON.stringify(item),
          },
        });
      } else {
        this.$message.error("请登录");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: auto;
  background-color: #f8f8f8;
}

/deep/.el-carousel__container {
  height: 500px;
}

.lunbobox {
  position: relative;
  height: 500px;

  .lunboimg {
    width: 100%;
    height: 500px;
  }

  .gbox {
    position: absolute;
    width: 1100px;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    height: 100%;
    z-index: 100;

    ul {
      width: 200px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 10px 10px 10px 10px;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px #ccc;

      li {
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        span {
          color: #666464;
        }

        &:hover div {
          display: block;
        }

        div {
          position: absolute;
          left: 180px;
          top: -10px;
          height: 500px;
          width: 400px;
          display: none;
          background-color: #fff;
          z-index: 300;
          box-shadow: 8px 0px 8px 0px #ccc;

          span {
            float: left;
            width: 50%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}

.pbox {
  width: 1200px;
  margin: 50px auto;

  .tb {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .titembox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;

    .titem {
      width: 24%;
      height: 400px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin-bottom: 20px;

      &:hover {
        box-shadow: 0 0 5px 0 #ccc;
      }

      .imgdiv {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 50%;
          height: 80%;
        }
      }

      .contentdiv {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;

        p {
          text-align: center;
          display: inline;
          padding: 10px;

          &:nth-child(2) {
            color: #ccc;
            font-size: 14px;
          }

          &:nth-child(3) {
            span {
              padding: 3px;
              border-radius: 5px;
              border: 1px solid #000;
            }
          }
        }
      }
    }
  }
}
</style>

电脑产品:

<template>
  <section>
    <div class="home">
      <!-- 轮播图 -->
      <!-- 商品展示 -->
      <div class="pbox">
        <div class="tb">电脑专区</div>
        <div class="titembox">
          <div
            class="titem"
            v-for="(item, index) in cmList"
            :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>
  </section>
</template>

<script>
export default {
  data() {
    return {
      cmList: [
        {
          imgurl: require("@/assets/goodsImg/computer/001.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/002.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/003.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/004.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },

        {
          imgurl: require("@/assets/goodsImg/computer/005.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/006.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/007.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
        {
          imgurl: require("@/assets/goodsImg/computer/008.webp"),
          name: "MateBook D 16",
          dec: "16英寸护眼全面屏|13代酷睿i9处理器",
          jf: "增积分",
          price: "6999",
        },
      ],
    };
  },
  methods: {
    godetail(item) {
      let loginUser = JSON.parse(localStorage.getItem("userInfo"));

      if (loginUser) {
        this.$router.push({
          path: "/detail",
          query: {
            goodsDetail: JSON.stringify(item),
          },
        });
      } else {
        this.$message.error("请登录");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: auto;
  background-color: #f8f8f8;
}

/deep/.el-carousel__container {
  height: 500px;
}

.lunbobox {
  position: relative;
  height: 500px;

  .lunboimg {
    width: 100%;
    height: 500px;
  }

  .gbox {
    position: absolute;
    width: 1100px;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    height: 100%;
    z-index: 100;

    ul {
      width: 200px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 10px 10px 10px 10px;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px #ccc;

      li {
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        span {
          color: #666464;
        }

        &:hover div {
          display: block;
        }

        div {
          position: absolute;
          left: 180px;
          top: -10px;
          height: 500px;
          width: 400px;
          display: none;
          background-color: #fff;
          z-index: 300;
          box-shadow: 8px 0px 8px 0px #ccc;

          span {
            float: left;
            width: 50%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}

.pbox {
  width: 1200px;
  margin: 50px auto;

  .tb {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .titembox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;

    .titem {
      width: 24%;
      height: 400px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin-bottom: 20px;

      &:hover {
        box-shadow: 0 0 5px 0 #ccc;
      }

      .imgdiv {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 50%;
          height: 80%;
        }
      }

      .contentdiv {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;

        p {
          text-align: center;
          display: inline;
          padding: 10px;

          &:nth-child(2) {
            color: #ccc;
            font-size: 14px;
          }

          &:nth-child(3) {
            span {
              padding: 3px;
              border-radius: 5px;
              border: 1px solid #000;
            }
          }
        }
      }
    }
  }
}
</style>

登录页面:

<template>
  <div class="login clearfix">
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <el-form :model="user" ref="formbox" :rules="rules" label-width="80px">
          <p>用户登录</p>
          <el-form-item prop="username" label="用户名">
            <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon>
            </el-input>
          </el-form-item>
          <el-form-item id="password" prop="password" label="密码">
            <el-input v-model="user.password" show-password placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <router-link to="/login">找回密码</router-link>
          <router-link to="/index">注册账号</router-link>
          <el-form-item>
            <el-button type="primary" @click="doLogin('formbox')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到10 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    doLogin() {
      this.$refs.formbox.validate((valid) => {
        if (valid) {
          let userObj = JSON.parse(localStorage.getItem("userInfo"));
          if (!userObj) {
            this.$message.error("该账户不存在,请去注册");
            return false;
          }

          if (
            userObj.username == this.user.username &&
            userObj.password == this.user.password
          ) {
            this.$message.success("登录成功");
            // 设置全局变量的值
            this.$store.commit("setUserObj", this.user);
            this.$router.push("/home");
          } else {
            this.$message.error("请填写正确的用户信息");
          }
        }
      });
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 740px;
  background: url("../assets/login2.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.login-wrap {
  width: 400px;
  height: 400px;
  margin: 40px auto;
  overflow: hidden;
  padding: 10px 10px;
  line-height: 50px;
  background-color: #fff;
  background-size: cover;
}

#passsword {
  margin-bottom: 5px;
}

.login p {
  color: #0babeab8;
  font-size: 30px;
  font-weight: bold;
  margin: 20px 125px;
}

.login a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
  margin: 0 50px;
}
.login a:hover {
  color: coral;
}
.login .el-button {
  width: 80%;
  margin: 0;
  border-radius: 25px;
}
</style>

注册页面:

<template>
  <div class="index clearfix">
    <div class="index-wrap">
      <el-row>
        <el-form :model="user" :rules="rules" label-width="120px">
          <p>注册</p>
          <el-form-item prop="username" label="用户名">
            <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="user.password2" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doIndex()">注册账号 </el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: "",
        password2: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "密码长度在 6-15 位", trigger: "blur" },
        ],
        Password2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: this.checkPasswordConfirmation, trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    checkPasswordConfirmation(rule, value, callback) {
      if (value !== this.user.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    doIndex() {
      if (!this.user.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.user.password) {
        this.$message.error("请输入密码！");
        return;
      } else {
        localStorage.setItem("userInfo", JSON.stringify(this.user));
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style>
.index {
  width: 100%;
  height: 740px;
  background: url("../assets/login2.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.index-wrap {
  width: 400px;
  height: 400px;
  margin: 40px auto;
  overflow: hidden;
  padding: 10px 10px;
  line-height: 50px;
  background-color: #fff;
  background-size: cover;
}

#passsword {
  margin-bottom: 5px;
}

.index p {
  color: #0babeab8;
  font-size: 30px;
  font-weight: bold;
  margin: 20px 125px;
}

.index a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
  margin: 0 50px;
}
.index a:hover {
  color: coral;
}
.index .el-button {
  width: 80%;
  margin: 0;
  border-radius: 25px;
}
</style>

购物车页面:

<template>
  <section>
    <div class="home">
      <!-- 轮播图 -->
      <!-- 商品展示 -->
      <div class="pbox">
        <div class="tb">商品详情</div>
        <div class="titembox">
          <div class="leftbox">
            <img :src="goodsObj.imgurl" alt="" />
          </div>
          <div class="rightbox">
            <p>{{ goodsObj.name }}</p>
            <p>{{ goodsObj.dec }}</p>
            <p>
              <span>赠送积分</span>
            </p>
            <p>颜色:</p>
            <p>
              <span style="color: #fff; background-color: #f00">中国红</span>
              <span style="color: #fff; background-color: #e1d8c8">土豪金</span>
              <span style="color: #fff; background-color: #26615f">翡翠绿</span>
              <span style="color: #fff; background-color: #000">黑色</span>
            </p>
            <p>价格:</p>
            <p>
              ¥<span>{{ goodsObj.price }}</span>
            </p>
            <p class="btnp">
              <span>立即购买</span>
              <span>加入购物车</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      goodsObj: {},
    };
  },
  created() {
    this.goodsObj = JSON.parse(this.$route.query.goodsDetail);
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.home {
  height: auto;
  background-color: #ffffff;
}

/deep/.el-carousel__container {
  height: 500px;
}

.pbox {
  width: 1200px;
  margin: 50px auto;

  .tb {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .titembox {
    width: 100%;
    display: flex;
    height: 600px;
    .leftbox {
      width: 50%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rightbox {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      justify-content: flex-start;
      p {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &:nth-child(1) {
          font-size: 30px;
          font-weight: 600;
        }
        &:nth-child(2) {
          font-size: 24px;
        }
        &:nth-child(3) {
          font-size: 24px;
          span {
            color: hotpink;
          }
        }
        &:nth-child(4) {
          font-size: 24px;
        }

        &:nth-child(5) {
          font-size: 24px;
          span {
            display: inline-block;
            width: 100px;
            height: 40px;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            margin-left: 20px;
          }
        }
        &:nth-child(6) {
          font-size: 24px;
        }
        &:nth-child(7) {
          font-size: 24px;
          color: red;
        }
      }
      .btnp {
        font-size: 26px;
        display: flex;
        justify-content: center;
        span {
          background-color: #ff3410;
          width: 150px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          margin-right: 40px;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>

整体代码:

请看我的资源

月下星辰

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端商城系统设计与实现

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

扫一扫