Spring + spring mvc + mybatis + react + reflux + webpack Web engineering example, mybatisreflux

Spring + spring mvc + mybatis + react + reflux + webpack Web engineering example, mybatisreflux

Recently I wrote a Java Web project demo, which is built using maven;

The backend uses spring + spring mvc + mybatis;

The front end uses react + reflux + webpack and ES6 syntax. Along with jquery, bootstrap, echarts, and other plug-ins, two small demos are written.

The first version still needs to be improved.

Let's start with the overall feeling,

Paste several images:

Backend, familiar people are naturally familiar:

Front end,

I don't feel like the frontend is more and more like the backend. for amateur front-end players like me, I like this directory structure and syntax. Haha:

Running Effect:

Backend description

The backend is the common spring + spring mvc + mabatis. How can this problem be solved? I mainly write the configuration file, spring configuration, mybatis configuration, spring mvc configuration, and web. xml configuration, pom. xml configuration, etc. If you are interested, you can download the source code, which is easy to understand;

The main function of the backend is to provide a request service to the front end. The front end sends a request to the backend through ajax, And the backend returns json-format data to the front end. spring mcv's view parser is useless here, if you want to use it, you can add it on your own. Personally, it seems unnecessary.

A servlet is added to the backend to process url requests. It is very simple to forward to the specified html page. In this servlet, you can add some permission control and filter related items.

Front-end description

1. First install nodejs, then open cmd, cd to the \ webapp directory, enter npm install, and install a bunch of modules. The modules to be installed here refer to package. json configuration file. json configuration file and pom. xml has similar functions. It configures various dependencies, engineering information, engineering build, and other things;

2. Enter webpack -- display-error-details and use webpack to package it (add a parameter and print the error message). What is webpack unclear, anyway, it can load various modules. Even if these modules are written using the JSX syntax, it also has the corresponding loader to process and compile them;

After writing the code, enter webpack to run it, and then introduce the packaged js in html;

In addition, the react and reflux statements seem to be too much to be said. This cainiao only knows about each other and uses the content based on the self-network and its own judgment, this is not detailed here;

My personal understanding is as follows:

React mainly involves virtual dom and React. Component components. Each React Component has a state. After the state changes, the Component'srenderThe method is used to render the UI of the entire component. Instead of directly operating the dom, the diff algorithm is used to calculate the virtual dom and obtain the dom to be updated, then write the part of the dom to be updated to the real dom. In addition, components can be reused;

Reflux is a kind of implementation of the flux idea. Other implementations include redux or something,

I stole a picture on the Internet, which probably means this:

PS: What is the MVC idea of the backend, and what is similar for the front-end? Of course, flux and mvc are a little different.

In addition, to use jquery, bootstrap is also very convenient. Install the corresponding components and directly import them;

Last

Source Code address: https://github.com/peterchenhdu/webbf

For reference only ~