SSM整合项目(使用Vue3 + Element-Plus创建项目基础页面)
1.配置Vue启动端口
1.修改vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer: {port: 9999 //启动端口}
}
2.启动

2.安装Element Plus
命令行输入 npm install element-plus --save

3.修改Vue3默认样式并自定义一个组件
1.修改App.vue
1.删除原有结构
<template><div></div>
</template><style></style>
2.启动项目查看

2.修改HomeView.vue
<template><div></div>
</template><script>export default {name: 'HomeView',components: {}
}
</script>
3.删除HelloWorld.vue组件

4.创建一个组件 src/components/Header.vue
1.组件解释

2.代码
<template><div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;
display: flex"><div style="width: 200px; padding-left: 30px; font-weight: bold; color:
dodgerblue">后台管理</div><div style="flex: 1"></div><div style="width: 100px">下拉框</div></div>
</template>
<script>
export default {name: "Header"
}
</script><style scoped></style>
5.App.vue引入组件
<template><div><!--使用Header组件--><Header></Header>Home页面</div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//导出Header组件,当前Vue组件的名字为Layout
export default {name: "Layout",components: {Header}
}
</script>
<style></style>

6.本阶段总结

4.创建全局的global.css并引入
1.目录

2.代码
* {margin: 0;padding: 0;box-sizing: border-box;
}
3.解释

4.在main.js引入

5.main.js引入Element-Plus
1.修改main.js

2.测试Element-Plus是否生效
1.打开Element-Plus官方文档,查找一个按钮组件

2.放到App.vue中

3.查看页面,报错

4.尝试解决问题
1.alt + enter安装组件

2.但是报错
Cannot install Node.js module: D:\nodejs(14.17.3)\npm.cmd install element-plus --save Standard error: ‘D:\nodejs’ �����ڲ����ⲿ���Ҳ���ǿ����еij��� ���������ļ���
5.重装nodejs
1.这次存放在nodejs文件夹下,之前的文件夹是带中文括号的,不知道是不是这个原因

2.配置IDEA的nodejs

3.再次尝试运行,又报错,这次是解释器的问题
Cannot install Node.js module: please specify default Node.js interpreter.
6.配置一下IDEA的Node.js的解释器

7.再次尝试安装,成功!

8.启动项目,成功出现按钮

6.显示个人信息和退出登录的下拉框
1.需求分析

2.去组件库找到下拉框的组件

3.修改自定义组件src/components/Header.vue
<template><div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;
display: flex"><div style="width: 200px; padding-left: 30px; font-weight: bold; color:
dodgerblue">后台管理</div><div style="flex: 1"></div><div style="width: 100px"><el-dropdown><span class="el-dropdown-link">Tom</span><template #dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div>
</template>
<script>
export default {name: "Header"
}
</script><style scoped></style>
4.效果展示

7.创建侧边栏并调整布局
1.需求分析

2.查找侧边栏组件

3.粘贴到src/components/Aside.vue并修改
<script setup></script><template>
<!-- 引入导航菜单--><div><el-menu style="width: 200px"default-active="2"class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>导航一</span></template><el-menu-item-group title="组一"><el-menu-item index="1-1">选项一</el-menu-item><el-menu-item index="1-2">选项二</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>选项四</template><el-menu-item index="1-4-1">选项一</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>导航二</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>导航三</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>导航四</span></el-menu-item></el-menu> </div>
</template><style scoped></style>
4.修改App.vue引入Aside组件并布局
<template><div><!-- 布局--><div><!--header组件--><Header/><!--主体,弹性布局--><div style="display: flex"><!--侧边栏--><Aside/><!--内容区域,这个部分通过路由来展示,这里路由到HomeView, flex: 1--><!--这里路由的view默认是/也就是HomeView组件--><router-view style="flex: 1"/></div></div></div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//引入Aside
import Aside from "@/components/Aside.vue";
//导出Header组件,当前Vue组件的名字为Layout
export default {name: "Layout",components: {Header,Aside}
}
</script>
<style></style>
5.在路由到的组件HomeView随便放入一个Element组件测试
<template><div><el-empty description="description" /></div>
</template><script>export default {name: 'HomeView',components: {}
}
</script>
6.结果展示

8.修改HomeView.vue添加斑马表格
1.找到组件

