返回
初学者也能快速上手的大事件项目详细讲解【超详细】
前端
2022-11-20 15:57:04
大型事件项目开发指南：分步打造登录注册系统
前言
在软件开发中，大型事件项目的构建是一个常见的挑战，涉及多位开发人员和复杂的管理需求。本文将提供一份分步指南，带你搭建一个完整的登录注册系统，并涵盖以下关键功能：
- 统一请求头设置： 通过
ajaxPrefilter控制用户访问权限 - 用户管理： 获取用户信息、基本资料、重置密码和更换头像
工具和环境准备
在开始之前，你需要准备好以下工具和环境：
- Git 版本控制系统
- Live Server 插件
- layui 框架（用于前端界面构建）
- Node.js 和 npm（用于后端开发）
- Express.js 框架（用于构建后端 API）
- MySQL 数据库（用于数据存储）
项目结构
项目的目录结构如下：
├── node_modules
├── public
| ├── css
| | ├── layui.css
| | ├── main.css
| ├── fonts
| | ├── iconfont.woff
| | ├── iconfont.ttf
| ├── images
| | ├── avatar.png
| | ├── logo.png
| ├── js
| | ├── app.js
| | ├── layui.js
| ├── index.html
| ├── login.html
| ├── register.html
├── routes
| ├── home.js
| ├── profile.js
| ├── user.js
├── views
| ├── home.html
| ├── profile.html
| ├── user.html
代码实现
1. 登录注册页面
首先，我们需要创建登录和注册页面。这些页面使用 layui 框架构建。
登录页面
<!-- 登录页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/public/css/layui.css">
<link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<div class="layui-container">
<form class="layui-form" lay-filter="login">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">登录</button>
</div>
</div>
</form>
</div>
<script src="/public/js/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(submit)', function(data){
$.ajax({
url: '/api/login',
method: 'POST',
data: data.field,
success: function(res){
if(res.code === 0){
window.location.href = '/home';
}else{
layer.msg(res.msg);
}
},
error: function(){
layer.msg('网络错误');
}
});
return false;
});
});
</script>
</body>
</html>
注册页面
<!-- 注册页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/public/css/layui.css">
<link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<div class="layui-container">
<form class="layui-form" lay-filter="register">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="repassword" lay-verify="required" placeholder="请输入确认密码">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">注册</button>
</div>
</div>
</form>
</div>
<script src="/public/js/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(submit)', function(data){
$.ajax({
url: '/api/register',
method: 'POST',
data: data.field,
success: function(res){
if(res.code === 0){
window.location.href = '/login';
}else{
layer.msg(res.msg);
}
},
error: function(){
layer.msg('网络错误');
}
});
return false;
});
});
</script>
</body>
</html>
2. 后台主页
接下来，我们需要创建一个后台主页。这个页面也使用 layui 框架构建。
<!-- 后台主页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/public/css/layui.css">
<link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item">
<a href="/home">首页</a>
</li>
<li class="layui-nav-item">
<a href="/profile">个人资料</a>
</li>
<li class="layui-nav-item">
<a href="/user">用户管理</a>
</li>
<li class="layui-nav-item">
<a href="/logout">退出</a>
</li>
</ul>
</div>
</div>
</div>
<script src="/public/js/layui.js"></script>
<script>
layui.use(['element'], function(){
var element = layui.element;
});
</script>
</body>
</html>
3. 统一请求头设置
为了统一管理用户访问权限，我们需要使用 ajaxPrefilter 设置请求头。
// 在 main.js 中添加以下代码
$.ajaxPrefilter(function(options) {
options.headers = {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
});
4. 用户信息获取
用户登录后，需要获取其相关信息。
路由
// 在 routes/user.js 中添加以下代码
const router = require('express').Router();
const user = require('../models/user');
router.get('/info', async (req, res) => {
const { _id } = req.user;
const data = await user.findById(_id);
res.json({ code: 0, data });
});
控制器
// 在 controllers/user.js 中
