nodeJS+express+mysql模块封装之服务器渲染小demo

创建一个小项目
npm init
下载相关中间件（根据package.js来下载）
package.js
目录结构
index.js代码

const express = require('express');
const path = require('path');
const template = require('art-template');
const bodyParser = require('body-parser');
const router = require('./router.js')
const app = new express();// 启动静态
app.use('/static', express.static(path.join(__dirname, 'public')))// 设置模板引擎
// 设置模板 引擎的路径
app.set('views',path.join(__dirname,'views'));
// 设置模板引擎
app.set('view engine','art');// 使express 兼容 art-template 模引擎app.engine('art',require('express-art-template'));app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json());// 配置路由
app.use(router);// 监听端口const server = app.listen(8081,  ()=> {const host = server.address().addressconst port = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

利用回调函数的性质完成db.js:

const mysql  = require('mysql');exports.base = (sql,data,callback) => {const connection = mysql.createConnection({host:'主机地址',user:'root',password:'你的mysql密码',database:'book'});connection.connect();connection.query(sql,data,function(error,results,fields){if(error) throw error;callback(results);})connection.end();
}

建立router.js路由模块（这里以图书管理为例）：

/*** 路由模块*/const express = require('express');const router = express.Router();const service = require('./serveice.js')//  路由处理router.get('/',service.showIndex);router.get('/toBook',service.toAddBook);router.post('/addBook',service.addBook);router.get('/toEditBook',service.toEditBook);router.post('/editBook',service.editBook);router.get('/deleteBook',service.deleteBook)
//  router.get('/dBook',service.deleteBook)module.exports = router;

业务层抽离，专心业务的书写，建立serveice.js业务模块

/*** 业务模块(处理具体的业务)*/const data = require('./data.json');
const path = require('path');
const db = require('./db.js')
const fs = require('fs');// 自动生成图书编号
let maxBookCode = ()=>{let arr= [];data.forEach((item) => {arr.push(item.id);});return Math.max.apply(null,arr);
}//  渲染主页面
exports.showIndex = (req,res) => {let sql = 'select * from book';db.base(sql,null,(result) => {res.render('index',{list:result})});
}exports.toAddBook = (req,res)=>{res.render('addbook',{})
}exports.addBook = (req,res)=>{// 获取表单数据let info = req.body;console.log(info)let book = {};for(let key in info){book[key] = info[key];}let sql = 'insert into book set ?';db.base(sql,book,(result) => {// console.log(result);if(result.affectedRows >= 1){res.redirect('/');}})
}exports.toEditBook= (req,res)=>{let id = req.query.id;let sql = "select * from book where id = ?";let data = [id];db.base(sql,data,(result) => {res.render('editBook',result[0]);})}exports.editBook= (req,res) => {let info = req.body;console.log(info.description);let sql = "update book set name=?,author=?,category=?,description=? where id=?";let data = [info.name,info.author,info.category,info.description,info.id];db.base(sql,data,(result) => {if(result.affectedRows >= 1){res.redirect('/');}});}exports.deleteBook = (req,res) => {let id = req.query.id;let sql = `delete from book where id = ?; `;let data = [id];db.base(sql,data,(result)=>{if(result.affectedRows >= 1){res.redirect('/');}})
}
// exports.dBook = (req,res) => {
//     let id = req.query.id;
//     let sql = "ALTER TABLE book ADD id INT NOT NULL PRIMARY KEY AUTO_INCREMENT FIRST;"
// }

数据交互采用的art-template
- 目录结构
  -
主页面，index.art:

