TP5.1 使用js实现用户登录前显示默认头像，登录后显示头像及用户名

此方法建立在用户登录及注册功能已经实现以后

Controller

创建控制器接收前台传递数据，并把数据传递给模型

//Login controlller

namespace app\index\controller;
use app\index\model\Login as LoginModel;
use think\facade\Request;
 
 public function logged(){
        /*获取前端数据*/
        $data = Request::param();

        /*创建实例，把数据传送给模型*/
        $res = (new LoginModel())->logged($data);

        /*把模型返回的message传送给前端*/
        return $res;
    }

//用户登出后，将session设置为默认的null，清除用户名及用户头像
 public function log_out(){
        session(null);
        return['code'=>200,'msg'=>'successed'];
    }

Model

使用模型查询数据，创建session

//Login model
namespace app\index\model;
use think\Db;
class Login extends Common{
	public function logged($data){
		//这里的User是我另一个用来查询数据的模型
	 $res= (new User)->whereOr('username',$data['username'])->find();
		 if($res){
		 	//创建名为'user_name'的session，赋值为数据库中查询到的用户名
		 	 session('user_name',$res['username']);
		 	//查询此用户的头像名称 
		 	 $image = (new User)->where('username',$res['username'])->value('photo');
		 	 //创建image session
		 	 session('image',$image);
	 	}
	} 
}	

View

//HTML中 我定义的用户名和头像
//此处i标签会在用户登录后会自动显示用户名
<i id="user_name">{$Think.session.user_name</i>
<img src="" id="default_photo" style="width: 60px;height: 60px; border-radius:30px">

//JavaScript
//使用js记得引用
<script>
    $(document).ready(function(){
    	//调用image session
        var user_photo='{$Think.session.image}'
        var name = '{$Think.session.user_name}'
        if(user_photo!==''){
        //如果用户有头像，则选择img标签，将img的src进行更改
        var element = document.getElementById('defalut_photo')
        element.src = "static/post/{$Think.session.image}";
        //如果没有头像，则设置默认头像
        }else{
            var element = document.getElementById('default_photo')
            element.src = "static/post/default.jpeg";
        }
    });
</script>

接触php和html没多久的小白一只，虽然很简单，但是自己摸索着成功之后真的很开心，所以打算做个笔记，也希望能帮助到和我一样的新手小白吧^ _ ^