非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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。