今日公司有个必要,大家单位开拓三个阳台项目事后,别的兄弟部门支出出的插件我们得以拿来直接用,而且无需大家再扩充打包,只是做静态的公文引进,斟酌一波后发觉,webpack创立library能够兑现。

顾客登入前后端抽离开垦实战案例:React,npm,webpack,ES6, Kotlin, Spring
Boot, Gradle, Freemarker, Material UI

创建library

  • 总体代码
  • 骨干代码为

    output: {
        path: DIST_PATH,
        publicPath: "",
        chunkFilename: "[name].js",
        filename: "testPlugin.js",
        libraryTarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
        library: 'testPlugin'
    },
  • 卷入出来后我们会博得八个testPlugin.js,这正是大家友好的三方库。

    阳台项目中选用

  • 项目中设置externals,目标是使和谐项目不会再也打包引进的库

    externals: {
        testPlugin:"testPlugin",
    },
  • 种类引进

<!--index.html-->
<script src="testPlugin.js"></script>

//index.js
import testPlugin from 'testPlugin';
console.log(testPlugin);
  • 类型打包好
  • 将testPlugin库丢入打包好的dist中
  • 会开掘平台项目现已打响引进库
  • 诸有此类会开采唯有打包好dist再丢入库才方可观察效果,平时费用意况下如何是好吧,能够应用copy-webpack-plugin,及将静态的文件夹自动拷贝到dist

const copyWebpackPlugin = require('copy-webpack-plugin');

    plugins: [
        new copyWebpackPlugin([{
            from:__dirname+'/src/static',//打包的静态资源目录地址
            to:'./static' //打包到dist下面的static
        }]),
    ...
    ]
  • 下一场只须求校正index.html的引入地址

<script src="static/plugin/testPlugin/testPlugin.js"></script>

本章通过二个粗略客商登入模块全栈开垦案例,以前端
React工程的开创、开拓,到后端 Spring Boot + Kotlin +
Gradle工程的开创,使用 Spring Data JPA 来操作 MySQL数据库,
使用Freemarker视图引擎,在这里早前将来完全的任课整个开采进程。

发布npm包

上边的法子的优点是:借使兄弟部门的三方库变了,只必要他们把打包好的库文件给我们,大家丢进去替换掉早先的就可以了,大家团结并无需重新打包。

这公布npm包呢?自身没事又找寻了一波,并打响发布了二个足以对文件插入表情的react小插件。
——传送门——

条件寻思

本节实例工程的周转景况和才干栈相关项目清单如下:

运作条件准备:Node

开采工具 IDE:WebStorm

浏览器:Chrome

框架和零件库:react, babel,jquery, material-ui

构建筑工程具:webpack

