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 role="navigation"> <div> <div> <img src="/public/admin/images/node.jpg" height="44px;"/> </div> <div id="example-navbar-collapse"> <ul> <li> <a>Welcome,admin</a> </li> <li> <a href="#">Exit safely</a> </li> </ul> </div> </div> </nav> <div> <div> <div> <ul> <li> <h4>Administrator Management</h4> <ul> <li> <a href="/"> managers</a> </li> <li> <a href="/add">Add Administrator</a> </li> </ul> </li> <li> <h4>Classified Management</h4> <ul> <li> <a href="/"> Category List</a> </li> <li> <a href="/add" >Increase commodity classification</a> </li> </ul> </li> <li> <h4>Commodity Management</h4> <ul> <li> <a href="/"> List of Goods</a> </li> <li> <a href="/add">Increase Commodity</a> </li> </ul> </li> <li> <h4>Carousel Map Management</h4> <ul> <li> <a href="/">Roadmap List</a> </li> <li> <a href="/add">Roadmap Merchandise</a> </li> </ul> </li> </ul> </div> <div> <div> <div> search </div> <div> <form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <button type="submit">Start Search</button> </div> </form> </div> </div> <!-- List Display --> <div> <table> <thead> <tr> <th>number</th> <th>Icon</th> <th>Name</th> <th>Price</th> <th>Postage</th> <th>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>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>Modify Delete</td> </tr> <tr> <td>3</td> <td>Icon</td> <td>iphone7</td> <td>20 element</td> <td>10 element</td> <td>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 role="navigation"> <div> <div> <img src="/public/admin/images/node.jpg" height="44px;"/> </div> <div id="example-navbar-collapse"> <ul> <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> <div> <div> <ul> <li> <h4>Administrator Management</h4> <ul> <li> <a href="/"> managers</a> </li> <li> <a href="/add">Add Administrator</a> </li> </ul> </li> <li> <h4>Classified Management</h4> <ul> <li> <a href="/"> Category List</a> </li> <li> <a href="/add" >Increase commodity classification</a> </li> </ul> </li> <li> <h4>Commodity Management</h4> <ul> <li> <a href="/"> List of Goods</a> </li> <li> <a href="/add">Increase Commodity</a> </li> </ul> </li> <li> <h4>Carousel Map Management</h4> <ul> <li> <a href="/">Roadmap List</a> </li> <li> <a href="/add">Roadmap Merchandise</a> </li> </ul> </li> </ul> </div> <div> <div> <div> search </div> <div> <form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <button type="submit">Start Search</button> </div> </form> </div> </div> <!-- List Display --> <div> <table> <thead> <tr> <th>number</th> <th>Icon</th> <th>Name</th> <th>Price</th> <th>Postage</th> <th>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>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>Modify Delete</td> </tr> <tr> <td>3</td> <td>Icon</td> <td>iphone7</td> <td>20 element</td> <td>10 element</td> <td>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> <ul> <li> <h4>Administrator Management</h4> <ul> <li> <a href="/"> managers</a> </li> <li> <a href="/add">Add Administrator</a> </li> </ul> </li> <li> <h4>Classified Management</h4> <ul> <li> <a href="/"> Category List</a> </li> <li> <a href="/add" >Increase commodity classification</a> </li> </ul> </li> <li> <h4>Commodity Management</h4> <ul> <li> <a href="/"> List of Goods</a> </li> <li> <a href="/add">Increase Commodity</a> </li> </ul> </li> <li> <h4>Carousel Map Management</h4> <ul> <li> <a href="/">Roadmap List</a> </li> <li> <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> <div> <%- include ../public/page_sidebar.html%> <div> <div> <div> search </div> <div> <form role="form"> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="Please enter a name"> </div> <div> <button type="submit">Start Search</button> </div> </form> </div> </div> <!-- List Display --> <div> <table> <thead> <tr> <th>number</th> <th>Icon</th> <th>Name</th> <th>Price</th> <th>Postage</th> <th>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>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>Modify Delete</td> </tr> <tr> <td>3</td> <td>Icon</td> <td>iphone7</td> <td>20 element</td> <td>10 element</td> <td>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> <ul> <li> <h4>Administrator Management</h4> <ul> <li> <a href="/admin/manager">managers</a> </li> <li> <a href="/admin/manager/add">Add Administrator</a> </li> <li> <a href="/admin/manager/edit">Edit Administrator</a> </li> </ul> </li> <li> <h4>Role Management</h4> <ul> <li> <a href="/admin/role"> Role List</a> </li> <li> <a href="/admin/role/add" >New roles</a> </li> <li> <a href="/admin/role/edit" >Edit Roles</a> </li> </ul> </li> <li> <h4>Rights Management</h4> <ul> <li> <a href="/admin/auth">Permission List</a> </li> <li> <a href="/admin/auth/add">Add permissions</a> </li> <li> <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!!!!!