egg學習筆記第三十二天：將頁面及靜態資源整合到eggjs項目中

時間 2020-05-18

標籤 egg 學習筆記第三十二天 2天頁面靜態資源整合 eggjs 項目欄目網站開發简体版

原文原文鏈接

1、靜態頁面資源目錄結構以下（一些登陸和權限靜態頁面和靜態資源）javascript

2、將靜態文件引入到egg項目當中：css

將Bootstrap，css，images，js文件夾放入eggjs項目的public>admin後臺管理模板文件夾中：html

3、將靜態代碼中的index.html首頁文件粘貼到view>admin>manager>index.html中java

靜態資源路徑所有添加 node

/public/admin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--The content below is only a placeholder and can be replaced.-->

    <link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="/public/admin/css/basic.css">

    <script type="text/javascript" src="/public/admin/bootstrap/js/jquery-1.10.1.js"></script>

    <script type="text/javascript" src="/public/admin/js/base.js"></script>

    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">

          <img src="/public/admin/images/node.jpg" height="44px;"/>

        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a>歡迎您,admin</a>
            </li>
            <li>
              <a href="#">安全退出</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-2">
          <ul class="aside">

            <li>
              <h4>管理員管理</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/"> 管理員列表</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">增長管理員</a>
                </li>
              </ul>
            </li>
            <li>
              <h4>分類管理</h4>
              <ul>
                <li  class="list-group-item">
                  <a href="/"> 商品分類列表</a>
                </li>

                <li class="list-group-item">
                  <a href="/add" >增長商品分類</a>
                </li>
              </ul>
            </li>
            <li>
              <h4>商品管理</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/"> 商品列表</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">增長商品</a>
                </li>
              </ul>
            </li>

            <li>
              <h4>輪播圖管理</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/">輪播圖列表</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">輪播圖商品</a>
                </li>
              </ul>
            </li>

          </ul>

        </div>
        <div class="col-sm-10">

          <div class="panel panel-default">
            <div class="panel-heading">
                    搜索
                </div>
            <div class="panel-body">
              <form role="form" class="form-inline">
                <div class="form-group">
                  <label for="name">名稱</label>
                  <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-default">開始搜索</button>
                </div>
              </form>
            </div>
          </div>
          <!--
                列表展現
            -->
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr class="th">
                  <th>編號</th>
                  <th>圖標</th>
                  <th>名稱</th>
                  <th>價格</th>
                  <th>郵費</th>

                  <th class="text-center">操做</th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td>1</td>
                  <td>圖標</td>
                  <td>揹包1111111</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>圖標</td>
                  <td>thinpad筆記本電腦</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>圖標</td>
                  <td>iphone7</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>

              </tbody>
            </table>
          </div>

        </div>
      </div>
    </div>

  </body>
</html>

訪問/admin/manager能夠渲染當前index頁面：jquery

訪問/admin/manager/add能夠渲染當前add頁面，在view>admin下新建add頁面：bootstrap

將老版本edit頁面粘貼過來修改靜態資源路徑，在訪問/admin/manager/add能夠渲染當前add頁面可得：安全

edit頁面大體如上圖頁面所示。iphone

角色權限的模塊劃分大體以下圖所示：ide

四：將頭部header和側邊欄sidebar抽離成公共模塊。

在view>admin新建public文件夾，而後新建page_header.html 和page_sidebar.html

五：將page_header文件中寫入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--The content below is only a placeholder and can be replaced.-->

    <link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="/public/admin/css/basic.css">

    <script type="text/javascript" src="/public/admin/bootstrap/js/jquery-1.10.1.js"></script>

    <script type="text/javascript" src="/public/admin/js/base.js"></script>

    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">

          <img src="/public/admin/images/node.jpg" height="44px;"/>

        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a>歡迎您,admin</a>
            </li>
            <li>
              <a href="#">安全退出</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

6、將上面修改的頁面頭部替換爲：

