【vue实战项目】通用管理系统:首页

这篇具有很好参考价值的文章主要介绍了【vue实战项目】通用管理系统:首页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

本文为博主的vue实战小项目系列中的第三篇,很适合后端或者才入门的小伙伴看,一个前端项目从0到1的保姆级教学。前面的内容:

【vue实战项目】通用管理系统:登录页-CSDN博客

【vue实战项目】通用管理系统:封装token操作和网络请求-CSDN博客

【vue实战项目】通用管理系统:api封装、404页-CSDN博客

本文将讲解实现整个项目的重点:首页的搭建,包含菜单、菜单的路由转跳、面包屑导航等内容。

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

目录

1.搭架子

2.布局

​编辑

3.Header

4.Footer

5.Menu

5.1.页面

5.2.路由

5.2.1自定义菜单内容

5.2.2.开启路由功能

6.面包屑导航


1.搭架子

先来看一下主页的样子:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue主页的结构:头部+中间+底部,也就是由header、menu、footer三个组件组成。由于这三个组件是很多页面都要用到的公共组件,所以在components下面建一个common用来放这些公共组件。然后分别建三个组件的架子,先建三个空白的架子吧,后面一点点往这三个组件里填内容。

先把这三个组件写出来,先写三个空白的架子即可,后面再慢慢填充:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

header:

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

footer:

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

menu:

<template>
    <div>
        menu
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

在helloworld组件里面引入一下,看看能不能正常引入:

<template>
  <div class="helloworld">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

能正常引入的话,页面上会显示几个组件的内容:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

然后基于原来的HelloWorld改成Home页面:

<template>
  <div class="home">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
}
</style>

2.布局

准备好三个组件后,接下来就是对Home进行布局,既然用了UI框架,直接用elementUI提供的布局即可,在其官网上有:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

选一个,改一改,然后调整一下样式:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>Main</el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

3.Header

接下来需要调整一下header,根据上面的效果图可以看到,header上面要显示系统的名字和登录用户的用户名。系统名称直接写死,用户名可以用到我们之前封装的setToken.js去取登陆后我们放在缓存中的username作为用户名来显示。

<template>
    <div>
        <el-header>
            <div class="title">通用管理系统</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>

<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>

</style>

系统名称要在最左边,用户名要在最右边,所以调整一下样式:

<template>
    <div class="header">
        <el-header>
            <div class="title">通用管理系统</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>

<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>
    .header{
        .el-header{
            background: #2578b5;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title{
                width:200px;
                font-size: 24px;
            }
        }
    }
</style>

这样Header就处理好了。

4.Footer

footer比较简单,用一个el-card来包裹,加上一些文字内容就可以了。

<template>
    <div class="footer">
        <el-card>Frontend 2023 BugMan</el-card>
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
    
</style>

5.Menu

5.1.页面

菜单组件elementUI也提供了:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

去找一个,然后调整一下即可:

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-col :span="12">
        <h5>自定义颜色</h5>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped></style>

看一下效果图,会发现菜单虽然是引进去了,但是样式很奇怪,所以接下来要做的就是调整菜单样式。

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

有左右和上下的滑动条说明高度和宽度不够,将高度拉到100%,宽度调宽一点即可。背景色不和谐,需要手动调整一下背景色。具体的样式调整后整个menu组件内容如下:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

调整后的效果:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

我们其实用不到那么多一级菜单,只保留一个导航一即可,并且其实我们也不需要elementUI自带的示例里面给出的handleOpen和handleClose方法,所以这里再整理一下页面,最终的内容和效果如下:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

最终调整后的效果:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

5.2.路由

5.2.1自定义菜单内容

菜单最核心的内容自然是点某一项转跳到某一个组件上去。接下来我们要完成的就是菜单的路由转跳。

首先改写一下路由文件:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

在menu中打印一下看能不能取到配置好的index.js的内容:

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
  }
};
</script>

可以看到是有数据的,有数据那就很好办了:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

去遍历菜单把数据取出来,绑定到菜单栏上去即可:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

可以看到已经取到我们配置的导航菜单了:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

会发现还有一个问题,Login、用户中心、404页并不是我们想展示出来的,这里需要给菜单项加上一个是否隐藏的属性,在遍历时去判断该属性从而决定是不是要显示:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            hidden:true,
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})
<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

效果:
【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

