|
这部分示例将通过你好，Express、留言板和学生管理三个应用的实现来演示Express框架的基本使用。首先来搭建该示例项目的基本脚手架，为此我们需要在code目录下执行mkdir 07_Expressjs命令来创建用于存放这一组示例的目录，并执行一下步骤： 1、在code/07_Expressjs目录下执行npm init --yes命令来初始化本示例项目。2、在code/07_Expressjs目录下执行npm install express body-parser sqlite3 mongodb async art-template express-art-template --save命令来安装本示例所要用到的扩展包。3、在code/07_Expressjs目录下执行mkdir views命令来创建用于存放模板文件的目录。4、在code/07_Expressjs目录下执行mkdir public命令创建public目录，并进入到该目录中，执行mkdir DB css js img命令来创建用于存放相应类型资源的目录。5、在code/07_Expressjs目录下执行touch index.js命令，创建本示例的程序入口文件，具体代码如下： const path=require('path') const express=require('express') const bodyParser=require('body-parser') const router=require(path.join(__dirname, 'router')) const app=express() // 配置public目录 app.use('/public/', express.static(path.join(__dirname, 'public'))) //配置body-parser中间件`，以便获取post请求数据。` app.use(bodyParser.urlencoded({extended : false})); app.use(bodyParser.json()); // 配置模板引擎为art-template app.engine('htm', require('express-art-template')) app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'art') // 调用路由表函数 app.(router) // 监听8080端口 app.listen(8080, function(){ console.log('请访问localhost:8080/，按Ctrl+C终止服务！') })6、在code/07_Expressjs目录下执行touch router.js命令，创建本示例的程序路由文件，具体代码如下： const path=require('path') const express=require('express') const sayHello=require(path.join(__dirname, 'sayHello')) const student=require(path.join(__dirname, 'student')) const board=require(path.join(__dirname, 'board')) const router=express.Router() // Hello，Express！ sayHello(router) // 学生管理 student(router) // 留言板 board(router) module.exports=router7、在code/07_Expressjs目录下执行touch baseTpl.js命令，创建该项目的基础模版文件，并在其中输入以下代码：8、在code/07_Expressjs/public/css/目录创建一个名为main.css的样式文件，内容如下： body { padding-top: 10px; } 下面，我们要在这个脚手架上逐一来创建之前所说的三个应用示例。 这个应用示例主要用于示范如何用Express框架来创建一个 Web 页面，并使用art-template模板引擎。其主要步骤如下： 1、在code/07_Expressjs/public/img/目录下放置一张Express官网首页的截图，将其命名为express.jpeg。2、在code/07_Expressjs/views/目录创建一个名为hello.htm的模版文件，内容如下： {{ extend './baseTpl.art' }} {{ block 'navbar' }} {{ /block }} {{ block 'main' }} 你好，{{ name }}！ {{ /block }}3、在code/07_Expressjs目录下执行mkdir sayHello命令来创建该应用的目录，并在其中创建一个名为index.js的脚本文件，内容如下： module.exports=function(app) { app.get('/', function (req, res) { resder('hello.htm', {name : 'Express'}) }) }4、保存所有文件后，在code/07_Expressjs目录下执行node index.js命令，结果如下： 这个应用示例主要用于演示如何用Express框架实现学生管理系统，并使用SQLite3作为数据库，其具体步骤如下： 1、在code/07_Expressjs/views/目录创建一个名为student.htm的模版文件，内容如下： {{ extend './baseTpl.art' }} {{ block 'navbar' }} {{ /block }} {{ block 'main' }} 学生信息表{{ each db }} {{ /each }}
{{ /block }}2、在code/07_Expressjs/views/目录创建一个名为add.htm的模版文件，内容如下： {{ extend './baseTpl.art' }} {{ block 'navbar' }} {{ /block }} {{ block 'main' }} 注册新学生：姓名： 年龄： 性别： 爱好： 加入 {{ /block }}3、在code/07_Expressjs/views/目录创建一个名为edit.htm的模版文件，内容如下： {{ extend './baseTpl.art' }} {{ block 'navbar' }} {{ /block }} {{ block 'main' }} 编辑 {{ name }} 的信息：姓名： 年龄： 性别： 爱好： 更新数据 {{ /block }}4、在code/07_Expressjs目录下执行mkdir student命令来创建该应用的目录，并在其中创建一个名为index.js和Sqlite.js的两个交易脚本文件，内容如下： index.js const fs=require('fs') const path=require('path') const async=require('async') const SqliteDB=require(path.join(__dirname,'Sqlite')) const dbPath=path.join(__dirname, '../public/DB/studentsDB.db') // 配置数据库 if ( !fs.existsSync(dbPath) ) { const studentsDB=new SqliteDB(dbPath) async.series([ function(callback) { const createTableSql=` create table if not exists STUDENT_TABLE ( name TEXT, age TEXT, sex TEXT, items TEXT )` studentsDB.createTable(createTableSql) callback() }, function(callback) { const insertTileSql=` insert into STUDENT_TABLE (name, age, sex, items) values(?, ?, ?, ?)` const arr=[ ['凌杰', '24', '男', '看书、看电影、旅游'], ['蔓儿', '25', '女', '看书、看电影、写作'], ['张语', '32', '女', '看书、旅游、绘画'] ] studentsDB.insertData(insertTileSql, arr) callback() } ]) studentsDB.close() } module.exports=function(app) { app.get('/student', function (req, res) { const studentsDB=new SqliteDB(dbPath) const querySql='select * from STUDENT_TABLE' studentsDB.queryData(querySql, function(data) { if ( data===null ) { return console.log('数据查询错误！') } resder('student.htm', { db : data }) }) studentsDB.close() }) app.get('/student/add', function (req, res) { resder('add.htm', { }) }) app.post('/student/add', function (req, res) { const studentsDB=new SqliteDB(dbPath) const arr=[ [req.body['name'],req.body['age'],req.body['sex'],req.body['items']] ] const insertTileSql=` insert into STUDENT_TABLE (name, age, sex, items) values(?, ?, ?, ?)` studentsDB.insertData(insertTileSql, arr) studentsDB.close() res.redirect('/student') }) app.get('/student/delete', function (req, res) { const studentsDB=new SqliteDB(dbPath) const deleteSql=` delete from STUDENT_TABLE where name='` + req.query['name'] + `'` studentsDB.executeSql(deleteSql) studentsDB.close() res.redirect('/student') }) app.get('/student/edit', function (req, res) { const studentsDB=new SqliteDB(dbPath) const querySql=` select * from STUDENT_TABLE where name='` + req.query['name'] + `'` studentsDB.queryData(querySql, function(data) { if ( data===null ) { return console.log('数据查询错误！') } resder('edit.htm', { name : data[0]['name'], age : data[0]['age'], sex : data[0]['sex'], items : data[0]['items'] }) }) studentsDB.close() }) app.post('/student/edit', function (req, res) { const studentsDB=new SqliteDB(dbPath) const updateSql=`update STUDENT_TABLE set name='` + req.body['name'] + `', ` + `age='` + req.body['age'] + `', ` + `sex='` + req.body['sex'] + `', ` + `items='` + req.body['items'] + `' ` + ` where name='` + req.body['name'] + `'` studentsDB.executeSql(updateSql) studentsDB.close() res.redirect('/student') }) } Sqlite.js const fs=require('fs') const sqlite3=require('sqlite3').verbose() class SqliteDB { constructor(file) { this.db=new sqlite3.Database(file) const db_exist=fs.existsSync(file) if ( !db_exist ) { fs.openSync(file, 'w') } } createTable(sql) { this.db.serialize(function() { this.run(sql, function(err) { if( err !==null ) { return console.error('错误信息：' + errssage) } }) }) } insertData(sql, objects) { this.db.serialize(function() { const stmt=this.prepare(sql) for ( const i=0; i < objects.length; ++i ) { stmt.run(objects[i]) } stmt.finalize() }) } queryData(sql, callback) { this.db.all(sql, function(err, rows) { if( err !==null ) { return console.error('错误信息：' + errssage) } if( callback ) { callback(rows) } }) } executeSql(sql) { this.db.run(sql, function(err) { if( err !==null ) { return console.error('错误信息：' + errssage) } }) } close() { this.db.close() } } module.exports=SqliteDB保存所有文件后，在code/07_Expressjs目录下执行node index.js命令，结果如下： 这个应用示例主要用于演示如何用Express框架实现留言板应用，并使用MongoDB作为数据库，其具体步骤如下： 1、在code/07_Expressjs/views/目录创建一个名为board.htm的模版文件，内容如下： {{ extend './baseTpl.art' }} {{ block 'navbar' }} {{ /block }} {{ block 'main' }} 留言板你的姓名： 留言信息： 提交留言 最新留言（{{ num }} 则）：{{ each db }} {{ /each }}
{{ /block }}2、在code/07_Expressjs目录下执行mkdir board命令来创建该应用的目录，并在其中创建一个名为index.js的脚本文件，内容如下： const MongoClient=require('mongodb').MongoClient const async=require('async') const server='mongodb://localhost:27017' const dbName='boardDB' const collName='message_table' const dbPath=server + '/' + dbName module.exports=function(app) { app.get('/board', function (req, res) { MongoClient.connect(dbPath, { useNewUrlParser: true }, function(err, db) { if ( err !==null ) { return console.error('错误信息：' + errssage) } const dbo=db.db(dbName) const collect=dbo.collection(collName) collect. find({}).toArray(function(err, result) { if ( err !==null ) { return console.error('错误信息：' + errssage) } const num=result.length resder('board.htm', { num : num, db : result }) }) }) }) app.post('/board', function (req, res) { MongoClient.connect(dbPath, { useNewUrlParser: true }, function(err, db) { if ( err !==null ) { return console.error('错误信息：' + errssage) } const dbo=db.db(dbName) const collect=dbo.collection(collName) const data={ name : req.body['name'], message : req.body['message'], time : Date() } collect.insertOne(data, function(err, res) { if ( err !==null ) { return console.error('错误信息：' + errssage) } }) res.redirect('/board') }) }) }3、保存所有文件后，在code/07_Expressjs目录下执行node index.js命令，结果如下： |
|
|
来自： 新用户0175WbuX > 《待分类》
