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

用户登录前后端分离开发实战案例: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 node

process.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"
  }
}

这里的 babel-loader:8.0.4跟babel-core:6.26.3 版本不兼容,我们改成 "babel-loader": "^7.1.5" 。

可以看到,babel、webpack依赖被放到了 devDependencies 中,react 依赖被放到了 dependencies中。那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢?

devDependencies和dependencies的区别

我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如:

--save-dev
--save

在 package.json 文件里面提现出来的区别就是,使用 --save-dev 安装的 插件,被写入到 devDependencies 对象里面去,而使用 --save 安装的插件,则被写入到 dependencies 对象里面去。

devDependencies 里面的插件只用于开发环境,不用于生产环境。而 dependencies 是需要发布到生产环境的。

配置webpack

创建项目文件,最终结构如下:

image

文件说明如下:

  • app/index.js 入口文件
  • dist 用于盛放webpack打包输出的bundle.js
  • webpack.config.js 用于配置webpack环境。

编写webpack.config.js配置文件

const path = require('path');
module.exports = {
    entry: "./app/index.js",  //入口文件
    output: {
        path: path.join(__dirname, "/dist/"),    // 所有输出文件的目标路径,绝对路径!
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,                //babel-loader将其他文件解析为js文件
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015", "react"]  //babel-loader需要解析的文件
                }
            }
        ]
    }
};

webpack 开箱即用,可以无需使用任何配置文件。然而,webpack 会假定项目的入口起点为 src/index,然后会在 dist/main.js 输出结果,并且在生产环境开启压缩和优化。

通常,你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个 webpack.config.js 文件,webpack 会自动使用它。

更多关于 webpack的配置说明参考:https://webpack.github.io/

package-lock.json的作用

我们有看到上面的目录中,多了一个package-lock.json文件。这个文件是干嘛用的呢?其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

根据官方文档,这个package-lock.json 是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本。

这里举个例子:

"dependencies": {
 "@types/node": "^8.0.33",
}

这里面的向上标号^是定义了向后兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。

编写React组件 App.js

代码如下:

var React = require('react');

export default class App extends React.Component {

    render() { // Every react component has a render method.

        let now = new Date();
        let datetimeString =`${now.toDateString()}  ${now.toTimeString()}`;

        return ( // Every render method returns jsx. Jsx looks like HTML, but it's actually javascript and functions a lot like xml, with self closing tags requiring the `/` within the tag in order to work propperly
            <h1>
                Hello World, Now Time is {datetimeString}
            </h1>
        );
    }
}

其中,var React = require('react') 是引入 react 包。我们的App类继承自React.Component。每个 React Component 都必须要有一个 render() 函数,该函数返回一个 JSX 对象。

在render() 函数中,我们实现了一个简单的 App 组件:给世界问好,并展示当前的时间。

编写index.js和index.html文件

我们在 index.js 中引入我们上面的 App组件,代码如下:

import App from "./components/App";
var ReactDOM = require('react-dom');

ReactDOM.render(
    <App/>,
    document.getElementById('App')
);

其中,元素 id = 'App' 是我们下面在index.html 中指定的 div 。

在 index.html中引用 webpack 打包生成的bundle.js, 代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello React!</title>
</head>
<body>
<div id="App"></div>
<script src="dist/bundle.js"></script>
<!--引用webpack打包输出的bundle.js-->
</body>
</html>
执行webpack命令

我们使用 npm start 来执行 webpack打包动作,我们看到在dist目录一下生成了一个bundle.js文件。然后,直接打开index.html 看到页面效果:

Hello World, Now Time is Sat Nov 10 2018 12:49:10 GMT+0800 (中国标准时间)

使用 React前端组件库 Material-UI

简介

