论坛 › SQL-Server › vue3+elementPlus之背景管理体系（从0到1）(day4-完结)

十念 发表于 2025-1-26 05:00:40

vue3+elementPlus之背景管理体系（从0到1）(day4-完结)

面包屑

https://i-blog.csdnimg.cn/direct/e34d93ea4d2d42f6bbf3b2d2f75a345f.png
创建一个面包屑组件
将路由导入然后格式化map对象 key-value
将当前路由的key和value获取然后存入list数组中
遍历list数据，渲染内容
<!--BreadcrumbCom.vue-->
<template>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">{

{ item.label }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
import { routes } from '@/router';
export default{
    data(){
      //用来记录所有路由对应的label
      this.routesMap = new Map()
      //用来将路由处理成map
      this.initRoutesMap(routes)
      return{
            list:[],
      }
      

    },
    mounted(){

    },
    methods:{
      initRoutesMap(routes){
            routes.forEach(route => {
                this.routesMap.set(route.name, route.label)
                //如果有子路由
                if(route.children){
                  this.initRoutesMap(route.children)
                }
            });
      }
    },
    watch:{
      $route:{
            immediate:true,
            handler(route){
                //处理路径
                this.list = route.matched.map(item=>{
                  return {
                        name:item.name,
                        label:this.routesMap.get(item.name)
                  }
                })
            }
      }
    }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
    margin-bottom: 20px;
}
</style> 动态菜单

在store/index.js中创建全局变量记录当前路由路径，并创建修改方法
//记录当前路由路径
currentPath:'/'


//修改路由路径的方法
updateCurrentPath(state, value){
state.currentPath = value
} 在AsideCom.vue中加载菜单
<template>
    <el-menu default-active="currentPath" :collapse="collapse" router class="el-menu-vertical-demo">
      <el-menu-item index="/">首页</el-menu-item>

      <el-sub-menu v-for="item in userInfo.checkedkeys" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
            <Avatar />
            </el-icon>
            <span>{

{ item.label }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{

{ child.label }}</el-menu-item>
      </el-sub-menu>

      <!-- <el-sub-menu index="/manager">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>账号管理</span>
          </template>
          <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
          <el-menu-item index="/manager/userlist">用户列表</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/banner">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>轮播图管理</span>
          </template>
          <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
          <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
      </el-sub-menu>   -->
      </el-menu>
</template>

<script>
import { Avatar } from '@element-plus/icons-vue';
import { mapState } from 'vuex';

export default{
    data(){
      return{

      }
    },
    computed:{
      ...mapState(['currentPath','userInfo'])
    },
    components:{
      Avatar,
    },

    props:['collapse']

}
</script> 轮播图管理

https://i-blog.csdnimg.cn/direct/9cd2304f57f94dc09aa941422114462a.png
获取轮播图数据
//导入封装的axios
import ajax from "@/utils/axios";

//获取轮播图列表
export function bannerList(){
    return ajax({
      method:'GET',
      url:'banner/list'
    })
}

//添加轮播图
export function addBanner(params){
    return ajax({
      method:'POST',
      url:'banner/add',
      data:params
    })
} 创建轮播图页面
<!--BannerListView.vue-->
<template>
    <div>
      <el-table :data="bannerList" >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="img" label="图片">
                <template #default="scope">
                  <div style="display: flex;align-items: center;">
                        <el-image :src="scope.row.img"></el-image>
                  </div>
                </template>
            </el-table-column>
            <el-table-column prop="alt" label="提示信息"></el-table-column>
            <el-table-column prop="link" label="链接"></el-table-column>
      </el-table>
    </div>
   
</template>

<script>
import { bannerList } from '@/api/banner';

export default{
    data(){
      return {
            bannerList:[]
      }
    },
    mounted(){
      bannerList().then(res=>{
            this.bannerList=res.data
      })
    }
}
</script>

<style lang="scss" scoped>
.el-image{
    width: 80px;
}
</style> 添加轮播图
https://i-blog.csdnimg.cn/direct/d187327e83144cbbb022e342772e573b.png
<!--AddBannerView.vue-->
<template>
    <div>
      <el-form>
            <el-form-item label="请输入alt">
                <el-input v-model="formData.alt" placeholder="请输入alt"/>
            </el-form-item>

            <el-form-item label="请输入link">
                <el-input v-model="formData.link" placeholder="请输入link"/>
            </el-form-item>

            <el-form-item>
                <el-upload
                  class="avatar-uploader"
                  :http-request="httpRequest"
                  :show-file-list="false"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-button @click="addBanner" type="primary">添加</el-button>
      </el-form>
    </div>
</template>

<script>
import { addBanner } from '@/api/banner';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

export default{
    data(){
      return {
            imageUrl:'',
            formData:{
                alt:'',
                link:'',
                img:''
            }
      }
    },
    components:{
      Plus
    },
    methods:{
      httpRequest(data){
            //根据文件生成一个url地址，该地址用于临时展示的
            //this.imageUrl = URL.createObjectURL(data.file)

            //1、获取用户选择的图片
            //2、将图片上传到存放图片的服务器，该服务器会返给图片地址
            //3、将图片地址发送给后端存储

            //创建一个文件加载器
            let reader = new FileReader()
            //指定其加载开始加载文件
            reader.readAsDataURL(data.file)
            //加载完成后的回调函数
            reader.onload=()=>{
                this.imageUrl = reader.result;   //图片的base64
                this.formData.img = reader.result;
            }
      },
      addBanner(){
            addBanner(this.formData).then(res=>{
                if(res.code=='200'){
                  ElMessage.success(res.message)
                  //提交成功后进入轮播图列表查看
                  this.$router.push('/banner/bannerlist')
                }else{
                  ElMessage.error(res.message)
                }
            })
      }
    }
}

</script>
<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>

<style lang="scss" scoped>
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
图表管理echarts

官网：Apache ECharts
安装echarts
npm install echarts 导入图表
将图表绑定在指定元素上
设置一个option
<template>
    <div>
      <el-button @click="changeType('line')">折线图</el-button>
      <el-button @click="changeType('bar')" type="primary">柱状图</el-button>
      <el-button @click="changeType('pie')" type="success">饼图</el-button>
      <el-button @click="changeType('scatter')" type="info">散点图</el-button>

      <el-button @click="changeType('line',['冰箱','空调','电视机','电磁炉'],['100','180','200','160'])" type="warning">电器销量</el-button>
      <el-button @click="changeType('bar',['草莓','香蕉','西瓜','樱桃','甘蔗','橘子','橙子'],['200','111','222','333','210','123','20'])" type="danger">水果销量</el-button>
    </div>
    <div id="main">

    </div>
</template>

<script>
import * as echarts from 'echarts';

export default{
    data(){
      return {
            mychart: null
      }
    },
    methods:{
      changeType(type,x,y){
            // 绘制图表
            this.myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            toolbox: {
                feature: {
                  saveAsImage: {}
                }
            },
            xAxis: {
                data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                name: '销量',
                type: type||'bar',
                data: y ||
                }
            ]
            });
      }
    },
    mounted(){
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('main'));
      this.changeType('bar')
    }
}