<%- include ../public/page_header.html%>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <ul class="aside">

          <li>
            <h4>管理員管理</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/"> 管理員列表</a>
              </li>

              <li class="list-group-item">
                <a href="/add">增長管理員</a>
              </li>
            </ul>
          </li>
          <li>
            <h4>分類管理</h4>
            <ul>
              <li  class="list-group-item">
                <a href="/"> 商品分類列表</a>
              </li>

              <li class="list-group-item">
                <a href="/add" >增長商品分類</a>
              </li>
            </ul>
          </li>
          <li>
            <h4>商品管理</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/"> 商品列表</a>
              </li>

              <li class="list-group-item">
                <a href="/add">增長商品</a>
              </li>
            </ul>
          </li>

          <li>
            <h4>輪播圖管理</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/">輪播圖列表</a>
              </li>

              <li class="list-group-item">
                <a href="/add">輪播圖商品</a>
              </li>
            </ul>
          </li>

        </ul>

      </div>
      <div class="col-sm-10">

        <div class="panel panel-default">
          <div class="panel-heading">
                    搜索
                </div>
          <div class="panel-body">
            <form role="form" class="form-inline">
              <div class="form-group">
                <label for="name">名稱</label>
                <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
              </div>

              <div class="form-group">
                <button type="submit" class="btn btn-default">開始搜索</button>
              </div>
            </form>
          </div>
        </div>
        <!--
                列表展現
            -->
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
              <tr class="th">
                <th>編號</th>
                <th>圖標</th>
                <th>名稱</th>
                <th>價格</th>
                <th>郵費</th>

                <th class="text-center">操做</th>
              </tr>
            </thead>
            <tbody>

              <tr>
                <td>1</td>
                <td>圖標</td>
                <td>揹包1111111</td>
                <td>20元</td>
                <td>10元</td>

                <td class="text-center">修改  刪除</td>
              </tr>
              <tr>
                <td>2</td>
                <td>圖標</td>
                <td>thinpad筆記本電腦</td>
                <td>20元</td>
                <td>10元</td>

                <td class="text-center">修改  刪除</td>
              </tr>
              <tr>
                <td>3</td>
                <td>圖標</td>
                <td>iphone7</td>
                <td>20元</td>
                <td>10元</td>

                <td class="text-center">修改  刪除</td>
              </tr>

            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>

</body>
</html>

7、側邊欄也基本如上圖所示：page_sidebar.html

<div class="col-sm-2">
  <ul class="aside">

    <li>
      <h4>管理員管理</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/"> 管理員列表</a>
        </li>

        <li class="list-group-item">
          <a href="/add">增長管理員</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>分類管理</h4>
      <ul>
        <li  class="list-group-item">
          <a href="/"> 商品分類列表</a>
        </li>

        <li class="list-group-item">
          <a href="/add" >增長商品分類</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>商品管理</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/"> 商品列表</a>
        </li>

        <li class="list-group-item">
          <a href="/add">增長商品</a>
        </li>
      </ul>
    </li>

    <li>
      <h4>輪播圖管理</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/">輪播圖列表</a>
        </li>

        <li class="list-group-item">
          <a href="/add">輪播圖商品</a>
        </li>
      </ul>
    </li>

  </ul>

</div>

八：主頁面修改成以下，訪問頁面無問題則抽離公共部分紅功。

<%- include ../public/page_header.html%>
  <div class="container-fluid">
    <div class="row">
      <%- include ../public/page_sidebar.html%>
        <div class="col-sm-10">

          <div class="panel panel-default">
            <div class="panel-heading">
                    搜索
                </div>
            <div class="panel-body">
              <form role="form" class="form-inline">
                <div class="form-group">
                  <label for="name">名稱</label>
                  <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-default">開始搜索</button>
                </div>
              </form>
            </div>
          </div>
          <!--
                列表展現
            -->
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr class="th">
                  <th>編號</th>
                  <th>圖標</th>
                  <th>名稱</th>
                  <th>價格</th>
                  <th>郵費</th>

                  <th class="text-center">操做</th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td>1</td>
                  <td>圖標</td>
                  <td>揹包1111111</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>圖標</td>
                  <td>thinpad筆記本電腦</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>圖標</td>
                  <td>iphone7</td>
                  <td>20元</td>
                  <td>10元</td>

                  <td class="text-center">修改  刪除</td>
                </tr>

              </tbody>
            </table>
          </div>

        </div>
      </div>
    </div>

  </body>
</html>

九.將側邊欄改成符合業務場景的菜單文案：渲染成爲以下所示

<div class="col-sm-2">
  <ul class="aside">

    <li>
      <h4>管理員管理</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/admin/manager">管理員列表</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/manager/add">增長管理員</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/manager/edit">編輯管理員</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>角色管理</h4>
      <ul>
        <li  class="list-group-item">
          <a href="/admin/role"> 角色列表</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/role/add" >新增角色</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/role/edit" >編輯角色</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>權限管理</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/admin/auth">權限列表</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/auth/add">增長權限</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/auth/edit">編輯權限</a>
        </li>
      </ul>
    </li>

  </ul>

</div>

十.添加login頁面，配置路由，配置login controller和render函數，修改靜態資源路徑，訪問可得：

碎碎碎！！！！！！