React Material-UI (https://github.com/mui-org/material-ui)是一组实现了谷歌 Material Design 设计语言的 React 组件。它在 GitHub 上的 Star 数> 4w,fork>8k,可能是最受欢迎的 React 组件库了,目前最新版本是 v3.4.0。

安装

下面我们来一步一步安装Material-UI——这个世界上最受欢迎的React UI框架。Material-UI 可作为 npm 包使用。

安装核心依赖

npm install @material-ui/core

等待依赖安装完毕,我们可以看到,此时我们的package.json文件内容新增了 "@material-ui/core": "^3.4.0" 的依赖:

"dependencies": {
  "@material-ui/core": "^3.4.0",
  "react": "^16.6.1",
  "react-dom": "^16.6.1"
}

为了使用预构建的SVG Material icons,例如在组件演示中找到的那些, 须先安装 @material-ui/icons包:

npm install @material-ui/icons

详细使用参考:https://material-ui.com/getting-started/installation/

开发一个简单的登陆表单

下面我们就来使用Material UI组件库,来开发一个简单的登陆表单页面。这个表单页面的最终效果如下图:

image

使用 Card 布局
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
使用表单 FormControl
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
使用 Button 按钮
import Button from '@material-ui/core/Button';
使用 prop-types

我们使用 prop-types 第三方库对组件的props中的变量进行类型检测。安装命令:

$ npm install prop-types

最终,登陆页面的 js组件类的代码如下:

class LoginForm extends React.Component {

    render() {
        const {classes} = this.props;

        return (
            <div className={classes.loginForm}>
                <Card className={classes.cardHeight}>
                    <CardContent>

                        <FormControl className={classes.formControl}>
                            <InputLabel>用户名</InputLabel>
                            <Input id="username"/>
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <InputLabel>密码</InputLabel>
                            <Input id="password" type='password'/>
                        </FormControl>

                        <div className={classes.inlineButton}>
                            <Button
                                variant="contained"
                                color="primary"
                                className={classes.button}>
                                登陆
                            </Button>
                            <Button variant="contained" className={classes.button}>
                                重置
                            </Button>
                        </div>

                    </CardContent>
                </Card>
            </div>
        )
    }
}
登陆按钮事件处理

登陆按钮的前端代码如下:

<Button
    onClick={this.handleClick}
    variant="contained"
    color="primary"
    className={classes.button}>
    登陆
</Button>

其中,onClick 事件绑定当前LoginForm 类的handleClick 函数,代码如下:

handleClick(event) {
    console.log(event.currentTarget);
    const username = document.getElementById('username').value
    const password = document.getElementById('password').value
    console.log({
        username: username,
        password: password
    })
};

这样我们可以在登陆页面,输入用户名、密码:

image

点击“登陆”,可以看到控制台的输出:

image

简单前端表单校验

通常,我们会在前端页面对用户输入做一些合理性校验。例如,我们添加对用户名长度>3的校验。首先,监听用户的表单输入函数是 onChange, 用户名表单的 JSX代码如下:

<FormControl className={classes.formControl}>
    <InputLabel>用户名</InputLabel>
    <Input id="username" onChange={this.handleUsernameChange} autoFocus={true}/>
    <FormHelperText id="component-helper-text">{this.state.helperText}</FormHelperText>
</FormControl>

使用 FormHelperText 组件来提示用户输入的校验结果。显示的 helperText 存储在 state 中。

其中,handleUsernameChange函数的代码如下:

handleUsernameChange(event) {
    console.log(event.currentTarget);
    if (event.currentTarget.value.length < 3) {
        this.setState({ // 更新 helperText 提示文本
            helperText: '用户名长度不得小于3'
        })
    } else {
        this.setState({
            helperText: ''
        })
    }
};

为了能够在JSX代码中,可以直接使用onChange={this.handleUsernameChange}这样的语法:

<Input id="username" onChange={this.handleUsernameChange} autoFocus={true}/>

同时能够在handleUsernameChange()函数中使用 this.setState({...}) , 我们需要在构造函数提前绑定 this:

constructor(props) {
    super(props);
    this.state = {
        helperText: ''
    };

    // 这边绑定是必要的,这样 `this` (代表 LoginForm) 才能在回调函数中使用,例如:this.setState
    this.handleClick = this.handleClick.bind(this);
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
}

这样,我们在输入用户名的过程中,会看到实时提示:

image

表单提交函数编写

这里我们使用熟悉的 jquery的 ajax 来进行登陆表单的提交。首先,安装 jquery依赖如下:

$ npm install jquery --save

安装完毕,我们可以在 package.json 中多了 "jquery": "^3.3.1" 。

下面,我们来使用 ajax 写登陆 Post 请求。

引入 jquery

首先,我们在LoginForm.js文件头部 import jquery,代码如下:

import $ from 'jquery'
登陆 Post代码

下面就是写一个普通的 ajax POST请求的代码。

handleClick(event) {
    console.log(event.currentTarget);
    const username = document.getElementById('username').value
    const password = document.getElementById('password').value
    const data = {
        username: username,
        password: password
    };

    console.log(data);

    $.ajax({
        url: '/login.json',
        data: data,
        type: 'POST',
        success: (res) => {
            console.log(data)
        },
        error: (err) => {
            console.log(err)
        }
    });
};

在浏览器 console中测试运行,我们可以看到 POST请求已经成功的发出了:

image

只不过,我们还没有后端的 HTTP接口/login.json 来接收这个请求。所以,我们看到的是404 Not Found。这种软件开发的方法,我们可以称之为“前端驱动后端开发”。

前端核心组件 LoginForm.js的完整源代码如下:

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import FormHelperText from "@material-ui/core/es/FormHelperText/FormHelperText";
import $ from 'jquery'

const styles = theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    button: {
        margin: theme.spacing.unit,
    },
    formControl: {
        margin: theme.spacing.unit,
        display: 'flex',
    },
    loginForm: {
        textAlign: 'center',
    },
    inlineButton: {
        display: 'inline-flex'
    },
    cardHeight: {
        height: '360px'
    }
});

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            helperText: ''
        };

        // 这边绑定是必要的,这样 `this` (代表 LoginForm) 才能在回调函数中使用,例如:this.setState
        this.handleClick = this.handleClick.bind(this);
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
    }

    handleClick(event) {
        console.log(event.currentTarget);
        const username = document.getElementById('username').value
        const password = document.getElementById('password').value
        const data = {
            username: username,
            password: password
        };

        console.log(data);

        $.ajax({
            url: '/login.json',
            data: data,
            type: 'POST',
            success: (res) => {
                console.log(data)
            },
            error: (err) => {
                console.log(err)
            }
        });
    };

    handleUsernameChange(event) {
        console.log(event.currentTarget);
        if (event.currentTarget.value.length < 3) {
            this.setState({
                helperText: '用户名长度不得小于3'
            })
        } else {
            this.setState({
                helperText: ''
            })
        }
    };

    render() {
        const {classes} = this.props;

        return (
            <div className={classes.loginForm}>
                <Card className={classes.cardHeight}>
                    <CardContent>

                        <FormControl className={classes.formControl}>
                            <InputLabel>用户名</InputLabel>
                            <Input id="username" onChange={this.handleUsernameChange} autoFocus={true}/>
                            <FormHelperText id="component-helper-text">{this.state.helperText}</FormHelperText>
                        </FormControl>

                        <FormControl className={classes.formControl}>
                            <InputLabel>密码</InputLabel>
                            <Input id="password" type='password'/>
                        </FormControl>

                        <div className={classes.inlineButton}>
                            <Button
                                onClick={this.handleClick}
                                variant="contained"
                                color="primary"
                                className={classes.button}>
                                登陆
                            </Button>
                            <Button variant="contained" className={classes.button}>
                                重置
                            </Button>
                        </div>

                    </CardContent>
                </Card>
            </div>
        )
    }
}