</script>

<style lang="scss" scoped>
#main{
    height: 600px;
    background-color: white;
}
</style> 文件导入 excel

安装
npm install xlsx 选择文件
将文件读成数据流
将数据流读为对象
将对象中的工作表内容读取出来
将读取的内容转为json
数据渲染
<template>
    <div>
      <el-button type="success" @click="importClick">选择文件</el-button>

      <input ref="inp" hidden type="file" @change="importChange"/>

      <el-table :data="computedTableData" >
            <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <el-table-column label="性别">
                <template #default="scope">
                  <span>{

{ scope.row.sex == -1?'女':'男' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="联系电话"></el-table-column>
      </el-table>

      <!-- 分页显示 -->
      <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
    </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default{
    data(){
      return {
            userList:[],
            currentPage: 1
      }
    },
    methods:{
      importClick(){
            //选择文件按钮的点击事件
            this.$refs.inp.click()
      },
      importChange(event){
            //选中文件后的回调函数
            //console.log(event.target.files)
            //获取选中的文件
            const file = event.target.files;
            //创建文件的加载器
            const reader = new FileReader();
            //将文件读取成数据流
            reader.readAsBinaryString(file);
            reader.onload = () => {
                //将文件转换成js对象
                const boxx = XLSX.read(reader.result,{type:'binary'})
                //将工作表1中的数据提取出来
                let res = boxx.Sheets['工作表1'];
                //将工作表1中的数据转换成json
                res = XLSX.utils.sheet_to_json(res);
                this.userList = res;
            }
      }
    },
    mounted(){

    },
    computed:{
      //计算当前页显示的数据
      computedTableData(){
            return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
      }
    }
}
</script> 文件导出 excel

利用文档：js-export-excel - npm
安装
npm install js-export-excel 1、导入利用函数
2、创建导出对象
3、界说导出内容
4、实现具体导出
<template>
    <div>
      <!-- 文件导出有两种方式：
            1）直接使用a标签 -->
      <!-- <a href="https://code.jquery.com/jquery-3.6.2.min.js" download=""></a> -->
            <!-- 2）自己将数据处理后本地保存 -->
            <el-button @click="exportClick">文件导出</el-button>
            <el-table :data="computedTableData" >
            <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <el-table-column label="性别">
                <template #default="scope">
                  <span>{

{ scope.row.sex == -1?'女':'男' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="联系电话"></el-table-column>
      </el-table>

      <!-- 分页显示 -->
      <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
    </div>
</template>

<script>
import { userList } from '@/api/user';
//1、导入使用函数
import ExportJsonExcel from 'js-export-excel';
export default{
    data(){
      return {
            userList:[],
            currentPage: 1
      }
    },
    mounted(){
      userList().then(res=>{
            this.userList = res.data;
      })
    },
    methods:{
      exportClick(){
            //2、创建导出对象
            let option= {}
            //导出文件名字
            option.fileName = 'userList'
            //导出内容
            option.datas = [
                {
                  //需要导出的数据
                  sheetData:this.userList,
                  //工作表名称
                  sheetName: "工作表1",
                  sheetFilter: ["nickname", "sex", "tel"],
                  sheetHeader: ["昵称", "性别", "联系电话"],
                  columnWidths: ,
                }
            ];
            
            //实现具体导出
            var toExcel = new ExportJsonExcel(option); //new
            toExcel.saveExcel(); //保存
      }
    },
    computed:{
      //计算当前页显示的数据
      computedTableData(){
            return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
      }
    }
}
</script> 富文本编辑器

https://i-blog.csdnimg.cn/direct/42e3fa370eb840878fe1f955d212d29c.png
官方文档：TinyMCE 7 Documentation | TinyMCE Documentation
安装：
npm install @tinymce/tinymce-vue tinymce
或npm install --save tinymce "@tinymce/tinymce-vue@^5" 利用，需要申请api-key
<template>
    <div>
      <Editor></Editor>
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default{
    data(){
      return {

      }
    },
    mounted(){
      
    },
    components:{
      Editor,
    }
}

</script>

<style lang="scss" scoped>

</style>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: vue3+elementPlus之背景管理体系（从0到1）(day4-完结)