node.js数据库报错Failed to lookup view “list“ in views directory

今天在自己学习回顾node.js连接数据库并将所获取的数据返回给前端界面时,遇到了一个报错Failed to lookup view “list” in views directory,具体报错信息如下图:
在这里插入图片描述
出错不可怕,让我们来排查一下,来吧,上代码

在这里插入图片描述

两种修改方式

1.我们可以修改view文件下的ejs文件名,使其与代码中render中的第一个参数相同
2.我们可以修改代码中render中的第一个参数,使其与view文件下的ejs文件名相同
总之,就是让代码中render中的第一个参数与view文件下的ejs文件名保持一致
即:模板名要保持一致,我下面是改的render参数
在这里插入图片描述
下面是出错的另一种情况,模板路径设置错误在这里插入图片描述
写view路径为:“c:\Users\Administrator\Desktop\node\practiceview”
加上斜杠写/view路径就变成"c:\Users\Administrator\Desktop\node\practice/view"

下面是我的前端界面,很丑,莫怪。。。。。。。。。。
在这里插入图片描述
信息列表获取成功

在这里插入图片描述
下面是源码

HTML界面

<!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>学生</title>
</head>

<body>
    <h1>提交信息</h1>
    <form action="/postData">
        <p>
            <input type="text" placeholder="请输入用户名" name="username" autocomplete="off">
        </p>
        <p>
            <input type="text" placeholder="请输入手机号" name="tel">
        </p>
        <p>
            <input type="radio" value="" checked placeholder="请输入用户名" name="sex"><input type="radio" value="" placeholder="请输入用户名" name="sex"></p>
        <p> <input type="submit"></p>
    </form>
    <a href="/list"> 信息列表</a>   
</body>
</html>

服务器代码

const express = require('express');
//这里是我自己封装了一个模块4.db.js,我在下面附上代码吧
const db = require('./4.db');
var app = express();
// jieshouqianduanqingqiu
app.use(express.static(__dirname + "/public"))
// 接收一下前端请求
// 添加学生信息
app.get("/postData", (req, res) => {
    
    
    // 链接数据库   配置信息
    var connection = db();
    // 链接数据库
    connection.connect((err) => {
    
    
        // 获取前端传过来的数据
        var {
    
     username, tel, sex } = req.query
        if (err) {
    
    
            return console.log("链接数据库失败:", err);
        }
        console.log("链接数据库成功:");
        connection.query("insert into history(name,tel,sex) values(?,?,?)", [username, tel, sex], (err, result) => {
    
    
            if (err) {
    
    
                return console.log("前段参数有误:",err);
            }
            res.send("添加成功")
        })
    })
    console.log("req:", req.query);

})
// 设置模板路径
app.set("views",__dirname+"/view")
// 设置模板引擎
app.set("view engine","ejs")

app.get("/list",(req,res)=>{
    
    
    // 获取数据库配置信息
    var connection = db();
    // 根据配置信息  连接数据库
    connection.connect((err)=>{
    
    
        if (err) {
    
    
            console.log("list链接数据库失败");
        }
        connection.query("select * from history",[],(err,result,field)=>{
    
    
            if (err) {
    
    
                return console.log("执行SQL 查询列表 语句失败:",err);
            }
            // 获取  查询结果   返回给前端
            res.render("list",{
    
    list:result})
            // 关闭链接
            connection.end();
        })
    })
})
app.listen(9111, () => {
    
    
    console.log("9111服务启动");
})

4.db.js模板
const mysql =require(“mysql”);
// 导出
module.exports = function (database =“bkk_01”) {
return mysql.createConnection({
host:“127.0.0.1”,//主机地址
user:“root”,
password:“root”,
port:“3306”,//端口号
database:database//数据库名字
})
}

ejs模板

<h1>学生信息列表</h1>
<ul>
    <% list.forEach(function(item){%>
        <li>
            <p><%=item.name  %> </p>
            <p><%=item.age  %> </p>
        </li>
    <% }) %>   
</ul>

猜你喜欢

转载自blog.csdn.net/m0_56026872/article/details/118144574