使用 Vue3、Node.js、MySQL、Electron 和 Express 实现用户登录、文章管理和截屏功能

在现代 Web 开发中,前后端分离的架构已经成为主流。本文将详细介绍如何使用 Vue3、Node.js、MySQL、Electron 和 Express 实现一个完整的用户登录、文章管理和截屏功能的应用。我们将从项目的初始化开始,逐步实现各个功能模块,并提供详细的代码示例。

项目初始化

前端:Vue3

首先,我们使用 Vue CLI 创建一个新的 Vue3 项目:

npm install -g @vue/cli
vue create vue-electron-app
cd vue-electron-app

选择默认配置或根据需要进行自定义配置。

后端:Node.js 和 Express

在项目根目录下创建一个新的文件夹 server,并在其中初始化一个新的 Node.js 项目:

mkdir server
cd server
npm init -y
npm install express mysql body-parser cors

创建 server.js 文件并设置基本的 Express 服务器:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3000;app.use(cors());
app.use(bodyParser.json());app.listen(port, () => {console.log(`Server running on port ${port}`);
});

数据库:MySQL

创建一个新的 MySQL 数据库和表:

CREATE DATABASE vue_electron_app;USE vue_electron_app;CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255) NOT NULL,password VARCHAR(255) NOT NULL
);CREATE TABLE articles (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(255) NOT NULL,content TEXT NOT NULL,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

实现用户登录功能

后端:用户登录 API

server 文件夹中创建一个新的文件 auth.js,并实现用户注册和登录功能:

const express = require('express');
const router = express.Router();
const mysql = require('mysql');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');const db = mysql.createConnection({host: 'localhost',user: 'root',password: 'password',database: 'vue_electron_app'
});router.post('/register', (req, res) => {const { username, password } = req.body;const hashedPassword = bcrypt.hashSync(password, 10);db.query('INSERT INTO users (username, password) VALUES (?, ?)', [username, hashedPassword], (err, result) => {if (err) return res.status(500).send(err);res.status(201).send('User registered');});
});router.post('/login', (req, res) => {const { username, password } = req.body;db.query('SELECT * FROM users WHERE username = ?', [username], (err, results) => {if (err) return res.status(500).send(err);if (results.length === 0) return res.status(404).send('User not found');const user = results[0];const isPasswordValid = bcrypt.compareSync(password, user.password);if (!isPasswordValid) return res.status(401).send('Invalid password');const token = jwt.sign({ id: user.id }, 'secret_key', { expiresIn: '1h' });res.status(200).send({ token });});
});module.exports = router;

server.js 中引入并使用该路由:

const authRoutes = require('./auth');
app.use('/auth', authRoutes);

前端:用户登录页面

在 Vue 项目中创建一个新的组件 Login.vue

<template><div><h2>Login</h2><form @submit.prevent="login"><div><label for="username">Username:</label><input type="text" v-model="username" required /></div><div><label for="password">Password:</label><input type="password" v-model="password" required /></div><button type="submit">Login</button></form></div>
</template><script>
import axios from 'axios';export default {data() {return {username: '',password: ''};},methods: {async login() {try {const response = await axios.post('http://localhost:3000/auth/login', {username: this.username,password: this.password});localStorage.setItem('token', response.data.token);this.$router.push('/dashboard');} catch (error) {console.error('Login failed:', error);}}}
};
</script>

实现文章管理功能

后端:文章管理 API

server 文件夹中创建一个新的文件 articles.js,并实现文章的 CRUD 操作:

