搭建 linux + nginx + node + vue3 + mysql 个人博客 - 后台服务篇（三）

最新推荐文章于 2024-05-30 11:14:35 发布
最新推荐文章于 2024-05-30 11:14:35 发布
阅读量84 收藏
点赞数
分类专栏： 博客开发 文章标签： mysql javascript 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47610038/article/details/131111997
版权

前言

上一篇文章中，使用 node + koa2 + koa-router ，编辑了一个简单的接口，后台服务中肯定是少不了对数据库的操作，增删改查啥的，这篇文章主要是介绍，如何使用 node 连接并操作 mysql 数据库

步骤

  1. yarn add mysql 安装 mysql

    	yarn add mysql

    在这里插入图片描述

    • 使用 npm 也可以 npm install mysql

  2. server 目录下新建 config 文件夹并新建 default.js 文件，插入下列内容

    	const config = {
	// 启动端口
	port: 3800,
	// 数据库配置
	mysqlConfig: {
		HOST: "localhost", // 地址
		PORT: "3306", // 端口
		DATABASE: "test", // 数据库名
		USERNAME: "root", // 用户名
		PASSWORD: "root123", // 密码
		},
	};
	
	module.exports = config;

    在这里插入图片描述

  3. server 目录下新建 lib 文件夹并新建 db.js 文件，插入下列内容

    var mysql = require("mysql");
var config = require("../config/default.js");

// 创建连接池
var pool = mysql.createPool({
	host: config.mysqlConfig.HOST, // 地址
	port: config.mysqlConfig.PORT, // 端口
	database: config.mysqlConfig.DATABASE, // 数据库名
	user: config.mysqlConfig.USERNAME, // 用户名
	password: config.mysqlConfig.PASSWORD, // 密码
});

exports.query = (sql, values) => {
	return new Promise((resolve, reject) => {
		// 获取连接
		pool.getConnection((err, connection) => {
			if (err) {
				reject(err);
			} else {
				// 使用连接执行查询
				connection.query(sql, values, (err, rows) => {
					if (err) {
						reject(err);
					} else {
						resolve(rows);
					}
					//连接不再使用，返回到连接池，释放当前连接
					connection.release();
				});
			}
		});
	});
};

    在这里插入图片描述

  4. lib 目录下新建 initMysql.js 文件，插入下列内容

    var { query } = require("./db.js");

let tables = [
	{
		name: "test",
		grammar: `create table if not exists test(
		id int primary key auto_increment,
		name VARCHAR(255) NOT NULL COMMENT '用户名',
		password VARCHAR(255) NOT NULL COMMENT '密码'
		);`,
	},
{
		name: "test2",
		grammar: `create table if not exists test2(
		id int primary key auto_increment,
		name VARCHAR(255) NOT NULL COMMENT '用户名',
		password VARCHAR(255) NOT NULL COMMENT '密码'
		);`,
	},
];

// 循环遍历，创建表
for (let index = 0; index < tables.length; index++) {
	const element = tables[index];
	// 判断表是否存在
	query(`SHOW CREATE TABLE ${element.name}`, [])
	.then((res) => {
		return false;
	})
	.catch((err) => {
		if (err.code == "ER_NO_SUCH_TABLE") {
			query(element.grammar, []);
		}
	});
}

    在这里插入图片描述

    • 具体内容根据个人需求做修改

  5. node 运行 initMysql.js 文件初始化数据库

    	node .\lib\initMysql.js

    在这里插入图片描述

  6. 查看数据库 test 新增表 test、test2 成功
    在这里插入图片描述

  7. 查看表的字段，与初始化的数据无误
    在这里插入图片描述

  8. lib 目录下新建 sql.js 文件，插入下列内容

    var { query } = require("./db.js");

// 创建数据
exports.test_insert = (value) => {
	let _sql = `INSERT INTO test SET name=?,password=?;`;
	return query(_sql, value);
};

// 查询数据
exports.test_find = () => {
	let _sql = `SELECT * FROM test;`;
	return query(_sql);
};

