大学生期末项目vue3+elementplus实现商城后台管理系统项目【原创】

潜意识起点

已于 2024-08-02 23:22:28 修改

阅读量1k

点赞数 29

分类专栏：项目源码文章标签： vue.js 前端 npm css html5

于 2024-08-01 09:44:34 首次发布

本文链接：https://blog.csdn.net/weixin_73355603/article/details/140838199

版权

项目源码专栏收录该内容

7 篇文章 1 订阅

订阅专栏

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

💛一. 作者想说的话

❤️

本项目是针对大学生的期末项目，这里比较简单请理解，可以在下载源码之后，比较厉害的小伙伴可以自行改进一下css代码等，源码已经绑定资源了，可以在上面直接下载即可。应付老师是没问题的，vue期末考拿了一个优秀，因此，放心下载修改。😄

❤️

💙

这里用到了一些比如福州理工学院的校徽，包括摄影的图片都是本人私有的资源，因此本项目只可用于交流学习，不可出售❌，贩卖❌，非法复制等侵权行为❌。已经在此免责声明！

💙

🧡

我在源代码中也是删减了部分，尽量的不造成侵权行为！因此，图片和真实源代码略有不同，这些都是正常的，我也是怕一些人进行非法拷贝。影响了学校的声誉，这个请谅解哈。

🧡

💚

下面的代码只是让大家认识一下，了解一下项目是怎么写的，大家不用一句一句复制，上面下载源代码就行！源代码是完全免费的！

💚

💖

不懂运行的小伙伴一定要私信我，好好研究研究一个项目运行起来了就挺好，没必要一篇一篇找。然后全部都运行不起来。

💖

⚽️

本人也是大学生，编码习惯不是特别的规范，用于交流学习讨论，目的在于提高大家的前端编程水平哈。

⚽️

❤️运行视频【保姆式教学】：

vue3商城管理系统运行视频

💜二. 首页

💛2.1 首页的html

这里没有用到表单布局，要注意一下哈。因为from表单比较麻烦。其实我当时也不太会用。

正常的话要规范一点要用到from表单

v-model是用来绑定数据的

其他的都是一些非常基础的代码，不要多讲了吧🥰

注意：from表单不会或者不知道什么是from表单的话参考：from表单的基本使用

<template>
  <div class="bigbox">
    <h1>商店后台管理登录平台</h1>
    <!-- 按钮跳转到前台页面 -->
    <img src="../../assets/用户名.png" alt="cw">
    <input type="text" v-model="username" class="username">
    <br>
    <img src="../../assets/密码.png" alt="cw">
    <input type="password" v-model="password" class="password">
    <br>
    <el-button color="#626aef" :dark="isDark" class="button1" @click="qt">跳转至前台</el-button>
    <el-button type="success" @click="login" class="button2" :plain="true">登录</el-button>
  </div>
  <!-- <el-button type="warning" @click="getlogin">获取模拟信息</el-button> -->

</template>

💚2.2 首页的css

这些都是最基本的css的代码，有些代码重复了，可能大家也看出我的水平了，能改尽量改吧。

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.bigbox {
  display: inline-block;
  width: 35%;
  height: 400px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
  margin-top: 126px;
  padding-left: 100px;
  box-sizing: border-box;
  margin-left: 515px;

}

.username {
  width: 300px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none;
  margin-top: 40px;
  margin-bottom: 30px;

}

.password {
  width: 300px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none;
  margin-bottom: 30px;
}

.button1,
.button2 {
  width: 150px;
  height: 50px;
  border-radius: 10px;
}
</style>

❤️三. 登录后的默认界面

🌏

这里颜色配置什么可以通过源代码进行相应的改进，我感觉好丑😂得改！得改！

🌏

介绍一下，这里的组件用的技术：

日历组件用的是element plus
管理员信息卡片是一个子组件，用插槽实现，后面有个差不多的子组件
统计登录次数的也是一个element plus写的
统计图是用echars写的图，数据是放在mockjs中的

💛 3.1 登录后默认界面的html

这里大多数还是element plus的语法，看不懂，没关系的。大概的框架会了就行。会用就行，不要懂，其次是下面的JS代码都是最最基础的。