LoginForm.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(LoginForm);  

下面,我们就来开始后端工程的开发。

后端 Web 工程开发

本节主要介绍简单用户登录模块的后端工程的开发。

环境准备

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

运行环境:JDK 8

编程语言:Java、Kotlin

Web 开发框架:Spring MVC,Spring Boot

ORM框架:Spring Data JPA

数据库:MySQL,客户端工具 mysql workbench

视图模板引擎:Freemarker

开发 IDE: IDEA

创建 Spring Boot工程

接下来,我们创建一个使用 Kotlin编程语言,Gradle 来构建项目的 Spring Boot工程。浏览器访问:https://start.spring.io/ 创建工程如下图所示:

image

选择 Gradle Project,Kotlin编程语言,选择 Spring Boot 2.1.0 版本,然后在项目基本信息中,分别填入 Group、Artifact,起步依赖选择:Web,MySQL,JPA,Freemarker。 点击“Generate Project”,下载自动生成的样板工程,解压,导入到 IDEA中。

构建项目

打开 IDEA,点击 Open

image

选择刚才自动生成的样板工程的根目录

image

点击“Open”,进入到 Import Project from Gradle界面:

image

如上图勾选,其中 Gradle 安装包的根目录是:/Users/jack/soft/gradle-5.0-rc-1(这个需要根据自己的机器上的目录自己指定)。点击“OK”,进入到IDEA项目主界面,耐心等待项目构建完成,我们将看到如下的项目目录结构:

