react 项目--博客系统 (五)

news/2024/7/15 17:37:03 标签: react.js, 前端, reactjs

Loading......

接着上文,创建完数据库后,需要一个包进行服务端与数据库的连接 ( 称为 Server 通过 ORM 连接数据库);

我们在服务器的终端输入 npm i sequelize mysql2  安装两个包用来服务端与数据库建立连接;

在客户端的 app.js 中将新增加的包引入并且将其实例化;

const {Sequelize}=require('sequelize')

const sequelize=new Sequelize(process.env.DB_NAME,process.env.DB_USERNAME,process.env.DB_PASSWORD,{
    dialect:process.env.DB_DIALECT,
    host:process.env.DB_HOST,
    port:process.env.DB_PORT,
    logging:false,

})

并在 .env 中配置相应的数据; 

# mysql
DB_NAME = gt_v1
DB_USERNAME = root
DB_PASSWORD = 123456
DB_DIALECT = mysql
DB_HOST = localhost
DB_PORT = 3306

在 app.js 文件中插入一段调试代码,用来查看 数据库 与 客户端 是否联通;

const dbConnection = async () => {
    try {
        await sequelize.authenticate();
        console.log('mysql Connection successful !!! ');
    } catch (error) {
        console.error('Unable to connect to the database:', error);
    }

}
dbConnection()

最后在终端启动服务,出现 mysql Connection successful !!! 说明 数据库 与 服务器 连接成功;

 

app.js 中代码:

require('dotenv').config({ path: '.env' })

const express = require('express')
const { Sequelize } = require('sequelize')

const sequelize = new Sequelize(process.env.DB_NAME, process.env.DB_USERNAME, process.env.DB_PASSWORD, {
    dialect: process.env.DB_DIALECT,
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    logging: false

})

const dbConnection = async () => {
    try {
        await sequelize.authenticate();
        console.log('mysql Connection successful !!! ');
    } catch (error) {
        console.error('Unable to connect to the database:', error);
    }

}
dbConnection()

const app = express()

const PORT = process.env.PORT || 8080

app.listen(PORT, () => {
    console.log(`running http://localhost:${PORT}`);
})

.env 中代码:

# server
HOST = localhost
PORT = 8000

# mysql
DB_NAME = gt_v1
DB_USERNAME = root
DB_PASSWORD = 123456
DB_DIALECT = mysql
DB_HOST = localhost
DB_PORT = 3306

未完待续......


http://www.niftyadmin.cn/n/640917.html

相关文章

在PowerPoint2007中自定义专用幻灯片版式

PowerPoint2007之前的版本所提供的幻灯片版式是不允许用户自行定义的,现在PowerPoint2007已经可以让您随心所欲的自定义专用的幻灯片版式了。若要添加新的自定义幻灯片版式,必须先切换到幻灯片母版视图,添加一个新的幻灯片版式后,…

Devexpress VCL Build v2012 vol 1.3 发布

呵呵,devexpress 里面现在也可以贴瓷砖了。 Whats New in DevExpress VCL 12.1.3 Release Notes To learn about major improvements introduced in this version, please check the following page: Whats New in DevExpress VCL 12.1 To learn about breaking cha…

Nginx可以做什么?看完这篇你就懂了

本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得,欢迎留言交流。 Nginx能做什么 ——反向代理 ——负载均衡 ——HT…

react 项目--博客系统 (六)

Loading...... 下面我们针对上一篇文章数据库与服务器连接进行进一步的优化,我们在真实的项目开发中一都是数据库先建立连接,然后才是服务器端响应,而在上一篇中,由于异步请求问题导致服务器端相应完成后数据库端才建立连接&…

低成本两台服务器备份,SQL SERVER数据库镜像(二)

承接上文《异地(公网)数据库容灾,SQL SERVER互联网自动备份,SQL SERVER数据库镜像》说到我们已经备份并到镜象服务器里还原了数据库,接下一来我们就要把主服务器和镜象服务器连接起来,这里我们使用证书进行连接,我这里…

编译icedTea-web报错填坑之旅

编译环境windows cygwin64&#xff0c;gitlab上clone的代码不能编译通过&#xff0c;而本地提交到gitlab的代码可以通过&#xff0c;报错信息指向automake-1.15 错误1 Unescaped left brace in regex is illegal here in regex; marked by <-- HERE in m/${ <-- HERE ([^…

redux学习笔记——初识redux

1. redux是什么&#xff1f; 2013年facebook提出了facebook这一框架概念&#xff0c;而redux是flux的一种实现&#xff0c;将flux与函数式编程结合在一起的一个前端框架。 flux是一个对数据流管理更加严格的MVC框架&#xff0c;其基本原则是单向数据流&#xff1b; redux在此基…

react 项目--博客系统 (七)

Loading...... 接上一篇文章&#xff0c;我们在真实项目开发的过程中&#xff0c;如果把所有代码全写在一起&#xff0c;那么会导致最终呈现效果十分混乱&#xff0c;所以我们一般都会进行模块化的抽离&#xff0c;使项目在后期修改维护更加的方便。 首先在根目录 backend 下…