从0开始搭建vue2管理后台基础模板

news2024/9/21 14:23:09

网站主要完成：侧边菜单栏、页面标签卡、内容栏
源代码gitee地址：https://gitee.com/zhao_liangliang1997/navigation-bar

一、起步

1、创建vue项目

vue create 项目名

2、引入element

3、其他安装

1、首先需要安装如下

cnpm install vuex
cnpm install vue-router
cnpm install sass
cnpm install sass-loader
cnpm install node -sass

2、main.js中引入相关

引入后，可能会报错，请别急，继续往下走。

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入基础样式[下面给链接复制style.scss以及variables.scss]
import './assets/scss/style.scss';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

3、改造App.vue

<template>
  <div id="app">
      <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style lang="scss">
#app {
    height: 100vh;
}
</style>

完成侧边栏的项目结构，如下图：

在这里插入图片描述

相关链接

1、style.scss；
2、variables.scss

4、配置路由[router下的index.js]

配置如下路由后，下一步您需要对layout进行页面设计【第一步侧边菜单栏】

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path: '/',
            hidden: true,
            component: () =>
                import ('@/page/layout'),
            children: [
                {
                    path: 'index',
                    component: () =>
                        import ('@/page/index'),
                    hidden: true
                }
            ]
        },
    ]
})
export default router

二、侧边菜单栏的设计

1、封装菜单组件navMenu.vue

<template>
    <div>
        <template v-for="(item, index) in userNav">
            <el-menu-item :index="item.path" v-if="!item.hidden && !item.children">
                {{ item.name }}
            </el-menu-item>
            <el-submenu :index="item.path" v-if="!item.hidden && item.children">
                <template slot="title">{{ item.name }}</template>
                <nav-menu :user-nav="item.children"/>
            </el-submenu>
        </template>
    </div>
</template>
<script>
export default {
    name: "navMenu",
    props: {
        userNav: {
            type: Array,
            default: []
        }
    }
}
</script>

2、layout中实现侧边栏
思路: ①首先画出侧边栏；②路由信息存放vuex中；③vuex中的路由从路由js中获取

<template>
    <el-container>
        <el-aside width="20vh" class="aside">
            <div class="logo_box pr">
                <span class="fl w_100 tc f20 text-white w_h_center pl20 pr20">测试服务平台</span>
            </div>
            <el-menu :default-active="activeIndex"
                     class="el-menu-vertical-demo"
                     style="flex: 1; overflow: auto; width: 100%; overflow-x: hidden"
                     background-color="#6187F7"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     unique-opened
                     @select="handleSelect">
                <template v-for="(item, index) in userNav">
                    <el-menu-item :key="index" :index="item.path" v-if="!item.hidden && !item.children">
                        {{ item.name }}
                    </el-menu-item>
                    <el-submenu :key="index" :index="item.path" v-if="!item.hidden && item.children">
                        <template slot="title">{{ item.name }}</template>
                        <nav-menu :user-nav="item.children"/>
                    </el-submenu>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import NavMenu from '@/page/navMenu/navMenu'
import {mapState, mapMutations} from 'vuex'
export default {
    name: "VueLayout",
    components: {
        NavMenu
    },
    data() {
        return {
            url: '',
            activeIndex:'/'
        }
    },
    created() {
        // 获取菜单权限 [因此刻未配动态路由,所以在此处调用]
        this.setMenu()
    },
    computed: {
        ...mapState(['userNav'])
    },
    methods: {
        ...mapMutations(['setMenu']),
        handleSelect: function (key) {
            let path = this.$route.path
            if (path !== key) {
                if (key === '/' && path === '/index') {
                    return
                }
                this.$router.push(key)
            }
        },
    }
}
</script>

<style less scoped>
/deep/ .el-tabs__header {
    margin: 0;
}
.aside {
    background-color: #6187F7;
    display: flex;
    flex-direction: column;
}
.logo_box {
    height: 60px;
    border-bottom: 1px solid white;
}
</style>

3、vuex

//1.引入Vue
import Vue from 'vue';
import Vuex from 'vuex';
import view from '@/router/baseView';
import router from '@/router/index'
import dynamicView from "@/router/dynamicView";
//2.安装
Vue.use(Vuex);
const store = new Vuex.Store({
    //存储状态
    state:{
        userNav: [],    // 导航栏路由, 默认未登录，展示静态路由
        activeIndex: '/',
        tagMap: new Map(),
    },
    // Vuex中的Store状态（state）更新的唯一方式：提交Mutation
    mutations:{//定义mutations
        // 定义改变全局共享数据的方法
        setMenu(state) {
            let baseView = Object.assign([], view) // 初始化导航栏
            // 根据菜单权限获取菜单
            let nav = getNav(dynamicView)
            nav.forEach(item => {
                baseView.push(item)
            })
            state.userNav = baseView
        },
    }
})
//导出
export default store

