当前位置: 首页 > news >正文

Vue Web开发(二)

1. 项目搭建

1.1. 首页架子搭建

  使用Element ui中的Container布局容器,选择倒数第二个样式,将代码复制到Home.vue。
在这里插入图片描述

1.1.1.下载less

  (1)下载less样式
npm i less
在这里插入图片描述
  (2)下载less编辑解析器
npm i less-loader@5.0.0
在这里插入图片描述
  在项目package.文件中可以看到下载包
在这里插入图片描述

1.1.2. 界面开发

  界面
在这里插入图片描述
(1)按需引入组件

//main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//ElementUI全局引入
// import ElementUI from 'element-ui';
// Vue.use(ElementUI)
//ElementUI按需引入
import {Button,Container,Aside,Header,Main} from 'element-ui';
Vue.use(Button)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
import router from '../router/router.js';
Vue.config.productionTip = false
new Vue({router,render: h => h(App),
}).$mount('#app')

在这里插入图片描述
(2)界面搭建

//view/home.vue
<template><el-container style="height: 100%;"><el-aside width="auto">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container>
</template>
<script>export default {name: 'Home',data() {return {}}}
</script>
<style lang="less">.el-header {background-color: black;}.el-main {padding-top: 0px;}
</style>

在这里插入图片描述

1.2. 左侧导航栏实现

  本质上这个模块应该是在Home.vue的Aside标签内,这个模块每个页面都会用到,所以我们把它新建成一个公共模块,所以我们在components文件下新建CommonAside.vue文件,components会存放所有组件。
  左侧导航栏逻辑如图所示,有一级菜单、二级菜单。这里我们使用Element ui的NavMenu导航菜单组件的折叠组件。
在这里插入图片描述
在这里插入图片描述
  (1)新建components/CommonAside.vue文件,引入现成组件,复制代码至CommonAside.vue文件,还有style、script代码。

//components/CommonAside.vue
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><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"><span slot="title">选项4</span><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>
</template>
<script>export default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style>

在这里插入图片描述
在这里插入图片描述
  (2)在CommonAside.vue文件中新建template标签,将元素标签放入,style、script代码在template标签外面。根据外面的逻辑图删除一些不必要的元素。

