基于SSM的农产品电子商务商品购物平台设计

悠悠 2024-04-03 08:23 108阅读 0赞

1.  需求分析 1
2.  开发平台及工具介绍 1
3.  系统设计（需要相应的流程图说明） 1  
    3.1、首页模块（index.html） 2  
    3.2、新闻模块 5  
    3.3、商品详情页模块 6  
    3.4、消费者模块 7  
    3.5、管理者模块 9

1.需求分析  
此项目为设计一个电商平台项目，卖家可以在此平台上出售相应的商品，并提供相应的商品信息，买家则可以在此平台进行相应的购买。此外，卖家还提供相应的新闻信息供买家查看。  
2.开发平台及工具介绍  
软件环境  
操作系统：win 10  
系统类型：64位操作系统  
应用软件：IDEA  
语言：HTML 、CSS、JavaScript、Vue.js  
框架: Vue 框架  
3.系统设计（需要相应的流程图说明）  
分为五大模块，分别为首页模块、管理者模块、消费者模块、新闻模块、商品详情页。  
本项目提供公共组件：  
Bottom.vue ：底部模块组件  
Collection.vue ：收藏模块组件  
detail.vue : 新闻详情页组件  
discountPart.vue ：优惠区组件  
myMenu ：左部浮动商品列表组件  
goods-bottom-model.vue ：商品详情页底部组件  
goods-menu.vue ：商品详情页菜单导航组件  
goods-top-model.vue ：商品详情页顶部组件  
goodsSearch.vue ：搜索商品结果组件  
moreNews.vue ：新闻详情页组件  
Navbar.vue ：导航栏组件  
news.vue ：新闻列表页组件  
newsPart.vue ：新闻模块组件  
returnTop.vue ：此组件暂无使用  
slide.vue ：首页轮播图模块组件  
smallNavBar.vue ：副导航栏模块组件  
specialPart.vue ：特色区模块组件  
one\_adminUserAndNews.vue：黑名单管理组件  
two\_adminUserAndNews.vue：白名单管理组件  
three\_adminUserAndNews.vue：新闻动态管理组件  
four\_adminUserAndNews.vue：新闻动态编辑组件  
unionall: 合作社父组件  
one\_union: 合作社管理组件  
two\_union: 商品信息管理组件  
three\_union: 合作社人员管理组件  
five\_union: 商品修改日志管理组件  
3.1、首页模块（index.html）  
首页由导航栏、轮播图、左部商品菜单、特色区商品、优惠区商品、平台介绍、新闻模块以及底部版权模块组成。  
轮播图实现淡入淡出效果，左部商品菜单、特色区与优惠区实现点击商品跳转对应商品详情页，以及特色区与优惠区实现用户登录后可点击收藏功能。平台新闻实现点击淡入淡出效果，新闻模块即实现点击相应新闻跳转对应新闻详情页以及点击更多按钮跳转新闻列表页等功能。相应逻辑图如图1.

相应组件说明 ：（父组件实现相应数据的传送）  
discountPartFather.vue：优惠区父组件 （id、isCollect、name、prices、pictureSrc、Collect\_pk、src）  
myMenuFather.vue：商品列表父组件（fruit、processedGoods、vegetable、fish、livestock、plant、src）  
newsPartFather.vue：新闻模块父组件（pictureSrc、newsTitle、newsTime、newsContent、src）  
slideFather.vue：轮播图父组件（src）  
specialPartFather.vue：特色区父组件（id、isCollect、name、prices、pictureSrc、Collect\_pk、src）

导航栏由联系我们、搜索框，以及登录注册（用户信息）等功能组成  
导航栏点击联系我们可跳转到相应的页面，本文转载自http://www.biyezuopin.vip/onews.asp?id=14611实现了在搜索框输入相应的商品获得相应的搜索结果，以及点击登录和注册按钮跳转到相应的页面上去。