我们用 webpack + es6 来构成 react
开拓前端选拔。本章中,大家手动使用npm来设置各类插件,来始终如黄金时代本身搭建意况。当然,在骨子里的门类支付中,已经有大神们开拓好了脚手架,比如create-react-app(
webpack + es6 的 React前端开拓工程。

发表希图

  • 友好的门类
  • 去npm官网,注册账号。
  • 给本人的npm包想个名字,并透过搜寻验证是不是未有被挤占

    ### 改写项目webpack配置

  • 宗旨,同地点的创立library同样

  • 生产条件布署webpack.config.prod.js

//webpack.config.prod.js  
    entry: {
        component: ['./src/component/Expression/Expression.js']
    },
    output: {
        path: DIST_PATH,
        filename: '[name].js',
        publicPath: "/dist/",
        libraryTarget: 'umd',
        library: 'expression'
    },
    externals: {
        'react': 'react',//因为引入的肯定是react项目,所以不需要再将react打包进npm包
        'react-dom': 'react-dom'
    },
  • 开拓条件安排webpack.config.dev.js

//webpack.config.dev.js
    entry: {
        app: ['./src/index.js'],
        component: ['./src/component/Expression/Expression.js']
    },
  • 那样设置之后打包出来唯有二个component.js,所以须要改革package的main
  • 修改package.json

  "main": "dist/component.js",
  • package的其余装置

    • 其他package里面包车型大巴name正是你包的名字
    • version是本子号
    • main是进口文件
    • description是描述
    • repository是线上git地址
    • keywords是最主要字,相当的重要,外人能够通过这么些寻觅到你的包
    • author是作者

      ### 做完这几个就足以揭破了

  • npm login

    • 会令你输入账号,密码,邮箱,然后就登入了
  • 报到成功会并发以下提醒新闻:Logged in as simbawu on https://registry.npmjs.org/.
    • 注意:倘使不是以此,而是大家的别样镜像例如天猫的,须求先切换回来,不然提交不起npm config set registry https://registry.npmjs.org/,然后再一次npm
      login。
  • npm publish发布
    • 若现身包名和本子号则发布成功
      银河国际平台官方网站 1

使用npm搭建React的webpack环境

本节大家来介绍怎么样通过 npm一步一步创立React前端工程。大家因此Webpack打包营造React工程。

咱俩主要来设置react react-dom
babel等npm包,设置webpack.config.js,打包输出bundle.js。

友善公布的react小插件

——传送门——

安装Webpack

1.创设项目文件夹

mkdir simple-login

新建 simple-login 文件夹,在这里文件夹内展开webpack本地安装。

2.npm初始化

 $ npm init -yWrote 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是什么:

npm install --save-dev webpack 

设置成功后 simple-login 目录中会现身node_modules 目录 。

留意:不推荐使用全局安装npm install –global webpack

大家得以看到 .bin 目录下边包车型大巴webpack脚本:

银河国际平台官方网站 2image

开荒脚本看见源码如下:

#!/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; }); 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" }}

最后

世家好,这里是「 TaoLand
」,那几个博客主要用来记录多个新手程序员的Growth之路。那也是友善第三次做博客,希望和豪门多多交换,一齐成长!文章将会在下列地方同步改正……
个体博客:www.yangyuetao.cn
小程序:TaoLand

设置重视包

接纳 npm install 命令继续设置 react react-dom babel 等正视包:

npm install --save react react-domnpm 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

开创项目文件,最后结构如下:

银河国际平台官方网站 3image

文件注解如下:

  • app/index.js 入口文件

  • dist 用于盛开webpack打包输出的bundle.js

  • webpack.config.js 用于配置webpack意况。

编纂webpack.config.js配置文件

const path = require;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的配备表明参照他事他说加以考查:

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,并在大版本号上同豆蔻梢头,就同意下载最新版本的
types/node库包,比如实际上也许运营npm
install时候下载的现实版本是8.0.35。

编写React组件 App.js

代码如下:

var React = require;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
包。大家的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;

里头,元素 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 ></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
( Material
Design 设计语言的 React 组件。它在 GitHub 上的 Star 数>
4w,fork>8k,也许是最受接待的 React 组件库了,这段时间时尚版本是 v3.4.0。

上边大家来一步一步安装Material-UI——那个世界上最受招待的React
UI框架。Material-UI 可视作 npm 包使用。

安装宗旨信赖

npm install @material-ui/core

等待信Ryan装收尾,大家能够观望,那个时候我们的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

详见使用参考:

上面我们就来使用Material
UI组件库,来支付一个简短的登入表单页面。那一个表单页面包车型客车最后效果如下图:

银河国际平台官方网站 4image

使用 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 /> </FormControl> <FormControl className={classes.formControl}> <InputLabel>密码</InputLabel> <Input 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 { console.log(event.currentTarget); const username = document.getElementById('username').value const password = document.getElementById('password').value console.log({ username: username, password: password })};

如此我们得以在登入页面,输入顾客名、密码:

银河国际平台官方网站 5image

点击“登入”,能够见到调节台的输出:

银河国际平台官方网站 6image

综上所述前端表单校验

日常来讲,大家会在前端页面临顾客输入做一些创制校验。譬喻,大家抬高对顾客名长度>3的校验。首先,监听顾客的表单输入函数是
onChange, 客户名表单的 JSX代码如下:

<FormControl className={classes.formControl}> <InputLabel>用户名</InputLabel> <Input onChange={this.handleUsernameChange} autoFocus={true}/> <FormHelperText >{this.state.helperText}</FormHelperText></FormControl>

应用 FormHelperText 组件来唤起客户输入的校验结果。突显的 helperText
存款和储蓄在 state 中。

里头,handleUsernameChange函数的代码如下:

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

为了能够在JSX代码中,能够直接采取onChange={this.handleUsernameChange}那样的语法:

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

并且能够在handleUsernameChange()函数中运用 this.setState ,
大家要求在构造函数提前绑定 this:

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

与此相类似,大家在输入客户名的长河中,会看见实时提醒:

银河国际平台官方网站 7image

表单提交函数编写

此间大家应用深谙的 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 { console.log(event.currentTarget); const username = document.getElementById('username').value const password = document.getElementById('password').value const data = { username: username, password: password }; console.log; $.ajax({ url: '/login.json', data: data, type: 'POST', success:  => { console.log }, error:  => { console.log;};

在浏览器 console中测量检验运营,大家得以观察 POST供给已经成功的发出了:

银河国际平台官方网站 8image

银河国际平台官方网站,只但是,大家还没后端的 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 { super; this.state = { helperText: '' }; // 这边绑定是必要的,这样 `this` (代表 LoginForm) 才能在回调函数中使用,例如:this.setState this.handleClick = this.handleClick.bind; this.handleUsernameChange = this.handleUsernameChange.bind; } handleClick { console.log(event.currentTarget); const username = document.getElementById('username').value const password = document.getElementById('password').value const data = { username: username, password: password }; console.log; $.ajax({ url: '/login.json', data: data, type: 'POST', success:  => { console.log }, error:  => { console.log; }; handleUsernameChange { 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 onChange={this.handleUsernameChange} autoFocus={true}/> <FormHelperText >{this.state.helperText}</FormHelperText> </FormControl> <FormControl className={classes.formControl}> <InputLabel>密码</InputLabel> <Input 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(LoginForm); 

下边,大家就来初步后端工程的费用。

本节重视介绍简单客户登陆模块的后端工程的支出。

条件酌量

本节实例工程的运作情形和技艺栈相关项目清单如下:

运作条件: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工程。浏览器访谈: 创制工程如下图所示:

银河国际平台官方网站 9image

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

创设项目

打开 IDEA,点击 Open

银河国际平台官方网站 10image

接收刚刚自动生成的样本工程的根目录

银河国际平台官方网站 11image

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

银河国际平台官方网站 12image

如上海体育场所勾选,当中 Gradle
安装包的根目录是:/Users/jack/soft/gradle-5.0-rc-1(那个须求依赖本人的机械上的目录自身钦赐卡塔 尔(阿拉伯语:قطر‎。点击“OK”,步向到IDEA项目主界面,恒心等待项目创设造成,大家将看见如下的连串目录结构:

银河国际平台官方网站 13image

纠正 maven 宗旨货仓地址

域外的
maven中心商旅国内访问起来一点也超级快,改用阿里云提供的大旨宾馆镜像。在build.gradle中加多Ali云仓库镜像的地址如下:

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.simpleloginbackendimport org.springframework.boot.autoconfigure.SpringBootApplicationimport org.springframework.boot.runApplication@SpringBootApplicationclass SimpleLoginBackEndApplicationfun main(args: Array<String>) { runApplication<SimpleLoginBackEndApplication>}

其有的时候候,大家一直运营这几个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 classAction: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=UTCspring.datasource.username=rootspring.datasource.password=root1234

再度启航 main 程序,我们得以看来运行成功了:

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

这时候,我们访谈 ,寻访到一个暗中同意错误页面

银河国际平台官方网站 14image

因为,那时候我们的代码中还不曾对须求管理的 Controller。

写一个 Rest 接口Hello World

下边大家就来写一个 Rest 接口。代码如下:

package com.easy.springboot.simpleloginbackend.controllerimport org.springframework.web.bind.annotation.GetMappingimport org.springframework.web.bind.annotation.RestController@RestControllerclass HelloWorldController { @GetMapping(value = ["/hello"]) fun hello(): String { return "Hello World!" }}

重启应用,再度会见 , 页面输出:Hello World!

例如想改过服务端口,只需求在 application.properties 中增加如下配置:

server.port=9000
编纂登录 POST 接口

我们先轻松重回三个结果示例:

package com.easy.springboot.simpleloginbackend.controllerimport com.easy.springboot.simpleloginbackend.result.Resultimport org.springframework.web.bind.annotation.PostMappingimport org.springframework.web.bind.annotation.RequestParamimport org.springframework.web.bind.annotation.RestController@RestControllerclass 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.resultclass 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') ...}

再也开动应用,大家将会在尾部工具栏中见到端点伏乞映射:

银河国际平台官方网站 15image

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

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

如下图, 点击孔雀蓝试行按钮

银河国际平台官方网站 16image

能够获取输出:

POST http://127.0.0.1:9000/login.json?username=123&password=123HTTP/1.1 200 Content-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedDate: 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 相应的目录上边,如下图

银河国际平台官方网站 17image

视图像和文字件暗中认可后缀

接下来,为了便利起见,大家把 Freemarker 的默许文件后缀名改成 .html,
那个布局在 application.properties中:

spring.freemarker.suffix=.html
编写制定诉求转发路由

编写叁个调控器,把来自前端的呼吁 “”, “/”, “/index.html”, “/index.htm”
路由到后端的视图index.html上。代码如下:

package com.easy.springboot.simpleloginbackend.controllerimport org.springframework.stereotype.Controllerimport org.springframework.web.bind.annotation.GetMapping@Controllerclass IndexController { @GetMapping(value = ["", "/", "/index.html", "/index.htm"]) fun index(): String { return "index" }}

重启应用,访谈 ,
我们会看到登入表单页面。输入客商名、密码,点击登陆

银河国际平台官方网站 18image

调查浏览器的调控台,大家得以见见央求成功音讯:

银河国际平台官方网站 19image

恳请响应值:

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

有了地点的内外端完整的开支流程作为基本功,咱们就能够连绵不断数据库,判断客户名、密码是或不是留存;也能够在前端做出登陆成功、战败的跳转提醒等处理了。我们会在前边的章节中慢慢介绍。

本章通过二个归纳的顾客登陆表单的前端 React开采、后端 Spring Boot +
Kotlin开垦的总体实例,给我们讲明了左右端抽离开拓的精简进程。当然,在事实上的类型支付中,大家有一密密麻麻的自动化脚手架、营造筑工程具插件等,我们会在其他章节中稳步介绍。

前端工程代码地址:

后端工程代码地址:

境内第大器晚成Kotlin 开荒者社区大伙儿号,首要分享、调换 Kotlin 编制程序语言、Spring
Boot、Android、React.js/Node.js、函数式编制程序、编制程序观念等有关核心。

银河国际平台官方网站 20开垦者社区
QRCode.jpg