//components/CommonAside.vue
<template><el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose":collapse="isCollapse"><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item></el-menu>
</template><script>export default {data() {return {isCollapse: false};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style>

在这里插入图片描述
  (3)menu数据:在data()return中定义menu,将数据放入menu,并且将isCollapse属性设置为false!!!,表示图标展开。

[{path: "/",name: "home",label: "首页",icon: "s-home",url: "Home/Home",},{path: "/mail",name: "mail",label: "商品管理",icon: "video-play",url: "MailManage/MailManage",},{path: "/user",name: "user",label: "用户管理",icon: "user",url: "UserManage/UserManage",},{label: "其他",icon: "location",children: [{path: "/page1",name: "page1",label: "页面1",icon: "setting",url: "Other/PageOne",},{path: "/page2",name: "page2",label: "页面2",icon: "setting",url: "Other/PageTwo",}],},]
//components/CommonAside.vue
<template><el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose":collapse="isCollapse"><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item></el-menu>
</template><script>export default {data() {return {isCollapse: false,menu: [{path: "/",name: "home",label: "首页",icon: "s-home",url: "Home/Home",},{path: "/mail",name: "mail",label: "商品管理",icon: "video-play",url: "MailManage/MailManage",},{path: "/user",name: "user",label: "用户管理",icon: "user",url: "UserManage/UserManage",},{label: "其他",icon: "location",children: [{path: "/page1",name: "page1",label: "页面1",icon: "setting",url: "Other/PageOne",},{path: "/page2",name: "page2",label: "页面2",icon: "setting",url: "Other/PageTwo",}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script><style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style>

  在CommonAside.vue中,这里主要是处理数据,使用computed计算属性,两个属性,noChildren和hasChildren,需要对数据源进行过滤。过滤使用filter方法,filter里面有一个函数,判断是否有子项目,这样可以拿到noChildren和hasChildren两个数组。主要是为了区分一二级菜单的渲染。

//计算属性
computed:{noChildren(){return this.menu.filter(item => !item.children)},hasChildren(){return this.menu.filter(item => item.children)}}

1.2.1. 一级菜单渲染

  一级菜单,进行页面渲染,更改前面的代码。遍历有v-for,使用遍历需要加上key,使用路径作为唯一标识。图标原本是,这里我们用字符串拼接,因为数据中有icon对象,双花括号渲染数据,数据有多少条就渲染多少条,一级菜单一个有四个,分别是首页、商品管理、用户管其他。

<!-- 一级菜单,:=v-bind: --><el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"><i :class="'el-icon-'+item.icon"></i><span slot="title">{{item.label}}</span></el-menu-item>
//components/CommonAside.vue
<template><el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose":collapse="isCollapse"><!-- 一级菜单,:=v-bind: --><el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"><i :class="'el-icon-'+item.icon"></i><span slot="title">{{item.label}}</span></el-menu-item><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item></el-menu>
</template><script>export default {data() {return {isCollapse: false,menu: [{path: "/",name: "home",label: "首页",icon: "s-home",url: "Home/Home",},{path: "/mail",name: "mail",label: "商品管理",icon: "video-play",url: "MailManage/MailManage",},{path: "/user",name: "user",label: "用户管理",icon: "user",url: "UserManage/UserManage",},{label: "其他",icon: "location",children: [{path: "/page1",name: "page1",label: "页面1",icon: "setting",url: "Other/PageOne",},{path: "/page2",name: "page2",label: "页面2",icon: "setting",url: "Other/PageTwo",}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},//计算属性computed: {//没有子菜单noChildren() {return this.menu.filter(item => !item.children)},//有子菜单hasChildren() {return this.menu.filter(item => item.children)}}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style>

在这里插入图片描述

1.2.2. 二级菜单渲染

   更改CommonAside.vue文件,item可以拿到数据。
   添加

通用后台管理系统

标签

<!-- 二级菜单 --><el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path"><template slot="title"><i :class="'el-icon'+item.icon"></i><span slot="title">{{item.label}}</span></template><!-- 这里subItem和subIndex并没有实际意义,只是用来指代item.children的多个数组,两者甚至可以互换,只新定义一个也可以的,:index后面有没有.path都可以运行成功 --><el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path"><el-menu-item :index="subIndex.path">{{subItem.label}}</el-menu-item></el-menu-item-group></el-submenu>
//components/CommonAside.vue
<template><el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose":collapse="isCollapse"><h3>通用后台管理系统</h3><!-- 一级菜单,:=v-bind: --><el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"><i :class="'el-icon-'+item.icon"></i><span slot="title">{{item.label}}</span></el-menu-item><!-- 二级菜单 --><el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path"><template slot="title"><i :class="'el-icon'+item.icon"></i><span slot="title">{{item.label}}</span></template><!-- 这里subItem和subIndex并没有实际意义,只是用来指代item.children的多个数组,两者甚至可以互换,只新定义一个也可以的,:index后面有没有.path都可以运行成功 --><el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path"><el-menu-item :index="subIndex.path">{{subItem.label}}</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item></el-menu>
</template><script>export default {data() {return {isCollapse: false,menu: [{path: "/",name: "home",label: "首页",icon: "s-home",url: "Home/Home",},{path: "/mail",name: "mail",label: "商品管理",icon: "video-play",url: "MailManage/MailManage",},{path: "/user",name: "user",label: "用户管理",icon: "user",url: "UserManage/UserManage",},{label: "其他",icon: "location",children: [{path: "/page1",name: "page1",label: "页面1",icon: "setting",url: "Other/PageOne",},{path: "/page2",name: "page2",label: "页面2",icon: "setting",url: "Other/PageTwo",}],},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},//计算属性computed: {//没有子菜单noChildren() {return this.menu.filter(item => !item.children)},//有子菜单hasChildren() {return this.menu.filter(item => item.children)}}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
</style>

在这里插入图片描述
  源码下载

相关文章:

Vue Web开发(二)

1. 项目搭建 1.1. 首页架子搭建 使用Element ui中的Container布局容器&#xff0c;选择倒数第二个样式&#xff0c;将代码复制到Home.vue。 1.1.1.下载less &#xff08;1&#xff09;下载less样式 npm i less   &#xff08;2&#xff09;下载less编辑解析器 npm i less…...

Linux-实用操作

文章目录 一. 各类实用小技巧(快捷键)1. ctrl c 强制停止2. ctrl d 退出登出3. history 查看历史命令4. !命令前缀&#xff0c;自动匹配上一个命令5. ctrl r&#xff0c;搜索历史命令6. ctrl a | e&#xff0c;光标移动到命令开始或结束7. ctrl ← | →&#xff0c;左右跳…...

Elasticsearch:使用 Elastic APM 监控 Android 应用程序

一、前言 人们通过私人和专业的移动应用程序在智能手机上处理越来越多的事情。 拥有成千上万甚至数百万的用户&#xff0c;确保出色的性能和可靠性是移动应用程序和相关后端服务的提供商和运营商面临的主要挑战。 了解移动应用程序的行为、崩溃的发生和类型、响应时间慢的根本…...

Go的简单问题问答

基础问题回答 Go 的主要特点是什么&#xff1f; 简洁&#xff1a;语法简化&#xff0c;减少复杂性。并发&#xff1a;内置 Goroutine 和 Channel&#xff0c;支持轻量级并发。静态类型&#xff1a;强类型语言&#xff0c;编译时检查错误。跨平台&#xff1a;编译生成独立的二进…...

【攻防实验】溯源与取证分析实验

溯源与取证分析实验 溯源取证分析作为网络攻防过程中重要环节&#xff0c;准确找到攻击者的入侵线索(尤其是攻击突破口、攻击IP地址、域名、工具等信息)&#xff0c;对于企业或者团队安全运营团队来说都是必备技能。常规攻击取证过程中往往会结合流量、Web访问日志、终端系统或…...

THREE.js 入门(一)xyz坐标系

一、坐标系概念 在 three.js 中&#xff0c;相机的默认朝向是沿着 Z 轴的负方向。也就是说&#xff0c;默认情况下&#xff0c;相机会沿着 Z 轴的负方向“看”到场景中的对象&#xff0c;而 X 轴和 Y 轴分别对应水平方向和垂直方向。换句话说&#xff0c;相机的默认位置是 (0,…...

AUTOSAR CP中基于通信模块(COM)的Transformer-R24的规范导读

该文档是关于 AUTOSAR CP中基于通信模块&#xff08;COM&#xff09;的Transformer的规范说明&#xff0c;主要内容包括引言、相关文档、约束与假设、功能规范、API 规范、配置规范等&#xff0c;旨在为汽车电子系统开发中基于 COM 的Transformer提供全面的技术规范和指导。 一…...

ubuntu20.04安装anygrasp_sdk

ubuntu20.04安装anygrasp_sdk采坑记录 安装ME的教程看上一篇,现在来看anygrasp安装问题grasp_detection、grasp_trackinglicense申请demo文件的运行注意的地方到这以为大功告成了,然后出现了一个numpy版本不匹配问题最后还有一个问题就是修改demo.sh,不然没法可视化结果展示安…...

Spring完整知识点二

Spring注解开发 Spring是轻代码而重配置的框架&#xff0c;配置比较繁重&#xff0c;影响开发效率&#xff0c;所以注解开发是一种趋势&#xff0c;它能够代替xml配置文件&#xff0c;可以简化配置&#xff0c;提高开发效率Spring注解根据出现时间分类 Spring原始注解&#xf…...

GESP三级集训——课堂笔记(部分)

进制转换&#xff08;二进制、十进制、八进制、十六进制等&#xff09; 十进制&#xff08;逢十进一&#xff09;——Decimal 十进制是我们生活中最常见的进制&#xff0c;如“1”“23”“891”等&#xff1a; 进位过程如下&#xff1a;{1,2,3,4,5,6,7,8,9}{10,11,12,13,14,…...

Spring Boot接口返回统一格式

统一的标准数据格式好处 SpringBoot返回统一的标准数据格式主要有以下几点好处&#xff1a; 增强接口的可读性和可维护性&#xff0c;使得前端开发人员能够更加清晰地理解接口返回的数据结构&#xff0c;从而提高开发效率。 降低前后端耦合度&#xff0c;当后端需要修改返回数…...

Flink如何基于数据版本使用最新离线数据

业务场景 假设批量有一张商户表&#xff0c;表字段中有商户名称和商户分类两个字段。 批量需要将最新的商户名称和分类的映射关系推到hbase供实时使用。 原实现方案 a.原方案内容 为解决批量晚批问题&#xff0c;批量推送hbase表时一份数据产生两类rowkey&#xff1a;T-1和…...

软件开发中的常用性能指标

大家好&#xff01;我是今越。在软件开发中我们经常会遇到一些性能指标&#xff0c;下面就带大家一起来看看。 QPS Queries Per Second&#xff0c;每秒查询率&#xff0c;一台服务器每秒能够响应的查询次数。它是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准…...

cmakelist使用总结

支持能编译成在不同系统上运行程序的方法 我们代码就一份&#xff0c;但有时需要编译成arm32&#xff0c;有时需要编译成x86_64,或更多 1、首先先将代码定义一个名称&#xff1a; #将所有的源文件列为一个集合&#xff0c;集合名字叫做SRC_LISTS set(SRC_LISTS main.cpp A.cpp…...

准备阶段 Unity优化总纲

Unity优化总纲 我们在学习优化课程之前要预先做好准备功能 例如最主要是的接收到一个优化的任务&#xff0c;应该怎么做&#xff0c;其次怎么做&#xff0c;最后怎么做。 也要学习一些专业工具以及专业术语 了解游戏运行机制&#xff0c;在排查期间思路会更清晰 1.优化目的…...

ubuntu防火墙(三)——firewalld使用与讲解

本文是Linux下&#xff0c;用ufw实现端口关闭、流量控制(二) firewalld使用方式 firewalld 是一个动态管理防火墙的工具&#xff0c;主要用于 Linux 系统&#xff08;包括 Ubuntu 和 CentOS 等&#xff09;。它提供了一个基于区域&#xff08;zones&#xff09;和服务&#x…...

zookeeper 搭建集群

基础的java 环境先安好&#xff0c;选择3台虚拟机 ip 不一样 机器应为奇数个 zookeeper 奇数个节点实际上是(2*n-1) 比偶数台机器少一台解决成本,并且能够满足 zookeeper 集群过半选举leader 的规则 # 3台虚拟机 将zookeeper 解压到服务器上 #在 conf/ 目录下 找到zoo_s…...

Java——异常机制(下)

1 异常处理之(捕获异常) (一般处理运行时异常) (try-catch-finally子句) (finally一般用于文件最后关闭) (catch捕获的子类在前父类在后——>不然父类在前面都让父类捕获掉了&#xff0c;会报错) (Exception是父类放在最后&#xff0c;如果前面没有捕获到&#xff0c;就…...

centos 手动安装libcurl4-openssl-dev库

下载源代码 curl downloadshttps://curl.se/download/ 选择需要下载的版本&#xff0c;我下载的是8.11.0 解压 tar -zxvf curl-8.11.0 查看安装命令 查找INSTALL.md&#xff0c;一般在docs文件夹下 –prefix &#xff1a;指定安装路径&#xff08;默认安装在/usr/local&…...

JS学习(1)(基本概念与作用、与HTML、CSS区别)

目录 一、JavaScript是什么&#xff1f; &#xff08;1&#xff09;基本介绍 &#xff08;2&#xff09;简称&#xff1a;JS&#xff1f; 二、JavaScript的作用。 三、HTML、CSS、JS之间的关系。 &#xff08;1&#xff09;html、css。 &#xff08;2&#xff09;JavaScript。 …...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...