Spring Boot+Vue项目从零入手

Spring Boot+Vue项目从零入手

一、前期准备

在搭建spring boot+vue项目前,我们首先要准备好开发环境,所需相关环境和软件如下:

1、node.js

检测安装成功的方法:node -v

2、vue

检测安装成功的方法:vue -V

3、Visual Studio Code

这个软件是编写vue代码的工具,也可以使用idea,这个视情况而定。

4、jdk

检测安装成功的方法:java -version和javac -version

5、mysql

6、idea

7、navicat

二、搭建vue页面

2.1、创建vue项目

1.打开cmd窗口,进入准备建立vue项目的文件夹,通过vue create XXX建立一个vue项目,第一步

Vue CLI v5.0.8
P1ease pick a preset:
Default ([Vue 3] babe1,eslint)
Default ( [Vue2]babel,eslint)
Manually select features

选择Manually select features回车

然后选择Babel和Router

选择2.X

输入y

选择In package.json

输入n

等待项目创建。

扩展

npm加速:

npm config set registry https://registry.npm.taobao.org

2.2、运行

cd XXX

npm run serve

测试项目是否能正常运行,可适当建立参数测试回显功能

vue项目可选择使用idea或者VSC打开,其中vsc调出终端快捷键ctrl+shift+Y

测试代码:在app.vue中

<h1>{{name}}</h1>
data(){return{name:"凡大帅哥!"}}

2.3、引入Element UI组件

npm i element-ui -S

element UI有文档,地址:element.eleme.io/#/zh-CN/component/container

首先使用命令安装组件,然后打开main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI,{size:"small"});

加入上面这几句话引入

测试:

<el-button type="danger">这是el</el-button>

2.4、官网扒取示例代码

去官网扒取示例代码,调整为自己需要的网页效果

Container 布局容器

home.vue

<template><div style="height:100%"><el-container style="height: 100%"><el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%;overflow: hidden;"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><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"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container>
</el-container></div></template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',components: {HelloWorld},data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item)}}
}
</script>

写一个全局css——gloable.css,放在assets目录下

html,body,div{margin: 0;padding: 0;
}
html,body{height: 100%;
}

在main.js中引入

import './assets/gloable.css'

app.vue

<template><div id="app"><router-view/></div>  
</template><style>
#app {height: 100%;
}</style>

三、搭建SpringBoot框架

1、创建Springboot项目,勾选Lombok(简化java代码的插件)、web——Spring Web(相当于SpringMVC)、sql——MyBatis Framework+MySql Driver

版本不要选太高了

pom配置阿里云仓库

<repositories>
<repository>
<id>nexus-aliyun</id>
<name>nexus-a1 i yun</name>
<ur1>http ://maven . aliyun. com/nexus/content/ groups /pub1ic/</ur1>
<re1eases>
<enab1ed>true</enal1ed>
</releases>
<snapshots>
<enab1ed>false</enab1ed>
</snapshots>
</repository>
</repositories>
<p1uginRepositories>
<p1uginRepository>
<id>pub1ic</id>
<name>aliyun nexus</name>
<ur1>http: //maven . aliyun. com/nexus/content/ groups/pub1ic/</ur1>
<re1eases>
<enab1ed>true</enab1ed>
</releases>
<snapshots>
<enabled>false</enab1ed>
</snapshots>
</p1uginRepository>
</p1uginRepositories>

创建好项目后先启动,确认项目可以正常运行,再将vue整个拖入Springboot项目中

也可不拖入,访问时将地址写全

配置vue启动

再配置tomcat的地方点+,选择npm,下方选择vue的package.json,下方run的下一格写serve

四、接口整合

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JSP WEB开发(一) JSP语言基础

目录 JSP JSP简介&#xff1a; JSP页面 JSP运行原理 JSP脚本元素 JAVA程序片 局部变量 全局变量和方法的声明 全局变量 方法的声明 程序片执行特点 synchronized关键字 表达式 JSP指令标记 page指令 include指令 JSP动作标记 JSP动作元素include和include指令的…

Docker在人工智能领域的应用与实战

摘要 人工智能&#xff08;AI&#xff09;技术的快速发展带来了对高效开发和部署工具的需求。Docker作为一个创新的容器化平台&#xff0c;为AI领域提供了强大的支持。本文详细介绍了Docker在AI模型开发、训练、部署以及服务器集群管理等方面的应用&#xff0c;并探讨了其在数…

AcWing 1550:完全二叉搜索树

【题目来源】https://www.acwing.com/problem/content/1552/【题目描述】二叉搜索树 (BST) 递归定义为具有以下属性的二叉树&#xff1a; &#xff08;1&#xff09;若它的左子树不空&#xff0c;则左子树上所有结点的值均小于它的根结点的值 &#xff08;2&#xff09;若它的右…

大数据平台之数据同步

数据同步也成为CDC (Chanage Data Capture) 。Change Data Capture (CDC) 是一种用于跟踪和捕获数据库中数据变更的技术&#xff0c;它可以在数据发生变化时实时地将这些变更捕获并传递到下游系统。以下是一些常用的开源 CDC 方案&#xff1a; 1. Flink CDC Flink CDC 是基于 …

快速上手LangChain:构建强大的语言模型应用

引言 在人工智能和自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;构建高效且强大的语言模型应用变得越来越重要。LangChain 是一个专为开发者设计的框架&#xff0c;它简化了语言模型应用的构建流程。本文将详细介绍LangChain的功能和使用方法&#xff0c;帮助读者…

76 4G模组 境外拨号入网注意