<!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><link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body><div class="title">图书馆里系统 <a href="/toBook">添加图书</a></div><div class="content"><table cellpadding = "0" cellsapcing = "0"><thead><tr><th>编号</th><th>名称</th><th>作者</th><th>类别</th><th>描述</th><th>操作</th></tr></thead><tbody>{{ each list}}<tr><td>{{ $value.id }}</td><td>{{ $value.name }}</td><td>{{ $value.author }}</td><td>{{ $value.category }}</td><td>{{ $value.description }}</td><td><a href="/toEditBook?id={{$value.id}}">修改</a>|<a class='del' href="/deleteBook?id={{$value.id}}">删除</a></td></tr>{{ /each}}</tbody></table></div>
</body>
</html>

添加图书个管理图书界面（addBook.art,editBook.art）：

// addBook 添加图书
<!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>
</head>
<body><div>添加图书</div><form action="/addBook" method="post">编号： <input type="text" name="id" id=""><br>名称： <input type="text" name="name" id=""><br>作者： <input type="text" name="author" id=""><br>类别： <input type="text" name="category" id=""><br>描述： <input type="text" name="description" id=""><br><input type="submit" value="提交"></form>
</body>
</html>

// editBook编辑图书
<!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>
</head>
<body><div>编辑图书</div><form action="/editBook" method="post">编号： <input type="text" name="id" value = "{{id}}"><br>名称： <input type="text" name="name" value = "{{ name }}"><br>作者： <input type="text" name="author" value = "{{ author }}"><br>类别： <input type="text" name="category" value = "{{ category }}"><br>描述： <input type="text" name="description" value = "{{ description }}"><br><input type="submit" value="提交"></form>
</body>
</html>

输入命令nodemon index.js来跑自己的程序吧！体验喜悦的时刻到了！

nodeJS+express+mysql模块封装之服务器渲染小demo相关推荐

NodeJS+Express+mySQL服务端开发详解
NodeJS+Express+mySQL服务端开发详解随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍如果你感兴趣可以访问 ...
复盘《新冠疫苗在线预约系统》设计过程Nodejs+express+Mysql+前端
新冠疫苗预约使用的技术:nodejs +express +Mysql +html+bootstrap 运行环境:vscode 1. 项目的搭建检验node环境确认是否安装node express ...
nodejs+express+mysql(后台实例项目练习4—实现机构新增功能)
nodejs+express+mysql(后台实例项目练习-搭建项目) nodejs+express+mysql(后台实例项目练习2-数据库链接网页跳转 iframe框架路径问题模板引擎 ) no ...
nodejs的mysql模块_Nodejs的mysql模块学习(一)
介绍 mysql npm包是一个nodejs的模块,由JavaScript编写安装 npm install mysql 建立连接 var mysql = require('mysql');//引用 ...
进入全屏 nodejs+express+mysql实现restful风格的增删改查示例
首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言之前学的java,一直用的ssm框架写后台.前段时间 ...
nodejs+express+mysql实现图片上传
nodejs+express+multer+ajax上传图片到服务器端,以及将图片路径保存到数据库思路,使用nodejs中的express框架搭建好服务器,创建上传图片的路由,在工作目录中划分好服务 ...
nodejs express mysql实现多表查询
实现功能:同一个页面,获取同一个数据库中的多张表如下:框中的数据都是从mysql中获取的. 下面先上项目结构目录与mysql表其中index.css.right.css.indexTwo.ejs都 ...
使用 NodeJS+Express+MySQL 实现简单的增删改查
关于node.js暂时记录如下,以后有时间一定学习文章来自简书,作者:sprint,2016-07 使用 Node.js + Express+MySQL 实现简单的增删改查 https://www. ...
小程序对七牛云文件上传删除批量删除生成token封装无需服务器一个小程序搞定
微信小程序获取token接入七牛云上传删除批量删除图片封装亲测可用小程序获取七牛云uptoken删除文件封装在研究官方文档后自己用小程序生成uptoken上传凭证封装,其他资料都说要服务器我又没钱 ...

nodeJS+express+mysql模块封装之服务器渲染小demo

nodeJS+express+mysql模块封装之服务器渲染小demo

nodeJS+express+mysql模块封装之服务器渲染小demo相关推荐

最新文章

热门文章