哒哒哒菓子
2021-08-03 11:26
采纳率: 100%
浏览 45

node+ejs+mysql,node可以在ejs页面渲染出内容,但是控制台打印的是我ejs中的code


var express = require('express');
var mysql = require('mysql');
var app = express();

app.set('view engine', 'ejs')
var connection = mysql.createConnection({
    host: 'localhost',
    port: '3306',
    user: 'root',
    password: '1012',
    database: 'test'
});
connection.connect();
// var sql = 'SELECT * FROM websites WHERE id = 2';
var sql = 'SELECT * FROM websites';
var str = '';
var res = {}
connection.query(sql, function(err, result) {
    if(err) {
        console.log('[SELECT ERROR]:', err.message);
    }
    str = JSON.stringify(result);
    res = {
        data: JSON.parse(str)
    }
    console.log(res)
});
app.get('/', function(request, response) {
    // GET 请求不存在请求实体部分,因此请求头不需要设置 Content-Type 字段
    // Content-Type 标头告诉客户端实际返回的内容的内容类型。
    // response.set('Content-Type', 'application/json')
    console.log(request.url)
    // response.setHeader('Content-type','text/plain;charset=utf-8')
    // response.header("Content-Type", "application/json;charset=utf-8");
    // res.send(str)
    // response.type('html');
    // 第一个参数是视图的名称,如果是.ejs文件,必须省略后缀名,如果是.html,.jsp,.abc,.def等自己定义的后缀名时,必须加后缀。
    // 第二个参数是视图需要的数据
    response.render('index', res)
    // response.send({res:'ok'})
    // response.end()
    // 如果服务器端没有数据返回到客户端,那么就可以用 res.end
    // 如果服务器端有数据返回到客户端,这个时候必须用res.send ,不能用 res.end(会报错)
    // 大多数情况下,渲染内容用res.render(),将会根据views中的模板文件进行渲染。如果不想使用views文件夹,想自己设置文件夹名字,那么app.set("views","aaaa");
    // 如果想写一个快速测试页,当然可以使用res.send()。这个函数将根据内容,自动帮我们设置了Content-Type头部和200状态码。send()只能用一次,和end一样。和end不一样在哪里?能够自动设置MIME类型。
});
connection.end();
app.listen(3000, function() {
    console.log('Server running at 3000 port');
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        id:<input type="text" id="query-id">
        name:<input type="text" id="query-name">
        url:<input type="text" id="query-url">
        alexa:<input type="text" id="query-alexa">
        country:<input type="text" id="query-country">
        <button id="btn">查询</button>
    </div>
    <table border="1" rules="all">
        <thead>
            <th>id</th>
            <th>name</th>
            <th>url</th>
            <th>alexa</th>
            <th>country</th>
        </thead>
        <tbody>
            <%for(var i = 0; i < data.length; i++) {%>
                <tr>
                    <td><%=data[i].id%></td>
                    <td><%=data[i].name%></td>
                    <td><%=data[i].url%></td>
                    <td><%=data[i].alexa%></td>
                    <td><%=data[i].country%></td>
                </tr>
            <%}%>
        </tbody>
    </table>
</body>
</html>
<script>
    var btn = document.getElementById('btn')
    // 打印html
    // function ajax(type, url, async, func) {
    //     var xhr = new XMLHttpRequest()
    //     xhr.onreadystatechange = function() {
    //         if(xhr.status === 200 && xhr.readyState === 4) {
    //             func(xhr.responseText)
    //         }
    //     }
    //     xhr.open(type, url, async)
    //     xhr.send()
    // }
    // btn.onclick = function() {
    //     ajax('get', 'http://localhost:3000/', true, function(res) {
    //         console.log(res)
    //     })
    // }
    // 报错
    function ajax1(type, url, async) {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.status === 200 && xhr.readyState === 4) {
                    resolve(xhr.responseText)
                } else {
                    reject(new Error(xhr.statusText))
                }
            }
            xhr.open(type, url, async)
            xhr.send()
        })
    }
    // 打印html
    function ajax2(type, url, async) {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest()
            // 只有处于状态码4,请求已完成,响应已就绪的情况下,才会进入onload。只要进入onload请求中,一定是已经到4这个状态了。
            xhr.onload = function() {
                if(xhr.status === 200) {
                    resolve(xhr.responseText)
                } else {
                    reject(new Error(xhr.statusText))
                }
            }
            xhr.open(type, url, async)
            xhr.send()
        })
    }
    btn.onclick = function() {
        ajax2('get', 'http://localhost:3000/', true).then(res => {
            console.log(res)
        }).catch((error) => {
            console.log(error)
        })
    }

    // readyState    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成,且响应已就绪
    // Http状态码
    // 200-服务器成功返回网页
    // 404-请求的网页不存在
    // 503-服务器暂时不可用
</script>

img

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

相关推荐 更多相似问题