NodeJs + Mysql 實現項目開發

第一步：在本地環境安裝MySQL

Mac 安裝 MySQL整體流程：

https://www.cnblogs.com/nickchen121/p/11145123.html

MySQL 使用命令行：

# 啟動 MySQL
sudo mysql.server start   

sudo /usr/local/mysql/support-files/mysql.server start

# 停止MySql服務：
sudo /usr/local/mysql/support-files/mysql.server stop

# 重啟MySql服務：
sudo /usr/local/mysql/support-files/mysql.server restart

# 進入 MySQL
mysql -u root -p      

# 列出 MySQL 數據庫管理系統的數據庫列表
SHOW DATABASES;    

# 查看數據庫的編碼方式
show variables like 'character%'; 

MySQL 安裝流程注意事項：

注意一定要配置 my.cnf 文件，更改數據庫的編碼格式為utf8，否則錄入中文數據會顯示亂碼。可通過  查看數據庫的編碼方式 命令行查看數據庫的編碼格式，為以下情況正常：

 

 

第二步：安裝數據庫可視化界面操作工具

MAC環境下使用的是 sequel-pro 

下載地址為 http://www.sequelpro.com/

操作教程 https://blog.csdn.net/huacha__/article/details/81662142

注意事項：創建新的數據表時，要選擇編碼格式為utf8,否則寫入的中文會變成?? 亂碼

 

 

第三步：對數據庫進行增刪改查，使用express框架

基本流程參考：

https://blog.csdn.net/hust_cxl/article/details/79929093

https://www.cnblogs.com/cth0/p/11680134.html

const express = require('express') // 引入express模塊
const mysql = require('mysql') // 引入mysql模塊

// 創建mysql實例
const connection = mysql.createConnection({
  host: '127.0.0.1',   // 服務器端口
  user: 'root',        // 用戶名稱
  password: 'xiaojie520110',  // 密碼
  database: 'test'         // 連接的數據庫
});
const app = express()  // 創建express的實例
const port = 3000  // 定義監聽端口


connection.connect();  // 啟動連接數據庫

// MySQL語法，這句意思為查詢 SELECT * FROM表示查詢，test1表示查詢的數據表
const showSql = 'SELECT * FROM tets2'

// MySQL語法，這句意思為增加數據 INSERT INTO表示增加，test1表示增加的數據表 (name, age, email)為數據格式 VALUES(?,?,?) 為值
const addSql = "INSERT INTO tets2 (name, age, email) VALUES (?,?,?)";
const addSqlParams = ['菜鳥', 18, 'https://c.xxrunoob.com']; // 這是想增加的數據

// 寫入數據
connection.query(addSql, addSqlParams, function (err, result) {
  if (err) {  // 操作失敗報錯
    console.log('[SELECT ERROR]:', err.message);
  }
  console.log(result);  //數據庫查詢結果返回到result中
});

// 查詢數據
connection.query(showSql, function (err, result) {
  if (err) {  // 操作失敗報錯
    console.log('[SELECT ERROR]:', err.message);
  }
  console.log(result);  //數據庫查詢結果返回到result中
});

// 服務器響應請求
app.get('/', (req, res) => {
  connection.query(showSql, function (err, result) {
    if (err) {  // 操作失敗報錯
      console.log('[SELECT ERROR]:', err.message);
    }
    console.log(result);  //數據庫查詢結果返回到result中
    res.send(result[0])

  });
})

// 監聽3000端口
app.listen(port, () => console.log(`Example app listening on port ${port}!`))



// connection.end(); //結束連接！！！不能一直連着！！

 

 

第四步：定義請求接口，連接前端頁面

后端定義的各個接口，本質上其實就是一個路由地址。例如 https://gw.n8n8.cn/list 這個后端接口，采用的是GET請求。當前端使用AJAX對這個接口發起請求的時候，實際上是觸發后端執行對應的路由 “ /list ” 的邏輯。

對應到 express 里面，也就是觸發 express 里面定義好的路由：在本地環境進行測試，這里的域名使用的是 127.0.0.1 ，也就是指向本地

POST請求需要使用 json解析中間件（body-parser），參考鏈接 https://www.cnblogs.com/xyyl/p/11039506.html

express 例子：

const express = require('express') // 引入express模塊
const mysql = require('mysql') // 引入mysql模塊
const bodyParser = require('body-parser');/*支持post方法*/

const app = express()  // 創建express的實例
const port = 3000  // 定義監聽端口

app.use(bodyParser.json());// 添加json解析
app.use(bodyParser.urlencoded({ extended: false }));

