利用Spring boot+react快速搭建一個部落格站點(前後端完全分離)

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

先把要點記一下：

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>backend</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </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-rest</artifactId>
        </dependency>


        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.6</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

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<Blog,Long> {
}

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;