[英]How to insert data into database after creating JSON from “HTML form” with POSTMAPPING in spring boot?
在從“html 表單”獲取信息並轉換為 json 后,我試圖將數據插入到我的 jdbc h2 數據庫中。 我之前使用 swagger 來讀取/寫入數據,並且效果很好。 這就是我將“HTML 表單”信息轉換為“json”的原因。 現在,我正在嘗試使用 HTML 來顯示我的網頁並從數據庫中讀取/寫入數據。 代碼在下面。 我需要更改我的代碼結構嗎?
這是學校的.java文件
@Getter
@Setter
public class School extends BaseModel{
private String schoolName;
private String schoolEmail;
private String schoolStreet;
private String schoolHouse;
private String schoolCity;
private String schoolState;
private String schoolCountry;
Long schoolPhone;
Long schoolZip;
private String image;
private String status;
}
這是數據庫的 rowMapper
public class SchoolDaoRowMapper extends BaseRowMapper<School> {
public enum SchoolColumnType {
SCHOOL_NAME, SCHOOL_EMAIL, SCHOOL_STREET, SCHOOL_HOUSE,
SCHOOL_ZIP, SCHOOL_CITY, SCHOOL_STATE, SCHOOL_COUNTRY, SCHOOL_PHONE,
STATUS, IMAGE;
private String columnName;
SchoolColumnType() {
columnName = name().toLowerCase();
}
public String getColumnName() { return columnName; }
}
@Override
public Map<String, Object> mapObject(@NotNull School school) {
Map <String,Object> map = new HashMap<>();
map.put(ID.getColumnName(), school.getId());
map.put(SCHOOL_EMAIL.getColumnName(),school.getSchoolEmail());
map.put(SCHOOL_NAME.getColumnName(),school.getSchoolName());
map.put(SCHOOL_STREET.getColumnName(),school.getSchoolStreet());
map.put(SCHOOL_HOUSE.getColumnName(),school.getSchoolHouse());
map.put(SCHOOL_ZIP.getColumnName(),school.getSchoolZip());
map.put(SCHOOL_CITY.getColumnName(),school.getSchoolCity());
map.put(SCHOOL_STATE.getColumnName(),school.getSchoolState());
map.put(SCHOOL_COUNTRY.getColumnName(),school.getSchoolCountry());
map.put(SCHOOL_PHONE.getColumnName(),school.getSchoolPhone());
map.put(STATUS.getColumnName(),school.getStatus());
map.put(IMAGE.getColumnName(),school.getImage());
map.put(CREATED_BY.getColumnName(), school.getCreatedBy());
map.put(UPDATED_BY.getColumnName(), school.getUpdatedBy());
map.put(CREATED_DATE.getColumnName(), javaTimeFromDate(school.getCreatedDate()));
map.put(UPDATED_DATE.getColumnName(), javaTimeFromDate(school.getUpdatedDate()));
return map;
}
@Override
public School mapRow(ResultSet rs, int rowNum) throws SQLException {
School school = new School();
school.setId(rs.getLong(ID.getColumnName()));
school.setSchoolName(rs.getString(SCHOOL_NAME.getColumnName()));
school.setSchoolEmail(rs.getString(SCHOOL_EMAIL.getColumnName()));
school.setSchoolStreet(rs.getString(SCHOOL_STREET.getColumnName()));
school.setSchoolHouse(rs.getString(SCHOOL_HOUSE.getColumnName()));
school.setSchoolZip(rs.getLong(SCHOOL_ZIP.getColumnName()));
school.setSchoolCity(rs.getString(SCHOOL_CITY.getColumnName()));
school.setSchoolState(rs.getString(SCHOOL_STATE.getColumnName()));
school.setSchoolCountry(rs.getString(SCHOOL_COUNTRY.getColumnName()));
school.setSchoolPhone(rs.getLong(SCHOOL_PHONE.getColumnName()));
school.setStatus(rs.getString(STATUS.getColumnName()));
school.setImage(rs.getString(IMAGE.getColumnName()));
school.setCreatedBy(rs.getLong(CREATED_BY.getColumnName()));
school.setUpdatedBy(rs.getLong(UPDATED_BY.getColumnName()));
school.setCreatedDate(dateFromJavaTime(rs.getObject(CREATED_DATE.getColumnName())));
school.setUpdatedDate(dateFromJavaTime(rs.getObject(UPDATED_DATE.getColumnName())));
return school;
}
}
這是向數據庫插入數據的 dao 文件。
@Override
public School create(School school, Long creatorId) {
if (school == null) {
throw new DaoException("Request to create a new school received null values.");
} else if (school.getId() != null) {
throw new DaoException("When creating a new school the id should be null, but was set to " + school.getId());
}
LOG.trace("School Dao creating user {}", school);
school.setStatus("ACTIVE");
school.setCreatedDate(LocalDateTime.now());
school.setUpdatedDate(LocalDateTime.now());
KeyHolder keyHolder = new GeneratedKeyHolder();
int result = this.jdbcTemplate.update(sql("createSchool"), //This maps the data to database. The "createSchool" is SQL STATEMENT that executes INSERT INTO command.
new MapSqlParameterSource(rowMapper.mapObject(school)), keyHolder, new String[]{BaseRowMapper.BaseColumnType.ID.name()});
if (result != 1) {
throw new DaoException(String.format("SchoolDao: Failed attempt to create user %s - affected %s rows", school.toString(), result));
}
@CheckForNull //Createa a ID values for database
Long id = keyHolder.getKey().longValue();
school.setId(id);
return school;
}
這是 controller
@Controller
public class SchoolRestController {
public static final String BASE_SCHOOL_PATH = "/School";
public static final String GET_EMAIL_PATH = BASE_SCHOOL_PATH + "/email";
public static final String DELETE_USER_PATH = BASE_SCHOOL_PATH + "/delete";
private final SchoolDao schoolDao;
private static final Logger logger = LoggerFactory.getLogger(SchoolRestController.class);
@Autowired
public SchoolRestController(SchoolDao schoolDao){this.schoolDao = schoolDao;}
//Manage School Page
@GetMapping ("/ManageSchool")
public String manageSchoolPage(Model model){
return "manageSchool";
}
// Create school page
@GetMapping(BASE_SCHOOL_PATH+"/Create")
public String createSchoolForm(Model model){
model.addAttribute("school",new School());
return "createSchoolForm";
}
@ApiOperation(value = "Create School")
@PostMapping(value = BASE_SCHOOL_PATH+"/Create")
public String create (School school, @ApiIgnore HttpServletResponse response) throws IOException {
// components tests are expecting this assertion and exception handling, and will fail if removed
try {
Assert.isNull(school.getId(), "School ID field must be null");
Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
schoolDao.create(school, null);// This should create the School item in DATABASE from the DAO.create
} catch (IllegalArgumentException e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
return null;
} catch (Exception e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
return null;
}
return "createSchoolForm";
}
這是用於創建新學校的 HTML 文件。 給出所有這些 null 值,以便正確地將 ROW 映射器的 JSON 格式設置為 map。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>Create School || EDUBD</title>
<meta charset="utf-8">
</head>
<body>
<h1>EDUBD - Manage School Portal</h1>
<h3>Create New School</h3> <br>
<form action="#" th:action="@{/School/Create}" th:object="${school}" th:method="POST">
<label>School Name:<br>
<input type="text" th:field="*{schoolName}" id="schoolName" required>
</label> <br>
<label>School Email:<br>
<input type="text" th:field="*{schoolEmail}" id="schoolEmail" required>
</label> <br>
<label>Phone Number: <br>
<input type="tel" th:field="*{schoolPhone}" id="schoolPhone" required>
</label> <br>
<input id='btn' type="submit" value="Submit" > <input type="reset" value="Reset"/>
</form>
<div id="msg">
<pre></pre>
</div>
<script>
let schools=[];
const addSchool = (ev) =>{ //ev=event
ev.preventDefault();
let school={ //create a json object
schoolName: document.getElementById('schoolName').value,
schoolEmail: document.getElementById('schoolEmail').value,
schoolPhone: document.getElementById('schoolPhone').value,
status: null,
schoolStreet:null,
SchoolHouse:null,
schoolZip:null,
schoolCity:null,
schoolState:null,
schoolCountry:null,
image:null,
createBy:null,
updatedBy:null,
createdDate:null,
updatedDate:null,
id:null
}
schools.push(school);
document.forms[0].reset(); // clear the form.
//display only
console.warn('added',{schools});
let pre=document.querySelector('#msg pre');
pre.textContent= '\n'+ JSON.stringify(schools,'\t',2);
}
document.addEventListener('DOMContentLoaded',() =>{
document.getElementById('btn').addEventListener('click',addSchool);
})
</script>
這是桌子
CREATE TABLE schools (
id BIGINT(20) AUTO_INCREMENT PRIMARY KEY,
school_name VARCHAR(255) NOT NULL,
school_email VARCHAR(255) UNIQUE NOT NULL,
school_street VARCHAR(255),
school_house VARCHAR(255),
school_zip BIGINT(10),
school_city VARCHAR(255),
school_state VARCHAR(255),
school_country VARCHAR(255),
school_phone BIGINT(20),
status VARCHAR(255) NOT NULL,
image VARCHAR(255),
created_by BIGINT(20) NULL,
created_date BIGINT(20) NOT NULL,
updated_date BIGINT(20) DEFAULT NULL,
updated_by BIGINT(20) NULL
);
對我有用的解決方案。
我重新設計了 HTML 以使用XMLHttpRequest()
function 發送數據。 當我使用xhr.send()
發送數據時,我的 DAO() 工作。 @RequestBody
捕獲了數據。 此外,我在 controller 中添加了produces
和consumes
。
新的 HTML:
<h3>Create New School</h3> <br>
<form id="createSchool" method="post">
<br>
<label>School Name:
<input type="text" id="schoolName" value="" required/>
</label>
<br>
<label>School Email:
<input type="email" id="schoolEmail" value="" required/>
</label>
<br>
<label>School Phone Number:
<input type="tel" id="schoolPhone" value="" required/>
</label>
<br>
<button type="button" id="submit">Submit Form</button>
</form>
<div id="feedback"></div>
<script>
$(document).ready( function() {
$("#submit").click(function(e) {
e.preventDefault();
var school=new Object();
school.schoolName = $("#schoolName").val();
school.schoolEmail= $("#schoolEmail").val();
school.schoolPhone = $("#schoolPhone").val();
school.status= null;
school.schoolStreet= null;
school.schoolHouse= null;
school.schoolZip= null;
school.schoolCity= null;
school.schoolState= null;
school.schoolCountry= null;
school.image= null;
school.createBy= null;
school.updatedBy= null;
school.createdDate= null;
school.updatedDate= null;
school.id= null;
var s2=JSON.stringify(school);
console.log(s2);
var xhr = new XMLHttpRequest();
xhr.open("POST", "SchoolCreate",true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
console.log("success");
$('#feedback').html("Success");
}
else {
console.log(xhr.responseText);
$('#feedback').html(xhr.responseText);
}
}
xhr.send(s2);
// this makes the form empty after submission.
document.getElementById('schoolName').value='';
document.getElementById('schoolEmail').value='';
document.getElementById('schoolPhone').value='';
});
});
</script>
</body>
controller
@ApiOperation(value = "Create School")
@PostMapping(value = "/ManageSchool"+BASE_SCHOOL_PATH+"/SchoolCreate", produces = {"application/json"},
consumes = {"application/json"})
public String create (@RequestBody School school, @ApiIgnore HttpServletResponse response) throws IOException {
// components tests are expecting this assertion and exception handling, and will fail if removed
try {
Assert.isNull(school.getId(), "School ID field must be null");
Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
Assert.notNull(school.getSchoolPhone(),"School Phone number cannot be null. ");
Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
schoolDao.create(school, null);
return "createSchoolForm";
} catch (IllegalArgumentException e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
return null;
} catch (Exception e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
return null;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.