image

修改 maven 中央仓库地址

国外的 maven中央仓库国内访问起来比较慢,改用阿里云提供的中央仓库镜像。在build.gradle中添加阿里云仓库镜像的地址如下:

repositories {
    maven { url 'https://maven.aliyun.com/repository/central' }
    mavenCentral()
}
build.gradle 配置文件

我们可以看到在工程的依赖:

dependencies {
    implementation('org.springframework.boot:spring-boot-starter-data-jpa')
    implementation('org.springframework.boot:spring-boot-starter-freemarker')
    implementation('org.springframework.boot:spring-boot-starter-web')
    implementation('com.fasterxml.jackson.module:jackson-module-kotlin')
    implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
    implementation("org.jetbrains.kotlin:kotlin-reflect")
    runtimeOnly('mysql:mysql-connector-java')
    testImplementation('org.springframework.boot:spring-boot-starter-test')
}
Spring Boot工程的入口类

我们可以看到,在 Spring Boot工程中,使用@SpringBootApplication注解标注 main 程序。

package com.easy.springboot.simpleloginbackend

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication

@SpringBootApplication
class SimpleLoginBackEndApplication

fun main(args: Array<String>) {
    runApplication<SimpleLoginBackEndApplication>(*args)
}

这个时候,我们直接运行这个 main函数,我们将会在控制台看到如下的报错提示:

***************************
APPLICATION FAILED TO START
***************************

Description:

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine a suitable driver class

Action:

Consider the following:
    If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).

日志告诉我们,Spring Boot应用在启动过程中,自动初始化 DataSource 配置的时候失败。因为我们还没有告诉程序,我们的数据库连接的信息。

配置数据库源

首先在数据库中,创建 schema :

CREATE SCHEMA `simple_login` DEFAULT CHARACTER SET utf8 ;

然后,在 application.properties 中配置 datasource 如下:

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/simple_login?autoReconnect=true&useUnicode=true&createDatabaseIfNotExist=true&characterEncoding=utf8&useSSL=true&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root1234

再次启动 main 程序,我们可以看到启动成功了:

...
o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
c.e.s.s.SimpleLoginBackEndApplicationKt  : Started SimpleLoginBackEndApplicationKt in 8.981 seconds (JVM running for 10.534)

这个时候,我们访问 http://127.0.0.1:8080/ ,会看到一个默认错误页面

image

因为,此时我们的代码中还没有对请求处理的 Controller。

写一个 Rest 接口Hello World

下面我们就来写一个 Rest 接口。代码如下:

package com.easy.springboot.simpleloginbackend.controller

import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class HelloWorldController {

    @GetMapping(value = ["/hello"])
    fun hello(): String {
        return "Hello World!"
    }

}

重启应用,再次访问 http://127.0.0.1:8080/ , 页面输出:Hello World!

如果想更改服务端口,只需要在 application.properties 中添加如下配置:

server.port=9000
编写登陆 POST 接口

我们先简单返回一个结果示例:

package com.easy.springboot.simpleloginbackend.controller

import com.easy.springboot.simpleloginbackend.result.Result
import org.springframework.web.bind.annotation.PostMapping
import org.springframework.web.bind.annotation.RequestParam
import org.springframework.web.bind.annotation.RestController

@RestController
class LoginController {

    @PostMapping(value = ["/login.json"])
    fun login(@RequestParam("username") username: String, @RequestParam("password") password: String): Result<String> {
        return Result(data = "username=${username},password=${password}", success = true, msg = "")
    }

}

其中,Result类的代码是:

package com.easy.springboot.simpleloginbackend.result

class Result<T>(
        var data: T? = null,
        var success: Boolean = false,
        var msg: String = ""
)
测试 POST 接口

为了方便地进行测试,我们添加Spring Boot Actuator依赖到工程中:

dependencies {
    ...
    implementation('org.springframework.boot:spring-boot-starter-actuator')
    ...
}

重新启动应用,我们将会在底部工具栏中看到端点请求映射:

image

单击 /login.json [POST], 选择 Open in HTTP Request Editor, 在 POST 后面加上参数

POST http://127.0.0.1:9000/login.json?username=123&password=123

如下图, 点击绿色执行按钮

image

可以得到输出:

POST http://127.0.0.1:9000/login.json?username=123&password=123

HTTP/1.1 200 
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Sat, 10 Nov 2018 16:19:10 GMT

