express + art-template + mysql的综

2019-07-26 本文已影响0人小本YuDL

上篇已经总结了最简单的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>

很简单的总结到此结束，以后如果深入学习的话，再深入总结吧，要开始学别的了。这个夏天，要加油！

express + art-template + mysql的综

express的核心

首先，说下怎么用 art-template 模板吧

下面简单说下路由router.js 和中间件 student.js吧

最后讲下数据库连接吧

猜你喜欢

热点阅读

express + art-template + mysql的综

express的核心

首先，说下怎么用 art-template 模板吧

下面简单说下 路由router.js 和 中间件 student.js吧

最后讲下数据库连接吧

猜你喜欢

热点阅读

下面简单说下路由router.js 和中间件 student.js吧