入门级node+uni-app开发即时通讯聊天室（2）基于token的安全验证应用（一）

最新推荐文章于 2024-04-21 10:41:38 发布

liuqing0.0

最新推荐文章于 2024-04-21 10:41:38 发布

阅读量740

点赞数

文章标签： mysql node.js uni-app

本文链接：https://blog.csdn.net/q1025387665a/article/details/112322744

版权

前言：这篇基于token验证进行到登录与注册。
首先介绍express，express是基于Node.js平台，快速、开放极简的web开发框架。照我目前的浅显理解来说，类似javascript与jQuery的关系，作者水平有限，这里为了避免你产生错误的认识不再赘述。感兴趣可以自己去官网地址：express

express起步

在这里插入图片描述

1.到达你存放的根目录里打开终端输入命令：npm install express --save
2.复制HelloWorld例子到你的app.js 里

当你使用终端输入node app.js 运行脚本时，它主要干了以下事：1.生成了一个路由，当你输入地址到你本机设定的端口号http://www.localhost:3000/时，服务器（运行该脚本的环境即本机）返回一个字符串‘Hello World’。2.监听了本机的这个端口的所有路由。

路由

根据url分配到指定的处理程序。（现在不理解没关系，继续往下。）

Node连接MySql数据库

在这里插入图片描述
上图是菜鸟的示例代码，就是携带信息创建连接。但为了管理和易于编写之后的代码，我们这里不选择使用原生的连接。使用ali-mysql-client工具包去连接数据库。
这个工具的网站当你遇到困难的时候可以看看示例代码
打开终端输入 cnpm install ali-mysql-client --save
或 npm install ali-mysql-client --save

到vscode 的config目录下新建一个js文件，自己命名就好了。这是官方文档的使用介绍
在这里插入图片描述
将user、password、database 改为当前用户的密码与想要进行连接的数据库的名字。配置好了之后别忘了module.exports = db;把这个db导出给其他模块进行引用。

然后使用navicat手动往user_name,user_password,user_email字段填入数据。
在这里插入图片描述
好了，这些做完下来，我们的数据库已经有了第一条数据，这里插个闲话（为什么这个ID不是从1开始自增？因为沿用了我的结构，我的当前ID值被记录到这个结构里面了，这个并不重要。）接下来我们就要试着将这条数据取出来。该怎么做呢?

获取MySql数据库数据

首先，我们应该先把这一条数据用sql语句查找出来
查找所有语句：
select * from user;
上面语句的意义是从user表中取出所有的数据
在dao目录下创建user.js 文件， dao这个目录主要存放用于与数据库发生通信的目录。我们所有的有关于对数据库的操作都应该放在这个目录下管理。
在这里插入图片描述
每一条明确的查询语句都应该在写完之后注释上参数和对数据库进行了什么操作。最好从开发的一开始就形成这种习惯，否则随着项目的不断深入你会感到烦躁。

OK，现在我们对数据库操作的方法已经写好，并且它是可以导出在其他模块进行引用的。
上面提到的路由这个时候你应该就能体会到路由的作用了，我们需要设定一个具体的地址，当客户端对该地址发起请求的时候我们可以返回相应的一个操作，或者是返回一个静态资源，或者是返回一个动态的数据。而处理请求的方法我们都放在router目录下面进行管理。

在router目录下新建user.js 文件，代码如下
在这里插入图片描述

我们将在user.js 里将app传过来，对相应的路由进行控制，同时表明该请求方法是get 方法，等待数据查询出来后返回数据给客户端。

在主启动脚本将这个配置好的路由引入
在这里插入图片描述
OK，node app.js 把他执行，我们可以成功的查找到数据了。

uni-app前端与后台的联调

!某些简单的操作只在第一次介绍到的时候会写。

1.首先在pages目录下新建两个目录，分别是login和signup，同时他们自己的目录里分别由自己的同名的vue文件。

