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

Z时代
2024-01-10
分类：综合

vue

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

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

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

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

　　3.分页功能

　　4.用户的导入与导出

　　5.文件上传

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

　　7.验证码

　　8.整合支付宝沙箱支付

二.技术栈：前后端分离

　　1.前端框架：vue+ElementPlus

　　2.后端框架：SpringBoot+MybatisPlus

　　3.数据库：Mysql

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

　　　　链接：https://pan.baidu.com/s/1k6fOBTm8JoAGJnlVWprA3Q
　　　　提取码：5678

三.项目从这里开始：

　　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项目