1、建立一个view(F:\thinkjs\2hwl\view\home\user_login.html)供登录。(关于为什么目录及文件结构如此,引用官方说明:视图文件默认的命名规则为 模块/控制器_操作.html。
假如 URL home/article/detail 解析后的模块是 home,控制器是 article,操作是 detail,那么对应的视图文件为 home/article_detail.html。),因此我们的路径为home\user_login.html 内容如下:
<h4>Please login</h4>
<div class="row">
<div class="col-md-2">
<form action="/user/login" method="POST">
<div class="form-group">
<input class="form-control" type="text" name="username" placeholder="user name"/>
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" placeholder="password"/>
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
</div>
</div>
2、修改F:\thinkjs\2hwl\src\home\controller\user.js 内容如下:让view显示。
'use strict';
import Base from './base.js';
export default class extends Base {
/**
* index action
* @return {Promise} []
*/
async indexAction(){
//auto render template file user_index.html
return this.display();
}
async loginAction(){
return this.display();
}
}
3、运行下看看http://127.0.0.1:8360/user/login.html 效果如下:
4、显示出来了,我们现在去实现它的登录。
打开F:\thinkjs\2hwl\src\home\controller\user.js修改内容如下:每条代码作用看代码注释。
'use strict';
import Base from './base.js';
export default class extends Base {
/**
* index action
* @return {Promise} []
*/
async indexAction(){
//auto render template file user_index.html
return this.display();
}
async loginAction(){
if (this.isPost()){//判断是否发送信息给后台了,post数据过来.注意:isPost中的P是大写,js是对大小写敏感的。
let username = this.post('username');//获取用户名给username变量
let password = this.post('password');
let data = await this.model('user').where({username:username,password:password}).find();//到数据库中去查找看是否有数据(用户名密码同时相符)
if (think.isEmpty(data)){//这里我直接用isEmpty居然不能用。查了下资料需要用think.isEmpty()
return this.error(403,'账号密码错误!请重新填写');//登录不成功,返回错误信息。
}else{
this.session('userinfo',data);
return this.redirect('index');//登录成功将用户信息写入session,返回到user首页。
}
}
return this.display();
}
}
好了。到这里我们就实现的使用账号密码登录的功能。这里没有采用md5对密码加密,如果需要只要直接md5(password)就好了。
下章接着对 登录后如何注销 ,其他页面的控制器要如何判断是否登录 进行纪录。