利用springboot构建jpa+springdata+rest应用的基本配置过程

前述

利用SpringBoot整合springData+JPA应用非常方便，所以本着学习的目的来构建一个基本的web应用，配置起来非常简单。下面来说说配置过程和踩过的坑。

过程

后端配置

因为我使用的是IDEA的spring initalizer，勾选如下：

Rest Repositories
Thymeleaf
JPA
H2
Lombok 需要ide下载插件使用

以前在配置spring MVC接口时，往往会浪费很长时间配置rest地址，springdata解决了这个一遍又一遍麻烦的过程。

首先配置实体类

任何基于Spring Data REST的应用程序的基石都是域对象。其中的@Id等都是JPA语法，具体用法可以看上一篇文章。

@Entity
@Getter
@Setter
@Table(name = "user")
public class User {

    @Id
    private Long id;

    @Column(name = "username",nullable = true,length = 255)
    private String username;

    @Column(name = "password",nullable = true,length = 255)
    private String password;

    @OneToOne()
    @JoinColumn(name = "person_id",nullable = false)
    private Person person;
}

定义一个存储库

Spring Data REST应用程序的另一个关键部分是创建相应的存储库定义

public interface UserRepository extends JpaRepository<User,Long> {
}

配置service和controller

public class UserServiceImpl implements UserService {
    @Autowired
    UserRepository userRepository;
    @Override
    public void save(User user) {
        user.setPassword(...); //定义代码
        userRepository.save(user);
    }
}

配置数据库和application.properties

# 驱动配置信息
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url = jdbc:mysql://127.0.0.1:3306/jreact?useUnicode=true&characterEncoding=utf-8
spring.datasource.username = root
spring.datasource.password = 123456
spring.datasource.driverClassName = com.mysql.jdbc.Driver
#非严格的html解析
spring.thymeleaf.mode =LEGACYHTML5
# 彩色输出
spring.output.ansi.enabled=DETECT
# 设置默认引擎
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
#配置自动建表：updata:没有表新建，有表更新操作,控制台显示建表语句
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
#配置spring data rest的基地址
spring.data.rest.base-path=/api

启动应用

访问 localhost:8080/api/users 可以查看到如下信息,说明配置成功了。只是表中还没有数据，另外表已经由自动建好，以后如果更新，直接更新程序就好了。

{
  "_embedded" : {
    "users" : [ ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/users{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/api/profile/users"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 0,
    "totalPages" : 0,
    "number" : 0
  }
}

前端配置

使用react框架作为前端框架，首先下载create-react-app作为开发的脚手架。这里我选用的是meterial-UI的create-react-app，按照文档中的说明来下载并安装。

配置proxy

在src目录下新建名称为setupProxy.js的文件，并在文件中写入如下内容：

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/api/', 
        { target: 'http://localhost:8080/' }
    ));
}

其中/api/为访问后端的基地址，target为访问后端的主机地址和端口号

配置router

使用npm下载 react-router-dom后，在src目录下新建router文件夹，并创建baseRouter.js文件，引入刚下载的包，基本的文件内容如：

import React from "react";
import { BrowserRouter as Router, Route, Link,Switch } from "react-router-dom";
import Index from "../pages/index"
import SignIn from "../pages/login/signIn"
import Error404 from "../pages/error/404"
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

const AppRouter = () => (
  <Router>
    <div>
    <Switch>
        <Route exact path="/" component={Index} />
        <Route path="/SignIn" component={SignIn} />
        <Route path="/About" component={About} />
        {/* when none of the above match, <NoMatch> will be rendered */}
        <Route component={Error404} />
    </Switch>
    </div>
  </Router>
);
export default AppRouter;

并最后在index.js入口文件中写入

ReactDOM.render(<AppRouter />, document.getElementById('root'));

这样可以访问localhost:3000的时候可以访问到Index文件内容。