express 从0-1如何创建一个项目 (注册登录接口)

内容参考:
windos下安装mysql
express 使用mysql
express 使用JWT认证

一、创建一个空项目

在这里插入图片描述

二、创建一个包管理工具

npm init -y

在这里插入图片描述

三、安装需要的插件及app.js的部分实现

npm i express   安装express 框架
npm i cors   安装cors 用于跨域
npm install mysql2 安装mysql数据库
npm i bcryptjs 用于加密密码 。加密之后的密码,无法被逆向破解。同一明文密码多次加密,得到的加密结果各不相同,保证了安全性
npm i  @escook/express-joi 自动对表单数据进行验证
npm install joi  用于表单数据验证 解决if else 效率低下问题

创建app.js 及其代码

在这里插入图片描述

// 引入 express 框架
const express = require("express");
const cors = require("cors");
const app = express();

// 将cors 注册成全局中间件 用于跨域
app.use(cors());

// 没有配置json 返回的时undefined   没有配置urlencoded 返回的时{}
// 配置解析application/x-www-form-urlencoded(表单数据)的中间件 
app.use(express.urlencoded({
   
    extends: false }));

// 配置json数据的中间件
app.use(express.json());

const port = 3000;

app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(`Example app listening on port ${
     
     port}!`));

四、创建路由模块

1、创建文件夹,及对应的文件

1.在项目根目录中,新建 router 文件夹,用来存放所有的 路由 模块
路由模块中,只存放客户端的请求与处理函数之间的映射关系
2.在项目根目录中,新建 router_handler 文件夹,用来存放所有的 路由处理函数模块
路由处理函数模块中,专门负责存放每个路由对应的处理函数
3.在项目根目录中,新建 db文件夹,用于链接数据库
4.在项目根目录中,新建 schema文件夹,用于校验表单数据
5.在项目根目录中,新建 config.js文件,用于存放jwt 配置

在这里插入图片描述

2、连接数据库 db/index.js

const mysql = require("mysql2");

// 2、建立与mysql 数据库的链接
const db = mysql.createPool({
   
   
  host: "127.0.0.1", // 数据库的ip地址
  user: "root", // 登录数据库的账号
  password: "", // 登录数据库的密码
  database: "my_db_01", //指定要操作的数据库
});

module.exports = db;

3、 创建一个用户表

在这里插入图片描述

4、初始化用户模块 router_handler模块在后续 router/user.js

const {
   
    Router } = require("express");

const router = Router();

// 导入user模块路由的处理函数
const userHandle = require("../router_handler/user");

// 注册新用户
router.post("/reguser", userHandle.regUser);
// 登录
router.post("/login", userHandle.login);

module.exports = router;


5、把router模块引入app.js

// 导入用户模块
const userRouter = require("./rooter/user");
// /api请求前缀  user模块中的所有请求都要在前面加上/api
app.use("/api", userRouter);

4、抽离用户模块中的处理函数

目的:为了保证 路由模块 的纯粹性,所有的 路由处理函数 ,必须抽离到对应的 路由处理函数模块 中

1.在 /router_handler/user.js 中,使用 exports 对象,分别向外共享如下两个 路由处理函数

