前端:vue3+ts,后端:koa2+jwt,实现登陆功能(后端部分上篇)

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 前端:vue3+ts,后端:koa2+jwt,实现登陆功能(后端部分上篇)

前置,搭建项目并集成log4j实现日志系统



详细的介绍了koa2的环境搭建以及log4j的日志系统

# koa2搭配log4js实现日志监控


第一步,安装插件



1. 安装koa-jwt插件


npm install koa-jwt
复制代码


用法示例:


网络异常,图片无法展示
|

我们仅需要用到这个用法就可以了, key是前端的headers.authentication的token前置 secret是解密需要的密钥,login的时候,获取的token的时候,跟解密的时候,这个secret是需要一致的,不然无法解密成功


2. 安装jsonwebtoken插件


npm install jsonwebtoken
复制代码


网络异常,图片无法展示
|


var jwt = require('jsonwebtoken');
var token = jwt.sign({ foo: 'bar' }, 'xiaohe', { expiresIn: '2d' })
复制代码


foo: 'bar'  是需要加密的键值对

'xiaohe'是密钥

expiresIn 是token的有效时间,这里设置的是两天


3. 安装mongoose数据库


npm install mongoose
复制代码


实现



1. 先连接数据库

创建一个config文件夹,里面创建db.jsindex.js

db.js用于连接数据库,并打印对应的连接成功或失败


/**
 * 数据库连接
 * @auther 何小生
 */
const mongoose = require('mongoose')  // 引入mongoose
const config = require('./index')     // 引入config配置信息
const log4js = require('../utils/log4') // 引入log4j的日志系统
// mongoose连接数据库
mongoose.connect(config.URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
const db = mongoose.connection
// 打印数据库连接成功
db.on('error', () => {
    log4js.error('*** 数据库连接失败 ***')
})
// 打印数据库连接失败
db.on('open', () => {
    log4js.info('*** 数据库连接成功 ***')
})
复制代码


config.js 用于配置数据库信息的基础文件


/**
 *  配置文件
 */
module.exports = {
    URL: 'mongodb://127.0.0.1:27017/xiaohe'
}
复制代码


网络异常,图片无法展示
|


本地安装robo3T,用于做数据库可视化工具,数据库用的是mongooseDB

网络异常,图片无法展示
|


连接数据库,并创建对应的xiaohe数据库


网络异常,图片无法展示
|


在demo里面创建xiaohe数据库


网络异常,图片无法展示
|


在xiaohe数据库的collections里面,创建user表


网络异常,图片无法展示
|


点击insert document,往user表里填充数据


网络异常,图片无法展示
|


{
    "_id" : ObjectId("6118cc7ee27588cca19a8b70"),
    "state" : 1,
    "role" : "0",
    "roleList" : [ 
        "60180b07b1eaed6c45fbebdb", 
        "60150cb764de99631b2c3cd3", 
        "60180b59b1eaed6c45fbebdc"
    ],
    "deptId" : [ 
        "60167059c9027b7d2c520a61", 
        "60167345c6a4417f2d27506f"
    ],
    "userId" : 1000002,
    "username" : "admin",
    "password" : "admin",
    "userEmail" : "admin@imooc.com",
    "createTime" : "2021-01-17T13:32:06.381Z",
    "lastLoginTime" : "2021-01-17T13:32:06.381Z",
    "__v" : 0,
    "job" : "前端架构师",
    "mobile" : "17611020000"
}
复制代码


网络异常,图片无法展示
|


至此,连接数据库和一些准备工作已经基本完成,可以准备做下一步的操作了

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
224 14
|
7天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
79 18
|
20天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
62 3
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
131 2
|
2月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
93 4
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
362 0
|
3月前
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
55 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
3月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
33 1
|
3月前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
197 0