3年前端从鸡蛋开始上手后端开发-环境搭建

324 阅读5分钟

前言

首先说一下为什么要写这一篇文章?

考虑到目前笔者已经有一段开发经验,想快速上手后端,但是又不想画太多时间去学习java、Spring Boot等,想从实战中直接现学现卖。 当然看文档、看视频学习的比较全面,但是对于我这种前端想转全栈的人来说效率高于一切,所以才有了这么一篇文章。 首先说一下我目前技术栈: 前端: vue、uni-app、react(入门) 后端: java(以前大学学的),距离至今已经有4、5年没有写过了,所以基本可以算零基础。 但是由于有前端的经验,很多东西其实没必要去重新学,快速过一遍就行了。

废话不多说,让我们开始吧

image.png

开发工具的准备

前端: 这里不再多说考虑文章受众人群,估计都有

后端: idea、jdk、mysql、navicat

这里的开发工具和环境可能不固定,目前我能想到就只有这边,后续可能还会补充

项目实战

项目的话我这边选择开源框架若依的管理后台

开源地址:gitee.com/y_project/R…

项目的技术栈:

  • 前端采用Vue、Element UI。
  • 后端采用Spring Boot、Spring Security、Redis & Jwt。

为什么不自己搭建?

目前来说我们前端开发项目也基本都是使用脚手架直接生成基础框架,而我们现在的目的:快速了解后端语法、知识等内容,所以直接使用开源框架可以清晰的看到目前后端的开发语法以及写法、流程等

使用开源项目

开源项目下载下来有以下文件:

image.png

按照目前看到一脸懵逼,但是有doc文件夹,首先查看一下里面的内容。

doc文件内找到使用说明

image.png

查看说明中使用的开发工具是Eclipse,使用idea也是一样的,我这里就以idea为例。

安装 Maven

tip: Maven本身就是java写的所以要确保下载安装了java的JDK环境

我的理解: Maven类似前端vite、webpack的打包工具

官方解释: Maven 是工具,专注服务于 Java 平台的项目自动化构建和依赖管理。

step1: 到官网下载文件 maven.apache.org/download.cg…

打开的效果如下

image.png

选择自己需要的文件,这里解释一下link解释连接、Checksums和Signature这两个似乎是防止黑客入侵的生成假链接 可以说三者都是一样就,就是另外两个就是做了一些操作为了确保用户能下载到正确的软件

这里说一下4行里怎么选择

image.png

大家根据自己的需要进行选择,我是windows所以下载第二个

image.png

注意!!Maven3.9+至少需要JDK8或更高版本以上才能使用

tip: 如何查看jdk版本 cmd输入 java -version

这里图中可以看到1.8.0 就是jkd8

image.png

step2: 解压把内容解压出来,路径需要记住

step3: 配置环境变量

新建系统变量: MAVEN_HOME 值为刚才安装的路径

image.png

接着下系统变量中找到path,点击编辑 %MAVEN_HOME%\bin

image.png

image.png

step4: 验证是否安装成功 cmd输入 mvn -v

出现以下内容说过安装过,我这边以前安装过

image.png

step4: 配置maven

修改默认仓库,在安装目录下conf/settings.xml中修改,我在maven根目录下新建了一个文件repository做为仓库

image.png

接着修改配置 image.png

step5: 打开idea File>settings搜索Maven

这边可以看一下这两个是不是刚才改的那两个,我这边没识别到就自己改一下

image.png

image.png

这样就配置完毕了

接着开始到我们项目的部分了

idea中打开我们项目

image.png

打开后注意一下,idea打开项目之后会开始下载依赖,进度可以看底部的进度条

image.png

接着看下doc文件中的运行的配置,是哪个面显示的目录似乎没有维护,那么没关系,我们只要找到这个文件就行了。 在RuoYi-Vue-master\ruoyi-admin\src\main\resources\application-druid.yml

image.png

这里我们需要先安装一下mysql和navicat

ps: mysql和navicat的安装就不在这里过多赘述,网上有很多教程

创建数据库

在项目文件夹中可以看到有一个目录sql下面有两个文件,接着打开navicat,连接上数据库.

image.png

新建一个数据库,这里名字可以随便起,为了好辨认我就直接叫ruoyi

image.png

接着就是运行两个sql脚本,右击数据库

image.png

运行完成,刷新一下,我们就会得到许多的表

image.png

这时候数据库算是配置完成了

接着开始配置数据库,打开admin下的目录,找到这两个文件

image.png

配置mysql

image.png

配置redius

image.png

接着就运行后台项目

image.png

看到以下字眼说明后端项目已经成功启动

接着我们来验证一下,跑一下前端项目试一下,前端项目启动就不多说了

image.png

需要注意的是这里可以查看我们本地连接的端口,也可以进行配置,也就是说我们前端的接口请求要指向 localhost:8080也就是这边配置的端口

image.png

成功访问,此时我们的前后端算是配置完成

image.png

接着就开始快速学习大量后端的知识了

0fecd351a1ac2c1241542dafe7dd15f2.gif