1、maven繼承spring-boot
|
1
2
3
4
5
6
|
<parent> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-parent</artifactid> <version>2.0.6.release</version> <relativepath/> <!-- lookup parent from repository --></parent> |
2、指定jdk版本和字符集
|
1
2
3
4
5
|
<properties> <project.build.sourceencoding>utf-8</project.build.sourceencoding> <project.reporting.outputencoding>utf-8</project.reporting.outputencoding> <java.version>1.8</java.version></properties> |
3、添加依賴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<dependencies> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-web</artifactid> </dependency> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-test</artifactid> <scope>test</scope> </dependency> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-data-jpa</artifactid> </dependency> <dependency> <groupid>mysql</groupid> <artifactid>mysql-connector-java</artifactid> </dependency> <dependency> <groupid>com.alibaba</groupid> <artifactid>druid</artifactid> <version>1.1.10</version> </dependency> <dependency> <groupid>org.projectlombok</groupid> <artifactid>lombok</artifactid> </dependency> <dependency> <groupid>org.apache.commons</groupid> <artifactid>commons-text</artifactid> <version>1.2</version> </dependency></dependencies> |
4、添加插件
|
1
2
3
4
|
<plugin> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-maven-plugin</artifactid></plugin> |
5、配置src/main/resources/application.yml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
spring: datasource: driver-class-name: com.mysql.jdbc.driver url: jdbc:mysql://localhost:3306/react username: root password: 123456 type: com.alibaba.druid.pool.druiddatasource jpa: show-sql: true hibernate: ddl-auto: update database: mysql database-platform: org.hibernate.dialect.mysql5innodbdialect |
6、編寫啟動類
|
1
2
3
4
5
6
7
8
9
10
11
12
|
package com.example.react;import org.springframework.boot.springapplication;import org.springframework.boot.autoconfigure.springbootapplication;@springbootapplicationpublic class reactapplication { public static void main(string[] args) { springapplication.run(reactapplication.class, args); }} |
7、持久化對象類
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package com.example.react.model;import lombok.*;import lombok.experimental.accessors;import javax.persistence.*;/** * 用戶類 */@table(name = "t_user")@entity@setter@getter@noargsconstructor@allargsconstructor@tostring@accessors(chain = true)public class user { /** * 用戶id */ @id @generatedvalue(strategy = generationtype.identity) private long id; /** * 用戶名 */ private string name;} |
8、持久化操作接口
|
1
2
3
4
5
6
7
8
9
10
11
|
package com.example.react.dao;import com.example.react.model.user;import org.springframework.data.jpa.repository.jparepository;import org.springframework.stereotype.repository;@repositorypublic interface userdao extends jparepository<user,long> {} |
9、控制層
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
package com.example.react.controller;import com.example.react.model.user;import com.example.react.dao.userdao;import org.springframework.beans.factory.annotation.autowired;import org.springframework.web.bind.annotation.*;import java.util.list;@restcontroller@requestmapping("/user")public class usercontroller { @autowired private userdao userdao; /** * 查詢所有用戶 * @return */ @getmapping public list<user> all(){ return this.userdao.findall(); } /** * 保存用戶 * 新增或更新 * @param user * @return */ @postmapping public object save(@requestbody user user){ this.userdao.save(user); return true; } /** * 根據id刪除用戶 * @param id * @return */ @deletemapping("/{id}") public object delete(@pathvariable long id){ this.userdao.deletebyid(id); return true; }} |
10、啟動后臺項目
11、在項目根路徑創建前端項目，使用create-react-app
|
1
|
npx create-react-app web |
給命令會在當前目錄下使用create-react-app創建一個react單頁項目
12、進入web目錄，添加依賴庫
|
1
|
npm install axios bootstrap@3.3.7 --save |
13、在package.json中增加前后端交互代理
|
1
|
"proxy": http://localhost:8080 |
14、刪除前端項目src 目錄下無用的文件，只保留index.js和app.js，并修改文件使其能夠運行
目錄結構
index.js
|
1
2
3
4
5
|
import react from 'react';import reactdom from 'react-dom';import app from './app';reactdom.render(<app />, document.getelementbyid('root')); |
app.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import react, { component } from 'react';class app extends component { render() { return ( <div> </div> ); }}export default app; |
15、在index.js中引入bootstrap樣式文件
注意：這里只需要引入css文件即可
|
1
2
3
4
5
6
|
import react from 'react';import reactdom from 'react-dom';import 'bootstrap/dist/css/bootstrap.min.css';import app from './app';reactdom.render(<app />, document.getelementbyid('root')); |
16、接下來進行頁面布局，這是一個簡單的增刪改查功能，所以只需要在一個頁面編寫全部功能即可，左側為一個表格，右側為一個表單，如下圖
17、首先利用bootstrap中提供的柵格模式，將頁面分為左右兩欄，兩欄中分別有一個panel
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() { return ( <div classname="container-fluid" style={{margintop: '20px'}}> <div classname="row"> <div classname="col-xs-4 col-xs-offset-1"> <div classname="panel panel-default"> <div classname="panel-body"> 表格區域 </div> </div> </div> <div classname="col-xs-3 col-xs-offset-1"> <div classname="panel panel-default"> <div classname="panel-body"> 表單區域 </div> </div> </div> </div> </div> );} |
18、添加表格
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<table classname="table table-bordered"> <thead> <tr> <th>id</th> <th>用戶名</th> <th>操作</th> </tr> </thead> <tbody> </tbody></table> |
19、添加表單
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<form classname="form-horizontal"> <div classname="form-group"> <label htmlfor="name" classname="col-xs-3">用戶名</label> <div classname="col-xs-8"> <input type="text" id="name" classname="form-control"/> </div> </div> <div classname="form-group"> <div classname="col-sm-offset-2 col-sm-10"> <button classname="btn btn-default">提交</button> </div> </div></form> |
20、初始化 state
|
1
2
3
4
5
6
7
8
|
constructor(props) { super(props); this.state = { id:'', name:'', list:[] }} |
21、實現查詢函數，并在app組件掛載渲染完成后執行查詢函數
引入axios
|
1
|
import axios from 'axios'; |
聲明查詢函數
|
1
2
3
4
5
6
7
|
query = () =>{ axios.get('/user').then(({data})=>{ this.setstate({ list:data }); });} |
組件掛載完成后執行查詢函數
|
1
2
3
|
componentdidmount(){ this.query();} |
22、向表格中填充數據
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<tbody>{ this.state.list.map(item=>{ return ( <tr key={item.id}> <td>{item.id}</td> <td>{item.name}</td> <td> <button classname="btn btn-primary">修改</button> <button classname="btn btn-danger" style={{marginleft:'5px'}}>刪除</button> </td> </tr> ) })}</tbody> |
23、對表單中的文本框和提交按鈕進行控制
文本框
|
1
2
3
4
5
6
7
|
<input type="text" id="name" classname="form-control" value={this.state.name} onchange={ (e)=>{ this.setstate({ name:e.target.value }) }}/> |
提交按鈕點擊事件
|
1
|
<button classname="btn btn-default" onclick={this.handleformsubmit}>提交</button> |
點擊事件函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
handleformsubmit = (e) => { e.preventdefault(); if (this.state.name != '') { axios.post('/user', { id: !this.state.id ? '' : this.state.id, name: this.state.name }).then(({data}) => { this.setstate({ id: '', name: '' }); this.query(); }) }} |
24、對表格中每一行的修改和刪除按鈕進行事件處理
|
1
2
3
4
5
6
7
8
9
|
<button classname="btn btn-primary" onclick={() => { this.setstate({id: item.id, name: item.name}) }}>修改 </button> <button classname="btn btn-danger" style={{marginleft: '5px'}} onclick={() => { this.deleteitem(item) }}>刪除 </button> |
刪除操作函數
|
1
2
3
4
5
|
deleteitem = (item) => { axios.delete(`/user/${item.id}`).then(({data}) => { this.query(); })} |
25、執行npm start啟動前端
26、表單數據居中顯示添加app.css
|
1
2
3
4
|
.table th, .table td { text-align: center; vertical-align: middle!important;} |
app.js中引入app.css
|
1
|
import './app.css' |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/oXinYangonly/article/details/83545230
