vue项目之js对Mysql数据库操作

vue项目之js对Mysql数据库操作



前言

js对数据库的基本操作


一、相关插件安装

下载express,Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。

npm install express

下载cors,用于处理接口跨域问题

npm install cors

下载mysql,用于对mysql数据库连接及其相关操作

npm install mysql

下载axios,Axios 是一个基于 promise 的 异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求,负责与后端交互。

npm install axios

二、搭建本地服务器

1.在src新建/server/app.js,用于配置服务器相关信息:

// 配置服务器相关信息
let express=require('express')
let app=express()
let cors=require('cors')
let bodyParser=require('body-parser')
let router =require('./router')

app.use(bodyParser.json()); //配置解析,用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({
   extended:false}));
app.use(cors())             //配置跨域,必须在路由之前
app.use(router)            //配置路由

app.listen(80,()=>{
   
    console.log('服务器启动成功');
})

新建/server/db/index.js,用于配置数据库相关信息:

let mysql=require('mysql')

let db=mysql.createPool({
   
    host:'localhost',            //数据库IP地址
    port:'3306'
  • 11
    点赞
  • 62
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
使用Vue.js 3和JavaScript来读取MySQL数据库数据,你可以按照以下步骤进行操作: 1. 首先,你需要在你的项目安装MySQL的驱动程序。你可以使用npm包管理器来安装所需的驱动程序,例如`npm install mysql`。 2. 在你的Vue.js项目,创建一个用于连接到MySQL数据库JavaScript模块。在该模块,你可以使用mysql驱动程序的`createConnection`函数来创建一个与数据库的连接。 下面是一个示例代码: ```javascript const mysql = require('mysql'); // 创建与MySQL数据库的连接 const connection = mysql.createConnection({ host: 'your_host', user: 'your_user', password: 'your_password', database: 'your_database' }); // 连接到MySQL数据库 connection.connect((err) => { if (err) { console.error('连接到MySQL数据库失败:', err); return; } console.log('成功连接到MySQL数据库'); }); // 从MySQL数据库读取数据 connection.query('SELECT * FROM your_table', (err, results) => { if (err) { console.error('从MySQL数据库读取数据失败:', err); return; } console.log('成功从MySQL数据库读取数据:', results); }); // 关闭与MySQL数据库的连接 connection.end((err) => { if (err) { console.error('关闭与MySQL数据库的连接失败:', err); return; } console.log('成功关闭与MySQL数据库的连接'); }); ``` 3. 在你的Vue组件,你可以使用上述创建的连接模块来读取MySQL数据库数据。你可以在组件的生命周期钩子函数(例如`created`或`mounted`)调用连接模块,以获取数据库数据,并将其存储在Vue数据对象,以供组件使用。 ```javascript import YourConnectionModule from './your_connection_module'; export default { data() { return { databaseData: null }; }, created() { YourConnectionModule.query('SELECT * FROM your_table', (err, results) => { if (err) { console.error('从MySQL数据库读取数据失败:', err); return; } this.databaseData = results; console.log('成功从MySQL数据库读取数据:', results); }); } }; ``` 以上就是使用Vue.js 3和JavaScript读取MySQL数据库数据的基本步骤。需要注意的是,你还可以根据具体的项目需求来进行更多的操作和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

梳碧湖的砍柴人.exe

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

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

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

打赏作者

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

抵扣说明:

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

余额充值