SpringBoot+Vue项目-优快云博客

在做项目前，确保自己的设备已安装IDEA，VSCode，Navicat，Apipost；jdk，node.js，maven，mysql。如果没有安装的参考之前发布的各个安装文档

一、前端

准备工作

1.检查node.js是否安装

2.检查npm是否能运行

3.检查脚手架是否安装（创建vue2项目才需要，vue3可不要）

注：命令中V是大写的

上面这三步如有没安装的请看之前发布的“下载并安装node.js”文档。

创建vue2的项目命令：
创建前就需要检查脚手架是否安装
npm install -g @vue/cli
注：如需安装脚手架，在安装之前应该先修改镜像地址

vue create 项目名称
# 然后在提示中选择 Vue 2

1.创建vue3项目

创建方法不唯一，这是其中一种

创建成功后，使用vscode打开

安装项目依赖

按住ctrl+鼠标单击网址或者复制网址到浏览器，页面成功出现了，再进行下一步操作。

2.安装element-plus

官方文档：https://cn.element-plus.org/https://cn.element-plus.org/

查看文档里的导入方法

导入且挂载

3.安装Axios

官方文档：http://axios-js.com/http://axios-js.com/

安装

4.编写前端代码

这是一个条纹表格的代码，从官方文档的模版复制即可

这只是一个演示，可复制其它，也可自己编写

5.运行前端页面

在终端cmd输入 npm run dev 即可运行成功，然后按住ctrl+鼠标单击网址或者复制网址到浏览器即可出现此页面

二、后端

准备工作

在创建项目之前确保已下载好jdk和Maven包，并且是配置好的。

1.查看jdk

2.maven包的配置

（1）首先下载一个maven工具；

（2）解压缩maven工具放在自己想要的目录下,下一步配置时需要此路径；

（3）环境里面添加maven路径，并配置在path中；

（4）修改Maven的配置文件，在maven包中的conf目录下的setting.xml

添加以后存放开发包的仓库目录

<localRepository>自己的本地仓库路径</localRepository>

在Mirrors标签中加入阿里云的镜像地址，可以帮我们加快项目的构建速度

<mirrors>
<mirror>
   <id>alimaven</id>
   <name>aliyun maven</name>
   <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
   <mirrorOf>central</mirrorOf>
</mirror>
</mirrors>

修改后如图所示：（有的打开是空白，直接添加这两个配置就行，如果有的，直接编辑修改）

1.创建项目

打开IDEA，新建项目,选择Spring Boot

2.更改maven配置路径

3.创建自己项目所需的软件包，类，接口等并进行程序编写

此项目的目的为显示数据库user表中的数据，具体代码在项目上，如有需要，私信。

三、数据库

准备工作

查看是否安装mysql

命令：mysql -V（注：V是大写的）

创建一个数据库shop，并创建一个user表，为该表添加上数据

四、测试数据是否发送成功

后端项目创建好后，运行起来，然后在Apipost软件上面输入地址进行测试，在此显示出数据库的数据，表示数据发送成功。

五、在前端页面接收后端发送的数据

更改前端项目的代码，如图所示：

六、重新运行成功

以上内容为自己创建项目时总结，仅供参考！