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

SpringBoot+Vue项目(Vue3环境搭建 + 基础页面)

文章目录

    • 1.项目基本介绍
    • 2.安装Node.js(SSM部分安装过)
    • 3.初始化前端工程
        • 1.创建一个文件夹 springboot_vue
        • 2.创建vue项目
          • 1.在刚才创建的文件夹下打开命令行,使用脚手架搭建项目
          • 2.选择手动配置
          • 3.选择三个
          • 4.选择vue3
          • 5.选择路由模式
          • 6.选择包管理方式
          • 7.保留这次设置
          • 8.为这次设置命名
          • 9.配置成功
          • 10.启动项目
    • 4.使用IDEA打开项目
        • 1.退出项目
        • 2.拖动刚才创建的项目到IDEA
        • 3.Vue基本执行流程
        • 4.配置使用npm方式启动
        • 5.启动项目
        • 6.配置启动项目自动打开首页
        • 7.配置默认浏览器
    • 5.安装Element-Plus
        • 1.官方文档
        • 2.指南-安装
        • 3.进行安装(IDEA命令行或者项目目录下打开cmd都可以)
    • 6.配置Vue的服务端口(防止端口冲突)
        • 1.vue.config.js下配置
        • 2.配置启动端口代码
        • 3.启动,端口变成9999
    • 7.修改默认项目配置
        • 1.App.vue
        • 2.HomeView.vue
        • 3.删除HelloWorld.vue组件
    • 8.项目基本界面
        • 1.src/components/Header.vue 编写组件
        • 2.src/App.vue 主页面引入组件
        • 3.src/assets/css/global.css 创建全局样式css
        • 4.src/main.js 引入全局样式
        • 5.src/main.js 引入Element-Plus
        • 6.src/App.vue 引入一个Element-Plus组件测试
        • 7.src/components/Header.vue 设置Header的下拉框
        • 8.src/components/Aside.vue 编写侧边栏组件
        • 9.src/App.vue 将页面分为三个部分并引入侧边栏组件
        • 10.src/views/HomeView.vue 引入表格组件
        • 11.src/main.js 国际化
        • 12.src/views/HomeView.vue 表格排序
        • 13.src/views/HomeView.vue 为表格添加固定列
        • 14.src/views/HomeView.vue 添加搜索框和按钮
        • 15.小结

1.项目基本介绍

image-20240318104512639

2.安装Node.js(SSM部分安装过)

image-20240318104814602

3.初始化前端工程

1.创建一个文件夹 springboot_vue

image-20240318105933769

2.创建vue项目
1.在刚才创建的文件夹下打开命令行,使用脚手架搭建项目

image-20240318110513628

这里如果提示 ‘vue’ 不是内部或外部命令,也不是可运行的程序,就是没有安装脚手架,还是有问题就是没有安装node.js

image-20240318121628933

2.选择手动配置

image-20240318110247123

3.选择三个

image-20240318110345553

4.选择vue3

image-20240318110608820

5.选择路由模式

image-20240318110656446

6.选择包管理方式

image-20240318110741007

7.保留这次设置

image-20240318110805459

8.为这次设置命名

image-20240318110851510

9.配置成功

image-20240318110946409

10.启动项目

image-20240318111235462

image-20240318111330680

4.使用IDEA打开项目

1.退出项目

image-20240318111456116

2.拖动刚才创建的项目到IDEA

image-20240318111555112

3.Vue基本执行流程

image-20240318112257148

4.配置使用npm方式启动

image-20240318112442676

5.启动项目

image-20240318112504944

image-20240318112457701

6.配置启动项目自动打开首页

image-20240318112729492

7.配置默认浏览器

image-20240318112852734

5.安装Element-Plus

1.官方文档

Element-Plus官方文档

2.指南-安装

image-20240318113124533

3.进行安装(IDEA命令行或者项目目录下打开cmd都可以)

image-20240318113251922

6.配置Vue的服务端口(防止端口冲突)

1.vue.config.js下配置

image-20240318113640370

2.配置启动端口代码
// 配置启动端口
module.exports = {devServer: {port: 9999}
}
3.启动,端口变成9999

image-20240318113759886

7.修改默认项目配置

1.App.vue

image-20240318114748396

<template><div></div>
</template><style></style>
2.HomeView.vue

image-20240318115002643

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

image-20240318115122815

8.项目基本界面

1.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">下拉框</div></div></template>
<script>
export default {name: "Header"
}
</script>
<style></style>
2.src/App.vue 主页面引入组件
<template><div><Header></Header></div>
</template><style></style><script>import Header from "@/components/Header.vue";export default {name: "Layout",components: {Header}}
</script>

image-20240318134027558

3.src/assets/css/global.css 创建全局样式css
* {margin: 0;padding: 0;box-sizing: border-box;
}
4.src/main.js 引入全局样式

image-20240318134403244

5.src/main.js 引入Element-Plus

