SpringBoot + VUE implementation of data tables in practice

preamble

I remember the first time to do the project, because the data in the database table will not be rendered to the front-end headache, and finally rely on layui data table API to achieve the front-end data table rendering. Until now, after doing a lot of SpringBoot projects, SSM projects, now return to look at this once this let me suffer a lot of problems, the mind will subconsciously think of many kinds of solutions, such as importing the front-end data table, rendering data tables through JavaScript, rendering data tables through VUE... This article will use VUE+SpringBoot+MybatisPlus, front and back-end separation of the form to achieve the data form in the front-end rendering, here to make a record, so that it is easy to review in the future.

Development tools used:

Front-end: HBuilderX
Backend: IntelliJ IDEA

The contents of the database to be rendered this time are as follows:

在这里插入图片描述

Tip: Below is the body of this post, with the following examples for reference

I. Front-end preparation

1. Basic interface

On the front-end the page is written first, where I fill in the fields in the database table in order of sequence

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>showDataList</title>
	</head>
	<body>
		<div id="app" align="center">
			<table border="1" width="48%" style="text-align: center;">
				<tr>
					<td colspan="5">
						<h1>user list</h1>
					</td>
				</tr>
				<tr>
					<td>serial number</td>
					<td>name and surname</td>
					<td>distinguishing between the sexes</td>
					<td>(a person's) age</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Display effects:

在这里插入图片描述

2. Importing JS files

Here I have imported the VUE and Axios JS files in the HTML<head>tag to introduce the appropriate JS file(axios plays the same role as Ajax, use axios because in the process of doing the project axios compared to Ajax is a good solution to the problem of callback hell)

<script src="static/js/"></script>
<script src="static/js/"></script>

After importing the JS file, prepare the<script>Tags are used to prepare VUE objects and axios for data transfer
<script>The code in the tag is as follows:

<script>
		// Setting the axios request prefix
		 = "http://localhost:8090"

		// Specify the rendering area of the VUE
		const app = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			}
		})
	</script>

Code Explanation:

 = "http://localhost:8090"

In a project that separates front-end and back-end, the front-end has to specify the HTTP protocol and the port number every time it transmits data to the back-end, and this line of codeDefines the request prefix，After that, axios transfers the data in double quotes by default.

const app = new Vue({...})

This code specifies the area where the VUE is to be rendered, el corresponds to the div layer with id app.data is the area of the specified data，methods is the area where methods are defined

II. Back-end preparation

Create a new SpringBoot project and configure MybatisPlus, the process of configuring MybatisPlus is not repeated here

1. Creation of entity classes

Create a new User entity class under the backend pojo package.Properties in the entity class should correspond to fields in the database。

@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User implements Serializable {
    @TableId(type = )
    private Integer id;
    // If the attribute is the same name as the field (including hump rules) the annotation can be omitted
    private String name; 
    private Integer age;
    private String sex;
}

Code Explanation:

@DataAnnotations provided for the lombok plugin to automaticallyProvides get/set/toString methods for properties
@Accessors(chain = true)is also an annotation provided by the lombok plugin.Open Chain Programming
@TableName("demo_user")annotations for MybatisPlus, which are used in theSpecify which table in the data corresponds to this entity class
@TableId(type = )be used forSpecify which attribute in the entity class is to be used as the primary key in the tablefurthermorePrimary key self-incrementRealized
SerializableThe role of the interface is toSerialize this entity class, the purpose of serializing entity classes is toEnsures that data is transmitted without error

2. Controller layer

After creating the entity class, start writing the code for the Controller layer

@RestController
@CrossOrigin
@RequestMapping("/table")
public class TableController {
    @Autowired
    private UserService userService;
	
	@GetMapping("/getAllUser")
    public List<User> getAllUser() {
        List<User> userList = ();
        return userList;
    }
}

Code Explanation:

In the Controller layer, add the@CrossOriginThe role of annotations is toCross-domain support
@RestControllerequivalent to@Controllercap (a poem)@ResponseBodyThe combination of the two annotations willThe data from the back-end is returned to the front-end in the form of a JSON string

3. Service layer

①. UserService interface

public interface UserService {
    /**
     * Query all data in the corresponding table of the database
     *
     * @return Collection object
     */
    List<User> selectAll();
}

②. UserServiceImpl implementation class

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    /**
     * Query all collections in the database
     *
     * @return Collection object
     */
    @Override
    public List<User> selectAll() {
        List<User> userList = (null);
        return userList;
    }
}

In MybatisPlus, the selectList method queries all the data in the current table when the parameter is null.

4. Mapper layer

①. UserMapper interface

public interface UserMapper extends BaseMapper<User> {

}

②. Documentation

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN"
        "/dtd/" >
<mapper namespace="">
    
</mapper>

SQL statements can be automatically generated in MybatisPlus

III. Front-end and back-end integration

After the completion of the front-end and back-end of the basic configuration, the next front-end and back-end separation of the integration of the project, in the integration of the first realization of the process of analysis
1. When the user clicks on the Show Forms button it should beLaunch Ajax request to get userList data
2. Present the data in the UserList on the page (The data in the page must be defined in data）
3. Assigning the result of the request to the data attribute
4. Iteration of data using the v-for instruction

treat (sb a certain way)<script>The code of the VUE in the code block is edited:
Since the return value of the backend is a collection, first in the data data fieldDefine a userList array object to receive the collection from the backend., then define a method getUserList in the methods method area, which is to beMake an axios request to the backend and store the returned data in an array object. In the HTML<table>Add a button component to the tag and bind the getUserList method to the button.

After you've added the button component, the<table>Tags also add<tr>tag in the VUE using thev-for instruction to traverse the userList collection, in turn, is removed and rendered.

<script>
	// Setting the axios request prefix
	 = "http://localhost:8090"

	// Specify the rendering area of the VUE
	const app = new Vue({
		el: "#app",
		data: {
			// Define the collection to store the data, which is null.
			userList: []
		},
		methods: {
			// 1. Define the getUserList method to get backend server data.
			async getUserList() {
				// Add a new type of operation request: post.
				let {
					data: result
				} = await ("/table/getAllUser")
				// After the Ajax call, assign the request result to the data property.
				 = result
			}
		}
	})
</script>

<table border="1" width="48%" style="text-align: center;">
	<tr>
		<td colspan="5">
			<h1>user list</h1>
		</td>
	</tr>
	<tr>
		<td colspan="5" style="text-align: left;">
			<button type="button" @click="getUserList">Display Forms</button>
		</td>
	</tr>
	<tr>
		<td>serial number</td>
		<td>name and surname</td>
		<td>distinguishing between the sexes</td>
		<td>(a person's) age</td>
	</tr>
	<tr v-for="user in userList">
		<td v-text=""></td>
		<td v-text=""></td>
		<td v-text=""></td>
		<td v-text=""></td>
	</tr>
</table>

Code Explanation:
The v-text directive is used here without the interpolation expression (i.e. {{}}) is becauseIf there is a lot of data being transferred, the page will display the {{XXX}}, not conducive to browser security.
This completes the integration of the front and back ends.

IV. Operational results

在这里插入图片描述

The content of the table is then all displayed on the front end, and then finally beautified with bootstrap

在这里插入图片描述

summarize

Above is the use of SpringBoot + VUE + Mybatis to achieve the rendering of the data table, more related SpringBoot + VUE data table content please search for my previous posts or continue to browse the following related articles I hope you will support me more in the future!