基于react+nodejs+mysql开发用户中心，用于项管理加入的项目的用户认证

已于 2023-02-22 17:30:02 修改
阅读量539 收藏 7
点赞数
分类专栏： JavaScript nodejs react 文章标签： mysql react.js node.js 前端 javascript
于 2023-02-22 17:27:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ta_huang/article/details/129166833
版权
JavaScript 同时被 3 个专栏收录
45 篇文章 1 订阅
订阅专栏
nodejs
9 篇文章 0 订阅
订阅专栏
react
1 篇文章 0 订阅
订阅专栏

基于react+nodejs+mysql开发用户中心，用于项管理加入的项目的用户认证

用户中心功能介绍

用户中心项目，用于统一管理用户信息、登录、注册、鉴权等

功能如下：

  1. 用户创建项目后可以查看自己创建的项目
  2. 可以查看被加入的项目（被加入的项目又可以划分为管理员身份和普通身份去筛选查看，自己的项目和拥有管理员以上权限的项目可以进行授权管理
  3. 被授权的用户可以登录对应的项目系统，并返回相应的用户信息
  4. 用户中心管理员可以对用户中心的用户进行管理，比如禁止登录，删除和修改用户信息等
  5. 提供统一的登录界面，供需要的项目引用
  6. 提供统一的用户认证接口，在自定义的登录页面登录时调用即可

安全性：

  1. 登录注册：用户信息采用sha1加密，然后再用时间戳进行crypto-js加密
  2. 后端接口采用token鉴权

页面截图

  1. 我的应用
    在这里插入图片描述

  2. 我管理的应用
    在这里插入图片描述
    在这里插入图片描述

  3. 我参与的应用

  4. 用户管理
    在这里插入图片描述

后端采用架构

技术栈：nodejs + express作为后端架构 + mysql数据库

目录结构：
在这里插入图片描述

  1. public – 提供外部访问的文件
  2. server/common – 全局通用变量和方法，请求处理封装
  3. server/config – 接口路径配置、日志配置、白名单配置等配置信息
  4. server/mysql – myql访问配置
  5. server/request – 接口文件
  6. server/ssl – 证书
  7. server.js – 服务器配置信息
user表

在这里插入图片描述

projects表

在这里插入图片描述

project_user表

在这里插入图片描述

仓库地址

  1. 前端代码仓库：https://gitee.com/huang_zhan_le/user-center.git

  2. 后台代码仓库：https://gitee.com/huang_zhan_le/user-center-server.git

  3. 统一登录SDK仓库： https://gitee.com/huang_zhan_le/certification-ad.git

