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

使用到的技术
spring boot
spring data jpa
spring data rest
react.js
fetch.js
material-ui

先把要点记一下：

pom.xml

    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;