springboot实战小项目-简要介绍、vue项目创建

因为菜，所以要好好学习！

一.项目介绍：这是一个后台管理系统，准备实现的功能：

1.登录、注册、个人信息查看、退出登录

2.根据关键字查询用户、新增用户、根据id或者其他字段排序、编辑用户信息、删除用户

3.分页功能

4.用户的导入与导出

5.文件上传

6.使用云服务器部署项目

7.验证码

8.整合支付宝沙箱支付

二.技术栈：前后端分离

1.前端框架：vue+ElementPlus

2.后端框架：SpringBoot+MybatisPlus

3.数据库：Mysql

4.用到的插件/工具类：Hutool、分页插件、跨域、请求返回结果、封装axios的js。链接：

三.项目从这里开始：

1.环境搭建（jdk8+nodejs14.18.3+npm6.14.15+idea+sqlyog）

（1）下载地址：直接去各个软件的官网去下载就好

（2）安装步骤：去搜吧小伙子

（3）注意细节：安装完各个软件工具后，运行cmd命令，输入java和javac查看jdk是否安装成功，如果出现xxx不是内部命令的字样就说明安装失败，输入node -v、npm -v查看相应版本，确保都安装成功了后，输入npm install -g @vue/cli这个命令，安装一个vue的脚手架，用来创建vue项目，环境就到这里。

2.创建vue项目

（1）新建一个文件夹，命名为“springboot-vue”。

（2）运行cmd命令，cd到刚刚新建的文件夹目录下，输入vue create springboot-vue-demo(语法：vue create 项目名)，然后点击“回车”。

（3）这一步是选择相关配置，按上下键选择“Manually select features”这个选项，点击“回车”。

（4）点击“空格”进行选择相关选项，用上下键控制移动，这里选择这四项，然后点击“回车”。

（5）选择3.x，点击“回车”。

（6）这里是问你是否用以前的路由方式，输入y，点击“回车”。

（7）这里选择In package.json选项，点击“回车”。

（8）输入y，点击“回车”。保存这个项目的配置。

（9）这里是要你输入一个自定义的名字即可，我这里输入的123，输入完点击“回车”。

（10）出现如下的窗口，说明项目正在创建，等待创建完毕即可。

（11）项目创建完毕后，在我们新建的文件夹下就多出来一个名为springboot-vue-demo的文件夹，这就是我们创建的vue项目

（11）用idea开发工具打开这个文件夹，在idea中配置运行环境，打开后的样子如下所示。

（12）在idea中配置运行vue项目的环境，点击idea上面的Add Configuration...按钮，打开下面的窗口。

（13）点击左上角的加号按钮，往下滑找到npm选项，点击后出现如下的窗口。

（14）配置并核对如下的几个选项。核对完毕后点击“apply”，然后点击“ok”，然后点击Add Configuration...旁边的绿色小三角按钮运行项目

（15）项目运行完毕后打开浏览器输入http://localhost:8080/，如果打开了以下页面，说明项目启动成功，下一步就是做前端页面。