VUE基础知识九 ElemrntUI项目

ElementUI官网

一 项目

最终完成的效果：
在这里插入图片描述
切换上边的不同按钮，下方显示不同的表格数据

在src/components下新建不同业务组件的文件夹
在这里插入图片描述

1.1 搭建项目

使用脚手架搭建项目后，引入ElementUI（搭建、引入ElementUI步骤在第七节里已经详细介绍了）
在这里插入图片描述
改造项目入口App.vue
在这里插入图片描述
首页App.vue里的<router-view>默认对应的就是左侧router/index.js文件

新建首页src/components/index.vue文组件
在这里插入图片描述
把首页组件注册到路由里
在这里插入图片描述
访问：
在这里插入图片描述

1.2 在访问项目地址时，直接路由到首页（不需要加index后缀）

首页地址：src/components/index.vue，在路由的js文件里里，新建一个根路由/，重定向到index，index又会自动路由到index.vue页面
在这里插入图片描述

1.3 设计主页面src/components/index.vue组件

先直接复制ElemrntUI官网Container组件，分为上下两大块，然后进行改造
在这里插入图片描述
最上边的头部使用NavMenu 导航菜单
在这里插入图片描述
把导航菜单代码复制到头部里
在这里插入图片描述
在这里插入图片描述

删除没必要的内容后：
在这里插入图片描述
在这里插入图片描述

由于main区域是动态改变的，所以这里肯定是一个路由组件，这里的组件来自于左侧各个业务提供的组件页面
在这里插入图片描述
新建各个组件，并注册到路由里
在这里插入图片描述
现在解决点击首页头部里的按钮，改变下边main数据的逻辑，首页<el-menu>有一个点击事件(点击<el-menu>下的子节点时触发的事件)

在这里插入图片描述
事件里接收两个参数：key、keyPath
在这里插入图片描述

修改index的值
在这里插入图片描述

把默认值改为index首页的组件，并打印拿到的俩参数值
在这里插入图片描述

点击上边的按钮，就会达到对应的组件index值
在这里插入图片描述
由上边可知，事件里能拿到路由地址，所以在事件里做路由切换即可
在这里插入图片描述
测试：
在这里插入图片描述
在这里插入图片描述
发现头部组件被覆盖掉了，不是只刷新main部分，与我们的需求不符合，即我们需要无论再怎么路由，头部的导航栏不能消失

把主页index.vue里的头部全部剪切放到App.vue里（剪切下边的内容）
在这里插入图片描述
剪切后此处只写主页
在这里插入图片描述
剪切的内容放到App.vue里，下边红框里作为公共内容，以后一直存在，不会因为路由而消失在这里插入图片描述把index里js的数据也剪切走在这里插入图片描述
放到App.vue里
在这里插入图片描述
效果
在这里插入图片描述
切换：
在这里插入图片描述

1.4 main主页添加轮播图

轮播图在ElemrntUI里对应的组件是走马灯组件
在这里插入图片描述
把代码和样式复制到项目里，并且放几张图片在项目里
在这里插入图片描述
首页组件里引入这些图片，并且定义一个数组，数组里的内容就是引入的图片，在上边的代码里循环这些数组
在这里插入图片描述
图片展示风格，参考image图片组件
在这里插入图片描述
复制到代码里

在这里插入图片描述
效果
在这里插入图片描述

发现不美观，我们把宽高去掉
在这里插入图片描述
在这里插入图片描述
发现图片展示不全，需要调整图片高度
在这里插入图片描述

在这里插入图片描述
如果需要图片填充满的话，使用fill
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5 用户管理界面

在这里插入图片描述
复制到用户管理对应组件代码里

数据：
在这里插入图片描述
在这里插入图片描述
这里数据是写死的，我们需要结合后端springboot来把数据做活
后端接口：
在这里插入图片描述

注意，前端端口8080.后端端口8089，所以肯定存在跨域

此时前端需要发ajax请求，脚手架需要安装axios

# 安装axios
npm -i --save axios
# 或者
cnpm install axios --save
# 或者
npm install --save axios

