利用SpringMVC从前端页面接收值且在控制台输出
文章目录
模块介绍
利用SpringMVC的接收值的方法，从页面里面接受值，其中包括输入框，单选框，和多选框的值，并且完成将前端的form表单信息到后台控制器接受的操作，需在控制台输出前端form表单里的所有字段的信息。
一、效果展示
二、简单的代码实现
1.首先创建一个前端页面
这里创建的是一个Html页面里面包含了些js函数和简单的样式（老师那个前端页面实在是太丑了）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function add(){
document.getElementById("all").style.display='block';
}
//检查员工ID的合法性
function checkEmployeeId(){
var employeeId=document.getElementById("employeeId").value.trim();//获取到员工ID的值
if(employeeId==''){
document.getElementById("employeeId1").innerHTML='员工ID是必填项！';
document.getElementById("employeeId1").style.color='red';
document.getElementById("employeeId").style.borderColor='red';
return false;
}else{
document.getElementById("employeeId1").innerHTML='员工ID OK！';
document.getElementById("employeeId1").style.color='green';
document.getElementById("employeeId").style.borderColor='green';
return true;
}
}
function checkEmployeeName(){
var employeeName=document.getElementById("employeeName").value.trim();//获取到员工ID的值
if(employeeName==''){
document.getElementById("employeeName1").innerHTML='员工名字是必填项！';
document.getElementById("employeeName1").style.color='red';
document.getElementById("employeeName").style.borderColor='red';
return false;
}else{
document.getElementById("employeeName1").innerHTML='员工名字 OK！';
document.getElementById("employeeName1").style.color='green';
document.getElementById("employeeName").style.borderColor='green';
return true;
}
}
function checkEmployeeAge(){
var employeeAge=document.getElementById("employeeAge").value.trim();//获取到员工ID的值
if(employeeAge==''){
document.getElementById("employeeAge1").innerHTML='员工年龄是必填项！';
document.getElementById("employeeAge1").style.color='red';
document.getElementById("employeeAge").style.borderColor='red';
return false;
}else{
document.getElementById("employeeAge1").innerHTML='员工年龄 OK！';
document.getElementById("employeeAge1").style.color='green';
document.getElementById("employeeAge").style.borderColor='green';
return true;
}
}
function check(){
if(checkEmployeeId()&checkEmployeeName()&checkEmployeeAge()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!--
<marquee onmouseout="this.start();" onmouseover="this.stop();">${
msg}</marquee>
-->
<div>
<table border="1" width="600" height="100" align="center" cellpadding="0" cellspacing="3">
<tr><td>employeeId</td><td>employeeName</td><td>employeeAge</td><td>yuyan1</td><td>yuyan2</td><td>sex</td></tr>
<#list list as emp>
<tr><td>${
emp.employeeId}</td><td>${
emp.employeeName}</td><td>${
emp.employeeAge}</td><td>${
emp.yuyan1}</td><td>${
emp.yuyan2}</td><td>${
emp.sex}</td></tr>
</#list>
<tr><td><a href="javascript:add();">点击我进入增加页面</a></td></tr>
</table>
</div>
<div id="all" style="display: none; border: 1px solid red; margin: 0 auto; width: 600px; height: auto;">
<form action="insertEmployee" method="get" onsubmit="return check();">
<p>员工ID:<input type="text" name="employeeId" id="employeeId" onblur="checkEmployeeId();"><span id="employeeId1">请输入员工ID</span></p>
<p>员工名字:<input type="text" name="employeeName" id="employeeName" onblur="checkEmployeeName();"><span id="employeeName1">请输入员工名字</span></p>
<p>员工年龄:<input type="text" name="employeeAge" id="employeeAge" onblur="checkEmployeeAge();"><span id="employeeAge1">请输入员工年龄</span></p>
<p>汇编语言:<input type="checkbox" name="yuyan1" value="java" >Java
<input type="checkbox" name="yuyan2" value="python">Python</p>
<p>员工性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女</p>
<p><input type="submit"><input type="reset"></p>
</form>
</div>
</body>
</html>
2.在pojo包中创建Employee类
Employee类中定义了一些属性
代码如下：
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.Setter;
@Data
@AllArgsConstructor
public class Employee {
private int employeeId;
private String employeeName;
private int employeeAge;
private String yuyan1;
private String yuyan2;
private String sex;
public static void main(String[] args) {
// Employee e=new Employee();
// e.setEmployeeId(1);
// e.setEmployeeName("admin");
// e.setEmployeeAge(23);
Employee e=new Employee(1,"admin",12,"Java","","男");
System.out.println(e.getEmployeeName());
//Map神器
}
}
3.在config包中创建Data类
Data中实例化了Employee集合，加入了静态代码块，向集合中插入了一些固定数据；
代码如下：
package com.chinasoft.test193.config;
import com.chinasoft.test193.pojo.Employee;
import java.util.ArrayList;
import java.util.List;
public class Data {
public static List<Employee> list=new ArrayList<Employee>();
static{
list.add(new Employee(1,"admin",12,"Java","","男"));
list.add(new Employee(2,"admin1",13,"Python","Java","女"));
}
}
4.在controller包中创建TestController类
TestController类中主要通过"HttpServletRequest request"的方法实现了获取了前端用户输入的数据，打包了list数据集合放进了Map中，并且在后端控制台输出了数据值，并且完成了重定向到原本index页面的作用。
代码如下：
package com.chinasoft.test193.controller;
import com.chinasoft.test193.config.Data;
import com.chinasoft.test193.pojo.Employee;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.sql.DataSource;
import java.util.HashMap;
import java.util.Map;
//@RestController
@Controller
public class TestController {
private static final Logger log= LoggerFactory.getLogger(TestController.class);
@RequestMapping("index")
public ModelAndView index(){
Map<String,Object> map=new HashMap<String,Object>();
map.put("list",Data.list);
return new ModelAndView("index",map);
}
@RequestMapping("insertEmployee")
public String insertEmployee(HttpServletRequest request){
String employeeId=request.getParameter("employeeId");
String employeeName=request.getParameter("employeeName");
String employeeAge=request.getParameter("employeeAge");
String yuyan1 = request.getParameter("yuyan1");
String yuyan2 = request.getParameter("yuyan2");
String sex = request.getParameter("sex");
//添加到list合集里面
Data.list.add(new Employee(Integer.parseInt(employeeId),employeeName,Integer.parseInt(employeeAge),yuyan1,yuyan2,sex));
System.out.println("员工编号："+employeeId);
System.out.println("员工姓名："+employeeName);
System.out.println("员工年龄："+employeeAge);
System.out.println("编程语言："+yuyan1);
System.out.println(" "+yuyan2);
System.out.println("员工性别："+sex);
//重定向到index
return "redirect:/index";
}
}
总结
在开发程序时，程序有一项重要的功能就是验证功能，防止用户和竞争对手进行恶意注册，在数据库形成无效数据，影响程序效率。
但是这个验证功能我们不能全部放在后端，让服务器进行验证功能，我们将其一部分放到客户端进行处理，这样大大降低了服务器的运行负担。