The structure of the code for launching a web project
In the project, for example, I made the connection of the client and server parts via Rest and WebSocket. Who likes what more. There are a great many descriptions of the Spring Framework and Rect technologies themselves on the Internet. This article is for those who have something that doesn’t work out, or something is lazy. This is a customized ready-made working solution containing everything you need to grow into a full-fledged large project.
You can also take this project as a starting point in learning Java EE or React applications.controller/RestController.java
Server:
The client part code is located in the src/main/java folder.
The way everything is located there is completely subordinated to the Spring Framework structure. For those who are familiar with it, they will not find anything interesting there, and for those who are just starting, again, I will just briefly go through the files.
Main.java is the main file. Contains the main method, which launches the entire application.
configuration/WebSocketConfig.java — for entry points when working via WebSocket
Controllers are classes responsible for the interaction of the server and client parts.
controller/IndexController.the java controller is responsible for displaying our client part. Redirecting the user to the url application/** (This is the contextual path to our application)
controller/RestController.java — as the name suggests, this controller is responsible for data exchange between the client and server parts over Rest. Abstract @RequestMapping(value = “/api/rest”, method = RequestMethod.GET) says that upon request at /api/rest, the server will give us a list of users.
I used the PUT method to add users and DELETE, respectively, to delete a user by ID.
controller/WebSocketController.java — defines the path for data exchange via WebSocket. The getAndSendMessage method receives a message from the client and sends it back.
Services are usually responsible for the logic of our application.
service/ORMUserService.java — in my case, is responsible for creating a list of users, as well as adding and deleting users to the database using the parameters received from the client part as data. To delete a user, this is the user ID, and to create it, this is the user’s name, role, and password.
Domain classes are classes that most often contain only data that is projected onto tables in the data bus. From the logic that can be contained in these classes, it is checking the data for correctness or some actions that must be performed immediately before writing data to the database or after reading from it. For example, you can convert from kilograms to grams.
domain/User.java class that will correspond to the Table Table(name = “USER”) in the database.
Data for the column @Column(name = “ID”) will be generated automatically.
domain/Message.java — in my case does not use database mappings. the data in it will be stored while the application is running. It serves me for generating messages sent via WebSocket.
That’s all I have with the server part.
Client:
I will not focus on the client side, since React itself is still a fairly young technology. And it has not yet finally formed the best practices that should be used in each specific project. I will only note that I have created the most classical structure as convenient as possible in my opinion for studying.
What has been done at the front:
The main layout of the application and several tabs are implemented.
Implemented translation for the entire application.
Implemented the state of the application on Redux.
Implemented the display of the table of users received from the server via Rest
Implemented the removal of users by id
Implemented the addition of users
Implemented sending and receiving messages via WebSocket
I think this is more than enough to start with.
Conclusion
Leave all your questions and suggestions in the comments or email me. I will be glad to help.
Detailed installation and startup information
OS “Wondows 10”
Installing Java 1.8 detailed instructions
Before starting the installation, press the Win+ R keyboard shortcut and enter cmd
, enter java -version and see
This means that java is not installed on this computer.
If the computer has output the java version and this version is not lower than 1.8, then proceed to the Gradle installation point.
Download Java from the link
You need to click the Accept License Agreement checkbox.
The Windows x64 version we need
Downloading java
Launching
Starting java
Click Next all the time and Ok at the end of close.
After installation, we call the Win+R command line again and enter cmd, enter java -version and see the version of Java we have already installed
Open the properties of your computer
Computer Properties
Additional parameters — environment variables
Environment variables
Make sure that the system variables have JAVA_HOME with the value C:\Program Files\Java\jdk1.8.0_181\
JAVA_HOME
And there is a string in the Path variable C:\Program Files\Java\jdk1.8.0_181\bin
Path
Let’s move on to the next point
Gradle installation detailed instructions
Open the console again and enter gradle -version
Since we have not installed it yet, we will see by this:
Download the archive from the link
We unpack for example into such a folder C:\gradle-4.10.1
Next, by analogy with java, we open the section with system variables and independently add the GRADLE_HOME variable with the value C:\gradle-4.10.1\bin
GRADLE_HOME
And we also add to the path variable C:\gradle-4.10.1\bin you can even next to the line C:\Program Files\Java\jdk1.8.0_181\bin, but it’s not necessary.
gradle path
Be sure to restart the Win+R cmd console and enter gradle -version
Everything is now and gradle is installed!
Node JS detailed instructions
Download Node JS from the link
And install
Installing Node js
Restart the command line and enter npm -version and we will definitely see the installed version
Project launch
Excellent all the preparatory work is done
Download the project as an archive
It weighs only 135 Kb
Git
And unpack in C:\react-start-master\
Project Folder
Run the command line and go to C:\react-start-master\
For those who do not remember to climb up the folder tree in the command line, you need to enter cd..
So we go to the root of the C drive:>
Then we enter cd react-start-master and get the path C:\react-start-master>
enter npm i
Currently, JS dependencies are being downloaded for our project
Warnings are allowed (WARN — warning)
The folder C will appear in the software project:\react-start-master\node_modules all dependencies will be in it.
Immediately after that, we enter gradle build in the console
All dependencies for Java, including Spring, will be downloaded.
The C folder will appear in the project:\react-start-master\build
everything will be assembled and we will see a message about a successful assembly
BUILD SUCCESSFUL
And immediately after that, you can run the gradle bootRun command
The project will start launching
At the end of the launch, the console will have something like the following
All the project is running!
Don’t close the console, just collapse it.
Open a browser and type localhost:8090/application/ or follow this link
You will see the project running