在main.js里使用axios
在这里插入图片描述
当用户管理界面组件初始化之后，就去渲染数据

在这里插入图片描述
created：组件初始化之后执行的逻辑；

浏览器地址输入users组件地址，但是发现页面还是在首页在这里插入图片描述
是因为路由激活这里写死了，默认激活的是index首页组件

在这里插入图片描述
path改为当前路由路径即可
在这里插入图片描述
完成添加按钮逻辑

点击添加按钮时，加一些过渡动画
在这里插入图片描述
复制动画代码和样式
在这里插入图片描述

在这里插入图片描述
此时，点击添加按钮时，下边的框就会有动画了，我们把下边的框换为自己的想要的form弹框即可，把赋值过来的style样式改一下大小
在这里插入图片描述

复制一个form表单（包括假数据、method）到代码里
在这里插入图片描述
把这里的内容替换为form表单即可
在这里插入图片描述
在这里插入图片描述
构建form表单
在这里插入图片描述
在这里插入图片描述
后台接口

统一返回结果封装
在这里插入图片描述
在这里插入图片描述
前端调后端接口
在这里插入图片描述
把消息成功风格的代码复制进去
在这里插入图片描述
在这里插入图片描述
添加成功后，要重新渲染页面
在这里插入图片描述
此时，created方法里调的方法，也挪一下
在这里插入图片描述
在这里插入图片描述

数据越来越多的话，页面被撑大，可以给页面设置高度，不让他无限制增长（即添加滚动条）
在这里插入图片描述

右侧有滚动条了
在这里插入图片描述
删除功能
在这里插入图片描述
js
在这里插入图片描述

后端接口
在这里插入图片描述
上边的删除直接就删了，不太友好，可以加一个“确认删除”的提示——气泡确认框
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
编辑功能
点击“编辑”时，复用添加的弹框，实现编辑操作
在这里插入图片描述
在这里插入图片描述
点完编辑后，弹框里与数据看，那点击添加的时候，就得清空表单

添加按钮起一个方法，性别设置一个默认值：
在这里插入图片描述
添加重置按钮
在这里插入图片描述
在这里插入图片描述
保存的逻辑
在这里插入图片描述

后端
在这里插入图片描述

1.6 添加表单验证

在这里插入图片描述
在这里插入图片描述
注意，上边的属性是表单的属性
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
保存时也进行校验，不提交表单
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在提交方法里进行验证
在这里插入图片描述

1.7 Pagination分页组件

在这里插入图片描述

在表格下加一个分页组件
在这里插入图片描述
效果
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
注意，pagesize必须是pagesizes的子元素
在这里插入图片描述
添加事件
在这里插入图片描述

在这里插入图片描述
后台代码需要改为分页查询，不能再查询所有了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
前端js以后就访问分页方法了
在这里插入图片描述
总条数就不写死了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

pagesize与当前页也不写死
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1.8 解决ElementUI日期组件日期不正确的问题

组件里选择的是2022-5-28，但是保存到后台却是2022-5-27
在这里插入图片描述
在这里插入图片描述
解决办法：添加一个value-format属即可解决

在这里插入图片描述

二 部署ElemrntUI项目

先执行编译命令

npm run build

执行后生成一个dist文件
在这里插入图片描述
把static和index.html直接复制到springboot项目里的resource下的static里
在这里插入图片描述
配置静态资源路径
在这里插入图片描述

以后直接启动一个springboot，访问springboot的端口就行了，不需要单独启动前端项目了。访问localhost:8989，就会自动路由到localhost:8989/index首页
在这里插入图片描述

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

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

相关文章

2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024)

2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024)

2024能源动力、机械自动化与航天航空技术国际学术会议(ICEPMAT2024) 会议简介 能源动力、机械自动化和航空航天技术国际学术会议&#xff08;ICEPMAT2024&#xff09;将于2024年在北京举行。会议将探讨能源动力、机械自动化、航空航天技术领域的新研究热点、核心技术和发展趋…
阅读更多...
vue手写卡片切换，并且点击获取到卡片信息

vue手写卡片切换，并且点击获取到卡片信息