2.要想使页面被编译在主程序中，得在全局配置中加载这个路径。
https://uniapp.dcloud.io/collocation/pages ，学习一门新的技术得多上他的官网去查找使用。最好先别直接百度。
在这里插入图片描述

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 在pages.json进行配置，我们只要取消默认的导航栏，把登录与注册的两个页面加载进去就可以了。

UI设计在如下网站，如果想写页面就尝试下把。
http://www.huohuo90.com/yikes#artboard11

当然，登录注册，我建议你直接复制。你不必花费时间在这些细微末节上。

<template>
	<!-- 登录控制 -->
	<view class="login-container">
		<!-- 头部导航栏 -->
		<view class="login-top-bar">
			<view class="left">
				<image src="../../common/images/close.png" class="autoImg" mode=""></image>
			</view>
			<view class="right">
				<text class="signup" @click="toSignUp()">注册</text>
			</view>
		</view>
		<!-- logo -->
		<view class="logo">
			<image src="../../common/images/fire.png" class="autoImg" mode=""></image>
		</view>
		<!-- 登陆容器 -->
		<view class="login-border-container">
			<text class="loginText">登录</text>
			<text class="welcome">您好，欢迎来到yike!</text>
			<view class="username-container">
				<input class="usernameText" placeholder="用户名/邮箱" type="text" value="qing" v-model="username" />
			</view>
			<view class="password-container">
				<input class="passwordText" placeholder="密码" type="text" password="true" value="123" v-model="password" />
			</view>
		</view>
		<view class="login-button">
			<button type="submit" class="login" @click="login"><text>登录</text></button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				username: '',
				password: ''
			}
		},
		methods:{
			
		},
		onLoad: function(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.autoImg{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.login-container{
		.login-top-bar{
			display: flex;
			height: 88rpx;
			justify-content: space-between;
			width: 100%;
			padding: 0 56rpx 0 60rpx;
			box-sizing: border-box;
			.left{
				padding: 26rpx 0 22rpx 0;
				height: 40rpx;
				width: 40rpx;
			}
			.right{
				padding: 20rpx 0 18rpx 0;
				.signup{
					height: 50rpx;
					line-height: 50rpx;
					font-size: 36rpx;
					color: #333333;
					font-family: PingFangSC-Medium;
					font-weight: bold;
				}
			}
		}
		.logo{
			padding: 80rpx 0 54.4rpx 0;
			width: 192rpx;
			height: 91.6rpx;
			margin: 0 auto;
		}
		.login-border-container{
			display: flex;
			flex-direction: column;
			padding-left: 62rpx;
			.loginText{
				font-size: 56rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #272832;
				font-weight: bold;
			}
			.welcome{
				padding-top: 14rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-family: PingFangSC-Regular;
				font-size: 40rpx;
				color: rgba(39,40,50,0.50);
			}
			.username-container{
				margin-top: 72rpx;
				height: 64rpx;
				font-size: 32rpx;
				color: #272832;
				border-bottom: 1px solid rgba(39,40,50,0.08);
				.usernameText{
					height: 50rpx;
					background: none;
					border-radius: 10rpx;
					line-height: 50rpx;
				}
			}
			.password-container{
				padding-top: 72rpx;
				font-size: 32rpx;
				height: 64rpx;
				border-bottom: 1px solid rgba(39,40,50,0.08);
				.passwordText{
					height: 50rpx;
					border-radius: 10rpx;
				}
			}
		}
		.login-button{
			padding: 120rpx 116rpx 0 114rpx;
			box-sizing: border-box;
			.login{
				height: 96rpx;
				background-color: $uni-color-common;
				border-radius: 48rpx;
				box-shadow: 0 25px 16px -18px rgba(255,228,49,0.40);
				margin: 0 auto;
				
				text{
					line-height: 96rpx;
					font-size: 32rpx;
					color: #273822;
					font-family: PingFangSC-Medium;
					font-weight: bold;
				}
			}
			
		}
	}
</style>

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，export default{}的写法是注册一个Vue实例，data是该实例的数据，为什么它是一个方法？我们希望每个组件的数据都是互相隔离的，你重复得调用同一个组件，它只会给你返回一个当前组件的数据。methods对象保存了当前Vue实例的方法，onload 属于 uni-app的生命周期，表示监听页面加载，其参数为上个页面传递的数据，参数类型为Object
如果你第一次看见 style lang=‘scss’ scoped 感到陌生，我简述一下：表明当前样式使用的语言是scss， scoped 表示当前所有的样式只在这个模板组件中生效。这里我没过多的使用预编译的变量，这里不得不提句后话，之后的用户详情页面你会感觉到scss这种语言比原生css的强大之处。
链接：https://pan.baidu.com/s/1BhsXKj7Oxa3mcaLIPMRijg
提取码：qing
复制这段内容后打开百度网盘手机App，操作更方便哦

当你的login组件中已经存在上图的代码，同时下载好了images文件夹，将这个文件夹放到common下覆盖原本的images文件夹。methods对象如下：

在这里插入图片描述
使用uni-app原生的http请求API，进行请求，如果你没有ajax的使用经历看不懂如上代码建议先去学习再进行之后的教程，免得花费了时间一无所获。

我们可以开始尝试在前端使用后端的接口了。

这个时候直接点击登录按钮，触发http请求，看他是否能如我们所愿返回数据，前端无任何异常，后端却报了这样一个错误。
在这里插入图片描述
别慌，我们观察以下他的error，英语不好的同学直接截取翻译把。报错信息是：连接 127.0.0.1:3306 被拒绝？3306是mysql服务的默认开启端口，如果你没对mysql进行多余的配置，检查mysql服务是否开启了。

win10 用户 win+R 打开运行程序
在这里插入图片描述

这里检查到我们的mysql 不是默认开启的，（我也不知道为什么我设置了自动开启，他时不时就给我修改回手动了），将他启动，同时修改启动类型变为自动，应用 ===》确定，当然，当你熟悉之后你见到这种情况也可以直接 net start mysql 开启服务。

好，回到服务器，ctrl+C 取消，重新运行服务器。再次点击前端页面的登录按钮。后端并未产生任何的错误，而前端报错了。
在这里插入图片描述
即使别的英文不太懂，看到CORS的关键字应该能意识到是js的同源策略阻止了我们的请求。如何解决？使用JSONP？不，我们只需在后端允许跨域就行。不要过于纠结这其中的道理，我们只要知道这样做可以解决跨域就行了。主要作用的是Allow-Origin这个字段生效了，允许所有的域名跨域访问。


app.use((req, res, next) => {
    res.set({
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Max-Age': 1728000,
        'Access-Control-Allow-Origin':  '*',
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Request-Headers': ' Origin, X-Requested-With, content-Type, Accept',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
        'Content-Type': 'application/json; charset=utf-8'
    })
    req.method === 'OPTIONS' ? res.status(204).end() : next()
})

重启服务器，再次点击登录，我们可以如愿的在前端拿到数据了。
在这里插入图片描述
允许跨域之后，显然这种方法是不太好的，假如你的url被得知了，那么是不是网站的用户都可以直接通过url直接获取你的数据显然不太合理，这个时候顺利成章的引入一个通过token的解决方案。同时明文的密码看起来也太不安全了。别着急，我们一步一步来。首先先完成注册吧。为什么？因为我们希望在用户注册的时候对用户的密码进行加密再存进数据库，当用户登录的时候通过解密比对再返回结果。所以加密是必须先于解密的，这也是我为什么先从注册开始整起的原因。

liuqing0.0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
入门级node+uni-app开发即时通讯聊天室（2）基于token的安全验证应用（一）

前言：这篇基于token验证进行到登录与注册。首先介绍express，express是基于Node.js平台，快速、开放极简的web开发框架。照我目前的浅显理解来说，类似javascript与jQuery的关系，作者水平有限，这里为了避免你产生错误的认识不再赘述。感兴趣可以自己去官网地址：expressexpress起步1.到达你存放的根目录里打开终端输入命令：npm install express --save2.复制HelloWorld例子到你的app.js 里当你使用.
复制链接

扫一扫