后台 nodejs + mysql 配合 前端 搭建写一份案例系统 并打包成桌面可执行.exe程序

尝试过 java 与 python 等的后台之后 ,发现还是nodejs香啊 全由JavaScript进行写前端加后台就完事了，话不多说我们直接开始吧

先安装mysql数据库，直接官网下载就行

 官网地址在此https://dev.mysql.com/downloads/mysql/

SQL(Structured Query Language)：即结构化查询语言，是在关系型数据库（诸如Mysql、SQL Server、Oracle等）里进行相关操作的标准化语言，可以根据sql的作用分为以下几种类型：

DDL(Data Definition Language): 数据定义语言
DML(Data Manipulation Language): 数据操纵语言
TCL(Transaction Control Language): 事务控制语言
DQL(Data Query Language): 数据查询语言
DCL(Data Control Language): 数据控制语言

安装node环境 我用的是v14.17.0 记得安装的时候点击一下自动配置环境变量不然需要手动配置

下载 | Node.js 中文网http://nodejs.cn/download/nodejs环境和数据库环境配置完毕之后我们开始建立前端跟后台项目吧

/*后台项目*/

npm init 创建项目
npm install express 安装express框架
npm install mysql 安装mysql数据库
npm install jsonwebtoken  安装令牌token
npm install bcryptjs 安装加密解密的bcryptjs
npm install nodemon 安装热重启的nodemon//实时监听node修改的代码，并重启
启动nodemon：nodemon [your node app]
npm install body-parser 安装body-parser是一个http请求体中间件，处理json，raw，URL-encoded格式请求体等

简单的介绍一部分实用工具，然后我们开始项目代码进行编写

// 引入 express 和 mysql 
const express = require('express')
const mysql = require('mysql');
const bodyParser=require('body-parser');// 跟数据库建立一个单独的链接并保持链接 
// 真正项目开发需要建立连接池参考mysql.createPool函数 顺便贴一下连接池写法
const connection = mysql.createConnection({host: '', //数据库链接user: '', //数据库用户名password: '', //数据库密码database: ''  //数据库名称
});
connection.connect();//建立链接const app = express()
app.use(bodyParser.json()); // 用于解析应用程序/json
app.use(bodyParser.urlencoded({ extended: true })); // 用于解析应用程序/x-www-form-urlencoded
app.all("*", function (req, res, next) {// res.setHeader("Access-Control-Allow-Origin", "*");//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin", "*");//允许的header类型res.header("Access-Contro1-Allow-Headers", "content-type");//跨域允许的请求方式res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");if (req.method.toLowerCase() == 'options ')res.send(200);//让options尝试请求快速结束elsenext();
})

 数据库连接池 仅供参考

//创建连接池 createPool方法
var pool = mysql.createPool(optioins);
//从连接池中取出连接。getConnection方法。。
pool.getConnection(function(err,connection))
//回调函数中的err为错误信息，connection为获取到的连接对象。
//当连接不再使用时，用release函数将其归还到连接池中。
connection.release();
//当一个连接不再需要使用且需要从连接池中移除时，用destroy函数。
connection.destroy(); 
//当一个连接池不再需要使用时，用end关闭连接池。
pool.end();//使用案例
var pool = mysql.createPool({host: "localhost",database: "pyh",user: "root",password: "root",connectionLimit: 50, //连接池中最大的连接数 （默认10）queueLimit: 3 //用于指定允许挂起的最大连接数，超过了会报错。
});pool.getConnection(function(err, connection) {if(err){console.log("与mysql数据库建立连接失败:" + err);} else {console.log("与mysql数据库建立连接成功");connection.query("select * from book", (err, data) => {if (err) {console.log("查询失败:" + err);return}//对查询的结果进行操作。console.log(data);//释放连接 归还连接connection.release();//用连接池对象的end方法关闭连接池//pool.end();})
})

此时我们的可以进行写DML DQL sql语句对数据库表进行增删改查

//查询
app.get('/getAio', function (req, res) {connection.query("SELECT * FROM `n_test`.`aio` LIMIT 0,1000", function (error, results, fields) {if (error) throw error;res.send(results)});
})
//删除
app.post("/deleteAio", function (req, res) {connection.query( "DELETE FROM `n_test`.`aio` WHERE `id` = "+req.body.id, function (error, results, fields) {if (error) throw error;res.send(results)});
})
//增 请求体参数跟删除一样获取并填入sql字段里面 修改也同样利用req.body拿到请求体数据进行填充
app.post("/addAio", function (req, res) {connection.query( "INSERT INTO `n_test`.`aio`(`name`, `type`, `state`, `workingTime`, `switch`, `model\n" +"\n" +"Type`, `agreement`, `port`, `serialNumber`) VALUES ('1', '1', '1', 1, 1, '1', '1', '1', '1')", function (error, results, fields) {if (error) throw error;res.send(results)});
})

然后我们写一个不被占用的端口就可以了 

const server = app.listen(5000, function () {const {address, port} = server.address()console.log('HTTP服务启动成功: http://localhost:%s', port)
})

然后我们再package.json 里面 scripts 添加这两项 文件名就写创建的js文件名称

 好了  一个简单的链接数据库操作的后台服务写好了 很简单，然后我们测一份接口 可以调用成功

 /*前端项目*/

前端这块就比较多了有的是vue，react，angular，原生，移动端等，虽然项目不一样但是调用接口都是一样的，简单封装一下fetch

对于conten-type，baseurl，proxy代理，接口超时，token验证状态，响应拦截器，状态码处理等这些封装需要自己处理这里就不贴出来，本来是演示一个简易的操作案例，如需要可以指导

const Authorization = opener?(opener["filter"]||{})["Authorization"]||'':''
const tenantId = opener?(opener["filter"]||{})["tenant-id"]||'':''
export default function (url:string,method:string = "get",body?:Array|Object) {let headers:{ Authorization: string; "tenant-id": string }={Authorization, "tenant-id": tenantId}return fetch(url, {headers,method}).then((response:Response)=>{if(response.status === 200){return response.json();}else{return {}}},(error)=>{return {}})
}

好了  比较适合初学者的前端+后台+数据库的一套案例以及完成了，有什么不懂的可以问我。

那么如何打包成桌面程序呢

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！