基于JavaMaven+MySQL的网上B2C商城系统前后台设计

目录

1. 毕设目的 1
2. 开发环境 1
3. 毕设内容 1
4. 需求分析 2 4.1功能性需求分析 2 4.2非功能性需求 6 4.3设计约束 7
5. 设计过程 7 5.1概要设计 7 5.2数据库设计 8 5.3系统详细设计 17 5.4、编码设计（具体实现流程） 20
6. 调试过程 38 6.1 背景 38 6.2 测试目的 38 6.3测试环境 38 6.4 测试策略 39 6.5 测试方法 39 6.4 测试需求分析 39 6.5 测试设计与测试结果 40 6.6 测试报告 43
7. 小结 43
8. 参考文献 44 附录： 44
9. 开发环境 硬件环境： Window11 电脑、Centos7.6 服务器 软件环境： IntelliJ IDEA 2021.1.3 开发工具 JDK 16 运行环境 Mysql 8 Navicat 15 for MySQL XShell、XFtp Redis5 RDM Docker Node.js 16.3.1 Maven Nginx 1.9.9
10. 毕设内容 完成商城的基本功能模块： 登录模块、注册模块、首页商品列表显示模块、商品列表显示模块、 商品详情模块、购物车模块、收获地址模块、订单模块、个人中心模块。
11. 需求分析 4.1功能性需求分析 网上商城主要分为两部分前台和后台，前台是面向用户的，其中包括用户在线注册、登录、购物、提交订单、付款等操作；本文转载自http://www.biyezuopin.vip/onews.asp?id=15217另一部分是商城的后台，是管理员用来管理商城的，这部分包括，商成数据展示、商品分类管理、商品信息管理、会员管理、订单管理。 4.1.1用户注册基本需求 1.用户需要输入用户名、邮箱、密码、以及重复密码 2.用户提交后会对表单数据进行校验，用户名不可用重复，邮箱格式也必须正确且不允许重复，密码用户自定义，重复密码需要与密码栏书写一致，防止用户操作失误输入错误的密码。 3.用户阅读并且勾选服务协议，才可注册。 4.注册后，系统会向用户注册邮箱发送激活链接，用户需要去邮箱查看并且点击激活用户，才可以使用此账号进行购物操作。

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-user-solid" style="color: #F56C6C;"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.memberCountNow }}</span>
              <p>今日登录会员</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-s-order" style="color: rgb(68,177,84)"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.orderCountNow }}</span>
              <p>今日付款订单</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-s-finance" style="color: rgb(59,212,175)"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.orderSumNow }}</span>
              <p>今日收益</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-shopping-bag-2" style="color: rgb(146,47,163)"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.categoryCount }}</span>
              <p>商品类别数量</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-s-shop" style="color: rgb(83,172,230)"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.sumTotalprice }}</span>
              <p>累计收益</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card">
          <el-row class="cart-content">
            <el-col :span="10">
              <i class="el-icon-s-custom" style="color: rgb(217,105,127)"></i>
            </el-col>
            <el-col :span="14">
              <span>{
         
  { homeData.topData.countMember }}</span>
              <p>累计会员数量</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 30px">
      <el-col :span="16">
        <div id="myChart" class="chart"></div>
      </el-col>
      <el-col :span="8">
        <div id="classChart" class="chart"></div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import {getTopData} from "@/api/shop/indexdata"

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.7.0",
      homeData: {
        topData: {},
        categoryCountChart: {},
        xData: [],
        yData: []
      }
    };

  },
  methods: {
    getTop() {
      getTopData().then(response => {
        this.homeData = response.data;
        console.log("----", response.data)
        this.drawLine()
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var charDom = document.getElementById(myChart)
      var classChart = document.getElementById(classChart)
      let myClassChart = this.$echarts.init(classChart)
      let myChart = this.$echarts.init(charDom)

      var option;

      // 绘制图表
      option = {
        title: {
          text: 近一个月销售记录,
          subtext: 总的销售金额,
          left: center
        },
        xAxis: {
          type: category,
          data: this.homeData.xData
        },
        yAxis: {
          type: value
        },
        series: [
          {
            data: this.homeData.yData,
            type: line
          }
        ],
        tooltip: {
          trigger: axis,
        }
      };
      option && myChart.setOption(option)
      var option1;
      option1 = {
        title: {
          text: 商品分类占比,
          subtext: 各类商品的数量,
          left: center
        },
        tooltip: {
          trigger: item
        },

        series: [
          {
            name: 类别名称,
            type: pie,
            radius: 50%,
            data: this.homeData.categoryCountChart,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: rgba(0, 0, 0, 0.5)
              }
            }
          }
        ]
      };
      option1 && myClassChart.setOption(option1)

    }
  },
  created() {
    this.getTop()
  },
  mounted() {
    console.log("+++++", this.homeData)
    // this.drawLine()
  }
};
</script>

<style scoped lang="scss">
//.cart-content{
//margin-top: 20px;
//}
.chart {
  height: 450px;
  background-color: #fff;
  padding-top: 20px;
}

//.el-row{
//  margin-bottom: 30px;
//}
.box-card i {
  font-size: 60px;
}

.app-container {
  background-color: rgb(246, 246, 246);
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>