使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程 |
您所在的位置：网站首页 › vscode怎么创建mysql表 › 使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程 |
使用vscode 搭建node.js 和 mysql 实现一个简单接口的增删改查 教程
|
首先，我们需要知道一个概念，mysql是一个关系型数据库管理系统，我们需要下载相应的图形化（GUI）界面去操作它，例如：phpMyAdmin、Navicat for MySql等等许多数据库IDE 我常用的免费MySQL图形化管理工具Navicat虽然好用，但是需要花钱（有破解版本），如果不想破解，就只能考虑别的免费工具了。下面谈谈我常用的免费MySQL管理工具。
PhpMyAdmin很好用，web版，不需要在电脑上安装客户端，缺点是语法不高亮。
另外一个也可以使用Dbeaver，有免费的社区版，很好用，升级比较频繁，基本上可以替代navicat，不过没有navicat好用。
那现在我们开始从头开始搭建node.js+mysql开发接口的步骤吧： 一、下载并安装node.js及其环境变量，网上有很多教程，这里不多做赘述了 二、在vscode里新建一个项目learn-node，并执行npm i express --save 下载express框架（实现node的基础框架）， 其余的文件如下图所示（test.js和index.js忽略，这是我的测试文件，o(￣ヘ￣o＃)懒得删了）：
三、在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为例，下载并安装它，之后如下图所示：
连接的内容填写如下（密码是在mysqld --install成功后，系统会提供给你一个初始密码，下图红框中的localhost的值就是初始密码，最好自行修改，如有疑惑，请参照上边的链接到另外一篇文章里查看具体细节）： mysqld安装
新建连接
新建数据库testnode
也可以参照https://www.runoob.com/nodejs/nodejs-mysql.html的做法 六、在vscode终端命令行中（注意，路径要对，我的例子中，是放在learn-node根目录下），输入node server（使用node命令执行server.js文件），出现如下图的输出，就算成功插入一条数据了，可以在Navicat for MySql中刷新表user查看：
切换到Navicat for MySql查看数据库变化
七、有了以上的步骤，已经确认数据库成功连接Node了，现在，我们开始写一个node风格的接口demo，以vue为例子，我们需要重新建立一个项目，之前的那个只是简单的测试 （1）下载vue，安装vue2脚手架 （2）下载node_modules包（框架默认自带，不过保险起见，自己确认下有没有） （3）修改vue自带的HelloWorld.vue组件 点击我，调用接口 import axios from 'axios' export default { name: 'HelloWorld', data () { return { info: 'Welcome to Your Vue.js App' } }, methods: { getInfo () { axios.get('http://127.0.0.1:9000/test').then((response) => { console.log(response) }).catch((err) => { console.log(err) }) } } }
（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}`); });
（5）执行npm run dev 打开页面
八、准备工作都做好了，现在开始在终端命令行窗口执行node server(或者node server.js)
我的数据库user表数据是这样的：
OK，到此，实现了node+mysql+vue实现简单接口 |
新建表user，字段如下图所示
【本文地址】
今日新闻 |
推荐新闻 |