<template>
  <div class="common-layout">
    <el-container>
      <!-- 这是左边导航栏部分 -->
      <div class="left">
        <el-aside width="260px" >
        <el-col :span="24">
          <!-- 这里放导航栏上面的 -->
      <img src="../../assets/ht.jpg" alt="cw" class="logo1">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
      <el-menu-item index="/home/welcome">
          <el-icon><icon-menu /></el-icon>
          <span>首页信息</span>
        </el-menu-item>
        <el-sub-menu index="/home/goods">
          <template #title>
            <el-icon><location /></el-icon>
            <span>商品信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/goods">商品信息</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1">
            <template #title>销量管理</template>
            <el-menu-item index="/home/sales">销量库存信息</el-menu-item>
            <el-menu-item index="/home/map">销量统计图</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="/home/person">
          <el-icon><document /></el-icon>
          <span>信息管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
      </el-aside>
      </div>
      <el-container>

        <!-- 上面内容部分 -->
        <el-header>
          <div class="top">
            <!-- 退出图标 -->
            <!-- <el-button color="#626aef" :dark="isDark" class="botton1" @click="logout">退出登录</el-button> -->
            <el-popconfirm
    confirm-button-text="确定"
    cancel-button-text="取消"
    :icon="InfoFilled"
    icon-color="#626AEF"
    title="确定要退出吗？"
    @confirm="confirmEvent"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button color="#626aef" :dark="isDark" class="botton1">退出系统</el-button>
    </template>
  </el-popconfirm>
          </div>
        </el-header>
        
        <!-- 中间内容部分 -->
        <el-main>
          <div class="middle">
            <router-view></router-view>
        </div>
      </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import router from '@/router';
// import { ElMessageBox } from 'element-plus';
//  const logout = () => {

//   ElMessageBox.confirm('确定要退出吗?！', '退出提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })

//   router.push('/')

// }
const confirmEvent = () => {
  router.push('/')
}
const cancelEvent = () => {
  return;
}
</script>

💙 3.2 登录后默认界面的css

这里的scoped介绍一下

他的意思是这些全部CSS代码，都是这个组件私有的CSS代码，不会影响其他组件代码。

建议使用地点：

App.vue 不建议使用scoped
其他的子组件都使用scoped