image-20240318134805165

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局css
import '@/assets/css/global.css'
// 引入element-plus
import ElementPlus from 'element-plus'
// 引入element-plus相关样式
import 'element-plus/dist/index.css'// 使用组件
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
6.src/App.vue 引入一个Element-Plus组件测试

image-20240318134952145

image-20240318135004981

7.src/components/Header.vue 设置Header的下拉框
<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<el-icon class="el-icon--right"><arrow-down/></el-icon></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></style>

image-20240318135800508

8.src/components/Aside.vue 编写侧边栏组件
<script>export default {name: "Aside"}
</script><template><!--  引入导航菜单--><div><el-menu style="width: 200px"default-active="2"class="el-menu-vertical-demo"><el-menu-item index="1"><el-icon><icon-menu /></el-icon><span>导航一</span></el-menu-item><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></style>
9.src/App.vue 将页面分为三个部分并引入侧边栏组件
<template><div><!--      头部--><Header></Header><!--      主体弹性布局--><div style="display: flex"><!--        侧边栏--><Aside/><!--        路由弹性布局--><router-view style="flex: 1"/></div></div>
</template><style></style><script>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";export default {name: "Layout",components: {Aside,Header}
}
</script>

image-20240318142535923

10.src/views/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>

image-20240318143409112

11.src/main.js 国际化

image-20240318143812670

image-20240318143751567

12.src/views/HomeView.vue 表格排序

image-20240318144016523

13.src/views/HomeView.vue 为表格添加固定列

image-20240318144300797

      <!--在表格的最后一列加入两个超链接--><el-table-column fixed="right" label="操作" width="100"><template #default="scope"><!--          插槽机制,点击编辑会将本行的信息传到handleEdit中--><el-button @click="handleEdit(scope.row)" type="text">编辑</el-button><el-button type="text">删除</el-button></template></el-table-column>

方法池编写一个空方法

  methods: {handleEdit() {alert(11)}}

image-20240318145113500

14.src/views/HomeView.vue 添加搜索框和按钮

image-20240318145323878

    <!--增加按钮和搜索框--><!--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>

数据池双向绑定搜索框

image-20240318145619149

image-20240318145440452

15.小结

image-20240318150102772

相关文章:

SpringBoot+Vue项目(Vue3环境搭建 + 基础页面)

文章目录 1.项目基本介绍2.安装Node.js&#xff08;SSM部分安装过&#xff09;3.初始化前端工程1.创建一个文件夹 springboot_vue2.创建vue项目1.在刚才创建的文件夹下打开命令行&#xff0c;使用脚手架搭建项目2.选择手动配置3.选择三个4.选择vue35.选择路由模式6.选择包管理方…...

elementui el-table表格自动循环滚动【超详细图解】

效果如图 1. 当表格内容超出时&#xff0c;自动滚动&#xff0c;滚动到最后一条之后在从头滚动。 2. 鼠标移入表格中&#xff0c;停止滚动&#xff1b;移出后&#xff0c;继续滚动。 直接贴代码 <template><div><div class"app-container"><e…...

关于学习的一点粗浅见解

我们学习的每一个领域&#xff0c;大多都有着宽泛的知识面&#xff0c;那在学习过程中&#xff0c;我们是应该一开始就专钻一个方向(即深度)&#xff0c;还是应该先扩展知识面(即广度)&#xff1f;个人认为&#xff0c;应该先扩展知识面宽度&#xff0c;然后再精研某个方向&…...

[java基础揉碎]Object类详解

目录 equals方法: hashCode: toString: finalize: equals方法: 和equals对比 1.: 既可以判断基本类型&#xff0c;又可以判断引用类型 2.: 如果判断基本类型&#xff0c;判断的是值是否相等。示例: int i10; double d10.0; 3.:如果判断引用类型&#xff0c;判断的是地址是…...

23.1 微服务理论基础

23.1 微服务基础 1. 微服务介绍2. 微服务特点3. 微服务优缺点4. 微服务两大门派5. 微服务拆分6. 微服务扩展6.1 服务扩展6.2 按需扩展7. 微服务重要模块******************************************************************************************************************...

数据结构-基本概念-001

1数据结构基本概念 1.1 &#xff08;1&#xff09;一组用来保存一种或者多种特定关系的数据的集合&#xff08;组织和存储数据&#xff09;&#xff08;2&#xff09;程序的设计&#xff1a;将现实中大量而复杂的问题以特定的数据类型和特定的存储结构存储在内存中&#xff0…...

以题为例浅谈SSRF

什么是ssrf SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。 一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xff0c;所以它能够请求到与它相连…...

Java网络编程:探索奥秘与实践

欢迎来到我的博客&#xff01;今天我们将一起探索Java网络编程的奥秘。网络编程是计算机科学中的一个重要领域&#xff0c;它使得不同的计算机系统可以相互通信和共享数据。Java的网络编程库提供了一套全面而强大的工具&#xff0c;让我们能够轻松地实现这些功能。我们将通过一…...

