使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程

首先,我们需要知道一个概念,mysql是一个关系型数据库管理系统,我们需要下载相应的图形化(GUI)界面去操作它,例如:phpMyAdmin、Navicat for MySql等等许多数据库IDE

那现在我们开始从头开始搭建node.js+mysql开发接口的步骤吧:

一、下载并安装node.js及其环境变量,网上有很多教程,这里不多做赘述了

二、在vscode里新建一个项目learn-node,并执行npm i express --save 下载express框架(实现node的基础框架),

其余的文件如下图所示(test.js和index.js忽略,这是我的测试文件,o( ̄ヘ ̄o#)懒得删了):

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第1张图片

三、在server.js文件中写入以下代码:

var mysql = require('mysql')

var connection = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '123', // 密码填写你们自己的
	port: '3306',
	database: 'testnode', // 填写你们自己的数据库名称
})

connection.connect()

// var sql = 'SELECT * FROM user'
// //查
// connection.query(sql, function(err, result) {
// 	if (err) {
// 		console.log('[SELECT ERROR] - ', err.message)
// 		return
// 	}

// 	console.log('--------------------------SELECT----------------------------')
// 	console.log(result)
// 	console.log('------------------------------------------------------------\n\n')
// })

// connection.end()

var addSql = 'INSERT INTO user(Id,name,phone,address,gender) VALUES(0,?,?,?,?)'
var addSqlParams = ['王思聪', '1865656565', '北京万达广场', '男']
//增
connection.query(addSql, addSqlParams, function(err, result) {
	if (err) {
		console.log('[INSERT ERROR] - ', err.message)
		return
	}

	console.log('--------------------------INSERT----------------------------')
	//console.log('INSERT ID:',result.insertId);
	console.log('INSERT ID:', result)
	console.log('-----------------------------------------------------------------\n\n')
})

connection.end()

// var modSql = 'UPDATE user SET name = ?,gender = ? WHERE Id = ?'
// var modSqlParams = ['高圆圆', '女', 1]
// //改
// connection.query(modSql, modSqlParams, function(err, result) {
// 	if (err) {
// 		console.log('[UPDATE ERROR] - ', err.message)
// 		return
// 	}
// 	console.log('--------------------------UPDATE----------------------------')
// 	console.log('UPDATE affectedRows', result.affectedRows)
// 	console.log('-----------------------------------------------------------------\n\n')
// })

// connection.end()

// var delSql = 'DELETE FROM websites where id=2'
// //删
// connection.query(delSql, function(err, result) {
// 	if (err) {
// 		console.log('[DELETE ERROR] - ', err.message)
// 		return
// 	}

// 	console.log('--------------------------DELETE----------------------------')
// 	console.log('DELETE affectedRows', result.affectedRows)
// 	console.log('-----------------------------------------------------------------\n\n')
// })

// connection.end()

 四、下载、安装mysql,分两种方式:

(1)下载下来的是.msi的安装包,那就直接双击安装然后下一步...,安装完毕后,如果是windows系统,在开始-->所有程序里找到mysql(名字不是这个,名字是同你安装包一致的)文件夹-->点开文件夹-->启动mysql服务

(2)下载下来的是一个文件夹,这个时候就需要自己配置一些东西了,具体步骤参考https://blog.csdn.net/hzxOnlineOk/article/details/89637111

五、以Navicat for MySql为例,下载并安装它,之后如下图所示:

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第2张图片

连接的内容填写如下(密码是在mysqld --install成功后,系统会提供给你一个初始密码,下图红框中的localhost的值就是初始密码,最好自行修改,如有疑惑,请参照上边的链接到另外一篇文章里查看具体细节): 

mysqld安装

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第3张图片

新建连接 

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第4张图片

新建数据库testnode 

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第5张图片 新建表user,字段如下图所示

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第6张图片

 也可以参照https://www.runoob.com/nodejs/nodejs-mysql.html的做法

六、在vscode终端命令行中(注意,路径要对,我的例子中,是放在learn-node根目录下),输入node server(使用node命令执行server.js文件),出现如下图的输出,就算成功插入一条数据了,可以在Navicat for MySql中刷新表user查看:

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第7张图片

切换到Navicat for MySql查看数据库变化 

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第8张图片

七、有了以上的步骤,已经确认数据库成功连接Node了,现在,我们开始写一个node风格的接口demo,以vue为例子,我们需要重新建立一个项目,之前的那个只是简单的测试

(1)下载vue,安装vue2脚手架

(2)下载node_modules包(框架默认自带,不过保险起见,自己确认下有没有)

(3)修改vue自带的HelloWorld.vue组件






使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第9张图片

(4)项目根目录下新增server.js文件 

var http = require('http')
var mysql = require('mysql')

var connection = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '123',
	database: 'testnode',
})
//开始你的mysql连接
connection.connect()

var server = http.createServer(function(req, res) {
	res.setHeader("Access-Control-Allow-Origin", "*"); 
	//如果你发一个GET到http://127.0.0.1:9000/test
	var url_info = require('url').parse(req.url, true)
	//检查是不是给/test的request
	if (url_info.pathname === '/test') {
		res.writeHead(200, { 'Content-Type': 'text/plain;charset=utf-8' })

		connection.query('SELECT * FROM user order by rand()  LIMIT 5', function(err, rows, fields) {
			//处理你的结果
			// res.end(rows.constructor);
			// 输出结果
			res.end(JSON.stringify(rows))

			console.log(rows.constructor)
			console.log(typeof rows)
			res.end(rows.join)
			console.log(err)
			console.log(fields)
		})
	}
	//这个是用来回复上面那个post的,显示post的数据以表示成功了。你要是有别的目标,自然不需要这一段。
	else {
		req.pipe(res)
	}
})
server.listen(9000, '127.0.0.1')
//在server关闭的时候也关闭mysql连接
server.on('close', function() {
	connection.end()
})
console.log('listening on port  9000')

也可以这么写:

var express = require("express");
var app = express();
var hostName = '127.0.0.1';
var port = 9000;

var mysql = require('mysql')
var connection = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '123',
	database: 'testnode',
})
//开始你的mysql连接
connection.connect()

app.all('*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1')  
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});

app.get("/test",function(req,res) {
    console.log("请求url:",req.path)
	console.log("请求参数:",req.query)
	connection.query('SELECT * FROM user order by rand()  LIMIT 5', function(err, rows, fields) {
		res.send(JSON.stringify(rows));
	})
    
})

app.listen(port,hostName,function(){
   console.log(`服务器运行在http://${hostName}:${port}`);
});

 

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第10张图片

(5)执行npm run dev 打开页面

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第11张图片

八、准备工作都做好了,现在开始在终端命令行窗口执行node server(或者node server.js) 

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第12张图片

 

我的数据库user表数据是这样的:

使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程_第13张图片

OK,到此,实现了node+mysql+vue实现简单接口 

你可能感兴趣的:(前端开发)