即时聊天室开发0.02版：前端注册登录的代码编写

今天继续接着讲解即时聊天室的0.0.2版，想了解上一篇文章的朋友们可查看《即时聊天室开发0.02版：心跳功能+注册登录设计》。该文章系列旨在剖析我在学习的过程中顺带开发的即时聊天室的心路历程，同时通过分享让大家也能共同成长。

作者：负重前进的篮球

在开始版本讲解之前，我想说些更为重要的话。

我记得以前在学校读书，学习到的都是一些基础知识，跟实际工作中用到的知识还存在很大一段距离，也就是在学校学到的技能跟工作中所需要的技能脱节。学校重点传授的是基础知识，没有问题，学生想学点有用的技能，也没有问题。那么问题在哪里呢？为什么会存在脱节呢？

对一样的东西的接触，我们有可能经历“为什么，是什么，怎么做”的一个过程。而学校重点就在于讲“是什么”这一点，不断地提升我们的认知。大千世界的事物有很多，要认知基本上一辈子都不够用。

另外还有在培训机构学习，这个重点在于讲“怎么做”。做一样事可能会有很多种方法，你在培训机构学了一种工作所需要的方法，实际上还远远不够用。

在文章中我将会以“为什么”为重点，尽可能地告诉大家关于某件事情的原因，提供给大家对事情做出选择，选择做法很重要，选择大于努力。不过我也会传递一些东西的认知以及展示我实现即时聊天室的一种方法，只不过可能给大家增加的认知不会很详细，而且我也不清楚大家的学识水平，这需要大家另外根据自身的情况补充自我的知识体系。

回归正题，基于上一个简短的规划，我需要讲解下前端的注册登录的代码编写。

首先修改一下发送聊天内容的方法，增加登录状态的判断，代码如下：

send(){

let u_token = uni.getStorageSync('u_token');

if (u_token != '') {

let key = uni.getStorageSync('extraLine');

key = key + this.send_data + 'n';

this.title = key;

uni.setStorageSync('extraLine', key);

this.sendSocketMessage(this.send_data);

} else {

this.inputDialogToggle();

}


}

如果处于登录状态，那么按照之前发送聊天的步骤进行即可。如果处于未登录状态，那么将调用inputDialogToggle方法，该方法如下

inputDialogToggle() {

this.$refs.inputDialog.open();

}

这个方法的作用是打开注册登录对话框弹窗。

既然做了登录状态的判断，下一步就可以放开手去摆下登录对话框所需要的元素。我上张效果图

摆放这些元素代码如下：

<view>

<uni-popup ref="inputDialog" type="dialog">

<uni-popup-dialog ref="inputClose" title="注册登录"

confirmText="登录" @confirm="dialogInputConfirm">

<view>

<view class="account">

<text>账号：</text>

<input class="uni-input" focus placeholder="请输入账号" @input="account_input_data" />

</view>

<br>

<view class="password">

<text>密码：</text>

<input class="uni-input" focus placeholder="请输入密码" @input="password_input_data" />

</view>

</view>

</uni-popup-dialog>

</uni-popup>

</view>

然后我们来看看，点击了登录按钮后要做的事情，代码如下：

dialogInputConfirm(val) {

this.$refs.inputDialog.close();

uni.request({

url: 'http://192.168.0.110:9501/login/login',

data: {

account: this.account_data,

pwd: this.password_data,

//#ifdef H5

client: 1,

//#endif

//#ifdef APP-PLUS

client: 2,

//#endif

//#ifdef MP-WEIXIN

client: 3,

//#endif

},

method: "POST",

header: {

'content-type': '
application/x-www-form-urlencoded' //自定义请求头信息

},

success: (res) => {

console.log(res.data);

// this.text = 'request success';


uni.setStorageSync('u_token', res.data.data.token);

}

});

},

在dialogInputConfirm方法里面，我实现了前端登录所要做的事情。

1.关闭注册登录对话框弹窗

this.$refs.inputDialog.close();

2.向后端已写好的注册登录接口发送账号，密码，客户端渠道

uni.request({

url: 'http://192.168.0.110:9501/login/login',

data: {

account: this.account_data,

pwd: this.password_data,

//#ifdef H5

client: 1,

//#endif

//#ifdef APP-PLUS

client: 2,

//#endif

//#ifdef MP-WEIXIN

client: 3,

//#endif

},

method: "POST",

header: {

'content-type': '
application/x-www-form-urlencoded' //自定义请求头信息

},

success: (res) => {

uni.setStorageSync('u_token', res.data.data.token);

}

});

3.后端登录接口返回数据后前端做了存储登录状态的处理

success: (res) => {

uni.setStorageSync('u_token', res.data.data.token);

}

关于前端代码的讲解就到此为止。另外在做的过程中，我发现了之前实现完心跳后的一个bug，就是忘记对心跳所发送的信息进行判断忽略处理。

另外在做注册登录功能的过程中，为了便于前端进行接口测试，后端那边做了跨域允许处理，代码如下：

// 实现 onRequest 事件

EasySwooleComponentDi::getInstance()->set(EasySwooleEasySwooleSysConst::HTTP_GLOBAL_ON_REQUEST, function (EasySwooleHttpRequest $request, EasySwooleHttpResponse $response): bool {

###### 处理请求的跨域问题 ######

$response->withHeader('Access-Control-Allow-Origin', '*');

$response->withHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

$response->withHeader('Access-Control-Allow-Credentials', 'true');

$response->withHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');

if ($request->getMethod() === 'OPTIONS') {

$response->withStatus(EasySwooleHttpMessageStatus::CODE_OK);

return false;

}

return true;

});

最后，再展望一下下个版本要设计的内容，下个版本打算将聊天内容对应的账号也显示出来，便于识别聊天内容所属的账号，这样在用户间能够更好地看到聊天内容归属者，而不至于全部都是匿名内容，分不清是谁说的话。