// 修改数据
exports.test_update = (value, id) => {
	let _sql = `UPDATE test SET name=?,password=? WHERE id=${id};`;
	return query(_sql, value);
};

// 删除数据
exports.test_delete = (id) => {
	let _sql = `DELETE FROM test WHERE id="${id}";`;
	return query(_sql);
};

    在这里插入图片描述

    • 具体内容根据个人需求做修改

  9. server 目录下新建 utils 文件夹并新建 index.js 文件，插入下列内容

    	/**
* @name isEmpty
* @description 判空
* @param val
* @return Boolean
*/
exports.isEmpty = (val) => {
	let flg = true;
	let type = Object.prototype.toString.call(val);
	switch (type) {
		case "[object String]":
			if (val.trim() === "") {
				flg = false;
			}
			break;
		case "[object Number]":
			if (val === 0 || val) {
				flg = true;
			}
			break;
		default:
			if (!val) {
				flg = false;
			}
			break;
	}
};

    在这里插入图片描述

  10. 修改 c-test.js 文件，插入下列内容

    	const userModel = require("../lib/sql.js");
	const utils = require("../utils");

	// 新增数据
	exports.postTest = async (ctx) => {
	let { name, password } = ctx.query;
	let returnData = {
		code: null,
		message: "",
	};
	// 判断是否空
	if (utils.isEmpty(name) || utils.isEmpty(password)) {
		returnData = {
			code: 500,
			message: "请检查必填字段！",
		};
	} else {
		await userModel
			.test_insert([name, password])
			.then(() => {
				returnData = {
					code: 200,
					message: "插入数据成功！",
				};
			})
			.catch((err) => {
				returnData = {
					code: 500,
					err,
					message: "插入数据失败！",
				};
			});
	}
	ctx.body = returnData;
};

// 查询数据
exports.getTest = async (ctx) => {
	let returnData = {
		code: null,
		message: "",
	};
	await userModel
		.test_find()
		.then((res) => {
			returnData = {
				code: 200,
					res: {
						data: res,
					},
				message: "成功！",
			};
		})
		.catch((err) => {
			returnData = {
				code: 500,
				err,
				message: "失败！",
			};
		});
	ctx.body = returnData;
};

// 修改数据
exports.updateTest = async (ctx) => {
	let { name, password, id } = ctx.query;
	let returnData = {
		code: null,
		message: "",
	};
	// 判断是否空
	if (utils.isEmpty(name) || utils.isEmpty(password) || utils.isEmpty(id)) {
		returnData = {
			code: 500,
			message: "请检查必填字段！",
		};
	} else {
		await userModel
			.test_update([name, password], id)
			.then(() => {
				returnData = {
					code: 200,
					message: "修改数据成功！",
				};
			})
			.catch((err) => {
				returnData = {
					code: 500,
					err,
					message: "修改数据失败！",
				};
			});
		}
	ctx.body = returnData;
};
// 删除数据
exports.deleteTest = async (ctx) => {
	let { id } = ctx.query;
	let returnData = {
		code: null,
		message: "",
	};
	// 判断是否空
	if (utils.isEmpty(id)) {
		returnData = {
			code: 500,
			message: "请检查必填字段！",
		};
	} else {
		await userModel
			.test_delete(id)
			.then(() => {
				returnData = {
					code: 200,
					message: "删除数据成功！",
				};
			})
			.catch((err) => {
				returnData = {
					code: 500,
					err,
					message: "删除数据失败！",
				};
			});
		}
	ctx.body = returnData;
};

    在这里插入图片描述

  11. 修改 r-test.js 文件，插入下列内容

    	const router = require("koa-router")();
	const controller = require("../controller/c-test");
	
	router.post("/test/post", controller.postTest);
	router.get("/test/get", controller.getTest);
	router.put("/test/update", controller.updateTest);
	router.delete("/test/delete", controller.deleteTest);
	
	module.exports = router;

    在这里插入图片描述

  12. 测试新增接口
    在这里插入图片描述

  13. 查看数据库，新增成功
    在这里插入图片描述

  14. 测试查询接口，查询数据成功
    在这里插入图片描述

  15. 测试修改接口
    在这里插入图片描述

  16. 查看数据库，修改成功
    在这里插入图片描述

  17. 测试删除接口
    在这里插入图片描述

  18. 查看数据库，删除成功
    在这里插入图片描述

