spring-petclinic-reactjs:ReactJS(带有TypeScript)和Spring Petclinic示

  • T0_105102
  • 572.7KB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-05-15 11:38
Spring Boot PetClinic演示的React Frontend 该项目是的端口,其前端使用和构建。 我已尝试对原始示例项目的进行必要的后端代码修改。 主要是我添加了新的包org.springframework.samples.petclinic.web.api ,其中包含React前端使用的REST Api。 在这个软件包中,大多数类都来自演示的。 相关项目 注意还有另一个使用React的Spring PetClinic示例: 。 除了React之外,该示例还使用GraphQL进行API查询,而不是REST API。 贡献 如果您想提供帮助和贡献(有很多改进的地方!我在收集了一个想法列表 ),我们非常欢迎您! 请打开一个问题或在与我联系,以便我们一起讨论! 安装并运行 注意:启动客户端之前,Spring Boot Server App必须正在运行! 要启动服务器,请启动终端并从项目的根文件夹( spring-petclinic )运行: ./mvnw spring-boot:run 当服务器运行时,您可以尝试访问API,例如查询所有已知的宠物类型: curl
# React Frontend for Spring Boot PetClinic demo [![Build Status](https://travis-ci.org/spring-petclinic/spring-petclinic-reactjs.svg?branch=master)](https://travis-ci.org/spring-petclinic/spring-petclinic-reactjs) This project is a port of the [Spring (Boot) PetClinic demo](https://github.com/spring-projects/spring-petclinic) with a frontend built using [ReactJS](https://facebook.github.io/react/) and [TypeScript](https://www.typescriptlang.org/). I have tried to make as few modifications to the backend code as necessary to the [spring-boot branch](https://github.com/spring-projects/spring-petclinic/tree/springboot) of the original sample project. Mainly I've added the new package `org.springframework.samples.petclinic.web.api` that contains the REST Api that is used by the React frontend. In this package most of the classes are taken from the [angularjs version](https://github.com/spring-projects/spring-petclinic/tree/angularjs) of the demo. ## Related projects Note there is another Spring PetClinic example that uses React: [spring-petclinic-graphql](https://github.com/spring-petclinic/spring-petclinic-graphql). Beside React that example uses **GraphQL** for API queries instead of the REST API. ## Contribution If you like to help and contribute (there's lot root for improvements! I've collected a list of ideas [here: TODO.md](TODO.md)) you're more than welcome! Please open an issue or contact me on [Twitter](https://twitter.com/nilshartmann) so we can discuss together! ## Install and run Note: Spring Boot Server App must be running before starting the client! To start the server, launch a Terminal and run from the project's root folder (`spring-petclinic`): ``` ./mvnw spring-boot:run ``` When the server is running you can try to access the API for example to query all known pet types: ``` curl http://localhost:8080/api/pettypes ``` After starting the server you can install and run the client from the `client` folder: 1. `npm install` (installs the node modules and the TypeScript definition files) 2. `PORT=4444 npm start` 3. Open `http://localhost:4444` (Why not use the same server for backend and frontend? Because Webpack does a great job for serving JavaScript-based SPAs and I think it's not too uncommon to run this kind of apps using two dedicated server, one for backend, one for frontend) ## Feedback In case you have any comments, questions, bugs, enhancements feel free to open an issue in this repository. If you you want to follow me on twitter, my handle is [@nilshartmann](https://twitter.com/nilshartmann). ------ # From the original sample README file: ## Understanding the Spring Petclinic application with a few diagrams <a href="https://speakerdeck.com/michaelisvy/spring-petclinic-sample-application" rel='nofollow' onclick='return false;'>See the presentation here</a> ## Running petclinic locally ``` git clone https://github.com/spring-projects/spring-petclinic.git cd spring-petclinic git checkout springboot ./mvnw spring-boot:run ``` You can then access petclinic here: http://localhost:8080/ ## In case you find a bug/suggested improvement for Spring Petclinic Our issue tracker is available here: https://github.com/spring-projects/spring-petclinic/issues ## Database configuration In its default configuration, Petclinic uses an in-memory database (HSQLDB) which gets populated at startup with data. A similar setup is provided for MySql in case a persistent database configuration is needed. Note that whenever the database type is changed, the data-access.properties file needs to be updated and the mysql-connector-java artifact from the pom.xml needs to be uncommented. You may start a MySql database with docker: ``` docker run -e MYSQL_ROOT_PASSWORD=petclinic -e MYSQL_DATABASE=petclinic -p 3306:3306 mysql:5.7.8 ``` ## Working with Petclinic in Eclipse/STS ### prerequisites The following items should be installed in your system: * Maven 3 (http://www.sonatype.com/books/mvnref-book/reference/installation.html) * git command line tool (https://help.github.com/articles/set-up-git) * Eclipse with the m2e plugin (m2e is installed by default when using the STS (http://www.springsource.org/sts) distribution of Eclipse) Note: when m2e is available, there is an m2 icon in Help -> About dialog. If m2e is not there, just follow the install process here: http://eclipse.org/m2e/download/ ### Steps: 1) In the command line ``` git clone https://github.com/spring-projects/spring-petclinic.git ``` 2) Inside Eclipse ``` File -> Import -> Maven -> Existing Maven project ``` ## Looking for something in particular? <table> <tr> <th width="300px">Spring Boot Configuration</th><th width="300px"></th> </tr> <tr> <td>The Main Class</td> <td><a href="/src/main/java/org/springframework/samples/petclinic/application/PetClinicApplication.java" rel='nofollow' onclick='return false;'>PetClinicApplication.java</a></td> </tr> <tr> <td>Properties Files</td> <td> <a href="/src/main/resources/application.properties" rel='nofollow' onclick='return false;'>application.properties</a> </td> </tr> <tr> <td>Caching</td> <td>Use of EhCache <a href="/src/main/java/org/springframework/samples/petclinic/config/CacheConfig.java" rel='nofollow' onclick='return false;'>CacheConfig.java</a> <a href="/src/main/resources/ehcache.xml" rel='nofollow' onclick='return false;'>ehcache.xml</a></td> </tr> <tr> <td>Dandelion</td> <td>DatatablesFilter, DandelionFilter and DandelionServlet registration <a href="/src/main/java/org/springframework/samples/petclinic/config/DandelionConfig.java" rel='nofollow' onclick='return false;'>DandelionConfig.java</a></td> </tr> <tr> <td>Spring MVC - XML integration</td> <td><a href="/src/main/java/org/springframework/samples/petclinic/config/CustomViewsConfiguration.java" rel='nofollow' onclick='return false;'>CustomViewsConfiguration.java</a></td> </tr> </table> <table> <tr> <th width="300px">Others</th><th width="300px">Files</th> </tr> <tr> <td>JSP custom tags</td> <td> <a href="/src/main/webapp/WEB-INF/tags" rel='nofollow' onclick='return false;'>WEB-INF/tags</a> <a href="/src/main/webapp/WEB-INF/jsp/owners/createOrUpdateOwnerForm.jsp" rel='nofollow' onclick='return false;'>createOrUpdateOwnerForm.jsp</a></td> </tr> <tr> <td>Bower</td> <td> <a href="/pom.xml" rel='nofollow' onclick='return false;'>bower-install maven profile declaration inside pom.xml</a> <br /> <a href="/bower.json" rel='nofollow' onclick='return false;'>JavaScript libraries are defined by the manifest file bower.json</a> <br /> <a href="/.bowerrc" rel='nofollow' onclick='return false;'>Bower configuration using JSON</a> <br /> <a href="/src/main/resources/spring/mvc-core-config.xml#L30" rel='nofollow' onclick='return false;'>Resource mapping in Spring configuration</a> <br /> <a href="/src/main/webapp/WEB-INF/jsp/fragments/staticFiles.jsp#L12" rel='nofollow' onclick='return false;'>sample usage in JSP</a></td> </td> </tr> <tr> <td>Dandelion-datatables</td> <td> <a href="/src/main/webapp/WEB-INF/jsp/owners/ownersList.jsp" rel='nofollow' onclick='return false;'>ownersList.jsp</a> <a href="/src/main/webapp/WEB-INF/jsp/vets/vetList.jsp" rel='nofollow' onclick='return false;'>vetList.jsp</a> <a href="/src/main/webapp/WEB-INF/web.xml" rel='nofollow' onclick='return false;'>web.xml</a> <a href="/src/main/resources/dandelion/datatables/datatables.properties" rel='nofollow' onclick='return false;'>datatables.properties</a> </td> </tr> </table> ## Interaction with other open source projects One of the best parts about working on the Spring Petclinic application is that we have the opportunity to work in direct contact with many Open Source projects. We found some bugs/suggested improvements on various topics such as Spring, Spring Data, Bean Validation and even Eclipse! In many cases, they've been fixed/implemented in just a few days. Here is a list of them: <table> <tr> <th width="300px">Name</th> <th width="300px"> Issue </th> </tr> <tr> <td>Spring JDBC: simplify usage of NamedParameterJdbcTemplate</td> <td> <a href="https://jira.springsource.org/browse/SPR-10256" rel='nofollow' onclick='return false;'> SPR-10256</a> and <a href="https://jira.springsource.org/browse/SPR-10257" rel='nofollow' onclick='return false;'> SPR-10257</a> </td> </tr> <tr> <td>Bean Validation / Hibernate Validator: simplify Maven dependencies and backward compatibility</td> <td> <a href="https://hibernate.atlassian.net/browse/HV-790" rel='nofollow' onclick='return false;'> HV-790</a> and <a href="https://hibernate.atlassian.net/browse/HV-792" rel='nofollow' onclick='return false;'> HV-792</a