很多小伙伴都比较疑问,我们学习了很多的技术库,看了很多的官方文档,怎么才能独立做一个小的项目呢?把我们的知识运用到实战当中呢?别急,本教程会一步一步的带领大家,做一套前后端分离的项目,最后上线部署到阿里云服务。(腾讯云、百度云同理,关键看哪个便宜。哈哈,开个玩笑,言归正传。)


首先来介绍下本教程用到的技术栈,用的是比较流行的React架构作为前端页面渲染,有的小伙伴可能用的是Vue或者是AngularJS,没关系,我后面系列教程涉及的。那我们后端用的技术是JAVA语言,java自从Sun
Microsystems公司于1995年5月推出以来,收到了广泛的欢迎,连续评为使用最多、最广泛的语言。Spring有作为java中最优秀的架构,你没有理由拒绝它。

<>技术简介

(1)React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的
V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React
拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React特点

声明式设计 React采用声明范式,可以轻松描述应用。
高效 React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活 React可以与已知的库或框架很好地配合。
组件 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
JSX JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
单向响应的数据流 React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
(2) Spring Boot是构建所有基于Spring的应用程序的起点。Spring Boot旨在尽可能快地启动和运行,只需最少的Spring前端配置。

<>环境搭建


欲先攻其事,必先利其器(不说明自己使用的环境行为都是耍流氓),网上的工具有很多,每个人都有每个人的爱好,我不勉强,在这里我只介绍我这边用的一些比较好用的一些工具。(
再次声明,本教程是实战教程,不是入门教程,下面工具自行下载安装,如果安装问题可以在下边评论我,我会统一回复!)
1、vscode(Visual Studio Code)+Node.js+git 2、JDK1.8(springboot 要求最低版本)+intellij
idea+maven 3、Oracle 11g (或者更高,不过会有一些函数语法差异)+ Redis server(缓存)
装好之后,查看JAVA环境是否安装成功,打开DOC命令行工具,输入java -version
C:\Users\hp>java -version java version "1.8.0_161" Java(TM) SE Runtime
Environment (build 1.8.0_161-b12) Java HotSpot(TM) 64-Bit Server VM (build
25.161-b12, mixed mode)
查看NODE.JS环境是否安装成功,打开DOC命令行工具,输入npm -version
C:\Users\hp>npm -version 5.6.0
还有童鞋会问intellij idea不是收费的吗?不要急,这里给大家介绍一个网站,把里面的注册服务地址粘贴进去就可以了。传送门:
http://idea.lanyus.com/ <http://idea.lanyus.com/>

<>安装依赖

到此我们的工具已经下载安装好了,不过别急,我们还需要下载我们工程所需要依赖,React给我们提供了一整套技术栈,在这里我们选择:
create-react-app:快速构建工具 React-Router:路由管理器 Redux(熟悉mobx可以自行安装):状态管理器
webpack:项目管理工具(create-react-app自动安装好了,无需手动安装)
babel:ES6语法转换工具(create-react-app自动安装好了,无需手动安装) Ant Desgin:蚂蚁金服退出的UI组件库,开箱即用
babel-plugin-import:按需引入插件
接下来是我们的Spring
Boot依赖这里我们借助maven项目依赖工具,IDEA会根据pom.xml文件配置自动下载依赖,这里简单说下,我们用的是阿里巴巴的Durid连接池,和Mybatis包来对数据库进行操作。
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version> </properties> <dependencies> <dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version>
</dependency> <dependency> <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId> <scope>test</scope>
</dependency> <dependency> <groupId>com.alibaba</groupId>
<artifactId>druid</artifactId> <version>1.1.6</version> </dependency>
<dependency> <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!--
https://mvnrepository.com/artifact/com.oracle/ojdbc14 --> <dependency>
<groupId>com.oracle</groupId> <artifactId>ojdbc14</artifactId>
<version>10.2.0.3.0</version> </dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency>
<groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId>
<version>3.3.2</version> </dependency> <dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId> <version>4.3.1</version> </dependency>
</dependencies>
好了,到了这里我们的环境和依赖都已经安装好了,接下来都要动手撸代码了!

<>目录

【史上最全的React全家桶+Spring Boot(JAVA)分布式实战(一)】
<https://blog.csdn.net/weixin_43404667/article/details/83045016>
【史上最全的React全家桶+Spring Boot(JAVA)分布式实战(二)】
<https://blog.csdn.net/weixin_43404667/article/details/83045689>