const express = require('express');
const router = express.Router();
const mysql = require('mysql');
const jwt = require('jsonwebtoken');const db = mysql.createConnection({host: 'localhost',user: 'root',password: 'password',database: 'vue_electron_app'
});const authenticate = (req, res, next) => {const token = req.headers['authorization'];if (!token) return res.status(401).send('Access denied');jwt.verify(token, 'secret_key', (err, decoded) => {if (err) return res.status(401).send('Invalid token');req.userId = decoded.id;next();});
};router.post('/articles', authenticate, (req, res) => {const { title, content } = req.body;db.query('INSERT INTO articles (title, content) VALUES (?, ?)', [title, content], (err, result) => {if (err) return res.status(500).send(err);res.status(201).send('Article created');});
});router.get('/articles', authenticate, (req, res) => {db.query('SELECT * FROM articles', (err, results) => {if (err) return res.status(500).send(err);res.status(200).send(results);});
});router.put('/articles/:id', authenticate, (req, res) => {const { id } = req.params;const { title, content } = req.body;db.query('UPDATE articles SET title = ?, content = ? WHERE id = ?', [title, content, id], (err, result) => {if (err) return res.status(500).send(err);res.status(200).send('Article updated');});
});router.delete('/articles/:id', authenticate, (req, res) => {const { id } = req.params;db.query('DELETE FROM articles WHERE id = ?', [id], (err, result) => {if (err) return res.status(500).send(err);res.status(200).send('Article deleted');});
});module.exports = router;

server.js 中引入并使用该路由:

const articleRoutes = require('./articles');
app.use('/api', articleRoutes);

前端:文章管理页面

在 Vue 项目中创建一个新的组件 ArticleManager.vue

<template><div><h2>Article Manager</h2><form @submit.prevent="createArticle"><div><label for="title">Title:</label><input type="text" v-model="title" required /></div><div><label for="content">Content:</label><textarea v-model="content" required></textarea></div><button type="submit">Create Article</button></form><ul><li v-for="article in articles" :key="article.id"><h3>{{ article.title }}</h3><p>{{ article.content }}</p><button @click="deleteArticle(article.id)">Delete</button><button @click="editArticle(article)">Edit</button></li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {title: '',content: '',articles: []};},async created() {await this.fetchArticles();},methods: {async fetchArticles() {try {const response = await axios.get('http://localhost:3000/api/articles', {headers: { Authorization: localStorage.getItem('token') }});this.articles = response.data;} catch (error) {console.error('Failed to fetch articles:', error);}},async createArticle() {try {await axios.post('http://localhost:3000/api/articles', {title: this.title,content: this.content}, {headers: { Authorization: localStorage.getItem('token') }});this.title = '';this.content = '';await this.fetchArticles();} catch (error) {console.error('Failed to create article:', error);}},async deleteArticle(id) {try {await axios.delete(`http://localhost:3000/api/articles/${id}`, {headers: { Authorization: localStorage.getItem('token') }});await this.fetchArticles();} catch (error) {console.error('Failed to delete article:', error);}},editArticle(article) {this.title = article.title;this.content = article.content;// Implement update logic here}}
};
</script>

实现截屏功能

Electron:截屏功能

在项目根目录下安装 Electron:

npm install electron --save-dev

创建 main.js 文件并配置 Electron 主进程:

const { app, BrowserWindow, ipcMain, desktopCapturer } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),contextIsolation: true,enableRemoteModule: false,nodeIntegration: false}});win.loadURL('http://localhost:8080');
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});ipcMain.handle('capture-screen', async () => {const sources = await desktopCapturer.getSources({ types: ['screen'] });return sources[0].thumbnail.toDataURL();
});

创建 preload.js 文件并配置预加载脚本:

const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electron', {captureScreen: () => ipcRenderer.invoke('capture-screen')
});

前端:截屏功能页面

在 Vue 项目中创建一个新的组件 ScreenCapture.vue

<template><div><h2>Screen Capture</h2><button @click="captureScreen">Capture Screen</button><img v-if="screenshot" :src="screenshot" alt="Screenshot" /></div>
</template><script>
export default {data() {return {screenshot: null};},methods: {async captureScreen() {try {this.screenshot = await window.electron.captureScreen();} catch (error) {console.error('Failed to capture screen:', error);}}}
};
</script>

结语

通过本文,我们详细介绍了如何使用 Vue3、Node.js、MySQL、Electron 和 Express 实现一个完整的用户登录、文章管理和截屏功能的应用。希望这篇文章能为你提供有价值的参考,帮助你更好地理解和实现前后端分离的应用开发。

