上篇已经总结了最简单的express框架怎么用，那这篇就将实际操作结合吧。
真是每天都是被bug缠身的一天，哎，什么时候能有个聪明的大脑呢，知识它就是不进脑子啊，着急有啥用，那说点有用的吧，也就这几天才接触的，还是了解的很少啊。
此篇也只适合初学者看了。
express的核心
路由 、中间件、模板渲染
-
首先，说下怎么用 art-template 模板吧
- 安装
npm install art-template --save
npm install express-art-template --save
- 配置
指定解析引擎，官方给的是art，但实际操作中，都是解析以html为后缀的文件，所以我们也以html为例
app.engine('html'),require('express-art-template');
- 修改默认的渲染路径 （很重要）
express-art-template 默认的渲染的目录是views下面的，即所渲染的html模板在views目录下，如果需要修改默认渲染路径如下：
app.set('views', 目录路径)
这个当时不知道啥意思，踩雷比较严重，改了很久。
eg: 像下面这个目录的话，就必须得改默认渲染路径了，不然肯定得出bug啊
所有的文件都在public下，资源在resource目录，页面在static目录下
app.set('views','public/static');
简单的说，如果你的html页面在哪个目录下，就把路径改到哪个目录底下
那标准的目录长什么样呢？ 这样建目录的话，就不需要改默认路径啦
就是这样了，几个js文件的意思，我们待会再看
下面介绍怎么用模板吧，看怎么渲染模板。
- 使用
res.render('模板文件名'，{模板数据}) - res.render()方法也可以只加载页面，不用数据渲染
- 写了res.rander() 就可以不用写 res.send() 了，服务器会自己进行相应操作
app.get('/',function (req,res) {
res.render('index.html',{
data:{
"title":"你好"
}
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body></body>
</html>
-
下面简单说下 路由router.js 和 中间件 student.js吧
因为是初学者，很头大。刚学的话，其实只要会模板渲染就好了，封装模块，有点麻烦，也有点绕，所以我自己也不是太会，只是简单的总结
(自己做的学生信息管理系统为例)
- router.js 文件其实是一个路由的封装 （部分代码）
//express有专门的包装路由的
const express = require('express');
//导入文件操作模块
const Student = require('./student');
//创建一个包装路由的容器
const routor = express.Router();
//渲染首页
routor.get("/student",function (req, res) {
});
//添加 渲染页面 get请求
routor.get('/student/add',function (req,res) {
});
//修改 渲染页面 get请求
routor.get('/student/edit',function (req,res) {
});
//删除 get请求
routor.get('/student/delete',function (req,res) {
});
module.exports = routor; //导出单个
- student.js就是中间件，进行数据操作。
router.js 调用 student.js完成请求的处理工作。
最让人头大的就是异步操作得用回调函数 callback了，后面会认真去研究一下回调函数的使用 （部分代码）
//此例子操作的是文件 文件操作模块
const fs = require('fs');
let dataPath = './data.json';
/**
* 获取所有学生列表
* find的参数是 callback函数
* callback 的参数
* 第一个是err 成功是null， 错误是 错误对象
* 第二个是结果 成功是数组，错误是undefined
* return []*/
//查询所有信息
exports.find = function (callback) {
fs.readFile(dataPath,'utf8',function (err,data) {
if(err){
return callback(err);
}
callback(null,JSON.parse(data));
})
};
//根据id 查询对应的信息
exports.findByID = function(id,callback){
fs.readFile(dataPath,'utf8',function (err,data) {
if(err){
return callback(err);
}
....
callback(null,result);
})
};
- 前面的模块都那么复杂了，那app.js当然就很简单了，只是导入router.js模块，然后把路由 挂载到 app服务中即可
const express = require("express");
const bodyParser = require('body-parser');
const router = require('./router'); //导入路由操作模块
let app = express();
//公开目录
app.use('/node_modules/',express.static('./node_modules/'));
app.use('/public',express.static('./public'));
//引入模板
app.engine('html',require('express-art-template'));
//配置 body-parser信息 得在 挂载路由之前
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//把路由 挂载到 app服务中
app.use(router);
app.listen(3030,function () {
console.log("http://localhost:3030");
});
上面的操作初学者肯定会很晕，但其实如果代码没那么复杂，是可以直接写在一个件里的，不需要封装路由，及数据操作的。
-
最后讲下数据库连接吧
我也是很浅显的学习了一下连接数据库，操作数据
如何配置以及增删改查等方法，在之前也总结过，这里就不说了
下面看个 express + 模板渲染 + mysql 的综合吧（部分代码）
只看app.js文件哦 ，很简单的单个文件操作，没有利用中间件及路由模块的封装。初学者比较适合。
const express = require('express');
const app = express();
//post请求需要导入第三方模块
const bodyParser = require('body-parser');
const mysql = require('mysql');
//连接 数据库
let connection= mysql.createConnection({
host : 'localhost',
user : 'root',
password : '***************',
database : '***'
});
connection.connect();
//指定开放目录资源
app.use('/public/',express.static('./public'));
app.use('/views/',express.static('./views'));
//指定模板解析引擎
app.engine('html',require('express-art-template'));
//post请求需要的配置
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
（查询所有的数据渲染到页面中）
app.get('/',function (req,res) {
let sql = 'select * from test'; //查询语句
connection.query(sql,function (err, result) {
if(err){
console.log('[SELECT ERROR] ',err.message);
return;
}
res.render('index.html',{
data: result
});
});
});
(res.render()方法可以只加载页面，不用数据渲染)
app.get('/about',function (req,res) {
res.render('about.html');
});
(将提交的留言添加到数据库 （数据库中插入数据））
app.post('/message',function (req,res) {
let data = req.body;
let addSql = 'insert into comment(username,content,date,id) VALUES(?,?,?,0)';
let addSqlParams = [data.username,data.content,data.date,data.id];
connection.query(addSql,addSqlParams,function (err,result) {
if(err){
console.log('[SELECT ERROR]',err.message);
}
res.redirect('/message'); //插入数据库之后 重定向
});
});
简单看下评论页面加载的模板吧，
取渲染页面的数据data的属性名，与所查数据库中表的列名一致即可
<div id="content-body">
{{each data as value}}
<div class="dialog-box">
<img src="{{value.headimg}}">
<div class="triangle-div">
<span>{{value.username}}</span>
<span>{{value.date}}</span>
<div>
<span>{{value.content}}</span>
</div>
</div>
</div>
{{/each}}
</div>
很简单的总结到此结束，以后如果深入学习的话，再深入总结吧，要开始学别的了。这个夏天，要加油！
网友评论