<template>
      <div id="login">
        <div id="fl-login" class="container-fluid">
          <div class="info">
            <transition name="slide-fade">
              <div class="alert alert-danger" role="alert" id="fl-error" v-if="point == 1" :style="{display: block}">
                <span id="fl-error-icon"></span>
                <span id="fl-error-body">{
        {
        this.msg}}</span>
              </div>
            </transition>
          </div>
          <div class="panel panel-default">
            
            <div class="panel-body">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="inputId" class="col-md-3 control-label">帐号</label>
                  <div class="col-md-7">
                    <input type="text" class="form-control" id="inputId" placeholder="昵称/手机/邮箱" v-model="id">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword" class="col-md-3 control-label">密码</label>
                  <div class="col-md-7">
                    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码"
                           v-model="input_password">
                  </div>
                </div>
                
                <div id="User_Position" class="form-group">
                  <label class="col-md-3 control-label">登录身份</label>
                  <div class="col-md-9">
                    <label class="radio-inline col-md-3">
                      <input type="radio" name="User_Position" value="1" v-model="checked"> 用户
                    </label>
                    <label class="radio-inline col-md-5">
                      <input type="radio" name="User_Position" value="2" v-model="checked"> 管理员
                    </label>
                  </div>
                  
                  
                  
                  
                  
                  
                  
                  
                  
                </div>
                <div class="form-group">
                  <label for="yzm" class="col-md-3 control-label">验证码</label>
                  <div class="col-md-9">
                    <input type="text" class="form-control" id="yzm" placeholder="验证码" v-model="inputVCode">
                    <img width="78px" :src="picturesSrc" id="img0" vspace=3>
                    <a class="btn" @click="getVCode()">换一张</a>
                  </div>
                </div>
                <div class="form-group">
                  <div id="fl-login-btn">
                    <button type="button" class="btn btn-default btn-lg" @click=login()>登录</button>
                  </div>
                </div>
              </form>
            </div>
            
            <div class="panel-footer">
              <a href="index.html">返回首页</a>
              <a href="register.html">立即注册</a>
              
              <el-button type="text" @click="open">忘记密码</el-button>
            </div>
          </div>
        </div>
    
    
      </div>
    
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        
        name: 'Login',
        data() {
        
          return {
        
            id: '',
            input_password: '',
            password: '',
            datas: '',
            point: '-1',
            msg: '',
            checked: '1',
            block: '',
            picturesSrc: '/business-platform/AccountsManagement/authCode',
            login_information: '',
            login_VCode: '',
            code: '',
            inputVCode: '',
            user_name: '',
            admin_name: ''
          }
        },
        methods: {
        
          open() {
        
            if (this.id === '') {
        
              this.info('账号不能为空，请填写昵称或者手机号码或者邮箱号码')
            } else {
        
              axios.get('/business-platform/AccountsManagement/sendMail', {
        
                params: {
        
                  userAccount: this.id
                }
              }).then(response => {
        
                if (response.data.message === 'success') {
        
                  this.$alert('请前往注册邮箱找回密码', '', {
        
                    confirmButtonText: '确定',
                  });
                }else{
        
                  this.$alert('账户无效，请重新核对账号信息！', '', {
        
                    confirmButtonText: '确定',
                  });
                }
              })
            }
          },
          login: function () {
        
            if (this.id === '') {
        
              this.info('账号不能为空，请填写昵称或者手机号码或者邮箱号码')
            } else if (this.input_password === '') {
        
              this.info('请输入密码')
            } else if (this.inputVCode === '') {
        
              this.info('请输入验证码')
            } else {
        
              this.password = hex_md5(this.input_password) // 密码加密
              this.code = this.inputVCode
              if (/0?(13|14|15|18|17)[0-9]{
        9}$/.test(this.id) === true && this.checked === '1') {
         // 手机
                this.datas = {
        
                  'isAdmin': false,
                  'User_Password': this.password,
                  'User_Cell': this.id,
                  'User_Name': '',
                  'User_Email': ''
                }
              } else if (/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{
        |}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(this.id) === true && this.checked === '1') {
         // 邮箱
                this.datas = {
        
                  'isAdmin': false,
                  'User_Password': this.password,
                  'User_Cell': '',
                  'User_Name': '',
                  'User_Email': this.id
                }
              } else if (this.checked === '1') {
         // 昵称
                this.datas = {
        
                  'isAdmin': false,
                  'User_Password': this.password,
                  'User_Cell': '',
                  'User_Name': this.id,
                  'User_Email': ''
                }
              } else if (/0?(13|14|15|18|17)[0-9]{
        9}$/.test(this.id) === true && this.checked === '2') {
        
                this.datas = {
        
                  'isAdmin': true,
                  'Admin_Password': this.password,
                  'Admin_Cell': this.id,
                  'Admin_Name': '',
                  'Admin_Email': ''
                }
              } else if (/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{
        |}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(this.id) === true && this.checked === '2') {
        
                this.datas = {
        
                  'isAdmin': true,
                  'Admin_Password': this.password,
                  'Admin_Cell': '',
                  'Admin_Name': '',
                  'Admin_Email': this.id
                }
              } else if (this.checked === '2') {
        
                this.datas = {
        
                  'isAdmin': true,
                  'Admin_Password': this.password,
                  'Admin_Cell': '',
                  'Admin_Name': this.id,
                  'Admin_Email': ''
                }
              }
              /**
               * 嵌套验证，先发送请求，验证验证码是否正确，再进行验证用户信息
               */
              axios.get('/business-platform/AccountsManagement/validateVCode', {
        
                params: {
        
                  vCode: this.code
                },
              }).then(response => {
         // 验证码验证
                if (response.data.data.status === 1) {
        
                  axios.post('/business-platform/AccountsManagement/login', this.datas).then(response => {
         // 登录信息验证
                    if (response.data.data.reLogin === true) {
        
                      this.info('您已在线，不可重复登录')
                    } else if (response.data.data.reLogin === false && response.data.data.isCorrect === true && this.datas.isAdmin === false) {
        
                      window.location.href = 'index.html'
                    } else if (response.data.data.reLogin === false && response.data.data.isCorrect === true && this.datas.isAdmin === true) {
        
                      window.location.href = 'editinfo.html'
                    } else {
        
                      this.info('用户名或密码错误')
                    }
                  }).catch(function (error) {
        
                    console.log(error)
                  })
                } else {
        
                  this.info('验证码错误')
                }
              }).catch(function (error) {
        
                console.log(error)
              })
            }
          },
          /**
           * 信息提示
           */
          info: function (msg) {
        
            this.$message.error(msg)
          },
          /**
           * 获取验证码
           */
          getVCode: function () {
        
            this.picturesSrc = '/business-platform/AccountsManagement/authCode?operation=getVCode&&=' + Math.random()
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

![在这里插入图片描述][453a94f8cee44771aeeeddd44eae92fd.png_pic_center]  
![在这里插入图片描述][041550fb5cef40aea7e496762f0a77c3.png_pic_center]  
![在这里插入图片描述][4f382e14470940218dd7a591e3c7919a.png_pic_center]  
![在这里插入图片描述][7de7c8df226a48b9b0bef5204015e64e.png_pic_center]  
![在这里插入图片描述][0aecc8fa7c774dfdbd040bc275a6abe7.png_pic_center]  
![在这里插入图片描述][e7612a27d5ff47288e2b416214f8c53e.png_pic_center]  
![在这里插入图片描述][34efbc3d1b7444af84ed657a6bc1d768.png_pic_center]  
![在这里插入图片描述][a7ac3c9214ad49b5b979eb6c628c2e3f.png_pic_center]  
![在这里插入图片描述][dd31184aa950418ca3f693a3459e22ea.png_pic_center]  
![在这里插入图片描述][8970f4a49d714baf984775924024f78d.png_pic_center]  
![在这里插入图片描述][e5c979f3577641c881d9d5fa9e726871.png_pic_center]  
![在这里插入图片描述][593810a9c500467d853f102f56c9309c.png_pic_center]  
![在这里插入图片描述][d975eed5be4c4e64bcfcae85407d5047.png_pic_center]  
![在这里插入图片描述][6b31cb0c51c1424682d9f3a8f2ad8eda.png_pic_center]  
![在这里插入图片描述][ebc21e03c8d648eea27e40b3c3a95ff0.png_pic_center]  
![在这里插入图片描述][7b22b2ed473249f183f556aca720f3e0.png_pic_center]  
![在这里插入图片描述][92f30b4e1ae944f290f22dea7457da6a.png_pic_center]  
![在这里插入图片描述][4076b3afbeb04974a86ff83f49469518.png_pic_center]  
![在这里插入图片描述][edb3eafb05ff441a8ecbb155244011a3.png_pic_center]  
![在这里插入图片描述][7970918d68384b318647344b2fa21f3b.png_pic_center]  
![在这里插入图片描述][6d2cd65cb9be4cdd8b483d113f01dcab.png_pic_center]  
![在这里插入图片描述][3ee702e72d934c2e85d2ade8cec6b58f.png_pic_center]  
![在这里插入图片描述][cebd2dea4f8742018cba81d5bfe8ab2b.png_pic_center]  
![在这里插入图片描述][7e2003dd0b5b4a65958e3ec7651c2ed5.png_pic_center]  
![在这里插入图片描述][22b9209beb394e00835a2edc409b37d1.png_pic_center]  
![在这里插入图片描述][4e287bb757964b76a61b09175ea95a65.png_pic_center]  
![在这里插入图片描述][23157324ba274a8d93d99071dfa665e8.png_pic_center]  
![在这里插入图片描述][7cebe627341645b6913686395dbf29a5.png_pic_center]

[453a94f8cee44771aeeeddd44eae92fd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/dd94f32a927b4b49885780559bcdeb22.png
[041550fb5cef40aea7e496762f0a77c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f4e6033c547d4e179725ed992613ce56.png
[4f382e14470940218dd7a591e3c7919a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0d621d76cdcc4f158e8a3af3b629df1f.png
[7de7c8df226a48b9b0bef5204015e64e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d205e7ac4bee47abb57205c3cb00b5cb.png
[0aecc8fa7c774dfdbd040bc275a6abe7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/13f8117e7a074cd69c764fcd2b892ecf.png
[e7612a27d5ff47288e2b416214f8c53e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9bfcecef235e4b0c9f6f4d0335dca179.png
[34efbc3d1b7444af84ed657a6bc1d768.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e0657443b9ca41aa96d02c9c188ff3d5.png
[a7ac3c9214ad49b5b979eb6c628c2e3f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/eae473e04973487d80576f5a42875503.png
[dd31184aa950418ca3f693a3459e22ea.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ed2f745b668040edba330222972bc03f.png
[8970f4a49d714baf984775924024f78d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4ef854a880fa41788b40376e8182ff86.png
[e5c979f3577641c881d9d5fa9e726871.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/defc3a2fe04447bb8d4015bf1c10eea9.png
[593810a9c500467d853f102f56c9309c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8c2d27a97db84628b35e3b49771fe8f0.png
[d975eed5be4c4e64bcfcae85407d5047.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/91cfa0456e074d489122187947287344.png
[6b31cb0c51c1424682d9f3a8f2ad8eda.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/34821e2f0b584c67a88552c8c91938e9.png
[ebc21e03c8d648eea27e40b3c3a95ff0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8e4d4c7e1b2a420290f992385ba05ffa.png
[7b22b2ed473249f183f556aca720f3e0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e9801a3bdf384165862253e55d5f2a1c.png
[92f30b4e1ae944f290f22dea7457da6a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3058278dfe0c491ca1eee3c60b2a86e9.png
[4076b3afbeb04974a86ff83f49469518.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/6b5888bf38364093afe8bf4c6b0c4c05.png
[edb3eafb05ff441a8ecbb155244011a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5c6312308e454cb3a6a9411d21b1d40d.png
[7970918d68384b318647344b2fa21f3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ea65b4697daf43c2af54fce50e5601cb.png
[6d2cd65cb9be4cdd8b483d113f01dcab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c3ae02d9753547aea2ff6fc6700ef422.png
[3ee702e72d934c2e85d2ade8cec6b58f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2348872dc41a4ca590ba8170ca4f2039.png
[cebd2dea4f8742018cba81d5bfe8ab2b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/fad8685c416843e48d2f3a80b94f8e3f.png
[7e2003dd0b5b4a65958e3ec7651c2ed5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5bfd4ac96ed04f3d955e2306fa5b41dc.png
[22b9209beb394e00835a2edc409b37d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3107fc4648b44cfd88bcf162ebd66990.png
[4e287bb757964b76a61b09175ea95a65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3b11a148e67e4e6ea779a4431d28315f.png
[23157324ba274a8d93d99071dfa665e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1ed4be86239c4675aaa0470f6020cde6.png
[7cebe627341645b6913686395dbf29a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/74a7d960c2884d5c905cf3dbee43a397.png