Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

首先我们从后端开始入手，这边我是用的是centos7安装的宝塔面板，如果不会安装宝塔面板可以去宝塔官网看看使用方法宝塔linux面板，一键安装LAMP/LNMP/SSL/Tomcat (bt.cn)

在宝塔中安装好 node.js, nginx , mysql , php7.1(推荐) ,pm2管理器,随后就开始项目的进行吧！

Node.js连接MySql教程和遇到的问题

一、首先把基础搭建好，配置好服务器运行的环境

1. 在宝塔面板的软件商店中安装以下软件(版本可自行选择)

• MySQL 5.6.50
• PHP-7.1
• phpMyAdmin 5.0

2. 安全设置中放行端口

• 放行3306端口 - MySQL服务默认端口
• 放行888端口 - phpMyAdmin默认端口

3. 打开phpMyAdmin管理 => php版本 => 从纯静态改为你安装的php版本

4. 在宝塔面板 => 数据库中添加一个数据库并设置好用户名和密码,然后点击右侧的管理，即可跳转到phpMyAdmin管理数据库

• 若跳转出现405错误，请确认2. 和 3. 是否正常设置
• 若跳转出现无法访问的错误，请确认服务商策略组是否放行888端口
• 若以上都设置好仍然无法访问，请重新安装最新版的phpMyAdmin

二、在服务器中新建一个文件夹，文件夹中创建一个server.js

1. 在新建的文件夹中运行以下安装命令

npm i mysql

// 非全局安装,安装在当前项目下
npm install express

2. 编辑server.js 文件的内容

// 导入mysql模块
var mysql = require("mysql")
// 导入express框架
const express = require('express')
// 把express 方法付给app 
const app = express()
console.log('服务启动中...')

// 进行连接配置
var db = mysql.createConnection({
    host     :'localhost',
    user     :'test', //根据你数据库的名称
    password :'', //密码
    database :'test'  //数据库名
})

// 服务启动时就连着数据库
db.connect(function(err){
    if(err){
        console.log('连接数据库错误:'+err);
        console.log(' ----------------------------end--------------------------------')
        return;
    }
    console.log('数据库连接成功')
});


// 查询数据库语句
var sql = 'SELECT * FROM 数据库表名'

app.get('*', (req, res) => {
    console.log('请求的',req.originalUrl)
        //查询数据库
        db.query('SELECT * FROM 数据库表名',function (err, result) {
                if(err){
                  console.log('[SELECT ERROR]异常 - 查询失败 -',err.message);
                  return;
                }
              console.log('****连接成功****')
              res.send(result)
              console.log('****推送成功****');
              console.log('----------------------------end--------------------------------');  
        });
})

// 断开数据库连接，如果数据库需要经常被访问到或者作为api访问则不需要时刻断开连接
// connection.end();

app.listen(9001, () => {
       console.log('数据库服务已启动！9001');
});

• 记得放行9001端口喔

3. 命令node server.js测试连接成功，成功获取到数据库表的内容

服务端命令窗口先不要关闭

接下来进行前端界面的连接

1. 安装axios

npm install --save axios

2. 引入axios

• 方式一：在页面中引入

import axios from "axios"

• 方式二：在入口文件-全局文件中引入

import axios from 'axios'
new Vue({ 
   axios 
})

2. 在vue页面中写入代码

getMyNodeAPI(){
   let url="http://服务器ip:9001/" /*举例-我们刚刚创建的node.js文件*/
   axios.get(url).then(res=>{ 
      console.log(res) 
      let info = res
      // 具体渲染到页面代码省略
      //要看具体请求回来的数据 
   }).catch((err)=>{ 
      console.log(err); 
   })
}

3. 接下来运行vue项目到浏览器就可以看到数据啦(示例图)

---

觉得文章还不错的请给我点赞吧!
鄙人的小站:BlueCat主页-蓝桉博客 (bluecatweb.top)
欢迎大佬们访问