如果你有任何问题或建议,欢迎在评论区留言讨论。Happy coding!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

泰迪智能科技江西大数据实验室成功案例介绍说明

高校大数据实验室作为作为支撑高校人培方案实施的核心设施&#xff0c;实验室的建设一定要与学科建设、人才培养充分融合&#xff0c;是一个包含物理空间硬件资源软件资源课程内容的系统化工程。高校在实验室规划过程中&#xff0c;第一要务就是从学科定位出发、结合学校的特色…

14_Shell重定向输入输出

14_Shell重定向输入输出 输出重定向&#xff1a;一般情况&#xff0c;输出是在终端直接显示&#xff0c;改变输出位置&#xff0c;改变到文件中&#xff0c;这就是输出重定向 输入重定向&#xff1a;一般情况&#xff0c;输入是读取用户终端输入&#xff0c;改变输入位置&#…

图解PyTorch中的Transpose操作

在PyTorch中&#xff0c;我们时常会对张量进行转置操作。若张量是二维的&#xff0c;则非常容易理解。若张量维度更高&#xff0c;则会令人摸不到头脑。 高维张量究竟是怎么转置的&#xff1f;简单来说&#xff0c;就是将参与转置的维度抽出来&#xff0c;将内侧的子张量视为一…

js判断是否包含某些字符串中的一个

被判断的字符串是由逗号和中文拼接成的字符串&#xff0c; 编写一个js来校验一个字符串是否包含“纪委书记”&#xff0c;“纪检专岗”&#xff0c;“纪律检查室主任”&#xff0c;判断是否包含这三个字符串中的一个&#xff0c;包含其中一个就为true&#xff0c;多字少字都不算…

【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

文章目录 Beginning1&#xff09;ASCLL 码2&#xff09;大小比较2&#xff09;判断数字字符3&#xff09;字符、数字间的相互转换End Beginning 在 C 中&#xff0c;字符和整数有着密不可分的关系。原因就是在计算机中&#xff0c;字符是以一种较 ASCLL 码的整数存储的。自然&…

职业PDF标准 Python 下载器-CSDN

目的 下载技能人才评价网 - 职业技能标准查询系统 - PDF 打包下载 使用文件 a.json 代码解析 import base64 import requests import json import os import time# 读取JSON文件 with open(a.json, r, encodingutf-8) as f:data json.load(f) # 从名为 a.json 的文件中读…

【vue深入学习第1章】Vue.js 中的 Ajax 处理:vue-resource 库的深度解析

在现代前端开发中&#xff0c;Ajax 请求是与后端进行数据交互的关键技术。Vue.js 作为一个渐进式 JavaScript 框架&#xff0c;提供了多种方式来处理 Ajax 请求&#xff0c;其中 vue-resource 是一个较为常用的库。尽管 vue-resource 在 Vue 2.x 之后不再是官方推荐的 Ajax 处理…

四川蔚澜时代电子商务有限公司领航抖音电商新纪元

在数字化浪潮的推动下&#xff0c;电子商务已成为现代商业发展的重要引擎。四川蔚澜时代电子商务有限公司&#xff0c;凭借对市场的敏锐洞察力和对技术的执着追求&#xff0c;成功在抖音电商领域崭露头角&#xff0c;成为众多电商创业者值得信赖的合作伙伴。 抖音&#xff0c;…

qt 创建一个矩形,矩形的边线可以拖拽,拖拽时这个矩形随着这个边线缩放

在Qt中&#xff0c;要创建一个矩形&#xff0c;其边线可以拖拽以实现缩放功能&#xff0c;你需要重写QGraphicsRectItem类&#xff0c;并在其中处理鼠标事件来更新矩形的大小。以下是一个示例代码&#xff0c;展示了如何实现一个可拖拽边线以缩放的矩形&#xff1a; #include …

关系数据库:mysql

