Spring + Spring MVC + MyBatis + react + reflux + webpack Web Engineering Example

Recently wrote a Java Web project demo, using Maven to build;

The backend uses spring + spring MVC + mybatis;

The front end uses react + reflux + webpack, using the ES6 syntax, incidentally using the next jquery,bootstrap,echarts and other plugins, wrote two small demo

The first edition, also needs to be perfected continuously.

Let's start with a sense of the whole.

Post a few pictures:

Back end, familiar to people naturally familiar with:

Front End ,

There is no sense of the front end of the writing more and more like the back end, for me this amateur front-end players, like this directory structure and grammar, ha haha:

Operating effect :

Back-end description

Back end is the common spring+spring mvc+mabatis, how to say, mainly write configuration files, spring configuration, mybatis configuration, Spring MVC configuration, Web. XML configuration, pom.xml configuration, etc., interested in the source code can be downloaded, it is easy to read;

The main function of the backend is to provide the front-end with the request service, the front-end through Ajax to send the request back end, back end return JSON format of the data to the front, there is no use of Spring MCV view parser, of course, if you want to use, you can add their own, personally feel like there is no need.

The backend specifically adds a servlet for processing URL requests, which is simply forward to the specified HTML page; In this servlet you can add permissions to control and filter related things.

Front End Description

1. Install Nodejs First, then open CMD,CD to \webapp directory, enter NPM install, install a bunch of modules, The module that needs to be installed here is reference Package.json configuration file, say Package.json configuration file and Pom.xml function quite similar, will configure various dependencies, engineering information, project build and so on a bunch of things;

2, then input webpack--display-error-details, use webpack packaging (add a parameter, print believe error message), Webpack is what unclear, can Baidu a bit, anyway it is can load various modules, Even if these modules are written using the JSX syntax, it also has a corresponding loader that will handle compiling them;

Anyway, each time after writing the code, input webpack run a bit, and then in the HTML to introduce packaged JS can;

In addition, about React,reflux, feel to say too much, this rookie also just understand each probably, content is reference from the network plus own judgment, will use, here is not detailed said;

Simply say personal understanding:

React primarily involves virtual DOM and react.component components, each react component has a way to render the UI of the entire component after a change state,state the component, render not directly manipulating the DOM, Instead, the virtual DOM is computed once with the diff algorithm, the DOM is updated, and the part of the DOM that needs to be updated is written to the real DOM. In addition, the components can be reused;

Reflux is a kind of realization of flux thought, other realization also has redux what,

Stealing a picture on the internet is probably what it means:

PS: What is the MVC idea at the back end and what is the front end like, of course, flux and MVC are a little different.

In addition, to use Jquery,bootstrap is also very convenient, install the corresponding components, direct import use can be;

At last

Source Address: HTTPS://GITHUB.COM/PETERCHENHDU/WEBBF

For reference only ~

Spring + Spring MVC + MyBatis + react + reflux + webpack Web Engineering Example