zhanle_huang
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 连接mysql_react 打造页面可视化搭建 3 - mysql 与 sequelize 篇 持续更新
weixin_35823536的博客
01-30 356
mysql 与 sequelize 数据类型 对应关系// todo事务(Transaction)与 锁(Lock)基础事务是数据库执行过程中的一个逻辑单位，由一系列有限的数据库操作序列构成。被事务包裹起来的这些操作会有共同的执行结果，要么全部成功，要么失败，全部回滚。事务具有4哥特性：原子性(Atomicity，或称不可分割性)、一致性(Consistency)、隔离性(Isolation，又称...
ReactDemo:React + NodeJs + Mysql-任务管理系统演示
03-15
ReactDemo项目是一个基于React、Node.js和MySQL技术栈的任务管理系统演示。这个系统展示了如何将前端的React库与后端的Node.js服务器以及MySQL数据库结合，实现一个完整的Web应用。接下来，我们将深入探讨该项目中...
用React+Express.js+Mysql做一个全栈demo（CRUD）
qq_54074936的博客
04-06 842
利用react+express+mysql搭建一个全栈demo
react+node.js+mysql 前后端分离项目 宝塔面板 部署到腾讯云服务器
weixin_43026567的博客
12-01 2976
安装完推荐界面的软件后，软件商店里搜索PM2下载安装，安装完成后打开PM2，切换node版本，并安装后端项目所需依赖（这里node项目用的express）。上传完成后，添加站点，根目录选打包后的前端文件夹（这里是dist），域名这里，域名备案没审核完或没备案，填服务器的ip地址也可以。端口这里，要同时在宝塔和腾讯云两个地方放行（建议把用到的所有端口在这两个地方同时添加了，包括前端、后端、mysql）。开头的请求，直接代理到本地服务器的8088端口（也就是后端接口地址的端口）nginx反向代理，
React+eggjs+mysql实现多文件上传
吴小迪的博客
01-30 759
前端上传图片调接口，发现有成功的返回，并且我们后端接口抛回来的ids和uploadDirs都能收到就代表我们OK了，然后我们用返回回来的uploadDirs跟服务器的IP地址拼接一下能出来对应的图片，那就相当于完全OK了!因为我们在上一步的controller里面是把数据的操作放到了service里面进行处理的，所以我们在创建一下service文件然后写存数据库的sql。笔者用的是antd的Upload组件，然后用提供的api：customRequest 调用接口写后续的逻辑。
统一用户认证中心
热门推荐
hot_summery的专栏
06-22 2万+
在项目开发中，遇到了以下问题：项目中，面向的用户有PC操作员、手机用户等，不同的用户登陆逻辑所在微服务，不一定是一套，甚至有可能来自不同的团队开发维护，那么导致鉴权时需要到处请求；解决思路：提出一个统一认证中心，对所有的登陆逻辑做统一处理，此服务可调用 不同的管理系统，如：操作员系统、终端用户系统、QQ开放平台竺，可复合调用组装，再将结果返回；实现架构图：说明：1. API Gateway(ora...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
在本项目实战中，我们利用一系列现代前端和后端技术，构建了一个全面的Web应用程序。...通过学习和实践此类项目，开发者可以提升在React前端开发、NodeJS后端服务、数据库管理和全栈集成等方面的能力。
基于react+javaspring+mysql的知识分享系统源码+数据库.zip
12-12
基于react+javaspring+mysql的知识分享系统源码+数据库.zip 本系统前端基于react+antd组件库实现；后台采用springMVC+mysql实现。 本系统是一个知识分享系统，可在本系统发布文章与别人分享自己的知识；可申请管理...
基于react+javaspring+mysql实现的知识分享系统
最新发布
06-18
1. **java后台文件夹**：存储的本系统的java后台项目，基于IDEA开发实现，对接mysql数据库，服务器容器为tomcat，采用maven进行项目管理； 2. **react_项目文件夹**：存储的本系统的react系统项目，本文件夹不包括...
matcha-web:using使用React Redux + NodeJS-MySQL的约会网站
05-12
抹茶 安装 ...发展 docker-compose build ; docker-compose up ...生产 docker-compose -f docker-compose.yml -f docker-compose-prod.yml up ...使用VSCode附加到Docker .../Applications/Google \ Chrome.app/Contents/MacOS/...
react-mysql:React-Express的示例-MySQL集成
05-18
React-Node / Express-MySQL演示 应用说明 基本结构 该应用程序是基本的员工绩效审查工具。 它具有以下功能： 列出所有员工 添加/删除/更新/查看员工 添加/更新/查看效果评论 这是“雇员”页面的屏幕截图： 使用的技术 在客户端做出React 服务器端的Node.js / Express MySQL数据库 安装和运行说明 该代码分为两部分： 服务器端（在server文件夹中） 客户端（在client文件夹中）应用程序需要服务器和客户端同时运行。 在开发环境中，这可以通过在单独的终端窗口中运行两者来实现。 MySQL数据库 导入以在本地计算机上安装MySQL数据库（包含在克隆/下载包中） 或者，创建一个数据库react_node及其中的以下表： 创建表admin （ id int（11）NOT NULL， name varchar（30）NOT NULL）
reactjs-nodejs-mysql-crud:使用Nodejs后端，UI的reactjs和数据库MySQL进行CRUD（创建读取更新删除）的简单方法
03-05
reactjs-nodejs-mysql-crud 使用Nodejs后端，UI的reactjs和数据库MySQL进行CRUD（创建读取更新删除）的简单方法
Node.js+Vue+MySQL 新人入门参考项目
06-27
本资源提供的是我自己项目的github地址，在线访问地址http://139.199.203.200:3333，一个Node做后台、前端用Vue、React(react只做了部分示例)，数据库采用MySQL的小项目供新人入门参考，包括vue、node的常用语法，socket即时通信,具体用法等可以到github看看README.md
podcast-player:React应用程序获取播客以供休闲； 由React前端和Node＆MySQL后端组成
04-07
播客播放器 React应用程序获取播客以供休闲； 由React前端和Node＆MySQL后端组成。
基于React+Node.js（egg.js）的智能考试分析系统
weixin_42662753的博客
07-07 571
基于React+Node.js（egg.js）的智能考试分析系统
基于NodeJs+vue+elementUi+mysql8.0的在线考试系统 毕业设计 课程设计
07-28 5866
引言 伴随着网络技术的飞速发展，现在很多国外的大学和社会其他各部门都已经开设了远程教育。通过计算机网络实现异地教育和培训。但是远程教育的软件开发还处于起步阶段，随着这项技术的不断深入。就要求有更好更完善的软件系统应用到远程教育中去。同时给软件开发人员提出更高的设计要求。 考试是教育中的一个重要环节。在我国虽然远程教育已经蓬勃发展起来。但是目前学校和社会上的各种考试大都采用传统的考试方法。在此...
基于React+Node+Ant Design+Mysql的一个后台管理系统
Limcong_1999的博客
04-11 784
这是我项目的一个Demo版本，稍加改动就可以成为一个框架去使用。 直接上链接：同校的你后台管理 里面有现成的sql文件，直接导入即可，里面的数据已经基本清空了，可以随意diy 里面有一个MysqlHelper是我自己写的一个mysql糖，当然了应用性不强只能写一些基本的增删改查。如果需要写复杂的sql语句只能使用里面的SQL方法。 后续将写出一个文档来解释这套框架的使用方法。 我只是一个...
NodeJs实战-待办列表(5)-使用MySQL存储待办事项
modelmd的博客
11-19 526
NodeJs实战-待办列表(5)-使用MySQL存储待办事项
从零到一的react.js+node.js+express.js+mysql产品开发全流程
Charles_Tian的博客
07-12 3497
序言 组长说要使自己对产品在技术层面有一个清晰且足够的了解，最好自己动手开发一个迷你产品，例如todolist，因为公司有提供员工自学使用的服务器，所以我就来试试了，而且一步一步的记录自己的学习过程，这个过程有请教问题、出现的问题、解决问题的方法和用到的技术栈等等。 以下开发步骤序号不代表产品开发绝对的顺序，是博主第一次学习走的顺序，仅供参考，建议先阅读黑色标题后再细读。 说明：博主使用的编...
通过 react + ant-d 实现一个用户管理功能
09-04
使用React和Ant Design来实现一个用户管理功能非常简单。首先，我们需要创建一个React应用程序。可以使用脚手架工具（如Create React App）来快速搭建起一个React应用的基本结构。 1. 创建React应用程序 使用以下命令来创建一个新的React应用程序： ``` npx create-react-app user-management cd user-management ``` 2. 安装Ant Design 在项目根目录下运行以下命令来安装Ant Design依赖项： ``` npm install antd ``` 3. 集成Ant Design组件 编辑src/App.js文件，导入所需的Ant Design组件并编写用户管理功能的代码。以下是一个简单的示例： ```jsx import React, { useState } from 'react'; import { Table, Button, Modal, Form, Input } from 'antd'; const App = () => { const [users, setUsers] = useState([]); const [isModalVisible, setIsModalVisible] = useState(false); const columns = [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' }, { title: '操作', key: 'action', render: (text, record) => <Button onClick={() => deleteUser(record.key)}>删除</Button> } ]; const [form] = Form.useForm(); const addUser = () => { form.validateFields().then(values => { const user = { name: values.name, age: values.age, key: users.length + 1 }; setUsers([...users, user]); form.resetFields(); setIsModalVisible(false); }); }; const deleteUser = (key) => { setUsers(users.filter(user => user.key !== key)); }; return ( <div> <Button onClick={() => setIsModalVisible(true)}>添加用户</Button> <Table dataSource={users} columns={columns} /> <Modal title="添加用户" visible={isModalVisible} onCancel={() => setIsModalVisible(false)} onOk={addUser}> <Form form={form}> <Form.Item name="name" label="姓名" rules={[{ required: true }]}> <Input /> </Form.Item> <Form.Item name="age" label="年龄" rules={[{ required: true }]}> <Input /> </Form.Item> </Form> </Modal> </div> ); }; export default App; ``` 4. 运行应用 使用以下命令来运行应用程序： ``` npm start ``` 应用程序将在浏览器中自动打开。您现在就可以通过点击“添加用户”按钮来添加用户，点击“删除”按钮来删除用户，并且可以通过Ant Design的Table组件来显示用户列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值