wordpress企业站手机客户端,微信店铺,免费建设网站设计页面,免费的网站推广怎么做效果好?#x1f308;个人主页#xff1a;前端青山 #x1f525;系列专栏#xff1a;node.js篇 #x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:Node.js MongoDB Vue 3 全栈应用项目开发 在前几篇文章中#xff0c;我们已经为 Node.j… 个人主页前端青山 系列专栏node.js篇 人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:Node.js MongoDB Vue 3 全栈应用项目开发 在前几篇文章中我们已经为 Node.js 应用添加了身份验证、CORS 配置、缓存机制、性能监控、限流功能和日志优化。本文将继续在这个基础上逐步构建一个完整的 Node.js MongoDB Vue 3 全栈应用。我们将从项目结构设计、前后端交互、数据模型设计等方面入手逐步实现一个功能完善的全栈应用。
目录 1. 项目概述
2. 项目结构设计
3. 数据模型设计
3.1 用户模型
3.2 任务模型
4. 后端 API 开发
4.1 用户模块
4.1.1 用户注册
4.1.2 用户登录
4.1.3 获取用户信息
4.2 项目模块
4.2.1 创建任务
4.2.2 获取任务列表
4.2.3 更新任务
4.2.4 删除任务
5. 前端 Vue 3 应用开发
5.1 项目初始化
5.2 组件开发
5.2.1 登录组件
5.2.2 注册组件
5.2.3 任务列表组件
5.3 状态管理
6. 前后端联调
6.1 路由配置
6.2 主页组件
6.3 登录和注册页面
7. 部署与测试
7.1 部署后端
7.2 部署前端
7.3 测试
8. 总结与展望
1. 项目概述
我们的目标是构建一个简单的任务管理应用用户可以注册、登录、创建和管理任务。应用的主要功能包括
用户注册和登录用户信息管理任务创建、编辑和删除任务列表展示
2. 项目结构设计
为了保持项目的清晰和可维护性我们将项目分为前后端两部分。项目结构如下
task-manager/
├── backend/
│ ├── node_modules/
│ ├── src/
│ │ ├── controllers/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── middlewares/
│ │ ├── config/
│ │ ├── app.js
│ │ ├── server.js
│ ├── .env
│ ├── package.json
│ └── README.md
├── frontend/
│ ├── node_modules/
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ ├── views/
│ │ ├── store/
│ │ ├── router/
│ │ ├── App.vue
│ │ └── main.js
│ ├── .env
│ ├── package.json
│ └── README.md
├── .gitignore
└── README.md
3. 数据模型设计
我们将使用 MongoDB 作为数据库定义两个主要的数据模型用户和任务。
3.1 用户模型
用户模型包含以下字段
username用户名email邮箱password密码加密存储createdAt创建时间updatedAt更新时间
在 backend/src/models/user.js 中定义用户模型
const mongoose require(mongoose);
const bcrypt require(bcryptjs);const UserSchema new mongoose.Schema({username: { type: String, required: true, unique: true },email: { type: String, required: true, unique: true },password: { type: String, required: true },createdAt: { type: Date, default: Date.now },updatedAt: { type: Date, default: Date.now }
});UserSchema.pre(save, async function(next) {if (!this.isModified(password)) return next();this.password await bcrypt.hash(this.password, 10);next();
});UserSchema.methods.comparePassword async function(candidatePassword) {return await bcrypt.compare(candidatePassword, this.password);
};const User mongoose.model(User, UserSchema);module.exports User;
3.2 任务模型
任务模型包含以下字段
title任务标题description任务描述status任务状态未完成、已完成userId关联用户 IDcreatedAt创建时间updatedAt更新时间
在 backend/src/models/task.js 中定义任务模型
const mongoose require(mongoose);const TaskSchema new mongoose.Schema({title: { type: String, required: true },description: { type: String, required: true },status: { type: String, enum: [未完成, 已完成], default: 未完成 },userId: { type: mongoose.Schema.Types.ObjectId, ref: User, required: true },createdAt: { type: Date, default: Date.now },updatedAt: { type: Date, default: Date.now }
});const Task mongoose.model(Task, TaskSchema);module.exports Task;
4. 后端 API 开发
4.1 用户模块
4.1.1 用户注册
在 backend/src/controllers/userController.js 中实现用户注册功能
const User require(../models/user);
const bcrypt require(bcryptjs);
const jwt require(jsonwebtoken);exports.register async (req, res) {const { username, email, password } req.body;try {let user await User.findOne({ email });if (user) {return res.status(400).json({ msg: User already exists });}user new User({ username, email, password });await user.save();const payload { user: { id: user.id } };const token jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: 1h });res.status(201).json({ token });} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.1.2 用户登录
在 backend/src/controllers/userController.js 中实现用户登录功能
exports.login async (req, res) {const { email, password } req.body;try {let user await User.findOne({ email });if (!user) {return res.status(400).json({ msg: Invalid credentials });}const isMatch await user.comparePassword(password);if (!isMatch) {return res.status(400).json({ msg: Invalid credentials });}const payload { user: { id: user.id } };const token jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: 1h });res.json({ token });} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.1.3 获取用户信息
在 backend/src/controllers/userController.js 中实现获取用户信息功能
exports.getUser async (req, res) {try {const user await User.findById(req.user.id).select(-password);if (!user) {return res.status(404).json({ msg: User not found });}res.json(user);} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.2 项目模块
4.2.1 创建任务
在 backend/src/controllers/taskController.js 中实现创建任务功能
const Task require(../models/task);exports.createTask async (req, res) {const { title, description } req.body;try {const task new Task({ title, description, userId: req.user.id });await task.save();res.status(201).json(task);} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.2.2 获取任务列表
在 backend/src/controllers/taskController.js 中实现获取任务列表功能
exports.getTasks async (req, res) {try {const tasks await Task.find({ userId: req.user.id }).sort({ createdAt: -1 });res.json(tasks);} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.2.3 更新任务
在 backend/src/controllers/taskController.js 中实现更新任务功能
exports.updateTask async (req, res) {const { title, description, status } req.body;try {let task await Task.findById(req.params.id);if (!task) {return res.status(404).json({ msg: Task not found });}if (task.userId.toString() ! req.user.id) {return res.status(401).json({ msg: Not authorized });}task.title title;task.description description;task.status status;await task.save();res.json(task);} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
4.2.4 删除任务
在 backend/src/controllers/taskController.js 中实现删除任务功能
exports.deleteTask async (req, res) {try {let task await Task.findById(req.params.id);if (!task) {return res.status(404).json({ msg: Task not found });}if (task.userId.toString() ! req.user.id) {return res.status(401).json({ msg: Not authorized });}await task.remove();res.json({ msg: Task deleted });} catch (err) {console.error(err.message);res.status(500).send(Server error);}
};
5. 前端 Vue 3 应用开发
5.1 项目初始化
首先我们需要初始化 Vue 3 项目。打开终端导航到 frontend 目录然后运行以下命令
npm init vuelatest
按照提示完成项目初始化。安装完成后进入项目目录并安装依赖
cd frontend npm install
5.2 组件开发
5.2.1 登录组件
在 frontend/src/components/Login.vue 中创建登录组件
templatediv classloginh2Login/h2form submit.preventhandleLogindiv classform-grouplabel foremailEmail/labelinput typeemail v-modelemail required //divdiv classform-grouplabel forpasswordPassword/labelinput typepassword v-modelpassword required //divbutton typesubmitLogin/button/form/div
/templatescript
import axios from axios;export default {data() {return {email: ,password: };},methods: {async handleLogin() {try {const response await axios.post(http://localhost:3000/auth/login, {email: this.email,password: this.password});localStorage.setItem(token, response.data.token);this.$router.push(/tasks);} catch (error) {alert(Login failed);}}}
};
/scriptstyle scoped
/* 添加一些样式 */
/style
5.2.2 注册组件
在 frontend/src/components/Register.vue 中创建注册组件
templatediv classregisterh2Register/h2form submit.preventhandleRegisterdiv classform-grouplabel forusernameUsername/labelinput typetext v-modelusername required //divdiv classform-grouplabel foremailEmail/labelinput typeemail v-modelemail required //divdiv classform-grouplabel forpasswordPassword/labelinput typepassword v-modelpassword required //divbutton typesubmitRegister/button/form/div
/templatescript
import axios from axios;export default {data() {return {username: ,email: ,password: };},methods: {async handleRegister() {try {await axios.post(http://localhost:3000/auth/register, {username: this.username,email: this.email,password: this.password});this.$router.push(/login);} catch (error) {alert(Registration failed);}}}
};
/scriptstyle scoped
/* 添加一些样式 */
/style 5.2.3 任务列表组件
在 frontend/src/components/TaskList.vue 中创建任务列表组件
templatediv classtask-listh2Tasks/h2ulli v-fortask in tasks :keytask._idspan{{ task.title }}/spanbutton clickdeleteTask(task._id)Delete/button/li/ulform submit.preventcreateTaskdiv classform-grouplabel fortitleTitle/labelinput typetext v-modelnewTask.title required //divdiv classform-grouplabel fordescriptionDescription/labelinput typetext v-modelnewTask.description required //divbutton typesubmitCreate Task/button/form/div
/templatescript
import axios from axios;export default {data() {return {tasks: [],newTask: {title: ,description: }};},methods: {async fetchTasks() {const response await axios.get(http://localhost:3000/tasks, {headers: { Authorization: Bearer ${localStorage.getItem(token)} }});this.tasks response.data;},async createTask() {await axios.post(http://localhost:3000/tasks, this.newTask, {headers: { Authorization: Bearer ${localStorage.getItem(token)} }});this.newTask { title: , description: };this.fetchTasks();},async deleteTask(id) {await axios.delete(http://localhost:3000/tasks/${id}, {headers: { Authorization: Bearer ${localStorage.getItem(token)} }});this.fetchTasks();}},created() {this.fetchTasks();}
};
/scriptstyle scoped
/* 添加一些样式 */
/style
5.3 状态管理
为了更好地管理应用的状态我们将使用 Vuex。首先安装 Vuex
npm install vuexnext
在 frontend/src/store/index.js 中创建 Vuex 存储
import { createStore } from vuex;export default createStore({state: {token: localStorage.getItem(token) || null},mutations: {setToken(state, token) {state.token token;localStorage.setItem(token, token);},clearToken(state) {state.token null;localStorage.removeItem(token);}},actions: {login({ commit }, token) {commit(setToken, token);},logout({ commit }) {commit(clearToken);}},getters: {isAuthenticated: state !!state.token}
});
6. 前后端联调
确保 MongoDB 和后端服务已启动。在 backend 目录下运行以下命令启动后端服务
npm start
在 frontend 目录下运行以下命令启动前端开发服务器
npm run serve
6.1 路由配置
为了更好地组织应用的路由我们需要在 frontend/src/router/index.js 中配置路由
import { createRouter, createWebHistory } from vue-router;
import Home from ../views/Home.vue;
import Login from ../components/Login.vue;
import Register from ../components/Register.vue;
import TaskList from ../components/TaskList.vue;
import store from ../store;const routes [{path: /,name: Home,component: Home},{path: /login,name: Login,component: Login,meta: { requiresAuth: false }},{path: /register,name: Register,component: Register,meta: { requiresAuth: false }},{path: /tasks,name: Tasks,component: TaskList,meta: { requiresAuth: true }}
];const router createRouter({history: createWebHistory(process.env.BASE_URL),routes
});router.beforeEach((to, from, next) {if (to.meta.requiresAuth !store.getters.isAuthenticated) {next(/login);} else {next();}
});export default router;
6.2 主页组件
在 frontend/src/views/Home.vue 中创建主页组件
templatediv classhomeh1Welcome to the Task Manager/h1pPlease router-link to/loginlogin/router-link or router-link to/registerregister/router-link to get started./p/div
/templatescript
export default {name: Home
};
/scriptstyle scoped
/* 添加一些样式 */
/style
6.3 登录和注册页面
在 frontend/src/App.vue 中设置默认路由
templatediv idapprouter-view/router-view/div
/templatescript
export default {name: App
};
/scriptstyle
/* 添加一些全局样式 */
/style
7. 部署与测试
7.1 部署后端
将后端应用部署到云服务器或使用 Docker 容器化部署。这里以 Docker 为例创建 Dockerfile 文件
# 使用官方 Node.js 运行时镜像
FROM node:14# 设置工作目录
WORKDIR /app# 复制 package.json 和 package-lock.json
COPY package*.json ./# 安装依赖
RUN npm install# 复制应用代码
COPY . .# 暴露端口
EXPOSE 3000# 启动应用
CMD [node, src/server.js]
构建并运行 Docker 容器
docker build -t task-manager-backend .
docker run -d -p 3000:3000 task-manager-backend
7.2 部署前端
将前端应用构建为生产版本并部署到静态文件服务器。例如使用 Nginx
npm run build
创建 nginx.conf 文件
server {listen 80;server_name your-domain.com;location / {root /path/to/dist;try_files $uri $uri/ /index.html;}
}
启动 Nginx 服务
sudo nginx -c /path/to/nginx.conf
7.3 测试
确保所有功能正常工作包括用户注册、登录、任务创建、编辑和删除。可以使用 Postman 或浏览器进行测试。
8. 总结与展望
通过本文我们成功构建了一个完整的 Node.js MongoDB Vue 3 全栈应用。这个应用实现了用户注册、登录、任务管理等功能。未来可以进一步扩展和优化例如
添加更多的用户权限管理实现任务的分类和标签管理增加实时通知功能优化前端用户体验
希望本文对你有所帮助祝你在全栈开发的道路上越走越远
