Day 32 of egg Learning Notes: Integrate pages and static resources into the eggjs project

1. The structure of the static page resource directory is as follows (some login and privilege static pages and static resources)

2. Introduce static files into the egg project:

Put the Bootstrap, css, images, js folder in the public>admin background management template folder of the eggjs project:

 

3. Paste the index.html homepage file in static code into view>admin>manager>index.html

Add all static resource paths

/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>Welcome,admin</a>
            </li>
            <li>
              <a href="#">Exit safely</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

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

            <li>
              <h4>Administrator Management</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/"> managers</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">Add Administrator</a>
                </li>
              </ul>
            </li>
            <li>
              <h4>Classified Management</h4>
              <ul>
                <li  class="list-group-item">
                  <a href="/"> Category List</a>
                </li>

                <li class="list-group-item">
                  <a href="/add" >Increase commodity classification</a>
                </li>
              </ul>
            </li>
            <li>
              <h4>Commodity Management</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/"> List of Goods</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">Increase Commodity</a>
                </li>
              </ul>
            </li>

            <li>
              <h4>Carousel Map Management</h4>

              <ul>
                <li  class="list-group-item">
                  <a href="/">Roadmap List</a>
                </li>

                <li class="list-group-item">
                  <a href="/add">Roadmap Merchandise</a>
                </li>
              </ul>
            </li>

          </ul>

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

          <div class="panel panel-default">
            <div class="panel-heading">
                    search
                </div>
            <div class="panel-body">
              <form role="form" class="form-inline">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Please enter a name">
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-default">Start Search</button>
                </div>
              </form>
            </div>
          </div>
          <!--
                List Display
            -->
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr class="th">
                  <th>number</th>
                  <th>Icon</th>
                  <th>Name</th>
                  <th>Price</th>
                  <th>Postage</th>

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

                <tr>
                  <td>1</td>
                  <td>Icon</td>
                  <td>Backpack 1111111</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Icon</td>
                  <td>thinpad Notebook computer</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Icon</td>
                  <td>iphone7</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>

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

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

  </body>
</html>

Access/admin/manager to render the current index page:

 

Visit/admin/manager/add to render the current add page, create a new add page under view>admin:

Paste the old edit page over to modify the static resource path, and render the current add page at access/admin/manager/add:

The edit page is roughly the same as the one shown above.

The module division of role privileges is roughly as follows:

 

Four: Pull the header and sidebar out of the common module.

Create a new public folder in view>admin, then create new page_header.html and page_sidebar.html

Five: Write in the page_header file

<!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>Welcome,admin</a>
            </li>
            <li>
              <a href="#">Exit safely</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

6. Replace the page header modified above with:

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

          <li>
            <h4>Administrator Management</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/"> managers</a>
              </li>

              <li class="list-group-item">
                <a href="/add">Add Administrator</a>
              </li>
            </ul>
          </li>
          <li>
            <h4>Classified Management</h4>
            <ul>
              <li  class="list-group-item">
                <a href="/"> Category List</a>
              </li>

              <li class="list-group-item">
                <a href="/add" >Increase commodity classification</a>
              </li>
            </ul>
          </li>
          <li>
            <h4>Commodity Management</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/"> List of Goods</a>
              </li>

              <li class="list-group-item">
                <a href="/add">Increase Commodity</a>
              </li>
            </ul>
          </li>

          <li>
            <h4>Carousel Map Management</h4>

            <ul>
              <li  class="list-group-item">
                <a href="/">Roadmap List</a>
              </li>

              <li class="list-group-item">
                <a href="/add">Roadmap Merchandise</a>
              </li>
            </ul>
          </li>

        </ul>

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

        <div class="panel panel-default">
          <div class="panel-heading">
                    search
                </div>
          <div class="panel-body">
            <form role="form" class="form-inline">
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Please enter a name">
              </div>

              <div class="form-group">
                <button type="submit" class="btn btn-default">Start Search</button>
              </div>
            </form>
          </div>
        </div>
        <!--
                List Display
            -->
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
              <tr class="th">
                <th>number</th>
                <th>Icon</th>
                <th>Name</th>
                <th>Price</th>
                <th>Postage</th>

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

              <tr>
                <td>1</td>
                <td>Icon</td>
                <td>Backpack 1111111</td>
                <td>20 element</td>
                <td>10 element</td>

                <td class="text-center">Modify Delete</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Icon</td>
                <td>thinpad Notebook computer</td>
                <td>20 element</td>
                <td>10 element</td>

                <td class="text-center">Modify Delete</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Icon</td>
                <td>iphone7</td>
                <td>20 element</td>
                <td>10 element</td>

                <td class="text-center">Modify Delete</td>
              </tr>

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

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

</body>
</html>

7. The sidebar is also basically as shown in the figure above: page_sidebar.html

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

    <li>
      <h4>Administrator Management</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/"> managers</a>
        </li>

        <li class="list-group-item">
          <a href="/add">Add Administrator</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>Classified Management</h4>
      <ul>
        <li  class="list-group-item">
          <a href="/"> Category List</a>
        </li>

        <li class="list-group-item">
          <a href="/add" >Increase commodity classification</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>Commodity Management</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/"> List of Goods</a>
        </li>

        <li class="list-group-item">
          <a href="/add">Increase Commodity</a>
        </li>
      </ul>
    </li>

    <li>
      <h4>Carousel Map Management</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/">Roadmap List</a>
        </li>

        <li class="list-group-item">
          <a href="/add">Roadmap Merchandise</a>
        </li>
      </ul>
    </li>

  </ul>

</div>

Eight: The main page is modified as follows, if there is no problem accessing the page, the public part is successfully extracted.

<%- 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">
                    search
                </div>
            <div class="panel-body">
              <form role="form" class="form-inline">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Please enter a name">
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-default">Start Search</button>
                </div>
              </form>
            </div>
          </div>
          <!--
                List Display
            -->
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr class="th">
                  <th>number</th>
                  <th>Icon</th>
                  <th>Name</th>
                  <th>Price</th>
                  <th>Postage</th>

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

                <tr>
                  <td>1</td>
                  <td>Icon</td>
                  <td>Backpack 1111111</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Icon</td>
                  <td>thinpad Notebook computer</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Icon</td>
                  <td>iphone7</td>
                  <td>20 element</td>
                  <td>10 element</td>

                  <td class="text-center">Modify Delete</td>
                </tr>

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

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

  </body>
</html>

9. Change the sidebar to a menu copy that fits the business scene: Render as follows

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

    <li>
      <h4>Administrator Management</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/admin/manager">managers</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/manager/add">Add Administrator</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/manager/edit">Edit Administrator</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>Role Management</h4>
      <ul>
        <li  class="list-group-item">
          <a href="/admin/role"> Role List</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/role/add" >New roles</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/role/edit" >Edit Roles</a>
        </li>
      </ul>
    </li>
    <li>
      <h4>Rights Management</h4>

      <ul>
        <li  class="list-group-item">
          <a href="/admin/auth">Permission List</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/auth/add">Add permissions</a>
        </li>

        <li class="list-group-item">
          <a href="/admin/auth/edit">Edit Permissions</a>
        </li>
      </ul>
    </li>

  </ul>

</div>

10. Add login pages, configure routes, configure login controller s and render functions, modify static resource paths, and access them:

 

Crushed!!!!!

Tags: Javascript JQuery

Posted on Sun, 17 May 2020 13:40:27 -0400 by jhbalaji