留言板1.0
完整留言板1.0资源
复制代码
// 需求:根据用户输入的地址,返回对应的页面
// 1- 搭建服务器
// 2- 根据不同的请求,返回对应的页面
const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime');
const server = http.createServer();
server.on('request', (req, res) => {
console.log('req.url:', req.url);
// 根据不同的req.url 返回不同的页面
if (req.url.startsWith('/index') || req.url == '/') {
//首页: 读取首页内容,返回给浏览器解析
fs.readFile(path.join(__dirname, 'pages/index.html'), (err, data) => {
if (err) {
return console.log(err);
}
res.end(data); // 返回给浏览器解析
})
} else if (req.url.startsWith('/add')) {
//添加页面
fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
if (err) {
return console.log(err);
}
res.end(data); // 返回给浏览器解析
})
} else if (req.url.startsWith('/assets')) { //静态资源
// 服务器之间读取对应文件,返回即可
fs.readFile(path.join(__dirname, req.url), (err, data) => {
if (err) {
return console.log(err);
}
// 给每个资源设置明确的mime类型
res.setHeader('content-type', mime.getType(req.url));
res.end(data);
})
} else {
res.end('404');
}
})
server.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));
留言板2.0
完整留言板2.0资源
复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器
2- 首页留言动态渲染
数据 + 模板
1- 读取数据库data.json中的数据
2- 配合模板引擎 进行渲染
3- 把生成好页面结构返回给浏览器解析
3- 删除留言
1- 获取前端传递id
2- 根据id去数据库中删除对应的 数据
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 从数组中删除
3- 删除完成后,在把数组 写回 data.json 中
3- 删除完成后,跳转到首页
4- 添加留言
1- 获取 前端提交表单数据
2- 把数据添加到数据库中
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 向数组中添加
3- 添加完成后,在把数组 写回 data.json 中
3- 添加完成后,跳转到首页
get
post
// 1-搭建服务器
const http = require('http');
const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');
const server = http.createServer();
const dataPath = path.join(__dirname, 'data/data.json');
server.on('request', (req, res) => {
console.log('req.url:', req.url);
// 路由功能
if (req.url.startsWith('/index') || req.url == '/') { //首页
// 1- 读取数据库data.json中的数据
// 2- 配合模板引擎 进行渲染
// 3- 把生成好页面结构返回给浏览器解析
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
return console.log(err);
}
// 获取到了数据
data = JSON.parse(data); //json-->js对象
console.log(data);
// 渲染
let str = template(path.join(__dirname, 'pages/index.html'), data);
// 返回给浏览器解析
res.end(str);
})
} else if (req.url.startsWith('/add')) { // add.html
// 直接读取 add页面返回即可
fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
if (err) {
return console.log(err);
}
res.end(data); //返回读取的页面
})
} else if (req.url.startsWith('/assets')) { //静态资源
// 直接读取静态资源返回即可
fs.readFile(path.join(__dirname, req.url), (err, data) => {
if (err) {
return console.log(err);
}
// 给返回资源设置明确的mime类型
res.setHeader('content-type', mime.getType(req.url));
// 返回读取数据
res.end(data);
})
} else if (req.url.startsWith('/delete')) { // 删除
// 1- 获取前端传递id
// 2- 根据id去数据库中删除对应的 数据
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 从数组中删除
// 3- 删除完成后,在把数组 写回 data.json 中
// 3- 删除完成后,页面重新渲染
// 1- 获取前端传递id
let id = url.parse(req.url, true).query.id;
// 2- 读取data.json数据,转出js的数组
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) { return console.log(err); }
data = JSON.parse(data); // 转出js的数组
// // console.log(data);
// // 数组删除 splice(从哪删, 删几个) 拿到是id, 数据要根据下标去删除
// // 获取当前id对应下标
// // let index = data.list.findIndex(function (v) {
// // return v.id == id;
// // })
// 根据id 找下标
let index = data.list.findIndex(v => v.id == id);
// console.log(index);
data.list.splice(index, 1);
data = JSON.stringify(data);
// 写回data.json中
fs.writeFile(dataPath, data, (err) => {
if (err) {
return console.log(err);
}
// 跳转到首页
// 跳转是浏览器的行为, 服务器无法直接控制浏览器跳转, 但是服务器可以通知浏览器跳转,
// 浏览器会按照服务器通知,跳转到对应的页面;
res.statusCode = 302; //设置状态码 通知浏览器进行跳转
res.setHeader('location', '/index'); // 设置跳转的地址
res.end();
})
})
// res.end(id);
} else if (req.url.startsWith('/submit') && req.method == "GET") { // get 添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
let info = url.parse(req.url, true).query;
// 添加id 和 创建时间
info.id = Date.now(); // 获取当前的时间戳
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
console.log(info);
// 读取data.json数据,转出js的数组
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) { return console.log(err); }
data = JSON.parse(data); //json-->js对象
data.list.push(info); //添加
data = JSON.stringify(data); // js --->js
fs.writeFile(dataPath, data, (err) => {
if (err) { return console.log(err); }
//跳转到首页 重定向
res.statusCode = 302;
res.setHeader('location', '/index');
res.end();
})
});
} else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
// 前端以post方式给后台传递了数据 会触发事件
let str = '';
let num = 0;
req.on('data', function (chunk) { // chunk 块 片段
str += chunk;
console.log(++num);
});
// 当后台数据接收完成时, 触发end事件
req.on('end', function () {
console.log(str); // nickname=11&title=11&content=11 查询字符串
let info = queryString.parse(str);
// 添加id 和创建时间
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
console.log(info);
// 读取data.json数据,转出js的数组
fs.readFile(dataPath, 'utf8', (err, data) => {
if (err) {
return console.log(err);
}
data = JSON.parse(data); //json --> js对象
data.list.push(info); //添加
data = JSON.stringify(data); // js--> js
fs.writeFile(dataPath, data, (err) => {
if (err) {
return console.log(err);
}
// 跳转到首页
res.statusCode = 302;
res.setHeader('location', '/index');
res.end();
})
})
})
} else { // 404
res.end('404');
}
});
server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') })
留言板2.1
完整留言板2.1资源
复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器
2- 首页留言动态渲染
数据 + 模板
1- 读取数据库data.json中的数据
2- 配合模板引擎 进行渲染
3- 把生成好页面结构返回给浏览器解析
3- 删除留言
1- 获取前端传递id
2- 根据id去数据库中删除对应的 数据
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 从数组中删除
3- 删除完成后,在把数组 写回 data.json 中
3- 删除完成后,跳转到首页
4- 添加留言
1- 获取 前端提交表单数据
2- 把数据添加到数据库中
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 向数组中添加
3- 添加完成后,在把数组 写回 data.json 中
3- 添加完成后,跳转到首页
get
post
// 1-搭建服务器
const http = require('http');
const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');
const server = http.createServer();
const dataPath = path.join(__dirname, 'data/data.json');
server.on('request', (req, res) => {
console.log('req.url:', req.url);
// 路由功能
if (req.url.startsWith('/index') || req.url == '/') { //首页
// 1- 读取数据库data.json中的数据
// 2- 配合模板引擎 进行渲染
// 3- 把生成好页面结构返回给浏览器解析
readData(function (data) { //data就是读取到数据
//读取到数据后 执行逻辑
// 对数据进行排序
// data.list.sort(function (a, b) {
// return b.id - a.id;
// })
data.list.sort((a, b) => b.id - a.id);
// console.log(data);
let str = template(path.join(__dirname, 'pages/index.html'), data); // 渲染
res.end(str);
})
} else if (req.url.startsWith('/add')) { // add.html
// 直接读取 add页面返回即可
fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
if (err) {
return console.log(err);
}
res.end(data); //返回读取的页面
})
} else if (req.url.startsWith('/assets')) { //静态资源
// 直接读取静态资源返回即可
fs.readFile(path.join(__dirname, req.url), (err, data) => {
if (err) {
return console.log(err);
}
// 给返回资源设置明确的mime类型
res.setHeader('content-type', mime.getType(req.url));
// 返回读取数据
res.end(data);
})
} else if (req.url.startsWith('/delete')) { // 删除
// 1- 获取前端传递id
// 2- 根据id去数据库中删除对应的 数据
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 从数组中删除
// 3- 删除完成后,在把数组 写回 data.json 中
// 3- 删除完成后,页面重新渲染
let id = url.parse(req.url, true).query.id; // 获取id
readData(function (data) { // data是读取的数据
let index = data.list.findIndex(v => v.id == id); //找下标
data.list.splice(index, 1); //删除
writeData(data, () => { //写入
goIndex(res); //去首页
});
// writeData(data, () => goIndex(res));
})
} else if (req.url.startsWith('/submit') && req.method == "GET") { // get 添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
let info = url.parse(req.url, true).query;
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
// 添加
readData((data) => {
data.list.push(info); //添加
writeData(data, () => goIndex(res));
});
} else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
// 前端以post方式给后台传递了数据 会触发事件
let str = '';
req.on('data', (chunk) => {
str += chunk;
})
req.on('end', () => {
let info = queryString.parse(str);
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
// 添加
readData((data) => {
data.list.push(info); //添加
writeData(data, () => goIndex(res));
})
});
} else { // 404
res.end('404');
}
});
server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') })
// 封装公共代码:
// 如何封装: 提取公共代码 , 变化部分 作为参数
// 1- 读取data.json文件数据的方法
// 2- 写入data.json文件的方法
// 3- 重定向的方法
// 1- 读取data.json文件数据的方法
// fn: 读取数据完成后的处理逻辑
function readData (fn) {
fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
if (err) {
return console.log(err);
}
//json-->js
data = JSON.parse(data);
// 后续处理数据 ,将读取的数据交给fn进行处理
fn && fn(data);
// if (fn) {
// fn(data);
// }
})
}
// 2- 写入data.json文件的方法
// data: 要写入的数据
// fn: 写入完成后处理逻辑
function writeData (data, fn) {
data = JSON.stringify(data); // js对象转成json
fs.writeFile(path.join(__dirname, 'data/data.json'), data, (err) => {
if (err) {
return console.log(err);
}
//写入成功的后续操作
fn && fn();
})
}
// 3- 重定向的方法
// res: 响应报文的对象
function goIndex (res) {
res.statusCode = 302;
res.setHeader('location', '/index');
res.end();
}
// function click (fn) {}
// $('div').click(function (){ });
留言板3.0
完整留言板3.0资源
复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器
2- 首页留言动态渲染
数据 + 模板
1- 读取数据库data.json中的数据
2- 配合模板引擎 进行渲染
3- 把生成好页面结构返回给浏览器解析
3- 删除留言
1- 获取前端传递id
2- 根据id去数据库中删除对应的 数据
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 从数组中删除
3- 删除完成后,在把数组 写回 data.json 中
3- 删除完成后,跳转到首页
4- 添加留言
1- 获取 前端提交表单数据
2- 把数据添加到数据库中
数据以字符串形式存储,要以数组的形式去操作
1- 读取data.json数据,转出js的数组
2- 向数组中添加
3- 添加完成后,在把数组 写回 data.json 中
3- 添加完成后,跳转到首页
get
post
复制代码
// 处理具体功能模块
// 提供各种功能, 向外暴露
const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');
const tools = require('./tools');
module.exports = {
showIndex (req, res) { //显示首页
// 1- 读取数据库data.json中的数据
// 2- 配合模板引擎 进行渲染
// 3- 把生成好页面结构返回给浏览器解析
tools.readData(function (data) { //data就是读取到数据
//读取到数据后 执行逻辑
// 对数据进行排序
// data.list.sort(function (a, b) {
// return b.id - a.id;
// })
data.list.sort((a, b) => b.id - a.id);
// console.log(data);
let str = template(path.join(__dirname, 'pages/index.html'), data); // 渲染
res.end(str);
})
},
showAdd (req, res) {//显示add.html
// 直接读取 add页面返回即可
fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
if (err) {
return console.log(err);
}
res.end(data); //返回读取的页面
})
},
showAssets (req, res) { // 显示静态资源
// 直接读取静态资源返回即可
fs.readFile(path.join(__dirname, req.url), (err, data) => {
if (err) {
return console.log(err);
}
// 给返回资源设置明确的mime类型
res.setHeader('content-type', mime.getType(req.url));
// 返回读取数据
res.end(data);
})
},
delete (req, res) { // 删除
// 1- 获取前端传递id
// 2- 根据id去数据库中删除对应的 数据
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 从数组中删除
// 3- 删除完成后,在把数组 写回 data.json 中
// 3- 删除完成后,页面重新渲染
let id = url.parse(req.url, true).query.id; // 获取id
tools.readData(function (data) { // data是读取的数据
let index = data.list.findIndex(v => v.id == id); //找下标
data.list.splice(index, 1); //删除
tools.writeData(data, () => { //写入
tools.goIndex(res); //去首页
});
// tools.writeData(data, () => tools.goIndex(res));
})
},
getSubmit (req, res) { // get 添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
let info = url.parse(req.url, true).query;
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
// 添加
tools.readData((data) => {
data.list.push(info); //添加
tools.writeData(data, () => tools.goIndex(res));
});
},
postSubmit (req, res) { //post方式添加
// 1- 获取 前端提交表单数据
// 2- 把数据添加到数据库中
// 数据以字符串形式存储,要以数组的形式去操作
// 1- 读取data.json数据,转出js的数组
// 2- 向数组中添加
// 3- 添加完成后,在把数组 写回 data.json 中
// 3- 添加完成后,跳转到首页
// 前端以post方式给后台传递了数据 会触发事件
let str = '';
req.on('data', (chunk) => {
str += chunk;
})
req.on('end', () => {
let info = queryString.parse(str);
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
// 添加
tools.readData((data) => {
data.list.push(info); //添加
tools.writeData(data, () => tools.goIndex(res));
})
});
},
show404 (req, res) { //显示404
res.end('404');
}
}
// 引入
const http = require('http');
const router = require('./router');
// 创建服务器
const server = http.createServer();
// 监听请求
server.on('request', (req, res) => {
// 找路由模块处理路由
router(req, res);
});
// 启动服务器
server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') });
// 路由: 是一套匹配规则, 用分配任务 (不需要处理细节)
// 以函数的形式进行暴露,函数可以接受参数
const handler = require('./hanlder');
module.exports = function (req, res) {
console.log('req.url:', req.url);
// 路由功能
if (req.url.startsWith('/index') || req.url == '/') { //首页
handler.showIndex(req, res);
} else if (req.url.startsWith('/add')) { // add.html
handler.showAdd(req, res);
} else if (req.url.startsWith('/assets')) { //静态资源
handler.showAssets(req, res);
} else if (req.url.startsWith('/delete')) { // 删除
handler.delete(req, res);
} else if (req.url.startsWith('/submit') && req.method == "GET") { // get 添加
handler.getSubmit(req, res);
} else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加
handler.postSubmit(req, res);
} else { // 404
handler.show404(req, res);
}
}
const fs = require('fs');
const path = require('path');
// 封装公共代码:
// 如何封装: 提取公共代码 , 变化部分 作为参数
// 1- 读取data.json文件数据的方法
// 2- 写入data.json文件的方法
// 3- 重定向的方法
module.exports = {
// 1- 读取data.json文件数据的方法
// fn: 读取数据完成后的处理逻辑
readData (fn) {
fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
if (err) {
return console.log(err);
}
//json-->js
data = JSON.parse(data);
// 后续处理数据 ,将读取的数据交给fn进行处理
fn && fn(data);
// if (fn) {
// fn(data);
// }
})
},
// 2- 写入data.json文件的方法
// data: 要写入的数据
// fn: 写入完成后处理逻辑
writeData (data, fn) {
data = JSON.stringify(data); // js对象转成json
fs.writeFile(path.join(__dirname, 'data/data.json'), data, (err) => {
if (err) {
return console.log(err);
}
//写入成功的后续操作
fn && fn();
})
},
// 3- 重定向的方法
// res: 响应报文的对象
goIndex (res) {
res.statusCode = 302;
res.setHeader('location', '/index');
res.end();
}
}
留言板4.0
完整留言板4.0资源
复制代码
1- 搭建服务器
2- 首页渲染
取数据 + 模板引擎
1-读取data.json中数据 ,配合模板引擎渲染
3- 删除留言
1-后台获取前端传递id,
2-根据di找到对应下标
3-根据下标删除
4-删除完成后,跳转到首页
4- 添加留言
1- 获取前端 post方式提交数据
2- 把数据添加到数据库中
3- 添加完成后,跳转到首页
复制代码
// 搭建服务器
const express = require('express'); // 引入
const router = require('./router');
const bodyParser = require('body-parser');
const app = express(); //创建实例
// 配置模板引擎使用
app.engine('html', require('express-art-template'));
// 设置模板的位置
app.set('views', 'pages');
// 处理静态资源
app.use('/assets', express.static('assets'));
// 给req.body赋值
app.use(bodyParser.urlencoded({ extended: false }));
//绑定路由
app.use(router);
app.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));
// 使用外置路由对象绑定路由
const express = require('express');
const fs = require('fs');
const path = require('path');
const moment = require('moment');
const router = express.Router(); //创建外置路由对象
// 绑定路由
router.get('/', (req, res) => { //首页
// 读取data.json中数据 ,配合模板引擎渲染
// readData(data => { //data是读取的数据
// res.render('index.html', data);
// })
readData(data => res.render('index.html', data));
})
router.get('/index', (req, res) => { //首页
res.redirect('/'); //重定向到 /
});
router.get('/add', (req, res) => { //add添加页面
// 直接读取返回
res.sendFile(path.join(__dirname, 'pages/add.html'));
})
router.get('/delete', (req, res) => { //删除
// 1-后台获取前端传递id,
// 2-根据id找到对应下标
// 3-根据下标删除
// 4-删除完成后,跳转到首页
let id = req.query.id; // url.parse(req.url, true).query;
readData(data => {
let index = data.list.findIndex(v => v.id == id); //找下标
data.list.splice(index, 1); //删除
writeData(data, () => res.redirect('/')); // 写入完成后,跳转首页
});
})
router.post('/submit', (req, res) => { //post 添加
// 1- 获取前端 post方式提交数据
// 2- 把数据添加到数据库中
// 3- 添加完成后,跳转到首页
let info = req.body;
// 添加id 和创建时间
info.id = Date.now();
info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
readData(data => {
data.list.push(info);//添加
writeData(data, () => res.redirect('/')); // 写入完成后,去首页
})
});
// 导出
module.exports = router;
// 封装 读写data.json数据方法
function readData (fn) {
fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
if (err) {
return console.log(err);
}
data = JSON.parse(data); // json ->js
fn && fn(data); // 由fn 处理读取的数据
})
}
function writeData (data, fn) {
data = JSON.stringify(data);
fs.writeFile(path.join(__dirname, 'data/data.json'), data, err => {
if (err) {
return console.log(err);
}
//执行后续操作
fn && fn();
})
}
留言板5.0
完整留言板5.0资源
复制代码
目标: 基于express 和 mysql数据库 实现留言板5.0
一、 准备好数据库
1-创建 zlyb数据库
2-向数据库中输入 meassge.sql user.sql , 注意: 编码utf-8
二、 搭建服务器
三、 完成具体各个功能
首页渲染: 取数据 +模板
取数据库获取所有数据,通过模板引擎渲染到页面中
删除思路:
获取前端传递id,根据id去数据库删除对应的数据,删除完成后,重新跳转到首页
添加思路:
获取前端提交的数据, 给数据添加创建时间, 把数据添加到数据库中, 添加完成, 重新跳转到首页
复制代码
// 封装一个 node 操作mysql数据的方法
// 如何封装: 提供公共代码, 变化部分作为参数
// 使用mysql模块 操作mysql数据库
// 1- 下载 npm i mysql
// 2- 引入
// 3-使用
// 大致步骤:
// 1- 通过服务器 连接上数据库
// 2- 对数据库进行操作
// 3- 断开和数据连接
// 具体实现步骤:
// 1-准备好 账号信息
// 2-创建一个数据库连接
// 3-连接上数据库
// 4-进行操作
// 5-断开和数据库连接
const mysql = require('mysql');
// 1-准备好 账号信息
let info = {
host: '127.0.0.1',
user: 'root',
password: 'root',
database: 'zlyb'
}
/*
sql: 要执行sql语句
param: sql语句中参数 用来替换?的
fn: 操作完成后 后续处理逻辑
*/
function myQuery (sql, param, fn) {
// 2-创建一个数据库连接
let con = mysql.createConnection(info);
// 3- 连接上数据库
con.connect();
// 4-操作
con.query(sql, param, (err, data) => {
if (err) {
return console.log(err);
}
//后续处理
fn && fn(data);
});
// 5-断开
con.end();
}
// 暴露
module.exports = myQuery;
// 基于express 搭建服务器
const express = require('express');
const router = require('./rotuer');
const bodyParser = require('body-parser');
const app = express(); //创建服务器
// 配置模板引擎
app.engine('html', require('express-art-template'));
// 模板目录
app.set('views', 'pages');
// 静态资源托管
app.use('/assets', express.static('assets'));
// 给req.body赋值
app.use(bodyParser.urlencoded({ extended: false }));
// 处理路由
app.use(router);
app.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));
// 外置路由对象 提供路由
const express = require('express');
const path = require('path');
const moment = require('moment');
const db = require('./db');
// 创建 外置路由对象
const router = express.Router();
// 绑定路由
router.get('/', (req, res) => { // 首页
// 取数据库获取所有数据,通过模板引擎渲染到页面中
db('select * from message', null, (data) => {
// console.log(data); // data是数组
res.render('index.html', { list: data }); // 渲染
})
});
router.get('/index', (req, res) => { //首页
res.redirect('/');
})
router.get('/add', (req, res) => { //添加
res.sendFile(path.join(__dirname, 'pages/add.html'));
})
router.get('/delete', (req, res) => { // 删除
// 获取前端传递id,根据id去数据库删除对应的数据,删除完成后,重新跳转到首页
let id = req.query.id;
db('delete from message where id = ?', id, () => res.redirect('/'));
})
router.post('/submit', (req, res) => { // post 提交
// 获取前端提交的数据, 给数据添加创建时间, 把数据添加到数据库中, 添加完成, 重新跳转到首页
let info = req.body;
info.created = moment().format('YYYY-MM-DD HH:mm:ss');
db('insert into message set ?', info, () => res.redirect('/'));
})
// 作业: 以上代码 都用一行写出来
// 导出
module.exports = router;