最近迎来了人生中参与的第一个真正的现实中的项目,但作为一个大二的小菜狗,先写一个简单的功能,记录一下:
整个项目的结构是spring boot整合Mybatis,前端框架是bootstrap。
先说一下需求:管理员显示的界面:
- 将数据库中的数据显示出来
- 可以修改
先来看一下前端的主要部分:
<div class="container">
<div class="container">
<form action="/action_page.php">
<div style="padding: 30px">
<div class="row">
<div class="col-25">
<label> </label>
</div>
<div class="col-75" id="container">
<img src= "/" class="pic-icon" id = "#image"/>
<!-- <form action="${data[0].avatar}">-->
</div>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fname">姓名</label>
</div>
<div class="col-75">
<!-- <input type="text" id="fname" name="firstname" placeholder="超级管理员">-->
<input type="text" id="#manager_name" name="firstname" readonly="readonly">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">密码</label>
</div>
<div class="col-75">
<!-- <input type="text" id="lname" name="lastname" placeholder="123456">-->
<input type="text" id="#password" name="lastname" readonly="readonly">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">邮箱</label>
</div>
<div class="col-75">
<!-- <input type="text" id=" " name="lastname" placeholder="123456@qq.com">-->
<input type="text" id="#email" name="lastname" readonly="readonly">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">手机号码</label>
</div>
<div class="col-75">
<!-- <input type="text" id="lname" name="lastname" placeholder="123456">-->
<input type="text" id="#mobile" name="lastname" readonly="readonly">
</div>
</div>
</form>
</div>
</div>
<div class="rewrite">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">修 改</button>
<from action="" enctype="multipart/form-data" method="post">
<a>
<span>修改头像</span>
<input type="file" id="fileUp" accept="image/png,image/jpeg">
</a>
</from>
<!-- <input type="file" name="file1_1" id="file1_1">-->
<!-- <input type="button" value="上传" onclick="uploadFile('file1_1');" />-->
<!-- <a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</a>-->
<!-- <input type="file" id="photoFile" onchange="upload()">-->
<!-- <img id="preview_photo" src="" width="200px" height="200px">-->
<!-- <style>-->
<!-- img[src=""],img:not([src]){-->
<!-- opacity:0;-->
<!-- }-->
<!-- </style>-->
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">编辑个人信息</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-9">
<!-- <input type="text" onblur="CheckNumber(this.value)" class="form-control" id="modal_cus_name" placeholder="请输入新的用户名(数字)">-->
<input type="text" onblur="IsEmptyForm(this.value)" class="form-control" id="modal_cus_name" placeholder="请输入新的用户名"><div id="TiShi1"></div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-9">
<input type="text" onblur="IsEmptyFormTwo(this.value)" class="form-control" id="modal_bj_prd" placeholder="请输入新的密码"><div id="TiShi3"></div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">邮箱:</label><div id="email"></div>
<div class="col-sm-9">
<input type="text" onblur="IsEmail(this.value)" class="form-control" id="modal_up" placeholder="请输入新邮箱"><div id="TiShi"></div>
</div>
</div>
<!-- 新增的电话号码-->
<div class="form-group">
<label for="" class="col-sm-2 control-label">手机号:</label>
<div class="col-sm-9">
<input type="text" onblur="ValidateMobile(this.value)" class="form-control" id="modal_mobile" placeholder="请输入新手机号"><div id="TiShi2"></div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="sava-edit-btn">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<table id="mytable"></table>
接下来要做的是将数据显示:
看一下controller层:
@RequestMapping("/showAll")
@ResponseBody
public List<PersonalCenterPojo> showAll() {
List<PersonalCenterPojo> personalCenter = personalCenterService.showAll_personCenter();
// System.out.println(List.);
return personalCenter;
}
controller层将参数传给servers层
然后是servers层:
@Autowired
PersonalCenterDao personalCenterDao;
public List<PersonalCenterPojo> showAll_personCenter() {
return personalCenterDao.showAll();
}
再将数据传给dao层:
//显示用户的全部信息
@Select("select * from firecon_admin")
public List<PersonalCenterPojo> showAll();
之后再用js获取到并通过id传给前台:
这里先用一个window.onload,表示点开这个标签页后开始执行
这里通过Ajax操作
window.onload = function() {
$.ajax({
url : "/PersonalCenter/showAll",// 获取数据列
type : 'GET',
success : function(data) {
// 读取成功时将数据读取
// 显示在页面内
document.getElementById("#manager_name").value = data[0].username;
document.getElementById("#password").value = data[0].password;
document.getElementById("#email").value = data[0].email;
document.getElementById("#mobile").value = data[0].mobile;
document.getElementById('#image').src = data[0].avatar;
// ********************
// 显示在修改的模态框内
document.getElementById("modal_cus_name").value = data[0].username;
document.getElementById("modal_bj_prd").value = data[0].password;
document.getElementById("modal_up").value = data[0].email;
document.getElementById("modal_mobile").value = data[0].mobile;
}
});
2、再完成修改功能
修改功能的话点击按钮跳出一个模态框,前端代码看上面;
之后是controller层:
//产品信息的跟新数据
@RequestMapping(value = "/updateInformation")
@ResponseBody
//PersonalCenterPojo pcp
public void updateInformation(@RequestParam("name") String name, @RequestParam("pwd") String pwd, @RequestParam("email") String email,@RequestParam("mobile") String mobile, HttpServletResponse response) {
System.out.println("修改成功!");
personalCenterService.updateInformation(name, pwd, email,mobile);
// Integer.parseInt(name)
}
}
然后是servers:
public void updateInformation(String name, String pwd, String email,String mobile) {
personalCenterDao.updateInformation(name, pwd, email ,mobile);
}
dao:
//订单信息的跟新数据
@Update("update firecon_admin set "
+ "username = #{name},"
+ "password = #{pwd},"
+ "email = #{email},"
+ "mobile = #{mobile}"
+ "where id = 1"
)
public void updateInformation(String name, String pwd, String email, String mobile);
// //获取用户所有信息
然后最重要的任然是js:
// 修改
$("#sava-edit-btn").on("click", function() {
data = get();
$.ajax({
url : "/PersonalCenter/updateInformation",
data : data,
success : function(data) {
BootstrapDialog.show({
title : '提示',
message : '修改成功!'
});
// location.replace("http://localhost:8080/personalCenter");
location.reload();
// document.execCommand('Refresh');
},
error : function() {
BootstrapDialog.show({
title : '提示',
message : '修改失败!'
});
}
});
});
document.getElementById('#sava-edit-btn').style.display = 'none';
// 关闭模态框后清除
$('#myModal').on('hidden.bs.modal', function() {
document.getElementById("contentForm").reset();
});
}
// 获取表单中的输入数据
function get() {
name = document.getElementById("modal_cus_name").value
pwd = document.getElementById("modal_bj_prd").value
email = document.getElementById("modal_up").value
mobile = document.getElementById("modal_mobile").value
return {
name : name,
pwd : pwd,
email : email,
mobile : mobile
}
}
然后呢,因为要修改,要在模态框内显示出之前的数据
然后还要输入数据,则需要到了正则表达式来判断:
function IsEmail(strEmail) {
// 定义正则表达式的变量:邮箱正则
// 以数字字母开头,中间可以是多个数字字母下划线或‘~’
// 中间是‘@’符号,后面是数字字母,
// 然后是‘.’符号再加2~3个字母结尾。
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{3})$/;
console.log(strEmail);
// 文本框不为空,并且验证邮箱正则成功,给出正确提示
if (strEmail != null && strEmail.search(reg) != -1) {
document.getElementById("TheFirstPrompt").innerHTML = "<p style='color: green;font-size: 0.9em'>√邮箱格式正确!</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = false;
za = true;
} else {
document.getElementById("TheFirstPrompt").innerHTML = "<p style='color: red;font-size: 0.9em'>邮箱格式错误!</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = true;
za = false;
}
}
// 验证手机号
function ValidateMobile(mobile) {
if (mobile.length == 0) {
document.getElementById("TheThirdPrompt").innerHTML = "<p style='color: red;font-size: 0.9em'>手机号不能为空!</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = true;
return false;
zb = false;
}
if (mobile.length != 11) {
document.getElementById("TheThirdPrompt").innerHTML = "<p style='color: red;font-size: 0.9em'>手机号格式不正确(11位)!</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = true;
return false;
zb = false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myreg.test(mobile)) {
document.getElementById("TheThirdPrompt").innerHTML = "<p style='color: green;font-size: 0.9em'>√手机号格式正确</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = false;
return false;
zb = true;
}
}
// 验证表单不能为空
function IsEmptyForm(obj) {
if (obj.length != 0) {
document.getElementById("TheSecondPrompt").innerHTML = "<p style='color: green;font-size: 0.9em'>√</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = false;
// return true;
zc = true;
} else {
document.getElementById("TheSecondPrompt").innerHTML = "<p style='color: red;font-size: 0.9em'>输入内容不能为空!</p>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = true;
// return false;
zc = false;
}
}
function IsEmptyFormTwo(obj1) {
if (obj1.length != 0) {
document.getElementById("TheFourPrompt").innerHTML = "<p style='color: green;font-size: 0.9em'>√</font>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = false;
// return true;
zd = true;
} else {
document.getElementById("TheFourPrompt").innerHTML = "<p style='color: red;font-size: 0.9em'>输入内容不能为空!</font>";
var stamp = document.getElementById("sava-edit-btn");
stamp.disabled = true;
// return false;
zd = false;
}
}
因为水平有限,暂时只能这么干了,虽然很麻烦。
然后,如果输入错误会提示错误
此时如果点击关闭,再次点开修改,则需要将之前的错误信息去掉,这里我就直接给关闭按钮了一个刷新页面的函数:
function CloseButton() {
location.replace("http://localhost:8080/personalCenter");
}
至于刷新页面的方法,在上面的js代码里有三种,但是都比较占内存,
// location.replace("http://localhost:8080/personalCenter");
location.reload();
// document.execCommand('Refresh');
到这为止是大部分的内容,还有一些细节,就不说了,然后是头像的上传和修改,这个现在正在写,写完再总结。
对了,最后还要贴一下Pojo:
public class PersonalCenterPojo {
private int id;
private String username;
private String account;
private String password;
private String last_login_ip;
private Timestamp last_login_time;
private String avatar;
private Timestamp add_time;
private Timestamp update_time;
private int deleted;
private String role_ids;
private String email;
private String mobile;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getLast_login_ip() {
return last_login_ip;
}
public void setLast_login_ip(String last_login_ip) {
this.last_login_ip = last_login_ip;
}
public Timestamp getLast_login_time() {
return last_login_time;
}
public void setLast_login_time(Timestamp last_login_time) {
this.last_login_time = last_login_time;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
public Timestamp getAdd_time() {
return add_time;
}
public void setAdd_time(Timestamp add_time) {
this.add_time = add_time;
}
public Timestamp getUpdate_time() {
return update_time;
}
public void setUpdate_time(Timestamp update_time) {
this.update_time = update_time;
}
public int getDeleted() {
return deleted;
}
public void setDeleted(int deleted) {
this.deleted = deleted;
}
public String getRole_ids() {
return role_ids;
}
public void setRole_ids(String role_ids) {
this.role_ids = role_ids;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public PersonalCenterPojo(int id, String username, String account, String password, String last_login_ip, Timestamp last_login_time, String avatar, Timestamp add_time, Timestamp update_time, int deleted, String role_ids, String email,String mobile) {
this.id = id;
this.username = username;
this.account = account;
this.password = password;
this.last_login_ip = last_login_ip;
this.last_login_time = last_login_time;
this.avatar = avatar;
this.add_time = add_time;
this.update_time = update_time;
this.deleted = deleted;
this.role_ids = role_ids;
this.email = email;
this.mobile = mobile;
}
public PersonalCenterPojo() {
}
}