<style scoped>
*{
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
  font-weight: 800;
}
  .logo1{
    width: 256px;
    height: 145px;
    border: 1px solid black;
    border-radius: 10px;
  }
  .top{
    width: 100%;
    height: 60px;
    /* background-color:	#DCDCDC; */
    border:1px solid antiquewhite;
    border-radius: 10px;
    background-color: floralwhite;
  }
  .left{
    /* background-color:	#DCDCDC; */
    height: 783px;
  }
  .middle{
    /* background-color: cadetblue; */
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .botton1{
    width: 100px;
    height: 40px;
    margin-left: 1080px;
    margin-top: 10px;
  }
</style>

❤️四. 商品管理界面

负责商品的增删改。

🧡4.1 商品管理界面的html

<template>
  <div class="bigbox">
    商品管理页面
    <el-button type="primary" class="button1" plain @click="add">添加商品</el-button>

    <!-- 以下为弹出框，全部组件库的语法，可以不用了解 -->
    <el-dialog v-model="dialogFormVisible" title="商品管理" width="500">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>

        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="<--请选择商品类型-->">
            <el-option label="电子产品" value="电子产品" />
            <el-option label="生活用品" value="生活用品" />
            <el-option label="服装首饰" value="服装首饰" />
            <el-option label="母婴用品" value="母婴用品" />
            <el-option label="食品饮料" value="食品饮料" />
            <el-option label="其他类品" value="其他类品" />
          </el-select>
        </el-form-item>
        <el-form-item label="上架时间" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.time" autocomplete="off" /> -->
          <el-date-picker style="width: 330px;" v-model="form.time" type="date" placeholder="点击选择时间"
            value-format="YYYY-MM-DD" :size="size" />
        </el-form-item>


        <!-- 上传图片 -->
        <el-form-item label="图片网络地址" :label-width="formLabelWidth">
          <el-input v-model="form.img" autocomplete="off" />
        </el-form-item>



        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off" />
        </el-form-item>

        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input v-model="form.inventory" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!--  -->
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="adddata()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 弹出框到此为止 -->

  </div>
  <el-table :data="tableData" border style="width: 100%" v-loading="loading">
    <el-table-column prop="date" label="商品编号" width="180" />
    <el-table-column prop="name" label="商品介绍" width="380" />
    <el-table-column prop="price" label="商品价格" width="100" />
    <el-table-column prop="type" label="商品类型" width="100" />
    <el-table-column prop="time" label="上架时间" width="110" />
    <el-table-column prop="" label="商品图片" width="100">
      <template #default="index">
        <img :src="tableData[index.$index].img" alt="cw" style="width: 75px;height: 75px;">
      </template>
    </el-table-column>
    <el-table-column label="修改操作">
      <template #default="index">
        <el-button type="primary" @click="update(index.row.date)">编辑</el-button>
        <el-button type="danger" @click="del(index.row.date)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <br>
  <br>
  <br>

</template>

💜4.2 商品管理界面的js

  <script lang="ts" setup>

import { number } from 'echarts'
import {  onMounted, ref, watch }  from 'vue'
import { useCounterStore } from '../../../stores/counter'
const channel = useCounterStore()
// import MyUpload from '../../child/MyUpload.vue'
const imageUrl = ref('')
const bianji = ref(false)
//控制加载
const loading = ref(true)
//挂载时候改为false
onMounted(
    () => {
      loading.value = false
    }
)
const dialogFormVisible = ref(false)
const jianshi = ref(false)
const tableData = channel.tableData
const formLabelWidth = '140px'
const size = ref<'default' | 'large' | 'small'>('default')


  
//这边是表的基本结构
const form = ref({
    date:'',
    name: '',
    type: '',
    time:'',
    price:'￥'+'',
    sold:0,
    img:'',
    inventory:0,
  })
 //这边是添加按钮的函数
 const add =() =>{
  dialogFormVisible.value = true
  //清空按钮
  form.value.name=''
  form.value.type=''
  form.value.time=''
  form.value.price='￥'+''
  form.value.img=''
  form.value.inventory = null
 }


//这边是添加商品中的确定函数
  const adddata = () => {
    dialogFormVisible.value = false
    // console.log(form.value.name,form.value.type,form.value.time,form.value.price,form.value.img,form.value.sold)
    if(form.value.name===''||form.value.type===''||form.value.time===''||form.value.price===''|| form.value.img===''||form.value.sold===null ||form.value.inventory===null){
      alert('请填写完整信息')
       //清空表单
    form.value.name=''
    form.value.type=''
    form.value.time=''
    form.value.price='￥'+''
    form.value.img=''
    form.value.inventory = null
      return;
    }
    // 往channel.tableData添加对象数据 修改数据都在这里
    if(jianshi.value===false){
      tableData.push({
      date:Number(+new Date()),
      name: form.value.name,
      price: form.value.price,
      type:form.value.type,
      time:form.value.time,
      sold:0,
      img:form.value.img,
      inventory:form.value.inventory
      })
    }
    if(jianshi.value===true){
      tableData.forEach((item, index) => {
          if (item.name === form.value.name) {
            //这里默认名字不可以修改
            tableData[index].type = form.value.type
            tableData[index].time = form.value.time
            tableData[index].price = form.value.price
            tableData[index].img= form.value.img
            tableData[index].inventory= form.value.inventory
            //清空
          }
          jianshi.value = false
        })
        alert('修改成功')
        

    }
      channel.tableData = tableData;
      console.log(channel.tableData)

    //清空表单
    form.value.name=''
    form.value.type=''
    form.value.time=''
    form.value.price='￥'+''
    form.value.img='',
    form.value.inventory = null
  }

  const del = (id) => {
    if(confirm('确认删除吗？删除后数据无法恢复！')){
      console.log(id)
    tableData.forEach((item, index) => {
      if (item.date === id) {
        tableData.splice(index, 1)
        channel.tableData = tableData;
        return; 
      }
    })
  }
}


//编辑商品的内容
const update = (id) => {
  jianshi.value = true
  dialogFormVisible.value = true
  tableData.forEach((item, index) => {
      if (item.date === id) {
       form.value.name = tableData[index].name
       form.value.type = tableData[index].type
       form.value.time = tableData[index].time
       form.value.price = tableData[index].price
       form.value.img = tableData[index].img
       form.value.inventory = tableData[index].inventory
      }
    })
}

//取消商品的内容
const cancel = () =>{
  dialogFormVisible.value = false;
    //清空表单
    form.value.name=''
    form.value.type=''
    form.value.time=''
    form.value.price='￥'+''
    form.value.img=''
    form.value.inventory=null
}
  </script>

💛4.3 商品管理界面的css

 <style scoped>
    .bigbox{
    width: 100%;
    height: 6%;
    font-size: 25px;
    padding-left: 10px;
    padding-top: 10px;
    /* background-color: bisque; */
    }
    .button1{
    margin-left: 900px;
    }
  </style>


<!-- 这些都是上传 -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

💙五. 商品的销量统计界面

💞5.1 商品的销量统计界面的html

<template>
  <div class="bigbox">
    销量信息页面
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="商品编号" width="180" />
    <el-table-column prop="name" label="商品介绍" width="300" />
    <el-table-column prop="price" label="商品价格" width="180" />
    <el-table-column prop="type" label="商品类型" width="180" />



    <el-table-column prop="inventory" label="商品库存" width="180" />
    <el-table-column prop="sold" label="商品销量" width="180" style="color: red !important"></el-table-column>
  </el-table>
</template>

💚5.2 商品的销量统计界面的css

<style scoped>
.bigbox {
  width: 100%;
  height: 6%;
  font-size: 25px;
  padding-left: 10px;
  padding-top: 10px;
  /* background-color: bisque; */
}

.button1 {
  margin-left: 900px;
}
</style>

❤️六. 统计图界面

🌐这是用echars写的表格，都是响应式的，购买一件商品，这里的销量就会+1

💜6.1 统计图界面html

<template>
    <div class="bigbox">
      <span>商品销售额分析</span>
    </div>
    <div class="one">
        <MyBoxsix></MyBoxsix>
      </div>
  </template>

💛 6.2 统计图界面css

<style scoped>
   .bigbox{
    width: 100%;
    height: 6%;
    font-size: 25px;
    padding-left: 10px;
    padding-top: 10px;
    /* background-color: bisque; */
    }
    .one{
      margin-left: 100px;
      margin-top: 50px;
    }
    
</style>

💗七. 商品管理员界面

这里的商品管理员都是mokejs里面的数据，渲染出来的

我对mockjs的理解：💕💕💕

💗

你可以粗略的认为mockjs就是一个服务器，他是一个模仿服务器的虚拟服务，里面放数据，再简单一点方便理解可以说mockjs是一种数据库。前台通过axios获取mockjs里面的数据，然后进行一系列的渲染操作。

💗

❤️ 7.1 商品管理员界面html

子组件：

<template>
  <div class="box">
  <div class="wz">权限:</div><span class="name"></span>
  <div class="wz">用户名ID:</div><span class="username"></span>
  <div class="wz">系统管理ID:</div><span class="id"></span>
  <div class="wz">性别:</div><span class="sex"></span>
  <div class="wz">用户头像:</div><img :src="img" alt="cw" style="width: 300px;height: 300px; background-color: aqua;">

</div>
  </template>

💗7.2 商品管理员界面css

<style scoped>
   
   .box{
    position: relative;
    float: left;
    width: 1000px;
    height: 400px;
    border: 10px solid #ccc;
    border-radius: 10px;
    margin-top: 100px;
    margin-left: 100px;
   }
   .name{
    position: absolute;
    color: red;
    margin-top: -42px;
    margin-left: 394px;
    font-size: 30px;
   }
   .username{
    position: absolute;
    margin-top: -39px;
    margin-left: 396px;
    font-size: 30px;
   }
   .id{
    position: absolute;
    margin-top: -40px;
    margin-left: 396px;
    font-size: 30px;
   }
   .sex{
    position: absolute;
    margin-top: -40px;
    margin-left: 397px;
    font-size: 30px;
   }
   .box img{
    position: absolute;
    margin-top: -301px;
    margin-left: 630px;
   }
   .wz{
    font-size: 30px;
    margin-left: 200px;
    margin-top: 30px;
   }
  </style>

💙八. 结尾总结

以上就是关于Vue3商城管理系统项目的详细教程。如果html5和css3基础比较好的，就不要看下面代码了，通过这个项目，我们初步了解了Vue3的基本概念和使用方法，以及如何用Vue3构建一个简单的商城管理系统。需要注意的是，这个项目只是一个基本的示例，实际应用中还需要根据业务需求进行相应的调整和优化。本项目使用到了Vue Router进行路由管理，使用Pinia进行状态管理，以及使用Axios进行HTTP请求等。可以自己去源码去看看。该有的技术都有。