BackgroundLogin - juedaiyuer/researchNote GitHub Wiki

#后台登录#

##生成Admin模块##

#入口文件定义
define('APP_PATH','./Application/');
#绑定入口文件到Admin模块访问
define('BIND_MODULE','Admin');
require './ThinkPHP/ThinkPHP.php';

绑定后,注释掉bind_module代码行

##登录模块##

###视图层###

// View/Login/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="">

  <title>singcms内容管理平台</title>

  <!-- Bootstrap core CSS -->
  <link href="/Public/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="signin.css" rel="stylesheet">



  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>

  <![endif]-->
</head>

<body>
<style>
  .s_center {
	margin-left: auto;
	margin-right: auto;
  }
</style>
<div class="s_center container col-lg-6 ">

	<form class="form-signin" enctype="multipart/form-data"  method="post">
	  <h2 class="form-signin-heading">请登录</h2>
	  <label class="sr-only">用户名</label>
	  <input type="text"  class="form-control" name="username" placeholder="请填写用户名" required autofocus>
	  <br />
	  <label  class="sr-only">密码</label>
	  <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
	  <br />
	  <button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
	</form>

</div> <!-- /container -->
<script src="/Public/js/jquery.js"></script>
<script src="/Public/js/dialog/layer.js"></script>
<script src="/Public/js/dialog.js"></script>
<script src="/Public/js/admin/login.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>

##控制层##

//Admin/Controller/LoginController.class.php
<?php
namespace Admin\Controller;
use Think\Controller;

/**
 * use Common\Model 这块可以不需要使用，框架默认会加载里面的内容
 */
class LoginController extends Controller {

	public function index(){

		return $this->display();
	}

}

//访问URL
...index.php?m=admin&c=login

##同步方式登录##

//form表单
//增加action
<form class="form-signin" enctype="multipart/form-data"  method="post" action="/index.php?m=admin&c=login&a=check">

//Admin/Controller/LoginController.class.php
//仅作为实验目的
public function check(){
    echo "check_success";
}

//登录界面提交后,跳转到下面的界面
//用户体验不是很好
index.php?m=admin&c=login&a=check

##异步方式登录##

弹出层 ---> dialog.js

第三方插件：Layer

所在目录：Public/js/dialog

###封装类dialog.js###

适用于本系统

###异步方式实现登录功能###

利用jquery框架里面的异步方式处理

编写login.js文件，该文件核心是需要使用异步方式请求登录接口

Public/js/admin 后台公用的

// Public/js/admin/login.js 前端登录业务类
var login = {
	check : function () {
	    alert(1);
	}
}

//登录视图层
// View/Login/index.html
// 需要引入前端业务类 Public/js/admin/login.js
<!-- 引入前端业务类 Public/js/admin/login.js -->
<script src="/Public/js/admin/login.js"></script>

<!-- 登录按钮，触发事件 -->
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()" >登录</button>

##所需插件##

Layer 一个让你想到即可做到的web弹窗/层解决方案

##source##

imooc 后台登录功能
jquery api

BackgroundLogin - juedaiyuer/researchNote GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️