java react整合_利用Spring boot+react快速搭建一个博客站点(前后端完全分离)

使用到的技术

spring boot

spring data jpa

spring data rest

react.js

fetch.js

material-ui

先把要点记一下：

pom.xml

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

com.example

backend

0.0.1-SNAPSHOT

jar

demo

Demo project for Spring Boot

org.springframework.boot

spring-boot-starter-parent

1.4.2.RELEASE

UTF-8

UTF-8

1.8

org.springframework.boot

spring-boot-starter-data-jpa

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-devtools

true

com.h2database

h2

runtime

org.springframework.boot

spring-boot-starter-test

test

org.springframework.boot

spring-boot-starter-data-rest

org.projectlombok

lombok

1.16.6

org.springframework.boot

spring-boot-maven-plugin

blog.java

package com.example.domain;

import lombok.Data;

import lombok.NoArgsConstructor;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.Id;

import java.io.Serializable;

/**

* Created by yiminluo on 28/11/2016.

*/

@Entity

@Data

@NoArgsConstructor

public class Blog implements Serializable {

@Id

@GeneratedValue

private Long id;

@Column(nullable = false)

private String title;

@Column(nullable = false)

private String content;

@Column(columnDefinition = "DATE")

private String createTime;

private String tag;

public Blog(String title,String content,String createTime,String tag){

this.title=title;

this.content=content;

this.createTime=createTime;

this.tag=tag;

}

}

@BlogRepository

package com.example.domain;

import org.springframework.data.repository.CrudRepository;

public interface BlogRepository extends CrudRepository {

}

DatabaseLoader.java

@Component

public class DatabaseLoader implements CommandLineRunner {

private final BlogRepository blogRepository;

@Autowired

DatabaseLoader (BlogRepository blogRepository){

this.blogRepository=blogRepository;

}

@Override

public void run(String... strings) throws Exception {

blogRepository.save(

new Blog("test blog","this is just a test blog","2016-01-01","js")

);

}

}```

application.propeties

spring.data.rest.base-path=/api

DemoApplication.java

package com.example;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.context.annotation.Bean;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@SpringBootApplication//等价与以默认属性使用@Configuration，@EnableAutoConfiguration和@ComponentScan

public class DemoApplication {

//允许跨域请求

@Bean

public WebMvcConfigurer corsConfigurer() {

return new WebMvcConfigurerAdapter() {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/").allowedOrigins("http://localhost:3000");

}

};

}

public static void main(String[] args) {

SpringApplication.run(DemoApplication.class, args);

}

}

#前台

package.json

{

"name": "myblog",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"dev": "WEBPACK_ENV=dev webpack-dev-server --host 127.0.0.1 --port 3000 --devtool eval --progress --colors --hot --content-base dist",

"build": "WEBPACK_ENV=build ./node_modules/.bin/webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"material-ui": "^0.16.4",

"react": "^15.3.2",

"react-dom": "^15.3.2",

"react-tap-event-plugin": "^1.0.0",

"whatwg-fetch": "^2.0.1"

},

"devDependencies": {

"babel-core": "^6.18.2",

"babel-loader": "^6.2.7",

"babel-preset-es2015": "^6.18.0",

"babel-preset-react": "^6.16.0",

"css-loader": "^0.25.0",

"html-webpack-plugin": "^2.24.1",

"react-hot-loader": "^1.3.0",

"style-loader": "^0.13.1",

"webpack": "^1.13.3",

"webpack-dev-server": "^1.16.2"

}

}

webpack.config.js

var webpack = require('webpack');

var path = require('path');

var HtmlwebpackPlugin = require('html-webpack-plugin');

var env = process.env.WEBPACK_ENV;

var outputFile;

var plugins = [

new HtmlwebpackPlugin({

title: 'React BiolerPlate by monodev',

template : path.resolve(__dirname,"templates/index.template.html"),

inject:'body'

})

];

if (env==='build') {

var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

plugins.push(new UglifyJsPlugin({minimize:true}));

outputFile = 'bundle.min.js';

}

else{

outputFile = 'bundle.js';

}

var config = {

entry : [

'whatwg-fetch',

'webpack/hot/dev-server',

'webpack-dev-server/client?http://localhost:3000',

'./app/index.jsx' //入口文件

],

output : {

path: path.resolve(__dirname,'dist'),

filename: 'bundle.js',

},

module :{

loaders :[

{

test: /\.css$/,

loader: 'style!css',

include: path.resolve(__dirname, 'app')

},

{

test: /\.jsx?$/,

loader: 'babel',

exclude: /node_modules/,

query: {

presets: ['es2015', 'react']

}

}

]

},

resolve: {

extensions: ['', '.js', '.jsx']

},

plugins : plugins

}

module.exports = config;