把二级菜单一起调整出来:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(child,index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass">{{child.name}}</i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
            .fa{
              margin-right: 10px;
            }
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

5.2.2.开启路由功能

先给meun组件上的elementUI的导航栏开启路由功能,这样点击导航栏,路径才会对应转跳:

<el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

然后在home上给出路由出口:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main><router-view></router-view></el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

可以看到路由可以正常工作了:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

6.面包屑导航

整个首页的架子已经搭好了,也完成了菜单的转跳,但是还差个细节就是面包屑导航栏:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

去elementUI官网上找一个面包屑的导航组件:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

在common下面新建一个面包屑组件,调整一下官网上扣下来的内容,使得其可以取到我们真实菜单的内容:

【vue实战项目】通用管理系统:首页,前端,前端,javascript,开发语言,vue

Home里面引入使用一下即可:文章来源地址https://www.toymoban.com/news/detail-757171.html

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>
          <Breadcrumb/>
          <router-view></router-view>
        </el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
import Breadcrumb from './common/Breadcrumb.vue'
export default {
  components:{
    Footer,
    Menu,
    Header,
    Breadcrumb
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

到了这里,关于【vue实战项目】通用管理系统:首页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】Vue+Element UI案例:通用后台管理系统-面包屑、tag栏

    参考视频: VUE项目,VUE项目实战,vue后台管理系统,前端面试,前端面试项目 案例 链接 【前端】Vue+Element UI案例:通用后台管理系统-导航栏(视频p1-16) https://blog.csdn.net/karshey/article/details/127640658 【前端】Vue+Element UI案例:通用后台管理系统-Header+导航栏折叠(p17-19) http

    2024年02月09日
    浏览(65)
  • VUE通用后台管理系统(四)前端导出文件(CSV、XML、HTML、PDF、EXCEL)

    常见的导出格式:CSV、XML、HTML、PDF、EXCEL 1)准备工作 安装所需相关依赖 前两个是PDF格式需要的依赖,后两个是excel格式所需,如果没有需求这两种格式的可以忽略这一步 然后画页面   页面效果 2)导出CSV格式的文件 新建src/utils/utils.js文件 写入exportCsv方法,columns为表头,

    2024年02月05日
    浏览(55)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)七:工作台界面实现

      本章实现工作台界面相关内容,包括echart框架引入,mock框架引入等,实现工作台界面框架搭建,数据加载。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 基于VUE3+Layui从头搭建通用后台管理系统合集-工作台界面布局实现 echart官网:https

    2024年02月14日
    浏览(63)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)八:自定义组件封装上

      本章实现一些自定义组件的封装,包括数据字典组件的封装、下拉列表组件封装、复选框单选框组件封装、单选框组件封装、文件上传组件封装、级联选择组件封装、富文本组件封装等。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载

    2024年02月12日
    浏览(48)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)二:登录界面及对应功能实现

      本章介绍系统登录界面、登录流程、登录接口等相关内容的开发,实现包括账号密码登录、短信验证登录等不同的登录方式,使用svg-capter生成图形验证码,使用expressjwt实现登录token的生成及验证。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击

    2024年02月11日
    浏览(64)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十六:统计报表模块相关功能实现

      本章使用Echarts及DataV实现常用图表、特殊图表、地图及综合图表等图表展示功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 基于VUE3+Layui从

    2024年02月04日
    浏览(59)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)三:找回密码界面及对应功能实现

      本章实现找回密码功能,包括短信验证码找回、邮箱验证码找回等功能,并通过node-send-email发送邮箱验证码,实现找回密码界面、接口等功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载

    2024年02月12日
    浏览(52)
  • vue项目实战-电商后台管理系统

    该项目为电商后台的管理系统。设计了登录页面。 管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面: 管理页面由五个子模块组成:用户管理,权限管理,商品管理,订单管理,数据统计; 每个子模块有若干子模块组成,用户管理下-用户列表

    2024年02月03日
    浏览(87)
  • vue项目实战-脑图编辑管理系统kitymind百度脑图

    项目为前端vue项目,把kitymind百度脑图整合到前端vue项目中,显示了脑图的绘制,编辑,到处为json,png,text等格式的功能 文章末尾有相关的代码链接,代码只包含前端项目,在原始的项目中也编写了相关的接口,但是原先的后端项目是公司的,不方便公开出来,这里只提供

    2024年02月13日
    浏览(33)
  • 【开源免费】Vue+SpringBoot打造图书管理系统,初学者入门实战项目

    作者主页 :Designer 小郑 作者简介 :3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型,CSDN博客专家,阿里云社区专家博主,蓝桥云课讲师。 文末获取源码,项目编号: S 066 。 color{red}{文末获取源码,项目编号:S066。} 文末获取源码,项目编

    2024年02月10日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包