非AJAX的CRUD，使用Node.js+Express+ejs的动态技术--图书管理系统之查询操做

时间 2019-11-17

标签 ajax crud 使用 node.js+express+ejs node express ejs 动态技术图书管理系统查询栏目 Ajax 繁體版

原文原文链接

在Hbulider的工具中，首先要安装nodeclipse插件，css

建立项目完毕，其目录结构为：(以下图)html

在routes下建立一个books.js,其代码以下：java

var books=[
    {number:201801,bname:"使用ajax js开发下一代应用程序",imgs:"b01.jsp",price:50,author:"打磨穹丘"},
    {number:201802,bname:"javaScript应用程序设计",imgs:"b02.jsp",price:55,author:"啊师傅"},
    {number:201803,bname:"html与css网页设计",imgs:"b03.jsp",price:48,author:"房管局"}
];


exports.list = function(req, res){
    res.render('index', { list:books,title: '图书管理系统' });
};

修改views下的index.ejs--》其代码以下：node

<!DOCTYPE html>
<html>

    <head>
        <title>
            <%= title %>
        </title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>

    <body>
        <h1><%= title %></h1>
        <table border="1" width="80%">
            <tr>
                <th>序号</th>
                <th>编号</th>
                <th>书名</th>
                <th>图片</th>
                <th>价格</th>
                <th>做者</th>
                <th>操做</th>
            </tr>
            <% list.forEach(function(bks,index) 
                {%>
            <tr align="center">
                <td>
                    <%=index+1%>
                </td>
                <td>
                    <%=bks.number%>
                </td>
                <td>
                    <%=bks.bname%>
                </td>
                <td>
                    <%=bks.imgs%>
                </td>
                <td>
                    <%=bks.price%>
                </td>
                <td>
                    <%=bks.author%>
                </td>
                <td>
                    <button>删除</button><button>修改</button>
                </td>
            </tr>
            <%});
                %>
        </table>
    </body>

</html>

修改app.jsajax

exports.list = function(req, res){ res.render('index', { list:books,title: '图书管理系统' }); };

运行：打开app.js运行app

在网页中输入路径：http://localhost:3000/books 便可。eclipse

实现效果：仅查询jsp