function getNav(navs) {
    let list = []
    navs.forEach(nav => {
        let obj = {}
        obj.path = nav.path
        obj.name = nav.name
        obj.icon = nav.icon
        obj.isPage = nav.isPage
        if (nav.isPage) {
            obj.component = () => import ('@/views' + nav.path)
        }
        if (nav.children) {
            obj.children = getNav(nav.children)
        }
        list.push(obj)
    })
    return list
}

三、页面标签卡

1、头部、内容栏及页面标签卡

页面标签卡：标签卡为外部引入组件【代码请到Gitee查看】

在这里插入图片描述

2、注意事项：

1、tag改变方法【activeIndex从vuex引入】
2、tag标签页根据路由创建【navClick从vuex引入】
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、最终效果

在这里插入图片描述

4、后续相关token

1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
3.验证成功后，服务端会签发一个 token 并把这个 token 发送给客户端
4.客户端收到 token 以后，会把它存储起来，比如放在 cookie 里或者 localStorage 里
5.客户端每次向服务端请求资源的时候需要带着服务端签发的 token
6.服务端收到请求，然后去验证客户端请求里面带着的 token ，如果验证成功，就向客户端返回请求的数据

  • 每一次请求都需要携带 token，需要把 token 放到 HTTP 的 Header 里

  • 基于 token 的用户认证是一种服务端无状态的认证方式，服务端不用存放 token 数据。用解析 token 的计算时间换取 session 的存储空间，从而减轻服务器的压力，减少频繁的查询数据库

  • token 完全由应用管理，所以它可以避开同源策略

  • 什么是同源策略？
    同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。其目的是防止某个文档或脚本从多个不同源装载。 这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

  • 为什么要有同源限制？
    我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了

5、permission.js

在登陆这个流程中，permission.js这个是很最重要的一环，是路由的全局钩子（beforeEach和afterEach），全局钩子就是每次跳转的时候可以根据情况进行拦截，不让它进行跳转。使用场景最常见的就是有些页面需要用户登陆之后才能访问，就可以在beforeEach中校验用户是否登陆来进行相对应的拦截处理。

6、相关学习博客推荐：

vue-element-admin 登陆

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/61667.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DockerCompose安装、使用 及 微服务部署实操

DockerCompose安装、使用 及 微服务部署实操

1 什么是DockerCompose DockerCompose是基于Compose文件帮助我们快速的部署分布式应用。 解决容器需手动一个个创建和运行的问题&#xff01; DockerCompose本质上也是一个文本文件&#xff0c;其通过指令定义集群中的每个容器如何运行。我们可以将其看做是将多个docker run…
阅读更多...
Ansible 自动化运维工具的使用

Ansible 自动化运维工具的使用

目录 一、Ansible简介 二、Ansible 的安装和使用 1.下载 2.使用 三、Ansible命令和模块 1.命令格式 2.命令行模块 &#xff08;1&#xff09;command 模块 &#xff08;2&#xff09;shell 模块 &#xff08;3&#xff09;cron 模块 &#xff08;4&#xff09;user …
阅读更多...
多线程 3

多线程 3

多线程 3 : 文章目录1.线程安全2. 产生线程安全的原因3. synchronized - 加锁操作4.可重入5.死锁问题6. volatile 关键字7.wait 和 notify1.线程安全 为啥会出现线程安全 &#xff1f;   罪魁祸首&#xff0c;还是多线程的抢占式执行&#xff0c; 正因为抢占式执行&#xff0c…
阅读更多...
Java项目：SSM场地预订管理系统

Java项目：SSM场地预订管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 用户角色包含以下功能&#xff1a; 按分类查看场…
阅读更多...
【车载开发系列】UDS诊断---通信控制（$0x28）

【车载开发系列】UDS诊断---通信控制（$0x28）

【车载开发系列】UDS诊断—通信控制&#xff08;$0x28&#xff09; UDS诊断---通信控制&#xff08;$0x28&#xff09;【车载开发系列】UDS诊断---通信控制&#xff08;$0x28&#xff09;一.概念定义二.实现原理三.应用场景四.子功能五.报文格式1&#xff09;请求报文2&#xf…
阅读更多...
自动导入指定文件夹内的文献到 Endnote 中

自动导入指定文件夹内的文献到 Endnote 中

简介 最近正着手写一篇综述文章&#xff0c;来整体把握下自己研究领域的历史、方法、最新进展与趋势。由于需要对相关文献进行搜集、阅读和分类。庄小编使用 EndNote 来进行管理文献。 在使用较长时间后&#xff0c;整理了几个超级好用的小技巧。比如&#xff1a;自动导入指定…
阅读更多...
pikachu靶场-upload-速通

pikachu靶场-upload-速通

upload-速通client checkMIME typegetimagesizeclient check 最简单的&#xff0c;先上传一张含有一句话木马的图片&#xff0c;抓包修改图片后缀为php&#xff0c;放包发送就行 访问并确认该上传文件是否以php形式解析 蚁剑直连&#xff1a; MIME type 后端php检查上传文…
阅读更多...
基于MSER的高速公路交通标志提取matlab仿真