2.修改HomeView.vue
<template><div><el-table :data="tableData" stripe style="width: 100%">
<!-- 把width去掉,就会自适应--><el-table-column prop="date" label="日期"/><el-table-column prop="name" label="名字"/><el-table-column prop="address" label="地址" /></el-table></div>
</template><script>export default {name: 'HomeView',components: {},//增加一个data,单项绑定tableDatadata() {return {tableData: [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]}}
}
</script>
3.结果展示

9.Element-Plus国际化
1.官方文档

2.修改main.js进行国际化

3.当表格没有数据时就是中文的暂无数据了

10.从官网设置测试数据,并支持日期排序
1.修改HomeView.vue

2.data更新为中文数据

3.结果展示

11.添加相关的操作按钮和搜索框
1.需求分析

2.修改HomeView.vue
1.增加按钮
<template><div><!--增加按钮和搜索框--><!--magrin代表上下边距为10px,左右边距为5px--><div style="margin: 10px 5px"><el-button type="primary">新增</el-button><el-button>其他</el-button></div><!--再增加一个搜索框并设置边距--><div style="margin: 10px 5px"><!--搜索框,双向绑定一个search--><el-input v-model="search" style="width: 30%" placeholder="请输入关键字"/><el-button type="primary">查找</el-button></div><el-table :data="tableData" stripe style="width: 90%"><!--把width去掉,就会自适应--><el-table-column sortable prop="date" label="日期"/><el-table-column prop="name" label="名字"/><el-table-column prop="address" label="地址"/><!--在表格的最后一列加入两个超链接--><el-table-column fixed="right" label="操作" width="100"><template #default><el-button type="text">编辑</el-button><el-button type="text">删除</el-button></template></el-table-column></el-table></div>
</template>
2.新增data绑定搜索框

3.结果展示