使用 mysqladmin 删除数据库 关系型数据库的术语&#xff1a; 数据库: 数据库是一些关联表的集合。数据表: 表是数据的矩阵。在一个数据库中的表看起来像一个简单的电子表格。列: 一列(数据元素) 包含了相同类型的数据, 例如邮政编码的数据。行&#xff1a;一行&#xff08;元组…

idea双击没有反应,打不开

问题描述 Error opening zip file or JAR manifest missing : /home/IntelliJ-IDEA/bin/jetbrains-agent.jar解决方案

前端路由手写Hash和History两种模式

文章目录 1. Hash模式&#xff1a;简洁而广泛适用2. History模式&#xff1a;更自然的用户体验3. 结论 在现代Web开发中&#xff0c;单页面应用&#xff08;Single Page Application&#xff0c;简称SPA&#xff09;因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由…

PyTorch人脸识别

新书速览|PyTorch深度学习与企业级项目实战-CSDN博客 一套基本的人脸识别系统主要包含三部分&#xff1a;检测器、识别器和分类器&#xff0c;流程架构如图11-3所示&#xff1a; 图11-5 检测器负责检测图片中的人脸&#xff0c;再将检测出来的人脸感兴趣区域&#xff08;Reg…

第二届大数据、计算智能与应用国际会议(BDCIA2024)

会议日期&#xff1a;2024年11月15-17日 会议地点&#xff1a;中国-湖北省-黄冈市 主办单位&#xff1a;黄冈师范学院 【大会主席】 【主讲嘉宾】 大会邀请到来自美国、英国、加拿大、新加坡、意大利、越南等10余位领域内学术大咖作主题报告&#xff0c;并与参会人员互动交…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【查询密钥是否存在(ArkTS)】

查询密钥是否存在(ArkTS) HUKS提供了接口供应用查询指定密钥是否存在。 开发步骤 指定密钥别名keyAlias&#xff0c;密钥别名最大长度为64字节。初始化密钥属性集。用于查询时指定密钥的属性TAG&#xff0c;比如查询的密钥范围(全量/单个)&#xff0c;当查询单个时&#xff…

【区块链 + 智慧政务】城市公积金中心区块链基础服务平台 | FISCO BCOS应用案例

当前&#xff0c;多方呼吁拓展住房公积金服务渠道、提高服务效率、整合各方资源、简化业务办理流程&#xff0c;实现住房公积金 管理中心业务模式由“管理型”向“服务型”转变。 安存推出的城市公积金中心区块链基础服务平台&#xff0c;基于 FISCO BCOS 联盟链搭建&#xff…

分布式IO系统BL201 Profinet耦合器

BL201耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;是一种模块化的分布式I/O系统。该系统由3部分组成&#xff1a;现场总线耦合器和各种类型的&#xff08;数字和模拟信号以及特殊功能&#xff09;I/O模块…

Ubuntu18 中JDK的安装

文章目录 一、背景说明二、获取安装包三、安装JDK3.1 上传安装包3.2 复制和解压3.3 环境变量的设置3.4 验证安装 四、问题列表4.1 .bashrc文件在哪里&#xff1f;.bashrc是什么&#xff1f;4.2 为什么使用rz上传安装包时会报&#xff1a; 传输失败&#xff1f; 五、总结 一、背…

解决RuntimeError: Couldn‘t load custom C++ ops. This can happen if your PyTorch

问题描述 刚下好yolov8的代码&#xff0c;想测一下能否成果&#xff0c;果然没成功&#xff0c;报错如下 RuntimeError: Couldnt load custom C ops. This can happen if your PyTorch and torchvision versions are incompatible, or if you had errors while compiling tor…

kettle从入门到精通 第七五课 ETL之kettle血缘,数据血缘

在了解kettle血缘之前&#xff0c;咱们先来了解下什么是数据血缘&#xff1f; 1、数据血缘定义&#xff08;来自gpt&#xff09; 数据血缘&#xff08;Data Lineage&#xff09;是指在数据管理和数据分析中追踪数据的源头、流向和处理过程的能力。具体来说&#xff0c;数据血…