Leetcode992-K个不同整数的子数组[两种方法] 关键词 滑窗

文章目录 题目方法一&#xff1a;滑窗右端每次1&#xff0c;左端来回滑动方法二&#xff1a;&#xff08;最多K种的子串数&#xff09; - &#xff08;最多K-1种的子串数&#xff09; 恰好K种 题目 1 < nums.length < 20000 1 < nums[i], k < nums.length 方法一…...

【闲聊】-后端框架发展史

框架&#xff0c;是为了解决系统复杂性&#xff0c;提升开发效率而产生的工具&#xff0c;主要服务于研发人员。 当然&#xff0c;框架还有更深层的作用&#xff0c;框架的沉淀是一种高级的抽象&#xff0c;会将人类的业务逐步抽象为统一标准又灵活可变的结构&#xff0c;为各行…...

界面控件DevExpress ASP.NET Scheduler - 助力快速交付个人信息管理系统(下)

DevExpress ASP. NET Scheduler组件能完全复制Microsoft Outlook Scheduler的样式和功能&#xff0c;具有日、周、月和时间轴视图&#xff0c;并包括内置的打印支持&#xff0c;因此用户可以在尽可能短的时间内交付全功能的个人信息管理系统。在上文中&#xff08;点击这里回顾…...

机器学习-04-分类算法-01决策树

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法开篇与决策树部分。 参考 决策树——ID3和C4.5&#xff08;理论图解公式推导&#xff09; 策略产品经理必读系列—第七讲ID3、C4.5和CART算法详解 决策树&#xff08;…...

探索大数据时代的决策利器:如何有效应对海量数据?

随着信息技术的快速发展,大数据时代已经到来,海量数据成为了我们生活和工作中不可忽视的一部分。这些数据来自各个方面:社交媒体、传感器、网络交易、移动设备等,每天都在以惊人的速度增长。但是,面对如此庞大的数据量,我们该如何有效地应对呢?本文将探索大数据时代的决…...

Linux 学习笔记(16)

十六、 计划任务 在很多时候为了自动化管理系统&#xff0c;我们都会用到计划任务&#xff0c;比如关机&#xff0c;管理&#xff0c;备份之类的操作&#xff0c;我 们都可以使用计划任务来完成&#xff0c;这样可以是管理员的工作量大大降低&#xff0c;而且可靠度更好。 l…...

【C语言】打印闰年

输⼊⼀个年份year&#xff0c;判断year是否是闰年 闰年判断的规则&#xff1a; 1&#xff0c; 能被4整除并且不能被100整除是闰年 2&#xff0c;能被400整除是闰年 结合起来如下&#xff1a; if ((year % 4 0 && year % 100 ! 0) || (year % 400 0)) 代码如下&…...

外贸入门,很残忍但很真实的外贸真相

如果你是小白入行外贸&#xff0c;第一家选择的公司大概率会决定你以后的客户开发模式。 外贸老鸟们可以留言讨论下自己是不是被说中了。 如果新人选择的第一家公司是靠B2B网站&#xff0c;展会或者官网询盘分发&#xff0c;公司每年会花大量的广告费用获客&#xff0c;你会很快…...

【Linux网络编程七】网络序列化和反序列化(网络版本计算器)

【Linux网络编程七】网络序列化和反序列化(网络版本计算器&#xff09; 一.网络读取问题【解决方案】1.定制协议2.序列化和反序列化3.添加报头①封包②解包 4.框架总结 二.自定义协议&#xff1a;网络计算器协议Ⅰ.客户端发送请求&#xff0c;服务器端接收请求1.构建请求(结构化…...

算法打卡day17|二叉树篇06|Leetcode 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

算法题 Leetcode 654.最大二叉树 题目链接:654.最大二叉树 大佬视频讲解&#xff1a;最大二叉树视频讲解 个人思路 大概思路就是在数组中 找最大值的节点作为当前节点&#xff0c;用最大值的index切割左右子树的区间&#xff0c;往复循环到数组元素为0&#xff1b; 解法 递…...

C语言之数据在计算机内部的存储

文章目录 一、前言二、类型的基本归类1、整型家族2、浮点数家族3、构造类型4、指针类型 三、整型在内存中的存储1、原码、反码、补码1.1 概念1.2 原码与补码的转换形式1.3 计算机内部的存储编码 2、大小端介绍~~2.1 为什么要有大端和小端之分&#xff1f;2.2 大&#xff08;小&…...

程序人生——Java中基本类型使用建议

目录 引出Java中基本类型使用建议建议21&#xff1a;用偶判断&#xff0c;不用奇判断建议22&#xff1a;用整数类型处理货币建议23&#xff1a;不要让类型默默转换建议24&#xff1a;边界、边界、还是边界建议25&#xff1a;不要让四舍五入亏了一方 建议26&#xff1a;提防包装…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...