// 定義連接的數據庫
const connection = mysql.createConnection({
  host: '127.0.0.1',   // 服務器端口
  user: 'root',        // 用戶名稱
  password: 'xiaojie520110',  // 密碼
  database: 'test'         // 連接的數據庫
});

// 允許接口跨域  這里指定允許所有接口跨域
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});


connection.connect();  // 啟動連接數據庫

// MySQL語法，這句意思為查詢 SELECT * FROM表示查詢，tets2表示查詢的數據表
const showSql = 'SELECT * FROM tets2'

// 服務端響應login接口，POST請求方式
app.post('/login', function (req, res, next) {
  const username = req.body.name; //獲取post請求參數
  const pwd = req.body.passwor;
  res.json({ name: username, pwd: pwd });//數據返回前端
});

// 服務器響應請求 當前端發起 /list 接口的請求后，會觸發這個邏輯
app.get('/list', (req, res) => {
  connection.query(showSql, function (err, result) {
    if (err) {  // 操作失敗報錯
      console.log('[SELECT ERROR]:', err.message);
    }
    res.send(result)  // 將查詢結果返回給頁面
  });
})

// 監聽3000端口
app.listen(port, () => console.log(`Example app listening on port ${port}!`))



// connection.end(); //結束連接！！！不能一直連着！！

 

 

前端頁面使用AJAX發起請求：

// 觸發express里定義好的 /show 路由里各個邏輯
$.get("http://127.0.0.1:3000/show", function (data, status) {
    console.log(data)
});

 

第五步： 在express中定義各種接口給前端頁面調用

前端頁面接口定義：

  // 增加數據
      $.post("http://127.0.0.1:3000/add", {
        name: "新增的數據",
        age: 22,
        email: "http://www.more.com"
      }, function (data, status) {
        console.log(data)
      });

      // 刪除數據
      $.post("http://127.0.0.1:3000/delete", {
        id: 11,
      }, function (data, status) {
        console.log(data)
      });

      // 更改數據
      $.post("http://127.0.0.1:3000/edit", {
        id: 9,
        name: "更改數據",
        email: "http://www.baidu.com"
      }, function (data, status) {
        console.log(data)
      });

      // 查詢數據
      $.get("http://127.0.0.1:3000/list", function (data, status) {
        console.log(data)
      });

后端接口定義：

// 增
app.post('/add', function (req, res, next) {
  const name = req.body.name;
  const email = req.body.email;
  const age = req.body.age;

  const addSqlParams = [name, email, age];
  // MySQL語法，這句意思為查詢 INSERT INTO表示新增，tets2表示查詢的數據表 (name,email,age) VALUES(?,?,?) 表示新增的字段
  const addSql = 'INSERT INTO tets2(name,email,age) VALUES(?,?,?)';

  connection.query(addSql, addSqlParams, function (err, result) {
    if (err) {
      console.log('[UPDATE ERROR] - ', err.message);
      return;
    }
    res.json(result);//數據返回結果
  });

});

// 刪
app.post('/delete', function (req, res, next) {
  const id = req.body.id;
  const delSql = `DELETE FROM tets2 where id=${id}`; //數據庫代碼，tets2表中刪除id為傳入值的那一行。

  connection.query(delSql, function (err, result) {
    if (err) {
      console.log('[UPDATE ERROR] - ', err.message);
      return;
    }
    res.json(result);//數據返回結果
  });
});

// 改
app.post('/edit', function (req, res, next) {
  const id = req.body.id;
  const name = req.body.name;
  const email = req.body.email;

  const modSqlParams = [name, email, id];
  // MySQL語法，這句意思為改數據 UPDATE 表示更改，tets2表示更改的數據表 SET  name= ?,email = ? 表示更改name 和 email字段，WHERE Id = ? 表示更改條件 
  const modSql = 'UPDATE tets2 SET  name= ?,email = ? WHERE Id = ?';

  connection.query(modSql, modSqlParams, function (err, result) {
    if (err) {
      console.log('[UPDATE ERROR] - ', err.message);
      return;
    }
    res.json(result);//數據返回結果
  });

});



// 查
app.get('/list', (req, res) => {
  // MySQL語法，這句意思為查詢 SELECT * FROM表示查詢，tets2表示查詢的數據表
  const showSql = 'SELECT * FROM tets2'

  connection.query(showSql, function (err, result) {
    if (err) {  // 操作失敗報錯
      console.log('[SELECT ERROR]:', err.message);
    }
    res.send(result)

  });
})