聊城开发网站建设,摄影设计英文,广西网络推广怎么做,自定义表情在线制作涉及到的模块#xff1a;
var fs require(‘fs’)——内置模块 var ejs require(‘ejs’)——第三方模块 var mysql require(‘mysql’)——第三方模块 var express require(‘express’)——第三方模块 var bodyParser require(‘body-parser’)——第三方中间件
需要…涉及到的模块
var fs require(‘fs’)——内置模块 var ejs require(‘ejs’)——第三方模块 var mysql require(‘mysql’)——第三方模块 var express require(‘express’)——第三方模块 var bodyParser require(‘body-parser’)——第三方中间件
需要安装的模块
npm install express4 npm install ejs npm install mysql npm install body-parser
一.先将数据库中的信息输出到浏览器页面
思路创建一个book-list.html文件作为ejs模块文件连接mysql数据库将数据库中的信息渲染到book-list.html文件中输出给客户端
1. 连接mysql数据库并判断数据库连接是否成功
var client mysql.createConnection({host: localhost,port: 3306,user: root,password: root,database: Library
})
//判断数据库连接是否成功
client.connect(function (err) {if (err) {console.log([query] - : err);}console.log([connection connect] Mysql数据连接成功!)
});2.创建并启动服务器
// 创建服务器
var app express();
// 下面这段代码是使用Express框架中的body-parser中间件来解析HTTP请求体中的URL编码数据。
// 当extended参数设置为false时它只支持扩展的URL编码格式即不包含嵌套对象。
app.use(bodyParser.urlencoded({extended: false
}));
// 启动服务器
app.listen(52273, function () {console.log(服务器监听地址 http://127.0.0.1:52273);
});3.将数据库中的信息输出到网页
// 显示图示列表
app.get(/, function (request, response) {// 读取模版文件fs.readFile(book-list.html, utf-8, function (error, data) {// 执行SQL语句client.query(SELECT * FROM books, function (error, results) {// 相应数据console.log(shuju: results)response.send(ejs.render(data, {data: results}));// console.log(shuju:results)});});
});4.book-list.html文件内容
styletable {padding: 0;position: relative;margin: 0 auto;}td {text-align: center;border: solid 1px black;}
/style
bodyh1 styletext-align: center;图书列表/h1a href/insert idadd添加数据/abr /table width1000pxtrthID/thth书名/thth作者/thth出版社/thth删除/thth编辑/th/tr% data.forEach((item,index) { %trtd% item.id %/tdtd% item.bookname %/tdtd% item.author %/tdtd% item.press %/tdtda href/delete/% item.id %删除/a/tdtda href/edit/% item.id %编辑/a/td/tr% });%/table5.浏览器效果图 二.完成添加数据功能
思路创建一个book-insert.html文件作为添加数据的网页点击添加数据是跳转到此网页get请求响应此文件的内容再用post请求处理提交的内容提交完后强制跳转到根网页 注意添加数据跳转网页的地址在book-list.html文件中已经定好了‘/insert’
1.用get请求先把book-insert.html文件响应给客户
app.get(/insert, function (request, response) {// 读取模版文件fs.readFile(book-insert.html, utf-8, function (error, data) {// 响应数据response.send(data)});
});2.再用post请求将用户提交的信息进行处理
app.post(/insert, function (request, response) {// 声明bodyvar body request.body;// 执行SQL语句client.query(INSERT INTO books (bookname,author,press) VALUES (?,?,?), [body.bookname, body.author, body.press], function () {// 响应数据response.redirect(./)});
});3.book-insert.html文件内容
h3添加图书/h3hr/form action methodpostfieldsetlegend添加数据/legendtabletrtdlabel for图书名称/label/tdtdinput typetext namebookname id/td/trtrtdlabel for作者/label/tdtdinput typetext nameauthor id/td/trtrtdlabel for出版社/label/tdtdinput typetext namepress id/td/tr/tableinput typesubmit name id/fieldset/form4.book-insert.html文件效果 三.完成删除和修改效果
注意需要创一个修改信息的静态网页book-edit.html
1.删除
思路此效果比较简单得到删除信息的id后直接执行SQL语句删除即可
app.get(/delete/:id, function (request, response) {// 执行sql语句client.query(DELETE FROM books WHERE id?, [request.params.id], function () {response.redirect(/);});
});book-edit.html网页内容
h1修改图书/h1hr/form action methodpostfieldsetlegend修改图书信息/legendtabletrtdlabel forID/label/tdtdinput typetext nameid id value% data.id % disabled/td/trtrtdlabel for书名/label/tdtdinput typetext namebookname id value% data.bookname %/td/trtrtdlabel for作者/label/tdtdinput typetext nameauthor id value% data.author % /td/trtrtdlabel for出版社/label/tdtdinput typetext namepress id value% data.press % /td/tr/tableinput typesubmit name id/fieldset/formbook-edit.html网页效果 2.修改
思路此效果就比较复杂了 两个路由处理程序一个用于显示编辑表单GET请求另一个用于处理表单提交并更新数据库中的记录POST请求。
GET请求
1.当用户访问/edit/:id时服务器会读取名为book-edit.html的模板文件。 2.然后它会执行一个SQL查询从books表中获取与给定ID匹配的书籍信息。 3.最后它将渲染模板并将查询结果作为数据传递给模板然后将渲染后的HTML发送给客户端。
app.get(/edit/:id, function (request, response) {// 读取模版信息fs.readFile(book-edit.html, utf-8, function (error, data) {// 执行sql语句client.query(SELECT * FROM books WHERE id ?, [request.params.id], function (error, result) {// 响应数据response.send(ejs.render(data, {data: result[0]}));});});
});POST请求
1.当用户提交编辑表单时服务器会接收到一个包含表单数据的POST请求。 2.服务器会从请求体中提取书籍信息书名、作者和出版社并使用这些信息更新数据库中相应ID的书籍记录。 3.更新完成后服务器将强制跳转到主页‘/’。
app.post(/edit/:id, function (request, response) {// 声明bodyvar body request.body;// 执行sql语句client.query(UPDATE books SET bookname?,author?,press? WHERE id?,[body.bookname, body.author, body.press, request.params.id], function () {// 响应信息response.redirect(/)})
})
