第一步:在本地环境安装MySQL
Mac 安装 MySQL整体流程:
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/
操作教程
注意事项:创建新的数据表时,要选择编码格式为utf8,否则写入的中文会变成?? 乱码
第三步:对数据库进行增删改查,使用express框架
基本流程参考:
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),参考链接
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)
});
})