Node服务端渲染+处理文件+操作mysql数据库（纯前端）
前段时间写了一篇简单的项目Node环境搭建，对路由和文件的处理，今天给大家带来的是，原生Node端渲染+处理文件+操作mysql，一个简单的小全栈demo。
原生 node + mysql + 模板引擎art-template ，服务端处理文件渲染，数据库增删demo
github demo地址链接：https://github.com/babybrotherzb/node-mysql
一、本地需要准备的东西
- 1.本地Node环境
- 2.数据库，我用的是phpStudy自带的mysql哪个都行
- 3.创建一个test的数据库，目录下建一个first的表,四个字段（Id, name, message ,date）
- 4.开启数据库
- 5.初始化项目npm init，配置好依赖包package.json，npm install 安装依赖包
{
"name": "node_test",
"version": "0.0.0",
"description": "node",
"author": "@baby张 " ,
"address": "https://github.com/babybrotherzb",
"csdn":"https://blog.csdn.net/weixin_43648947",
"main": "index.js",
"scripts": {
"dev": "node index.js",
"nodemon": "nodemon index.js"
},
"keywords": [],
"devDependencies": {
"art-template": "^4.13.2",
"nodemon": "^1.18.10"
},
"dependencies": {
"mysql": "^2.17.1"
}
}
- 6.创建项目node服务器index.js
const http = require("http"); //加载http核心模块
const allurl = require("url"); //获取请求url
http.createServer(function (req, res) { //创建web服务器,接受客户端请求
let parseObj = allurl.parse(req.url, true);// url.parse 参数转成对象 true
let url = parseObj.pathname;//单独获取？前面的url参数路径
if (url === "/") {
res.end(
{code:200,
message:'成功',
data:{
total:10,
list:[]}
});
} else if (url === "/list") {
res.end(url);
}else{
res.end(url);
}
console.log('接受客户端请求')
res.end()
}).listen(3000,function(){ //绑定端口，监听启动服务
console.log(`web服务器 3000已经启动`)
})
- 7.运行项目 npm run dev 或者 npm run nodemon
二、art-template模板引擎的使用
目录：index.js
let http = require("http");
let allurl = require("url");
let fs = require("fs"); // 引入文件核心模块
let path = require("path"); //引入路径核心模块
let template = require("art-template"); //模板引擎
let views = path.join(__dirname, "views"); //获取views路径
http
.createServer(function(req, res) {
// url.parse 参数转成对象 true
let parseObj = allurl.parse(req.url, true);
//单独获取？前面的url参数路径
let url = parseObj.pathname;
if (url === "/") {
//单独的读取文件，返回到客户端
fs.readFile(path.join(views, "view.html"), function(err, data) {
if (err) {
return res.end("找不到渲染文件");
}
res.end(data.toString());
});
} else if (url === "/list") {
fs.readFile(path.join(views, "template.html"), function(err, data) {
if (err) {
res.end("读取template文件失败");
}
//需要模板引擎渲染的使用template.render，并传参
let htmlstr = template.render(data.toString(), {
header: "评论日志",
title: "list",
files: [
{Id:1,name:11,message:'第一个','2019-1-16'},
{Id:2,name:2,message:'第2个','2019-1-16'}
]
})
res.end(htmlstr);
});
}else {
return res.end("not found 404");
}
})
.listen(3333, function() {
console.log(views, `node is runing...${3333}`);
})
模板引擎还是用的html格式，变量和遍历过程稍微有点不同。
注意link 和 script 引入的链接地址，需要在node里将资源暴露出来，或者写接口引出
更多art-template用法地址：http://aui.github.io/art-template/docs/api.html
目录：views/template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="shortcut icon" href="./public/favicon.ico"></link>
//注意link 和 script 引入的链接地址，需要在node里将资源暴露出来，或者写接口引出
<link rel='stylesheet' type='text/css' href="./public/main.css"></link>
</head>
<body>
<a href="/post"><button class="top-button">我要留言</button></a>
<h2>{{header}}</h2>
{{each files}}
<div class="box">
<p title={{$value.message}}>{{$value.name}}说：{{$value.message}}</p>
<p>{{$value.date}}</p>
<button class="delet"><a href="/delete?Id=<%= $value.Id%>">Delete</a></button>
</div>
{{/each}}
</body>
</html>
<script src="./public/main.js"></script>
三、使用mysql包，链接数据库写sql语句
更多sql语句链接：https://www.runoob.com/nodejs/nodejs-mysql.html
let http = require("http");
let allurl = require("url");
let fs = require("fs"); // 引入文件核心模块
let path = require("path"); //引入路径核心模块
let template = require("art-template"); //模板引擎
let views = path.join(__dirname, "views"); //获取views路径
let mysql = require('mysql'); //引入mysql
const connection = mysql.createConnection({ //连接数据库
host : 'localhost',
user : 'root', //本地 mysql 用户名
password: 'root', //本地 mysql 密码
database: 'test' //本地 mysql 名称
});
function handleDisconnect(){
connection.connect(function (err) {
// callback(err,result);
if(err){
console.log(err);
console.log("try to connect");
setTimeout(handleDisconnect,1000); //链接失败经过1秒后尝试重新连接
return;
}
console.log("Success");
});
}
handleDisconnect();
http
.createServer(function(req, res) {
// url.parse 参数转成对象 true
let parseObj = allurl.parse(req.url, true);
//单独获取？前面的url参数路径
let url = parseObj.pathname;
if (url === "/") {
//正常的文件读取
fs.readFile(path.join(views, "view.html"), function(err, data) {
if (err) {
return res.end("找不到渲染文件");
}
res.end(data.toString());
});
} else if (url === "/list") {
fs.readFile(path.join(views, "template.html"), function(err, data) {
if (err) {
res.end("读取template文件失败");
}
//查询数据库first表
let select = 'select * from first'
connection.query(select, function(err, rows){
if(err){
console.log("Query select ERROR!");
}
console.log(rows,'rows111111111111111111111111');
//模板引擎渲染，传参
let htmlstr = template.render(data.toString(), {
header: "评论日志",
title: "list",
files: rows
});
res.end(htmlstr);
});
// });
});
} else {
return res.end("not found 404");
}
})
.listen(3333, function() {
console.log(views, `node is runing...${3333}`);
});
四、注意点
1.本地数据库一定要开启
2.模板引擎中link和script标签中的链接路径，是否开放出来
<link rel="shortcut icon" href="./public/favicon.ico"></link>
<link rel='stylesheet' type='text/css' href="./public/main.css"></link>
<script src="./public/main.js"></script>
链接路径都是走的get请求，所以要在node中将public文件夹暴露出来，否则找不到文件
http
.createServer(function(req, res) {
let parseObj = allurl.parse(req.url, true);
let url = parseObj.pathname;
if (url === "/") {
fs.readFile(path.join(views, "view.html"), function(err, data) {
if (err) {
return res.end("找不到渲染文件");
}
res.end(data.toString());
});
//加的就是这个判断，当静态资源public的请求来时，读取对应的文件并返回
} else if (url.indexOf("/public/") === 0) {
fs.readFile(path.join(__dirname, "views", url), function(err, data) {
if (err) {
return res.end("找不到public渲染文件");
}
res.end(data.toString());
});
} else {
return res.end("not found 404");
}
})
.listen(3333, function() {
console.log(views, `node is runing...${3333}`);
});
3.读取的所有的模板文件要用toString()转一下，要不会出现编码问题
fs.readFile(path.join(views, "view.html"), function(err, data) {
if (err) {
return res.end("找不到渲染文件");
}
//用toString()转一下
res.end(data.toString());
});
4.post请求的数据，需求单独处理
5.模板引擎不能用，删除node_modules重新install安装依赖包
github地址
demo地址链接：https://github.com/babybrotherzb/node-mysql