需求&#xff1a;做一个卡片样式的列表&#xff0c;之后有一些基本信息&#xff0c;之后卡片选中后样式不一样&#xff0c;默认选中第一个卡片&#xff0c;点击卡片后可以获取到卡片的信息 一、效果 二、关键代码 index默认重0开始,activeTable默认为0,0-0等于0&#xff0c;但…
阅读更多...
【Django开发】0到1开发美多shop项目：Celery短信和用户注册。全md文档笔记（附代码，已分享）

【Django开发】0到1开发美多shop项目：Celery短信和用户注册。全md文档笔记（附代码，已分享）

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目开发相关知识。本项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现…
阅读更多...
消息队列MQ详解(Kafka、RabbitMQ、RocketMQ、ActiveMQ等)

消息队列MQ详解(Kafka、RabbitMQ、RocketMQ、ActiveMQ等)

文章目录 概述消息中间件的优势&#xff08;异步削峰解耦&#xff09;消息队列的缺点消息中间件模式分类消息队列使用场景和应用场景消息中间件常用协议消息中间件的组成如何实现高吞吐量MQ 如何避免消息堆积消息堆积如何处理如何解决消息队列的延时以及过期失效问题&#xff1…
阅读更多...
电子元件分销商

电子元件分销商

Top 10 Active Electronic Parts Distributors List – 2022 / 2023 一家从众多制造商那里收购所有电子元件并销售给客户的公司被称为电子元件分销商。 A company that acquires all electronic components from numerous manufacturers and sells them to customers from a si…
阅读更多...
【挖坑前后指针版】快速排序（3）

【挖坑前后指针版】快速排序（3）

目录 挖坑版 整体思路 图解分析 代码实现 前后指针版 整体思路 图解分析 代码实现 在前面我们基于hoare的思想实现了hoare版本的快速排序&#xff0c;但是我们发现hoare版本的快排&#xff0c;易错点太多也不是那么容易理解&#xff0c;所以基于hoare的思想有创新了挖…
阅读更多...
欢迎 Gemma: Google 最新推出开源大语言模型

欢迎 Gemma: Google 最新推出开源大语言模型

今天&#xff0c;Google 发布了一系列最新的开放式大型语言模型 —— Gemma&#xff01;Google 正在加强其对开源人工智能的支持&#xff0c;我们也非常有幸能够帮助全力支持这次发布&#xff0c;并与 Hugging Face 生态完美集成。 Gemma 提供两种规模的模型&#xff1a;7B 参数…
阅读更多...
Redis能保证数据不丢失吗？

Redis能保证数据不丢失吗？

引言 大家即使没用过Redis&#xff0c;也应该都听说过Redis的威名。 Redis是一种Nosql类型的数据存储&#xff0c;全称Remote Dictionary Server&#xff0c;也就是远程字典服务器&#xff0c;用过Dictionary的应该都知道它是一种键值对&#xff08;Key-Value&#xff09;的数…
阅读更多...
网关服务gateway注册Consul时报错Consul service ids must not be empty

网关服务gateway注册Consul时报错Consul service ids must not be empty

网关服务gateway启动时&#xff0c;初始化Consul相关配置时报错。 Consul service ids must not be empty, must start with a letter, end with a letter or digit, and have as interior characters only letters, digits, and hyphen: cbda-server-gateway:10.111.236.142:…
阅读更多...
Unity 2021.3发布WebGL设置以及nginx的配置

Unity 2021.3发布WebGL设置以及nginx的配置

使用unity2021.3发布webgl 使用Unity制作好项目之后建议进行代码清理&#xff0c;这样会即将不用的命名空间去除&#xff0c;不然一会在发布的时候有些命名空间webgl会报错。 平台转换 将平台设置为webgl 设置色彩空间压缩方式 Compression Format 设置为DisabledDecompre…
阅读更多...
C语言特殊函数

C语言特殊函数