基于MSER的高速公路交通标志提取matlab仿真

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 自然场景下的文本检测是自然场景图像信息提取的基础,在车牌识别、实时翻译、图像检索等领域具有广泛的应用价值及研究意义。基于连通区域的方法是自然场景文本检测中最为常见的方法,其中最大稳定…
阅读更多...
[附源码]Python计算机毕业设计SSM街舞公司管理系统（程序+LW)

[附源码]Python计算机毕业设计SSM街舞公司管理系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
Java Script 内置对象（三） --------- Array 对象

Java Script 内置对象（三） --------- Array 对象

判断是否为数组有两种方式&#xff0c;instanceof 和 Array.isArray( 参数 )&#xff0c;两者判断方法均为如果是数组则返回 true&#xff0c;不是数组则返回 **false&#xff0c;**其中第二个方法为H5新增加的方法 var arr[]; var obj{}; console.log(arr instanceof Arra…
阅读更多...
微服务入门案例

微服务入门案例

boot与cloud版本 springboot:提供了快速开发微服务的能力 springcloud提供了微服务治理的能力&#xff08;服务注册与发现、服务降级、限流、熔断、网关、负载均衡、配置中心...&#xff09;&#xff0c;为微服务开发提供了全家桶服务 springboot的版本查看地址&#xff1a;Spr…
阅读更多...
云原生之Docker简介和环境准备

云原生之Docker简介和环境准备

Docker简介一、主机环境二、Docker 安装三、Docker简介3.1、Docker解决的问题3.2、Docker技术边界3.3、Docker带来的改变3.4、Docker和虚拟机的区别3.5、Docker 架构图3.6、直观感受client请求server总结后言一、主机环境 &#xff08;1&#xff09;ubuntu-20.04.4-live-serve…
阅读更多...
【torch.utils.data】 Dataset和Dataloader的解读和使用

【torch.utils.data】 Dataset和Dataloader的解读和使用

文章目录torch.utils.data前言DatasetDataloader实践参考torch.utils.data 前言 Pytorch中的 torch.utils.data 提供了两个抽象类&#xff1a;Dataset 和 Dataloader。Dataset 允许你自定义自己的数据集&#xff0c;用来存储样本及其对应的标签。而 Dataloader 则是在 Datase…
阅读更多...
LTspice XVII ＞ Transformer 变压器仿真

LTspice XVII ＞ Transformer 变压器仿真

目录 第①步设置 第②步设置 第③步设置 第④步设置 输出结果 最近在看“无线电基础电路实作修订版 [&#xff08;美&#xff09;西尔弗 著] 2014年版”这本书&#xff0c;打算好好修炼下无线电方面的基础知识&#xff0c;让自己更加牛逼一些&#xff0c;工作中偶尔可以装…
阅读更多...
指标与标签的区别？

指标与标签的区别？

概述 在公司数据建设过程中&#xff0c;经常会使用和提到指标和标签&#xff0c;但是很多小伙伴对于两者的区别确不能讲清楚。实际上标签与指标一样&#xff0c;是理解数据的两种方式&#xff0c;在赋能业务上&#xff0c;两者同样重要。接下来将结合自身的理解&#xff0c;从…
阅读更多...
Java项目：SSM共享汽车租赁平台

Java项目：SSM共享汽车租赁平台

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录…
阅读更多...
ElementUI组件-日期时间控件设置禁用日期

ElementUI组件-日期时间控件设置禁用日期

ElementUI组件-日期时间控件禁用指定日期 主要属性 查看官网&#xff0c;可以看到有个叫做picker-options的组件属性&#xff0c;没错&#xff0c;就是借助他来完成禁用指定日期的操作&#xff0c;如下 该属性值传入的是一个对象&#xff0c;对于时间选择器、日期选择器、日…
阅读更多...
[阶段4 企业开发进阶] 3. 消息队列--RabbitMQ

[阶段4 企业开发进阶] 3. 消息队列--RabbitMQ

文章目录1 消息队列1.1 MQ的概念基本介绍使用原因MQ分类如何选择1.2 RabbitMQRabbitMQ核心工作原理安装教程1 消息队列 1.1 MQ的概念 基本介绍 MQ本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已是一种跨进程的通信机制&#xff0…
阅读更多...
[附源码]计算机毕业设计校刊投稿系统Springboot程序

[附源码]计算机毕业设计校刊投稿系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
Py之removebg：removebg的简介、安装、使用方法之详细攻略

Py之removebg：removebg的简介、安装、使用方法之详细攻略

Py之removebg&#xff1a;removebg的简介、安装、使用方法之详细攻略 目录 removebg的简介 1、官网注册获取APIKey removebg的安装 removebg的使用方法 1、直接调用并实现抠图 2、更多案例 removebg的简介 Remove Image Background&#xff0c;是一款不用PS就完成抠图的强…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023