到此 node 连接并操作 mysql 数据库 教程结束

哦呀ooo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Linux部署nginx发布vue项目
lalunr的博客
10-07 1844
Linux部署nginx发布vue项目
ExpressNuxtMysqlNginxBlog:Express+Vue+SSR+Mysql+Nginx写的博客网站
05-30
1项目使用Express+mysql+nuxt+nginx写的一个项目。nuxt用于实现服务端渲染。nginx做代理服务器对静态资源代理 2项目环境是node的8.5。 3详情页使用markdown语法，使用ejs模板来渲染。兼容移动端和桌面端 4项目线上...
Linux 上利用Nginx 部署vue项目
小懒魔王的博客
11-28 2842
首先利用 npm run build 将vue项目打包为dist文件 在服务器上安装nginx 可参考在Linux服务器上Nginx部署vue静态项目_chi1130的博客-CSDN博客 然后在nginx.conf文件中修改信息。 下方列出信息项 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.l
Linux 环境下部署 VUE 前端项目
最新发布
EvoGenius的博客
05-30 1640
在发起请求过程中，对于url中以'/api'开头的请求，首先会将/api重写为空字符串，然后将vue.config.js文件中'/api'对应的target目标地址连接到请求头部，即若请求url为“ /api/management/login”，则实际会将请求发送到。当在前端vue项目中需要调取受同源策略保护的Web API时，即发生所谓跨域请求，此时发送不成功，一般可以采用ajax的jsonp发起跨域请求，而对于vue项目的axios不支持jsonp请求。文件夹，即为需要上传到服务器上的文件夹。
linux环境， nginx 部署 vue
GY的的专栏
05-31 1907
在 Linux 环境下部署 Vue.js 应用，可以使用 Nginx 作为 Web 服务器。# 修改为 Vue.js 应用的打包目录。# 修改为你的域名或 IP 地址。打包完成后，会在项目根目录下生成一个 `dist` 目录，里面包含了打包后的静态文件。现在，你可以通过浏览器访问你的域名或 IP 地址，就可以看到 Vue.js 应用了。4. 将打包后的文件复制到 Nginx 的根目录下。3. 打包 Vue.js 应用。5. 重启 Nginx。
linux 通过nginx 部署 vue
weixin_41145317的博客
04-03 171
环境 linux Coentos 7 1.Linux 安装nginx https://www.cnblogs.com/cl-rr/p/11447231.html 配置外网访问 执行以下代码 （1.firewall-cmd --add-port=/tcp --permanent netstat -ntlp（查看端口） （2.firewall-cmd --add-port=/tcp（将端口暴露在外网）...
linux下使用nginx部署vue项目
Baldprogrammer的博客
04-29 285
#yml安装nginx sudo yum -y install nginx #配置nginx------------------------------------------------------------------------------- vim /etc/nginx/nginx.conf server { listen 80; #nginx代理的端口 server_name localhost; #当前ip地址
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤包括配置Nginx代理、使用PM2管理和启动Node服务以及确保正确处理跨域请求。以下是对这些知识点的详细说明： 1. **Nginx代理**： - Nginx是一个高性能的HTTP和反向代理服务器...
毕业设计，node+vue的博客前后台管理系统.zip
01-01
这是一个基于Node.js和Vue.js的毕业设计项目，构建了一个完整的博客前后台管理系统。这个系统集成了后端服务器处理和前端用户界面，为用户提供发布、管理博客文章的功能。下面将详细介绍这个项目的相关知识点。 1. ...
基于SpringBoot+Mybatis+Nginx+Redis+RocketMQ+MySQL+Zookeeper的秒杀系统
05-26
该项目利用了基于springboot + vue + mysql的开发...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
DLHTX-blog:基于vue + nodejs构建的个人博客系统
03-11
DLHTX演示＆简介DLHTX是一种基于vue和nodejs的个人独立博客系统。写博客无需在后台写，只要登录博客就可以直接写博客后台api主要功能：文章，页面，分类目录，分类的添加，删除等。文章及页面支持Markdown ，支持...
项目部署 – Linux（ springboot + vue + nginx）
01-09
一、后台项目（Springboot） 1.项目打成jar包 在项目target目录里会有打包的jar 2.启动后台运行jar 注意： 若无nohup 命令 yum install coreutils nohup java -jar 你的jar包名称.jar & 二、前端工程 1.点击此按钮进行打包 丢到服务器上去 三、配置nginx 前端工程 和后台api接口转发 server { listen 80; server_name 你自己的IP; #前端页面 location / { #Linux上
Linux下nginx部署vue项目
u010679782的博客
12-29 2061
写在开始:一个搬砖程序员的随缘记录 文章目录一、Nginx安装二、vue项目配置 一、Nginx安装 两种方式 1、下载nginx，然后移动到/usr/local 下 nginx下载地址：https://nginx.org/download/ 2、yum下载 安装依赖包 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 下载并解压安装包 cd /usr/local mkdir nginx cd nginx //下载ta
linux环境nginx部署vue项目
凯哥Java的博客
12-27 293
先将vue打包 上传到服务器随意目录下，进入到你上传的那个目录下 解压 unzip dist.zip （或者直接解压后再上传） 如果提示命令未找到 可能是没有安装unzip 安装unzip zip：yum install -y unzip zip 我的路径： 配置nginx conf下的nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice
Linux系统中在Nginx上部署vue项目
lululu_的博客
06-20 604
linux系统中在nginx上部署vue项目
Linux学习：使用nginx部署vue
m0_60527552的博客
09-10 112
首先你要确定你的Ubuntu是否安装了nginx ps-ef | grep nginx 若未安装则需要输入以下代码安装一下 sudo apt install nginx 之后需要将windows中的项目传输到Ubuntu中，有两种办法第一种是：打开项目所在位置输入cmd打开windows的黑窗口，如图我们需要传输font文件时 输入cmd,回车弹出黑窗口，scp远程传输格式： scp FileName RemoteUserName@RemoteHostIp:RemoteFile 例：scp front
Linux入门（七） ~ Nginx部署Vue项目，小白也能看明白
m0_74918915的博客
04-04 1065
4、安装相关的依赖工具5、配置6、编译和安装如果/usr/local下出现nginx目录，表示安装成功7、使用启动./nginx其他命令./nginx -s stop 停止./nginx -s quit 退出./nginx -s reload 重启8、打开80端口firewall-cmd --zone=public --add-port=80/tcp --permanent （–permanent永久生效，没有此参数重启后失效）重新载入或者关防火墙。
2024，了解云原生技术栈收藏这一篇就够了（附学习笔记）
2301_79054215的博客
04-26 422
本人现在工作中负责云原生服务管理平台的研发（主要管理各类云原生基础设施，平台服务和第三方托管应用），但即便如此，常被问起云原生是什么时，我也很难简洁的向人表述清楚，导致自我也经常问一遍，云原生究竟是什么，我又在做什么。
linux 安装 nginx 以及部署 vue 到服务器
weixin_42040328的博客
11-14 1770
linux 安装 nginx 并部署vue
vue3+springboot 从零搭建后台管理系统
07-23
以上是使用Vue3和Spring Boot搭建后台管理系统的一般步骤，具体的实施过程可能因项目需求和个人偏好而有所不同。在开始搭建项目之前，建议先了解Vue3和Spring Boot的基本知识，并参考官方文档和教程，以帮助顺利完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值