相关文章:
SSM整合项目(使用Vue3 + Element-Plus创建项目基础页面)
1.配置Vue启动端口 1.修改vue.config.js const {defineConfig} require(vue/cli-service) module.exports defineConfig({transpileDependencies: true }) module.exports {devServer: {port: 9999 //启动端口} }2.启动 2.安装Element Plus 命令行输入 npm install eleme…...
css相邻元素边框重合问题,解决方案
1、如下图所示,在给元素设置边框后,相邻元素会出现重合的问题 2、解决方案 给每个元素设置margin-top以及margin-left为负的边框 <div style"width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;"><div style"border…...
CentOS7 利用remi yum源安装php8.1
目录 前言remi yum源remi yum源 支持的操作系统remi yum源 支持的php版本 安装epel源安装remi源安装 php8.1查看php版本查看php-fpm服务启动php-fpm服务查看php-fpm服务运行状态查看php-fpm服务占用的端口查看 php8.1 相关的应用 前言 CentOS Linux release 7.9.2009 (Core) …...
深入探索Java设计模式:责任链模式解析与实践
目录 一、责任链模式的基础知识1. 模式结构2. 模式示例 二、责任链模式的实际应用1. 请求处理链2. 日志记录器 三、责任链模式的重要性和使用场景结语 欢迎阅读本篇博客,我们将深入探讨Java设计模式中的责任链模式,帮助初学者、初中级程序员和在校大学生…...
如何在项目中应用“API签名认证”
❤ 作者主页:李奕赫揍小邰的博客 ❀ 个人介绍:大家好,我是李奕赫!( ̄▽ ̄)~* 🍊 记得点赞、收藏、评论⭐️⭐️⭐️ 📣 认真学习!!!🎉🎉 文章目录 为什么需要AP…...
【AIGC+VisionPro】空间视频生意的创业者
1. 产品概述 -一款基于人工智能的2D到3D视频/图像转换工具,可将普通的2D视频/图像转换为令人惊艳的3D视觉体验。 - 它支持在PC上进行转换,并输出适用于Meta Quest、Apple Vision Pro等XR设备的3D格式。 2. 产品功能 - 利用尖端的3D AI系统,可将任何视频(Youtube、电影、游戏、…...
word转PDF的方法 简介快速
在现代办公环境中,文档格式转换已成为一项常见且重要的任务。其中,将Word文档转换为PDF格式的需求尤为突出,将Word文档转换为PDF格式具有多方面的优势和应用场景。无论是为了提高文档的可读性和稳定性、保障文档的安全性和保护机制、还是为了…...
【开源】SpringBoot框架开发图书管理系统
目录 一、 系统介绍二、 功能模块2.1 登录注册模块2.1 图书馆模块2.2 图书类型模块2.3 图书模块2.4 图书借阅模块2.5 公告模块 三、 源码解析3.1 图书馆模块设计3.2 图书类型模块设计3.3 图书模块设计3.4 图书借阅模块设计3.5 公告模块设计 四、 免责说明 一、 系统介绍 图书管…...
Java 继承与多态
一、继承 在Java中,继承是一种重要的面向对象编程概念,它允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的属性和方法。这意味着子类可以使用父类的成员变量和方法,并且可以添加自…...
C语言——递归题
对于递归问题,我们一定要想清楚递归的结束条件,每个递归的结束条件,就是思考这个问题的起始点。 题目1: 思路:当k1时,任何数的1次方都是原数,此时返回n,这就是递归的结束条件&#…...
构建空间场景轻应用,Mapmost Alpha来啦【文末赠书(10本)--第一期】
文章目录: 一、Mapmost Alpha 介绍二、Mapmost Alpha应对数字孪生业务痛点解决之道2.1 Mapmost Alpha 提供海量城市底板2.2 Mapmost Alpha 提供便捷的配置管理工具2.3 Mapmost Alpha 提供一键式部署发布和分享 三、沉浸式体验Mapmost Alpha3.1 创建应用3.2 新手指导…...
基于冠豪猪优化算法(Crested Porcupine Optimizer,CPO)的无人机三维路径规划(MATLAB)
一、无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径,使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一,它可以通过算法和模型来确定无人机的航迹,以避开障碍物、优化飞行…...
html2canvas+jsPDF实现前端导出pdf
html2canvasjsPDF实现前端导出pdf 安装插件包 npm install jspdf npm install html2canvas引入插件 import html2canvas from html2canvas; import jsPDF from jspdf;生成pdf const perCanvas document.createElement(canvas);perCanvas.style.backgroundColor #fffconst …...
Paimon新版本核心特性和生产实践解读
最近Apche Paimon发布了最新版本0.7.0,在这个版本中,Paimon对一些新特性进行了增强。 Paimon在数据湖领域发展迅速,未来会在整个数据开发领域占有很重要的地位,今天我们来盘点一下当前能力的特点以及在生产环境中的使用情况。 Loo…...
Java设计模式-策略模式
策略模式1 概述2 结构3 案例实现4 优缺点5 使用场景6 JDK源码解析 策略模式 1 概述 先看下面的图片,我们去旅游选择出行模式有很多种,可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿,开发需要选择一款开发工具&#x…...
vxe-table配合Export2Excel导出object类型数据{type,count}。表格数据呈现是利用插槽,导出只要count该怎么做
先贴一张数据来: 一、然后是vxe-grid的columns配置: 然后就正常用封装好的Export2Excel就行。 碰到一次在控制台报错: 没复现出来,大概就说是count咋样咋样。 以后碰到的话再说,各位要用的话也注意看看 二、或者 用js…...
Java面试题(主要分清区别!!!)
RequestBody和ResponseBody的区别? RequestBody:接收json或xml数据 ResponseBody的:返回json或xml数据 RestController和Controller的区别? Controller:默认返回的是jsp页面 RestController:返回的是一个js…...
OD_2024_C卷_200分_2、石头剪刀布【JAVA】【逻辑分析】
题目描述 石头剪刀布游戏有 3 种出拳形状:石头、剪刀、布。分别用字母A、B、C表示。 游戏规则: 出拳形状之间的胜负规则如下: A > B; B > C; C > A; “>” 左边一个字母,表示相对…...
矩阵求导笔记
文章目录 1. ML中为什么需要矩阵求导2. 向量函数与矩阵求导初印象3. YX 拉伸术3.1 f(x)为标量,X为列向量3.2 f(x)为列向量,X 为标量3.3 f(x)为列向量,X 为列向量 4. 常见矩阵求导公式4.1 Y A T X YA^TX YATX4.2 Y X T A X YX^TAX YXTAX 1…...
全量知识系统问题及SmartChat给出的答复 之19 关于演示模板
Q.60 可参考的演示模版 (word-def occupiedinterest 5type EBsubclass SEBtemplate (script $Demonstrateactor nilobject nildemands nilmethod (scene $Occupyactor nillocation nil))fill (((actor) (top-of *actor-stack*))((method actor) (t…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
LangChain【6】之输出解析器:结构化LLM响应的关键工具
文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器?1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...
