springboot+vue前后端分离项目-项目搭建1

本项目主要涉及到的技术介绍：

前端：vue项目：vue3.2.13版本，整合element-plus、axios（请求后台）、wangeditor（富文本编辑）、支付宝付款，包括页面框架布局、路由、登录、验证码、跨域请求处理、分页查询、增删改查、文件上传下载、页面权限控制、1对多查询、批量删除、树形表、支付宝扫码付款、excel导入导出、JWT集成token权限验证等

后端：springboot项目：springboot3.3.1版本，整合maven、mybatis、mybatis-plus、mysql、lombok、hutool、alipay，包括登录、跨域请求处理、分页查询、增删改查、文件上传下载、页面权限控制、1对多查询、批量删除、树形表、支付宝扫码付款、excel导入导出、JWT集成token权限验证等与前端配套功能，还包括application.properties开发生产环境配置切换、跨域配置、MybatisPlus分页配置、Result返回结果封装、Controller、entity、mapper结构

本系列源码已上传至码云，地址：https://gitee.com/xiexieyc/springboot-vue.git

Linux服务器部署：

　　虚拟机软件：VMware-workstation-full-17.5.2-23775571.exe　　

　　虚拟机安装（CentOS8）：CentOS-8.5.2111-x86_64-dvd1.iso

　　xftp工具连接虚拟机：Xftp-7.0.0162p.exe

　　mysql安装及数据复制：mysql84-community-release-el8-1.noarch.rpm

　　nginx安装配置：nginx-1.26.1.tar.gz

　　jdk配置：jdk-21_linux-x64_bin.tar.gz

　　防火墙配置

开发环境：

　　操作系统：win11

　　开发工具：idea2023.2.1

　　数据库连接工具：idea2023.2.1

　　jdk：java version "21.0.3"

　　maven：Apache Maven 3.9.4

　　数据库：mysql:8.1.0

　　Git：2.45.2

　　Nodejs：v14.16.0

natapp:详见natapp内网穿透工具（个人网络内网转换成外网可访问） - 少年阿川 - 博客园 (cnblogs.com)

前提：

安装jdk：可参照Windows下升级JDK - 少年阿川 - 博客园

安装maven：可参照maven安装及配置 - 少年阿川 - 博客园

安装mysql：可参照mysql安装（windows-mysql-8.1.0-winx64.zip安装） - 少年阿川 - 博客园

安装git：可参照git下载与安装 - 少年阿川 - 博客园

安装idea开发工具：参照别人的破解版Key is invalid

安装Nodejs：详见如下：

1.vue.js官网学习vue的语法等知识，有html、css、JavaScript基础。

vue官网：https://cn.vuejs.org

2.下载node.js，使用其中的npm包管理工具构建vue项目，npm管理依赖，类似maven，node-v查看版本，建议14以上,下载node-v18.17.1-x64.msi文件，运行一路下一步即可安装，安装后node -v检查

nodejs官网：https://nodejs.org/zh-cn/

3.cmd到项目路径下，npm -v检查npm版本，npm install -g @vue/cli，安装vue脚手架，vue create创建vue项目

（如果从码云拉取的项目，前端模块路径在vue下，启动报错：“‘vue-cli-service‘ 不是内部或外部命令”，，在vue模块路径下执行npm install -g @vue/cli和npm install @vue/cli-service解决，不需要再创建vue项目）

（npm install命令如果一直卡住，修改镜像

先查看镜像地址npm config get registry

修改镜像地址npm config set registry https://registry.npmmirror.com

修改后再查看镜像地址）

配置选择

选择如下四个，取消Linter

vue版本选3.x

使用history mode，输入y

选择如下

保存配置，第一次可以y，已保存过可以n

创建成功日志

运行项目

启动成功日志

登录页面测试

ctrl+c，y，关闭运行的项目

4.vue项目开发使用idea，也可使用vscode，看习惯，vue项目文件夹拖到idea里启动即可，配置启动项

配置保存后，点运行，可快速启动项目

启动后自动跳转到页面配置

5.主要文件结构介绍，index.html入口html文件包括了根元素，assets静态资源，components组件，router路由，store页面变量，views视图（页面级组件），App.vue根组件，main.js项目入口文件实例化Vue应用，package.json依赖配置文件，node_modules依赖的第三方库