史上最全的React全家桶+Spring Boot(JAVA)分布式实战(一)

史上最全的React全家桶+Spring Boot(JAVA)分布式实战(一)

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

首先来介绍下本教程用到的技术栈,用的是比较流行的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/

安装依赖

到此我们的工具已经下载安装好了,不过别急,我们还需要下载我们工程所需要依赖,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)分布式实战(一)】
【史上最全的React全家桶+Spring Boot(JAVA)分布式实战(二)】