静态函数 背景知识&#xff1a;普通函数都是跨文件可见的&#xff0c;即在文件 a.c 中定义的函数可以在 b.c 中使用。 静态函数&#xff1a;只能在定义的文件内可见的函数&#xff0c;称为静态函数。 语法 staitc void f(void) // 在函数头前面增加关键字 static &#xff…
阅读更多...
Runaway Queries 管理：提升 TiDB 稳定性的智能引擎

Runaway Queries 管理：提升 TiDB 稳定性的智能引擎

在数字化系统扮演重要角色的今天&#xff0c;数据库稳定性成为企业关注的核心问题。对于重要计算机系统而言&#xff0c;突发的性能下降可能对业务造成不可估量的损失。为了稳定数据库性能&#xff0c;用户可以从管理流程入手规范变更的测试&#xff0c;或者利用产品手段减少预…
阅读更多...
基于JAVA的房屋出售出租系统 开源项目

基于JAVA的房屋出售出租系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…
阅读更多...
SQL 中如何实现多表关联查询？

SQL 中如何实现多表关联查询？

阅读本文之前请参阅----MySQL 数据库安装教程详解&#xff08;linux系统和windows系统&#xff09; 在SQL中&#xff0c;多表关联查询是通过使用JOIN操作来实现的&#xff0c;它允许你从两个或多个表中根据相关列的值来检索数据。以下是几种常见的JOIN类型&#xff1a; …
阅读更多...
docker镜像和容器的关系

docker镜像和容器的关系

背景 镜像和容器都是docker中非常重要的概念&#xff0c;镜像是静态的&#xff0c;而容器是动态的&#xff0c;两者的关系就类似类和实例的关系&#xff0c;本文就来分析下两者的关联 镜像和容器 我们知道镜像是存放在仓库中的静态的文件&#xff0c;而容器是运行中的进程&a…
阅读更多...
【Python_Zebra斑马打印机编程学习笔记（二）】基于BarTender将btw文件转换为zpl文件

【Python_Zebra斑马打印机编程学习笔记（二）】基于BarTender将btw文件转换为zpl文件

基于BarTender将btw文件转换为zpl文件 基于BarTender将btw文件转换为zpl文件前言一、BarTender1、BarTender 介绍2、BarTender 安装 二、导出 ZPL 文件1、导出 ZPL 文件步骤2、Zebra 打印机驱动安装 基于BarTender将btw文件转换为zpl文件 前言 本文介绍如何基于 BarTender 软…
阅读更多...
Android LinearLayout 如何让子元素靠下居中对齐 center bottom

Android LinearLayout 如何让子元素靠下居中对齐 center bottom

Android LinearLayout 如何让子元素靠下居中对齐 center bottom 首先你需要知道两个知识点&#xff1a; android:layout_gravity 指定的是当前元素在父元素中的位置android: gravity 指定的是当前元素子元素的排布位置 比如&#xff1a; 有这么一个布局&#xff0c;我需要让…
阅读更多...
TESTLINK 测试用例数据结构解析

TESTLINK 测试用例数据结构解析

一、node_types 测试组件信息表 我们查询表 select * from testlink.node_types; 得到如下结果 二、nodes_hierarchy 测试用例目录层次表 我们以下图的项目为例&#xff0c;来讲解 1、测试项目 首先&#xff0c;我们有个Train的项目&#xff0c;存在表testprojects中&#…
阅读更多...
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 2月24日，星期六

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 2月24日，星期六

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年2月24日 星期六 农历正月十五 元宵节 1、 快递新规3月1日起施行&#xff0c;快递不得擅自放服务站&#xff0c;违者最高罚3万元。 2、 人社部&#xff1a;将外卖小哥、网约车司机等新就业形态劳动者纳入最低工资保障。 3…
阅读更多...
防御保护--VPN

防御保护--VPN

目录 VPN的概述 VPN的分类 VPN的核心技术 --- 隧道技术 VPN其他常用技术 VPN的概述 VPN --- 虚拟专用网 --- 一般指依靠ISP或者其他NSP&#xff0c;也可以是企业自身&#xff0c;提供的一条虚拟网 络专线。这个虚拟的专线是逻辑上的&#xff0c;而不是物理上的&#xff0c;所…
阅读更多...
最新文章

Copyright @ 2022~2023