springboot整合mybatis+bootstrap+JS个人信息显示+修改

最新推荐文章于 2024-07-12 10:55:41 发布
最新推荐文章于 2024-07-12 10:55:41 发布
阅读量6.5k 收藏 46
点赞数 11
分类专栏： javaWeb 文章标签： spring boot  bootstrap Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanggouxuan/article/details/102883250
版权

最近迎来了人生中参与的第一个真正的现实中的项目，但作为一个大二的小菜狗，先写一个简单的功能，记录一下：
整个项目的结构是spring boot整合Mybatis，前端框架是bootstrap。
先说一下需求：管理员显示的界面：在这里插入图片描述

  1. 将数据库中的数据显示出来
  2. 可以修改

先来看一下前端的主要部分：

<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" style="display: none;" 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">&times;</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() {
    }
}
SFTCTR
关注
  • 11
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Spring Boot 结合Bootstrap
07-17
Spring Boot结合Bootstrap框架，对页面呈现进行优化
springboot+bootstrap+shiro权限管理
03-28
本系统是有springboot结合shiro开发的一款权限管理系统，前端用的是bootstrap，界面美观，含数据库文件。
Spring boot使用Bootstrap
热门推荐
天高任鸟飞
09-06 2万+
添加依赖 webjars https://www.webjars.org/ &amp;lt;!--引入bootstrap--&amp;gt; &amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;org.webjars&amp;lt;/groupId&amp;gt; &amp;lt;artifactId&amp;gt;bootstrap&amp;lt
基于uniapp简单的（个人页面+个人资料页面）+实现（修改昵称+修改简介+修改背景图片+修改头像）功能
最新发布
sakura momoko的博客
07-12 798
基于uniapp简单的（个人页面+个人资料页面）+实现（修改昵称+修改简介+修改背景图片+修改头像）功能
spring boot集成bootstrap
weixin_34187862的博客
11-24 198
前置环境基于jpa/mybatis、thymeleaf 环境搭建引入bootstrap中的资源文件，css和js 关键页面代码 目录结构2.footer.html和header.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Boo...
Spring Boot 整合 Bootstrap
小凯的博客
03-12 7386
Springboot整合bootstrap笔记
springboot+mybatis+bootstrap整合的简单框架
10-11
本项目"springboot+mybatis+bootstrap整合的简单框架"旨在提供一个快速开发的解决方案，将三个流行的开源技术——Spring Boot、MyBatis和Bootstrap融合在一起，以简化Web应用的构建过程。 Spring Boot是由Pivotal...
springboot+mybatis+bootstrap商城系统
05-09
【标题】"springboot+mybatis+bootstrap商城系统"是一个基于SpringBoot框架、MyBatis持久层框架以及Bootstrap前端框架的电子商务平台项目。这个系统旨在提供一个完整的后台管理及前台展示功能，支持商品管理、订单...
springboot+mybatis+bootstrap项目
02-28
【标题】"springboot+mybatis+bootstrap项目"是一个整合了Spring Boot、MyBatis以及Bootstrap框架的Web应用。这个项目旨在提供一个快速开发的模板，帮助开发者搭建一个功能完善的后端服务和用户友好的前端界面。 ...
springboot+mybatis+bootstrap-blogs.rar
06-16
这是一个基于Spring Boot、MyBatis和Bootstrap技术栈构建的简易Java博客系统项目。Spring Boot以其快速启动、简化配置的优势在现代Java开发中被广泛应用。MyBatis作为一个轻量级的持久层框架，允许开发者自由地编写...
springboot+mybatis+bootstrap
05-08
标题 "springboot+mybatis+bootstrap" 暗示了一个基于Spring Boot、MyBatis和Bootstrap的Web应用程序开发项目。这个组合是现代Java Web开发中常见的技术栈，它提供了快速开发、数据库操作以及用户界面设计的功能。让...
教学管理系统-springboot+bootstrap
12-06
教学管理系统，内含登、用户管理、角色管理、权限管理、实时对话、写日记（富文本编辑），日记审核流程。日记打分统计（饼图和条形图）。
Spring Boot+Bootstrap开发小而完整web项目
06-30
跟着本课程Demo完整的动手写一次，会发现你已经可以直接利用Spring Boot上手中小型web项目了。 Spring Boot框架是现在比较热门的微服务框架，很多软件公司都在使用，本课程涵盖Spring Boot和Bootstrap较为多面的知识点，针对Spring Boot开发web项目中每个阶段的关键内容和痛点，一步步进行条理清晰的讲解，学员在听课过程中建立起自己较为完备的前端、后端知识体系，具备较好的项目开展能力和自信。 课程特点是不炫技、条理清晰、生动浅显、化繁为简，每个章节都会围绕Spring Boot、Bootstrap的知识点“是什么、有什么用、怎么用”展开，并根据精心准备的简洁清晰的示例进行讲解。   学完该套课程后，可以很快上手Spring Boot实战开发，一个人就能完成一个基于Spring Boot+Bootstrap的完整WEB项目！
springboot+bootstrap论坛
12-26
基于Java开发的论坛系统，内置mysql数据库,自动建立索引，里面包含安装教程。
Springboot快速开发框架(SSM+Springboot+BootStrap)
04-21
Springboot快速开发框架(SSM+Springboot+BootStrap)
springboot-bootstrap组合demo
12-10
项目的后台框架用的springboot，前端框架用的是bootstrap，jpa的组合，实现前后分离
基于Springboot+Bootstrap的文件管理全套解决方案（文件列表、上传、预览、下载、删除、打包下载等）
hanxiaozhang的博客
05-01 8258
前言： 最近，不知道是不是最后一搏，事业群上层领导要求7天内完成ABS项目中保理系统的一期开发。需求评审会后，我发现各个功能模块都有大量的文件材料展示与上传，为了提高开发效率，我与组长商量，我先开发文件模块，为其他同事提供公共方法，减少重复工作。 使用的前端技术栈：Bootstrap、Bootstrap-table、layer.js、layui.js、jquery.media.js 设计思路...
springboot整合bootstrap
sun_luming的博客
07-09 7216
之前做前端开发，在使用bootstrap的时候都是去官网下载，然后放到项目中，在页面引用。 最近用springboot开发的时候发现，其实springboot可以让我们像导入java中的其他jar包一样导入bootstrap资源。 步骤如下： 1、在pom文件中加入以下依赖： <dependency> <groupId>org.web...
springboot+bootstraptable
头皮发麻
03-12 753
springboot+bootstraptable 项目采用的是springboot+bootstraptable搭建的demo 基础的增删改查已经实现 html页面 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <meta name="viewport" content="width=device-width"/> <titl
springboot整合mybatis+关联映射
12-23
在Spring Boot中，可以使用MyBatis框架来实现与关系数据库的关联...以上示例演示了如何在Spring Boot中整合MyBatis，并实现了关联映射。你可以根据自己的需求，编写更多的Mapper接口和SQL语句来实现其他数据库操作。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值