-
maven繼承spring-boot
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
- 指定
jdk版本和字符集
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
- 添加依賴(lài)
<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>
- 添加插件
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
- 配置
src/main/resources/application.yml
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
- 編寫(xiě)啟動(dòng)類(lèi)
package com.example.react;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ReactApplication {
public static void main(String[] args) {
SpringApplication.run(ReactApplication.class, args);
}
}
- 持久化對(duì)象類(lèi)
package com.example.react.model;
import lombok.*;
import lombok.experimental.Accessors;
import javax.persistence.*;
/**
* 用戶(hù)類(lèi)
*/
@Table(name = "t_user")
@Entity
@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors(chain = true)
public class User {
/**
* 用戶(hù)ID
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
/**
* 用戶(hù)名
*/
private String name;
}
- 持久化操作接口
package com.example.react.dao;
import com.example.react.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface UserDao extends JpaRepository<User,Long> {
}
- 控制層
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;
/**
* 查詢(xún)所有用戶(hù)
* @return
*/
@GetMapping
public List<User> all(){
return this.userDao.findAll();
}
/**
* 保存用戶(hù)
* 新增或更新
* @param user
* @return
*/
@PostMapping
public Object save(@RequestBody User user){
this.userDao.save(user);
return true;
}
/**
* 根據(jù)ID刪除用戶(hù)
* @param id
* @return
*/
@DeleteMapping("/{id}")
public Object delete(@PathVariable Long id){
this.userDao.deleteById(id);
return true;
}
}
- 啟動(dòng)后臺(tái)項(xiàng)目
- 在項(xiàng)目根路徑創(chuàng)建前端項(xiàng)目亲茅，使用
create-react-app
npx create-react-app web
給命令會(huì)在當(dāng)前目錄下使用create-react-app創(chuàng)建一個(gè)react單頁(yè)項(xiàng)目
- 進(jìn)入
web目錄壤追，添加依賴(lài)庫(kù)
npm install axios bootstrap@3.3.7 --save
- 在
package.json中增加前后端交互代理
"proxy": "http://localhost:8080"
- 刪除前端項(xiàng)目
src目錄下無(wú)用的文件陌选，只保留index.js和App.js，并修改文件使其能夠運(yùn)行
-
目錄結(jié)構(gòu)
目錄結(jié)構(gòu) index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
export default App;
- 在
index.js中引入bootstrap樣式文件
注意：這里只需要引入css文件即可
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'));
-
接下來(lái)進(jìn)行頁(yè)面布局，這是一個(gè)簡(jiǎn)單的增刪改查功能馆蠕，所以只需要在一個(gè)頁(yè)面編寫(xiě)全部功能即可涝桅，左側(cè)為一個(gè)表格，右側(cè)為一個(gè)表單峻汉，如下圖
頁(yè)面布局 首先利用
bootstrap中提供的柵格模式贴汪，將頁(yè)面分為左右兩欄，兩欄中分別有一個(gè)panel
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">
表格區(qū)域
</div>
</div>
</div>
<div className="col-xs-3 col-xs-offset-1">
<div className="panel panel-default">
<div className="panel-body">
表單區(qū)域
</div>
</div>
</div>
</div>
</div>
);
}
- 添加表格
<table className="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>用戶(hù)名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
- 添加表單
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="name" className="col-xs-3">用戶(hù)名</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>
- 初始化
state
constructor(props) {
super(props);
this.state = {
id:'',
name:'',
list:[]
}
}
- 實(shí)現(xiàn)查詢(xún)函數(shù)休吠，并在
App組件掛載渲染完成后執(zhí)行查詢(xún)函數(shù)
- 引入
axios
import axios from 'axios';
- 聲明查詢(xún)函數(shù)
query = () =>{
axios.get('/user').then(({data})=>{
this.setState({
list:data
});
});
}
- 組件掛載完成后執(zhí)行查詢(xún)函數(shù)
componentDidMount(){
this.query();
}
- 向表格中填充數(shù)據(jù)
<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>
- 對(duì)表單中的文本框和提交按鈕進(jìn)行控制
- 文本框
<input type="text" id="name" className="form-control" value={this.state.name} onChange={
(e)=>{
this.setState({
name:e.target.value
})
}
}/>
- 提交按鈕點(diǎn)擊事件
<button className="btn btn-default" onClick={this.handleFormSubmit}>提交</button>
- 點(diǎn)擊事件函數(shù)
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();
})
}
}
- 對(duì)表格中每一行的修改和刪除按鈕進(jìn)行事件處理
<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>
- 刪除操作函數(shù)
deleteItem = (item) => {
axios.delete(`/user/${item.id}`).then(({data}) => {
this.query();
})
}
- 執(zhí)行
npm start啟動(dòng)前端
26.表單數(shù)據(jù)居中顯示
- 添加
App.css
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
-
App.js中引入App.css
import './App.css'