1 引言 最近朋友把国内的设备拿到新加坡了&#xff0c;然后发现原本国内可以使用的设备无法在异国他乡联网&#xff0c;所以就叫我来看看&#xff0c;发现是附网返回状态、入网APN发生了改变导致的。另外&#xff0c;如果在境外使用国产4G模组拨号入网&#xff0c;也需要关注4G…

Windows安装超好用的截图工具——Snipaste

1、下载 官网&#xff1a;https://zh.snipaste.com/ 2、安装 &#xff08;1&#xff09;解压下载的压缩包 &#xff08;2&#xff09;选中Snipaste.exe文件&#xff0c;右键发送到 -- > 桌面快捷方式 &#xff08;3&#xff09;双击桌面Snipaste图标&#xff0c;桌面右下…

linux 服务器数据备份 和 mysql 数据迁移

查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库&#xff08;表&#xff09;到本地 mysqldump是MySQL自带的一个实用程序&…

解析Java中1000个常用类:Date类,你学会了吗?

在线工具站 推荐一个程序员在线工具站:程序员常用工具(http://cxytools.com),有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具,效率加倍嘎嘎好用。程序员资料站 推荐一个程序员编程资料站:程序员的成长之路(http://cxyroad.com),收录了一些列的技术教程…

Git 完整的提交规范教程

约定式提交规范 本文中的关键词 “必须&#xff08;MUST&#xff09;”、“禁止&#xff08;MUST NOT&#xff09;”、“必要&#xff08;REQUIRED&#xff09;”、“应当&#xff08;SHALL&#xff09;”、“不应当&#xff08;SHALL NOT&#xff09;”、“应该&#xff08;S…

云计算【第一阶段(24)】Linux文件系统与日志分析

一、文件与存储系统的inode与block 1.1、硬盘存储 最小存储单位&#xff1a;扇区(sector) 每个扇区大小&#xff1a;512字节 1.2、文件存取 最小存取单位&#xff1a;块(block)连续八个扇区组成&#xff1a;块(block) 每个块大小&#xff1a;4K文件数据&#xff1a;实际数据…

Leetcode1115 交替打印 FooBar及其测试

题目描述 相关标签 相关企业 给你一个类&#xff1a; class FooBar { public void foo() { for (int i 0; i < n; i) { print(“foo”); } } public void bar() { for (int i 0; i < n; i) { print(“bar”); } } } 两个不同的线程将会共用一个 FooBar 实例&#xf…

Java面试八股之如何提高MySQL的insert性能

如何提高MySQL的insert性能 提高MySQL的INSERT性能可以通过多种策略实现&#xff0c;以下是一些常见的优化技巧&#xff1a; 批量插入&#xff1a; 而不是逐条插入&#xff0c;可以使用单个INSERT语句插入多行数据。例如&#xff1a; INSERT INTO table_name (col1, col2) V…

正则表达式-使用笔记

正则表达式使用不当&#xff0c;会导致CPU飙升&#xff1b; 二、相关参考 正则表达式 – 语法 | 菜鸟教程 sparksql 正则匹配总结 三、回溯原理 导致性能下降最主要原因&#xff1a; .* 会导致大量回溯| 分支操作 https://zhuanlan.zhihu.com/p/27417442 四、常用工具 regex…

OpenSNN推文:科技前沿动态速览:六七月份的技术革新与行业进展

随着夏季的到来&#xff0c;科技界的热度也如同气温一般持续攀升。在这个充满活力的季节里&#xff0c;从量子计算的深邃世界到脑机接口的未来探索&#xff0c;从人工智能的智慧跃升到大数据的海洋遨游&#xff0c;再到运营策略的精妙布局和设计领域的创新火花&#xff0c;以及…

2024第三届中国医疗机器人大会第一轮通知

2024第三届中国医疗机器人大会第一轮通知 大会背景 医疗机器人技术正以前所未有的速度在主流医学领域取得卓越进展&#xff0c;新应用、新技术不断涌现&#xff0c;使得该领域在过去一年中取得了令人惊叹的增长。然而&#xff0c;这仅仅是冰山一角&#xff0c;未来的发展空间仍…

Docker:一、安装与卸载、配置阿里云加速器(Ubuntu)

目录 &#x1f341;安装docker&#x1f332;1、环境准备&#x1f332;2、安装docker Engine&#x1f9ca;1、卸载旧版、任何冲突的包&#x1f9ca;2、使用存储库安装&#x1f9ca;3、安装 Docker 包。&#x1f9ca;4、查询是否安装成功&#x1f9ca;5、运行hello-world镜像&…

柯桥小语种学校成人生活口语学习|西班牙语中H为什么不发音…

01 H en el alfabeto espaol 西语字母表中的h 字母H是唯一一个在标准西班牙语中不再代表任何音素的字母。尽管在它单独出现时被叫做HACHE&#xff0c;但在大多数单词拼写中&#xff0c;它只是一个没有声音对应关系的字母&#xff0c;因此RAE称其为“无声的H”&#xff08;hac…

机器学习——无监督学习(k-means算法)

1、K-Means聚类算法 K表示超参数个数&#xff0c;如分成几个类别&#xff0c;K值就取多少。若无需求&#xff0c;可使用网格搜索找到最佳的K。 步骤&#xff1a; 1、随机设置K个特征空间内的点作为初始聚类中心&#xff1b; 2、对于其他每个点计算到K个中心的距离&#xff0c;…

荞面打造的甜蜜魔法:甜甜圈

食家巷荞面甜甜圈是一款具有特色的美食。它以荞面为主要原料&#xff0c;相较于普通面粉&#xff0c;荞面具有更高的营养价值&#xff0c;富含膳食纤维、维生素和矿物质。荞面甜甜圈的口感可能会更加扎实和有嚼劲&#xff0c;同时带着荞面特有的谷物香气。在制作过程中&#xf…