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

Source: Internet
Author: User

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 ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.