exports.regUser = 
<think>好的,用户想写一个注册登录界面的前后端代码,但不知道该怎么开始。首先,我需要确定用户的技术背景,可能是一个刚入门的开发者,对前后端分离架构不太熟悉。接下来,我应该分步骤解释整个流程,从技术选型到具体实现,确保每个部分都清晰易懂。 首先,技术选型方面,用户可能需要知道前端和后端有哪些常用的框架和库。前端通常用React、Vue或Angular,后端可能选Node.js、Python(Django/Flask)或者Java(Spring Boot)。数据库方面,关系型数据库如MySQL或PostgreSQL,或者NoSQL如MongoDB。这里需要简单说明每个选项的特点,帮助用户做出选择。 然后,项目结构部分,应该指导用户如何组织前后端代码,比如分成前端和后端两个目录,并说明每个部分的基本结构。比如前端可能有public、src目录,后端有controllers、models、routes等。 接下来是详细步骤。注册登录功能分为注册登录两个部分。对于前端,需要创建表单组件,处理用户输入,并通过HTTP请求与后端交互。这里可能需要示例代码,比如使用React的useState钩子管理状态,axios发送POST请求。需要注意的是,用户可能对异步请求和状态处理不太熟悉,所以代码示例要尽量简单明了。 后端部分需要处理路由、数据验证、数据库操作和生成Token。比如使用Express.js创建POST路由,用Joi进行数据验证,使用bcrypt加密密码,JWT生成Token。这里要确保代码结构清晰,中间件的使用也要解释清楚,比如body-parser和cors的作用。 数据库设计方面,用户表需要包含哪些字段,比如用户名、邮箱、密码(加密存储)、创建时间等。可能需要给出SQL或Mongoose的模式定义,帮助用户建立数据模型。 安全性是用户可能忽略的部分,需要提醒他们使用HTTPS、密码哈希存储、防止SQL注入、设置Token过期时间等。此外,前后端联调可能会遇到跨域问题,需要配置CORS,使用Postman测试接口。 最后,部署和优化步骤,建议用户使用Nginx反向代理,PM2管理Node进程,以及进行性能优化。可能还需要推荐扩展功能,如邮箱验证、密码重置、第三方登录等,帮助用户进一步开发。 整个过程中,需要确保语言简洁,步骤明确,代码示例正确无误,并且符合用户的技术水平。同时,要预判用户可能遇到的问题,比如环境搭建、依赖安装、错误处理等,提供相应的解决建议或资源链接。</think>我为您梳理开发注册登录功能的完整流程,分步骤说明如下: 一、技术选型建议 1. 前端框架(三选一): - React + Axios(推荐组合) - Vue.js - Angular 2. 后端框架(三选一): - Node.js + Express(适合JS全栈) - Python + Flask/Django - Java + Spring Boot 3. 数据库(二选一): - MySQL/PostgreSQL(关系型) - MongoDB(文档型) 二、项目结构规划 ``` project-root/ ├── frontend/ # 前端代码 │ ├── public/ │ └── src/ │ ├── components/ │ ├── pages/ │ └── App.js └── backend/ # 后端代码 ├── controllers/ ├── models/ ├── routes/ └── server.js ``` 三、功能实现步骤 【前端部分】 1. 注册组件示例(React): ```javascript function Register() { const [formData, setFormData] = useState({ username: '', email: '', password: '' }); const handleSubmit = async (e) => { e.preventDefault(); try { const res = await axios.post('/api/register', formData); console.log(res.data); } catch (err) { console.error(err.response.data); } }; return ( <form onSubmit={handleSubmit}> <input type="text" name="username" onChange={e => setFormData({...formData, username: e.target.value})}/> {/* 其他输入框类似 */} <button type="submit">注册</button> </form> ); } ``` 【后端部分】 1. 安装必要依赖: ```bash npm install express mongoose bcryptjs jsonwebtoken cors body-parser ``` 2. 用户模型(Mongoose示例): ```javascript const userSchema = new mongoose.Schema({ username: { type: String, unique: true }, email: { type: String, unique: true }, password: String, createdAt: { type: Date, default: Date.now } }); ``` 3. 注册接口实现: ```javascript app.post('/api/register', async (req, res) => { try { // 数据验证 const { error } = validateUser(req.body); if (error) return res.status(400).send(error.details[0].message); // 检查用户是否存在 let user = await User.findOne({ email: req.body.email }); if (user) return res.status(400).send('用户已存在'); // 密码加密 const salt = await bcrypt.genSalt(10); const hashedPassword = await bcrypt.hash(req.body.password, salt); // 创建用户 user = new User({ username: req.body.username, email: req.body.email, password: hashedPassword }); await user.save(); res.send({ success: true }); } catch (err) { res.status(500).send('服务器错误'); } }); ``` 四、数据库设计 ```sql -- MySQL用户表示例 CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, password_hash CHAR(60) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` 五、安全注意事项 1. 密码必须使用bcrypt等算法哈希存储 2. 使用HTTPS加密通信 3. 防止SQL注入(使用ORM/预处理语句) 4. 实现JWT令牌过期机制(建议1小时) 5. 设置CORS白名单 六、联调测试建议 1. 使用Postman测试API接口 2. 前端配置代理(解决跨域问题) 3. 测试用例需覆盖: - 重复注册检测 - 密码强度验证 - 异常输入处理 七、部署建议 1. 前端使用Nginx部署 2. 后端使用PM2守护进程 3. 数据库启用定期备份 4. 配置防火墙规则 扩展功能建议: 1. 邮箱验证 2. 密码重置 3. 第三方登录(微信/Google) 4. 验证码机制 5. 登录日志记录 开发过程中遇到具体问题时,可进一步询问实现细节。建议从最小可用版本开始,逐步迭代完善功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值