Spring Boot：用户中心的设置头像功能_springboot设置用户默认头像

热知识

1. ftl是Freemarker模板的文件后缀名
2. Freemarker其实是一种比较简单的网页展示技术,说白了就是网页模板和数据模型的结合体
3. 当鼠标指针穿过元素时，会发生 mouseenter 事件
4. 当鼠标指针离开元素时，会发生 mouseleave 事件

原来的效果

原来的代码

js文件：

function change_photo()
{
    $("#user_photo").bind('mouseenter',function()
    {
       $("#change_photo").css(
       {
            display: "block"
       })
    });
    $("#user_photo").bind('mouseleave',function()
    {
       $("#change_photo").css(
       {
            display: "none"
        })
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ftl文件：

<div id="user_photo">
          <#if hsh_stu.headPic??>
          <img id="origin_ph" src="/photo/view?filename=${hsh_stu.headPic}" alt="大头像"> 
		  <#else>
		  <img id="origin_ph" src="/home/imgs/2shoujie_web_logo.png">
		  </#if>
          <img id="change_photo" src="/home/imgs/person_hover.png" alt="更换头像" style="display: none;">
</div>
1
2
3
4
5
6
7
8

修改后的代码

js文件：

function change_photo()
{
    $("#user_photo").bind('mouseenter',function()
    {
       $("#origin_ph").attr('src',$("#change_photo").attr('src'));
    });
    $("#user_photo").bind('mouseleave',function()
    {
       $("#origin_ph").attr('src',$("#origin_ph").attr('old-src'));
       $("#change_photo").css(
       {
            display: "none"
       })
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ftl文件：

<div id="user_photo">
          <#if hsh_stu.headPic??>
          <img id="origin_ph" src="/photo/view?filename=${hsh_stu.headPic}" old-src="/photo/view?filename=${hsh_stu.headPic}" alt="大头像"> 
		  <#else>
		  <img id="origin_ph" src="/home/imgs/2shoujie_web_logo.png" old-src="/home/imgs/2shoujie_web_logo.png">
		  </#if>
          <img id="change_photo" src="/home/imgs/person_hover.png" alt="更换头像" style="display: none;">
</div>
1
2
3
4
5
6
7
8

修改后的效果