用户登录前后端分离开发实战案例：React，npm，webpack，ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UI

本章通过一个简单用户登录模块全栈开发案例，从前端 React工程的创建、开发，到后端 Spring Boot + Kotlin + Gradle工程的创建，使用 Spring Data JPA 来操作 MySQL数据库， 使用Freemarker视图引擎，从前往后完整的讲解整个开发过程。

前端 React 工程开发

环境准备

本节实例工程的运行环境和技术栈相关清单如下：

运行环境准备：Node

开发工具 IDE：WebStorm

浏览器：Chrome

框架和组件库：react, babel，jquery， material-ui

构建工具：webpack

我们用 webpack + es6 来结合 react 开发前端应用。本章中，我们手动使用npm来安装各种插件，来从头到尾自己搭建环境。当然，在实际的项目开发中，已经有大神们开发好了脚手架，例如 create-react-app（https://github.com/facebook/create-react-app），我们直接使用脚手架就可以了。为了保持技术细节的原汁原味，我们本章先来带领大家一步一步地来手工搭建 webpack + es6 的 React前端开发工程。

使用npm搭建React的webpack环境

本节我们来介绍如何通过 npm一步一步创建 React前端工程。我们通过Webpack打包构建React工程。

安装配置Webpack环境

我们主要来安装react react-dom babel等npm包，设置webpack.config.js，打包输出bundle.js。

安装Webpack

1.创建项目文件夹

mkdir simple-login

新建 simple-login 文件夹，在此文件夹内进行webpack本地安装。

2.npm初始化

 $ npm init -y
Wrote to /Users/jack/spring-boot-book/chapter03/front-end/simple-login/package.json:{  "name": "simple-login",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"
  },  "keywords": [],  "author": "",  "license": "ISC"}

初始化，目录下生成一个 package.json 文件，内容如上。

3.安装 webpack

WebPack是什么：https://github.com/webpack/webpack-cli

npm install --save-dev webpack

安装成功后 simple-login 目录中会出现node_modules 目录 。

注意:不推荐使用全局安装npm install --global webpack

我们可以看到 .bin 目录下面的webpack脚本：

image

打开脚本看到源码如下：

#!/usr/bin/env nodeprocess.exitCode = 0;/**
 * @param {string} command process to run
 * @param {string[]} args commandline arguments
 * @returns {Promise<void>} promise
 */const runCommand = (command, args) => {    const cp = require("child_process");    return new Promise((resolve, reject) => {        const executedCommand = cp.spawn(command, args, {
            stdio: "inherit",
            shell: true
        });

        executedCommand.on("error", error => {
            reject(error);
        });

        executedCommand.on("exit", code => {            if (code === 0) {
                resolve();
            } else {
                reject();
            }
        });
    });
};
...

通过脚本中的

#!/usr/bin/env node

我们即可知道，这是一个使用 node运行环境执行的一个 js。此时，我们 package.json 文件中在devDependencies 下面多了一行 webpack 包的依赖：

{  "name": "simple-login",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"
  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^4.25.1"
  }
}

安装依赖包

使用 npm install 命令继续安装 react react-dom babel 等依赖包：

npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

本地安装的webpack命令为: ./node_modules/.bin/webpack

我们可以通过打开 package.json ，在 "scripts": {} 中加入"start": "webpack" ，用 npm start 命令代替 webpack命令。

这个时候，我们的 package.json 文件内容变成了

{  "name": "simple-login",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start": "webpack",    "test": "echo \"Error: no test specified\" && exit 1"
  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.26.3",    "babel-loader": "^8.0.4",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "webpack": "^4.25.1"
  },  "dependencies": {    "react": "^16.6.1",    "react-dom": "^16.6.1"
  }
}

作者：东海陈光剑
链接：https://www.jianshu.com/p/21a6a7ac695f