{
  "data": "username=123,password=123",
  "success": true,
  "msg": ""
}

Response code: 200; Time: 23ms; Content length: 60 bytes

好了,现在我们的前端表单页面有了,后端的 /login.json 接口也好了。怎样集成呢?且看下文分解。

前后端集成联调

本节我们来把上面的前端 js、html页面集成到后端的 Spring Boot应用中来。

把前端代码放到后端工程中

我们后端视图引擎使用的是 Freemarker。默认的视图文件在 src/main/resources/templates 目录下。

我们先手动把前端工程中的index.html、 bundle.js 分别放到 src/main/resources 相应的目录下面,如下图

image

视图文件默认后缀

然后,为了方便起见,我们把 Freemarker 的默认文件后缀名改成 .html, 这个配置在 application.properties中:

spring.freemarker.suffix=.html
编写请求转发路由

编写一个控制器,把来自前端的请求 "", "/", "/index.html", "/index.htm" 路由到后端的视图index.html上。代码如下:

package com.easy.springboot.simpleloginbackend.controller

import org.springframework.stereotype.Controller
import org.springframework.web.bind.annotation.GetMapping

@Controller
class IndexController {

    @GetMapping(value = ["", "/", "/index.html", "/index.htm"])
    fun index(): String {
        return "index"
    }

}

前后端联调测试

重启应用,访问 http://127.0.0.1:9000/ , 我们会看到登陆表单页面。输入用户名、密码,点击登录

image

观察浏览器的控制台,我们可以看到请求成功信息:

image

请求响应值:

{"data":"username=jack,password=123456","success":true,"msg":""}

有了上面的前后端完整的开发流程作为基础,我们就可以连接数据库,判断用户名、密码是否存在;也可以在前端做出登录成功、失败的跳转提示等处理了。我们会在后面的章节中逐步介绍。

本章小结

本章通过一个简单的用户登录表单的前端 React开发、后端 Spring Boot + Kotlin开发的完整实例,给大家讲解了前后端分离开发的简单过程。当然,在实际的项目开发中,我们有一系列的自动化脚手架、构建工具插件等,我们会在其他章节中逐步介绍。

前端工程代码地址:https://github.com/EasySpringBoot/front-end-simple-login

后端工程代码地址:https://github.com/EasySpringBoot/simple-login-back-end

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

python接口自动化11-post传data参数案例

前言: 前面登录博客园的是传json参数,有些登录不是传json的,如jenkins的登录,本篇以jenkins登录为案例,传data参数。 一、登录jen...

3734
来自专栏无所事事者爱嘲笑

react-native 集成极光推送jpush-react-native时的小问题

4473
来自专栏杨建荣的学习笔记

Oracle 12cR2初体验(r11笔记第91天)

对于很多Oracle DBA来说,12c最期待人心的就是12c Release 2的发布了,而Linux64位版本的发布则是一个重头戏。详情可以关注公众号dba...

3445
来自专栏jmeter高手高高手

Jmeter(二十一)_脚本参数化与内存溢出的解决方案

首先准备你的参数数据。我在bin/data中新建了一个dat文件,记事本另存为修改编码为UTF-8,注意用户名和密码是一一对应的,用英文逗号隔开

1353
来自专栏Java后端生活

JavaWeb(七)JSP-2

1566
来自专栏生信宝典

生信人写程序2. Editplus添加Perl, Shell, R, markdown模板和语法高亮

前言 “工欲善其事必先利其器”,生信工程师每天写代码、搭流程,而且要使用至少三门编程语言,没有个好集成开发环境(IDE,Integrated Developme...

3258
来自专栏owent

集成Qt Webkit 到cocos2d-x

近期倒腾下客户端,想搞个cocos2d的工具。 之前的那个集成到Win32工具下的调试辅助工具是直接用的windows api。拓展起来巨麻烦。而且Windo...

1082
来自专栏cloudskyme

WSO2 ESB(4)

WSO2的企业服务总线(ESB)的用户指南 用户指南介绍了如何配置WSO2 ESB使用基于Web的管理控制台。 WSO2的管理控制台已经过测试的Mozilla ...

3848
来自专栏web编程技术分享

三分钟学会用SpringMVC搭建最小系统(超详细)

4508
来自专栏龙首琴剑庐

原 微服务Spring Cloud Eur

1614

扫码关注云+社区

领取腾讯云代金券