Thymleaf carries data to the front end

Thymleaf carries data to the front end

I. Use of ModelAndView

(1) control layer (there are some normative problems, business processing should be written in service layer)

This method mainly uses Model AndView to transfer values. When new Model AndView is used, jump pages can be specified. AddiObject method encapsulates information. return this object can use corresponding data in corresponding pages.

package com.example.demo.common.control;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.manager.entity.Manager;
import com.example.demo.manager.service.ManagerServiceImp;
import com.example.demo.student.entity.Student;
import com.example.demo.student.service.StudentServiceImp;
import com.example.demo.teacher.entity.Teacher;
import com.example.demo.teacher.service.TeacherServiceImp;

@Controller
public class UserLoginController {

	@Autowired
	StudentServiceImp studentServiceImp;
	@Autowired
	TeacherServiceImp teacherServiceImp;
	@Autowired
	ManagerServiceImp managerServiceImp;

	// Determine whether the login is successful
	@RequestMapping(value = "/login" ,method = RequestMethod.POST)
	public ModelAndView login(String username, String password, String userType) {
		
		String type = isType(userType);//Judging data type
		ModelAndView mavError = new ModelAndView("error");//Used to return data and jump to error.html
		Logger logger = LoggerFactory.getLogger(UserLoginController.class);//Journal
		String errorMsg = "The landing failed!";
		mavError.addObject("errorMsg",errorMsg);
		//Judging the type of login role
		if (type == "student") {
            //Used to return data and jump to student.html
			ModelAndView mavStudent = new ModelAndView("student");
			Student student = studentServiceImp.findByname(username);
			if (student == null) {//If you skip the error prompt page directly for empty
				return mavError;//Return to the Model AndView object and jump to the jump page specified when the object is generated
			}
			if (student.getStupassword().equals(password.trim())) {
				Map<String, String> map = new HashMap<String, String>();
				map.put("number",student.getStunumber());
				map.put("name",student.getStuname());
				map.put("sex",student.getStusex());
				map.put("major",student.getStumajor());
				map.put("qq",student.getStuqq());
                //Add encapsulated information to this object for returning information to the front end
				mavStudent.addObject("student", map);
				logger.info("msg======>" + student.getStuname() + " " + student.getStupassword());
				return mavStudent;
			}

			logger.info("failmsg======>" + student.getStuname() + " " + student.getStupassword());
			return mavError;
		} else if (type == "teacher") {
             //Used to return data and jump to teacher.html
			ModelAndView mavTeacher = new ModelAndView("teacher");
			Teacher teacher = teacherServiceImp.findByname(username);
			if (teacher == null) {//If you skip the error prompt page directly for empty
				return mavError;
			}
			if (teacher.getTeapassword().equals(password.trim())) {
				Map<String, String> map = new HashMap<String, String>();
				map.put("number",teacher.getTeanumber());
				map.put("name",teacher.getTeaname());
				map.put("sex",teacher.getTeasex());
				map.put("qq",teacher.getTeaqq());
				mavTeacher.addObject("teacher", map);
				logger.info("msg======>" + teacher.getTeaname() + " " + teacher.getTeapassword());
				return mavTeacher;
			}

			logger.info("failmsg======>" + teacher.getTeaname() + " " + teacher.getTeapassword());
			return mavError;
		} else if (type == "manager") {
             //Used to return data and jump to teacher.html
			ModelAndView mavManager = new ModelAndView("mamager");
			Manager mamager = managerServiceImp.findByname(username);
			if (mamager == null) {//If you skip the error prompt page directly for empty
				return mavError;
			}
			if (mamager.getManpassword().equals(password.trim())) {
				Map<String, String> map = new HashMap<String, String>();
				map.put("name",mamager.getManname());
				map.put("sex",mamager.getMansex());
				map.put("qq",mamager.getManqq());
				mavManager.addObject("manager", map);
				logger.info("msg======>" + mamager.getManname() + " " + mamager.getManpassword());
				return mavManager;
			}

			logger.info("failmsg======>" + mamager.getManname() + " " + mamager.getManpassword());
			return mavError;
		} else {
			return mavError;
		}
	}

	// Determine the type of login roles
	public String isType(String type) {
		if (type == null) {
			return "error";
		}
		if (type.equals("Student")) {
			return "student";
		} else if (type.equals("Teacher")) {
			return "teacher";
		} else if (type.equals("Administrators")) {
			return "manager";
		} else {
			return "error";
		}
	}

}

(2) Accept the return data front-end page.

To add, you can use the thymleaf template

Student ${student.number}, which is encapsulated when addObject is used in the background Model AndView.

student.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>student</title>
		<link rel="stylesheet" href="css/student.css" />
	</head>
	<body>
		<div id="BackGround">
			<div id="headimg">
				
				<img src="img/headimg.jpg" />
			</div>
			<div id="usermsg">
				<div id="umsgcontent" >
					<div id="number">
						<div class="nam">Student number:</div><div class="con" th:text="${student.number}"></div>
					</div>
					<div id="name">
						<div class="nam">Full name:</div><div class="con" th:text="${student.name}"></div>
					</div>
					<div id="sex">
						<div class="nam">Gender:</div><div class="con" th:text="${student.sex}"></div>
					</div>
					<div id="major">
						<div class="nam">Professional:</div><div class="con" th:text="${student.major}"></div>
					</div>
					<div id="qq">
						<div class="nam">QQ: </div><div class="con" th:text="${student.qq}"></div>
					</div>
					
				</div>
				<div id="logout">
					Sign out
				</div>
			</div>
			<div id="feature">
					<div>Selection of Instructors</div>
					<div>Selection of topics</div>
					<div>Submitting Subject Report</div>
					<div>Submission of task papers</div>
					<div>Submission of works</div>
					<div>submit thesis</div>
			</div>
			<div id="content">
				<div id="conhead">
					<form id="upfileForm" action="upfile" method="post" enctype="multipart/form-data">
						<input type="file" name="file" />
						<input type="submit" value="Submission" />
					</form>
				</div>
				<div id="conbody"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="/webjars/jquery/3.3.1-1/jquery.js"></script>
	<script type="text/javascript" src="/js/logout.js"></script>
	<script type="text/javascript" src="/js/upload.js"></script>
</html>

II. Use of Model

(1) control Layer

package com.example.demo.teacher.control;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/test")
public class TestThymleaf {
	@RequestMapping("/login")
	public String login(Model model,String name,String password){
		if(password.equals("1234") && name.equals("Li Ming")) {
			model.addAttribute("msg", name+"Successful login");
		}
		return "msg";
	}
}

(2) Front-end page for sending data

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form action="/test/login" method="post">
	//Account number:<input name="name" id="name" type="text"><br/>
	//Password:<input name="password" id="password" type="password"><br/>
	<input type="submit" value="Submission">
</form>
</body>
</html>

(3) Front-end to receive returned data

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleleaf.org">
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
   <div class="con" th:text="${msg}">fail</div>
</body>
</html>

Keywords: Java Javascript JQuery

Added by jhuedder on Wed, 31 Jul 2019 20:22:47 +0300