基于Springboot＋Vue技术的前后端运用

一、关于使用Springboot和VUE的前置注意事项

首先要先将相关的软件和环境变量配置进行安装完备

①相关软件

1、jdk（后端）

2、node.js（前端）

3、mysql（数据库）

4、ideal（最好是专业版）

②环境变量配置

在完成好相关软件的安装之后，要实现相关环境变量的配置，可以在cmd命令控制台上显示，首先要做到的是实现用户环境变量的配置。

例如：运行cmd 提示node不是内部或外部命令，这里需要再用户变量里的path把node安装的路径添加进去，例如我是D盘下的node-v16.20.0-win-x64 路径就是D:\node-v16.20.0-win-x64 配置好之后 重新打开cmd 输入node -v 可以看到版本号

实现了用户环境变量的配置之后，就要进行系统环境变量的设置。

拿node的环境变量举例便是在系统环境变量新建出NODE_PATH，之后在将路径添加在node安装的目录。

注意：在安装各个软件的目录选择的时候，不要选择有中文目录的相关的路径，可能会导致程序报错！

二、关于对web技术的相关理解

关于wbe前端的大体框架

在该技术中，一共分成了三个大类的web前端的实现

首先该代码采用了JavaScript和typescrip两个技术的结合，加入了typescrip的技术后，比起只使用JavaScript技术有着许多优点

• 可以避免经典的错误 'undefined' is not a function.
• 在不严重破坏代码的情况下，重构代码更容易。
• 使大型、复杂的应用程序源码更易阅读。

关于对JavaScript和typescrip的结构大致解读

1、src（项目核心文件）

与传统的Vue项目结构一样，两个包中均含有src（项目核心文件）

2、APP.vue(根组件)

一个vue页面通常由三部分组成:模板(template)

js(script)

关于style部分的使用，该份代码中并没有使用出style的部分

3、main.js(入口文件）

关于main的初始逻辑化解决问题

该份代码的main.js的框架有所不同，在传统框架中，会使router这一板块出现问题，路由都是从后端接口返回的，如若直接初始化挂载路由，这时前端还没有从后端请求路由的数据，所以只能写到路由拦截器里，这样会很不清晰，在查询相关资料后得到解决问题的方法是

 1、如果存在登录信息，则先ajax请求用户的所有路由，然后加载，再去创建vue实例和挂载路由
 2、如果不存在路由信息，则创建vue实例和挂载路由（此时的路由应该只有login页面，因为用户拥有哪些路由是登录之后才知道的）
  3、以上，在main.js里两个方法，一个是 获取登录信息getLoginInfo，另一个初始化vue: initVue。

4、router（路由设置）

router文件夹下的index.js，为路由配置文件。

5、index.html（主页）

在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充

关于JavaScript

与typescrip不同的是，JavaScript的包中包含了一个node_modules的包，所以JavaScript与node有着一定的联系，node的相关操作靠着JavaScript的进行实现。

三、关于Springboot技术的相关理解

具体分类的大包如下

1、分析sa-admin包

（1）关于springboot中的Controller类

使用 Controller 注解的类将会被 Spring MVC 自动扫描，并注册为一个控制器。并且是一个传参的过程

通过controller的传参，实现继承者

（2）关于config类

config类在springboot中起着重大的作用，进行配置文件

config类可以在实现线上环境和相关配置环境中的配置文件不发生基本的故障，在进行本地调试时和线上使用时，不发生相关程序错误

（3）关于application

为程序的执行入口

2、关于sa-common包

common包与admin包的大致相同，但也有些许的区分

同时在sa-common的包里面，可以进行JAVA-dev中进行相关数据库的配置

四、关于target

（1）target包中一共有两个分类，target的主要目的是进行相关目标的查询，使相关的查询能够运用到springboot里面

（2）关于application.yaml

可以用来排查相关的错误等

五、关于执行程序时，相关问题以及解决方案

（1）端口占用问题

在执行相关运行程序的时候，如果打开了数据库，但是代码并没有运行成功，在修改了代码之后，再运行程序的时候，会出现端口被占用的现象

可以在IDEA中，Terminal控制台中，相关的占线的端口，查看端口号之后，使用命令提示符输入taskkill /t /f /im 进程号，再次启动程序。

（2）关于npm配置问题

在Terminal控制台中输入了npm install的命令后，显示npm报错的时候，可以去重新检查一下环境变量的配置，在环境变量中的系统环境变量中，重新配置，再次运行程序即可

（3）关于maven问题

在maven的中央仓库中，会出现j飘红的问题，说明maven中央仓库中没有这个jar包

相关解决方式

（1）在IDEA中找到Reimport命令重新进行依赖

（2）进行jar包的重新配置，如上所说，相关文件不要放在有中文路径的文件夹里面，会导致找不到问题，重新存放在一个没有中文地址的包里面即可

（4）关于mysql数据库的问题

必须将数据库的相关密码和信息填写正确，才能打开数据库，使程序能够正常运行

六、启动程序

1、在检查完相关程序无无误后，则可以启动程序点击package.json

在终端命令台输入cd javascript-ant-design-vue3，输入npm install的安装命令。

相关安装无误后，可以启动npm run dev，代码运行一段时间后，出现网址则为成功

2、在运行成功后

3、若没有显示出相关的验证码，则可以进行安装redis

用win＋R打开命令操作台

在根目录输入redis-server.exe redis.windows.conf命令

再在跟目录输入redis-cli.exe -p 6379 127.0.0.1:6379>

4、启动网站即可实现成功

七、总结

在此次前后端的交互中，理解到前后端的相关作用，通过不同的软件，来实现网页目标的实现，同时加强了我各个软件的使用的方法，遇到的一些相关问题也如上文逐一呈现，以及对这些程序的一些自我认知。同时大致遇到的一些问题也如上文逐一呈现出来。