【Vue+Mysql实现前端对接数据库】

vue mysql 直连 最近又搞了个小项目,单机版本的内部考勤管理系统,直接部署在对方的工作电脑上,不需要在云端部署,因为项目本身就小,我就没配置后端同事进行开发,而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务,随时打开使用。下面来复盘一下整体开发过程。 阅读详情

一、安装环境

  • Mysql 下载及安装

  • Node 下载及安装

  • 使用 Vite + Vue3 搭建脚手架

  • 安装相关依赖

    npm install --save mysql
    npm install --save axios
    npm install --save express
    npm install --save body-parser
    npm install --save crypto
    
    • Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
    • body-parser 是 node.js body 解析中间件。处理程序之前,在中间件中对传入的请求体进行解析(response body)
    • CryptoJS 是一个JavaScript的加解密的工具包。它支持多种算法:MD5、SHA1、SHA2、SHA3、RIPEMD-160 的哈希散列,以及进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

二、axios 封装和配置

2.1 文件 src/utils/request.js 代码

  1. 导入 axios
import axios from 'axios'
  1. 创建 axios 实例

    // 实例请求的方式有 instance({})、instance.get()、instance.post()
    const reque
Vue3搭配后端连接数据库 虽然Vue 3本身并不直接提供连接数据库的功能,但你可以通过与后端服务器的配合来实现与数据库的交互。设计后端服务器:在Vue 3中连接数据库时,你需要先搭建一个后端服务器来处理与数据库的通信。创建API接口:在后端服务器中,你需要创建API接口来处理从前端发送的请求,并与数据库进行交互。设置数据库连接:要连接数据库,你需要在后端服务器中进行数据库配置。根据你使用的数据库类型,可以使用相应的库来帮助你完成连接。处理数据库操作:在处理API接口时,你需要使用相应的数据库模块执行数据库操作。 阅读详情

相关推荐

Vue连接数据库实现登录注册

在前端开发中,经常需要将用户的注册和登录信息存储到数据库中,然后再进行登录验证。本文将介绍如何使用Vue连接数据库实现登录注册功能。

不愧是暮言的博客 2482

vue+webpack+springboot+mysql入门项目搭建

一、环境和工具: 后台编译器idea,maven+springboot+mybatis项目; 前端编译器vscode,vue项目; 数据库mysql,辅助工具sqlyog。 一、创建vue+webpack前端项目 vue init webpack + 项目名(默认已有node.js环境,创建中途配置按需选择即可)。 二、后台问题: 1、项目中引入了lombok插件进行日志打印。虽然pom.xm...

我爱吃兔兔的博客 1334

猕猴桃双端对接苹果CMS开源及画中画功能实现

JavaScript作为Web开发的三大核心技术之一,自从1995年诞生以来,其在前端开发中的地位就一直处于核心位置。最初仅用于简单的网页交互,而如今JavaScript已经成为了构建复杂的单页应用(SPA)、服务器端编程(Node.js)以及桌面、移动应用(Electron、Cordova)的重要语言。JavaScript的生态系统非常繁荣,拥有大量的框架、库和工具,比如React、Angular和Vue.js等,它们极大地提升了开发效率和应用性能。

weixin_31720909的博客 638

WKWebView 白屏问题,WKWebView request body丢失问题

1,WKWebView 白屏问题 WKWebView 自诩拥有更快的加载速度,更低的内存占用,但实际上 WKWebView 是一个多进程组件,Network Loading 以及 UI Rendering 在其它进程中执行。初次适配 WKWebView 的时候,我们也惊讶于打开 WKWebView 后,App 进程内存消耗反而大幅下降,但是仔细观察会发现,Other Process 的内存占用会...

weixin_37543822的博客 732

【Python基础】01 如何安装Python及集成环境

本文详细介绍了Python 3.13开发环境的完整搭建流程,涵盖三大操作系统(Windows/macOS/Linux)的Python安装方法、PyCharm专业IDE的配置使用,以及pip包管理工具的应用技巧。内容包括:Python 3.13各系统安装指南、PyCharm社区版与专业版的安装配置、环境验证方法、pip的基本命令与镜像源优化、虚拟环境管理,以及常见问题的解决方案。通过本教程,读者可获得一个高效完备的Python开发环境,为后续编程学习打下坚实基础。

nmdbbzcl的博客 1407

家用扫地机器人研发技术路线-第四部分:如何一步步做出来 | 4阶段 · 从原型到量产

摘要:本文详细介绍了扫地机器人从原型到量产的研发流程,分为4个关键阶段。首先聚焦四大技术难点:SLAM定位、AI视觉识别、仿生机械臂和静音风机系统。研发过程包括实验室原型验证、工程样机测试、小批量真实场景测试和量产导入四个阶段,每个阶段设有严格评审标准。特别强调测试贯穿全程,包括模块单元测试、整机集成测试、长期可靠性测试和多样化场景模拟,确保产品在上市前完成数百次真实环境验证。整个流程体现了从技术攻关到产品落地的系统性工程思维。

智能硬件研发,欢迎交流 181

YOLOv8融合改进 更换检测头为Detect_DyHead同时添加C2f_DBB模块

yolov8独家训练测试融合网络结构,提供详细步骤详细代码,手把手教你在yolov8官方包中把检测头更换为Detect_DyHead检测头,并且将原始的C2f模块更换成C2f_DBB模块,提高检测精度,亲测在多个数据集上有涨点!!!!!

分享一些自己改进代码的实例 4743

智能车图像处理2-入门级分析1 ---基础扫线

PS :入门级文章适合新手,如果已经有基础可以去看进阶篇文章。

taiyuezyh的博客 7706

(计算机组成原理)第二章数据的表示和运算-第二节:数字电路基础知识

本文介绍了计算机组成原理中的逻辑门电路、多路选择器和三态门。逻辑门电路包括基本逻辑运算(与、或、非)和复合逻辑运算(与非、或非、异或、同或),这些运算通过门电路实现,并满足分配律和结合律。多路选择器(MUX)用于从多个输入信号中选择一个输出,广泛应用于数据选择、资源共享和逻辑函数实现等场景。三态门则具有三种输出状态(高电平、低电平、高阻态),常用于总线控制和信号隔离。这些元件在数字电路设计和计算机系统中具有重要作用。

快乐江湖的博客 2466

rk3399开发环境的介绍

由于Bluez的介绍文档有限,以及对Linux 系统/驱动概念、D-Bus 通信和蓝牙协议都有要求,加上网络上其实没有一个完整的介绍Bluez系列的文档,所以不管是蓝牙初学者还是蓝牙从业人员,都有不小的难度,学习曲线也相对较陡,所以我有了这个想法,专门对Bluez做一个系统性的介绍,尽可能的涵盖所有内容。

朝气蓬勃 703

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

上一篇: 【跨域】同源策略、跨域解决
下一篇: 【React基础一】React简介和特点、虚拟DOM、JSX、项目搭建、组件与State状态
MagnumHou
博客等级 码龄9年 1万+粉丝 147原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值