首页 > 其他 > 详细

学生管理模块-列表页

时间:2019-11-16 16:32:35      阅读:118      评论:0      收藏:0      [点我收藏+]

前端

list.ejs

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生列表</title>
    <link href="/stylesheets/bootstrap.css" type="text/css" rel="stylesheet">
</head>
<body>
    <!-- 美化 -->
    <!-- 注意bootstrap.css的版本和导航要一致。 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">学生管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggle-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">学生列表 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">添加学生</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#"></a>
                        <a class="dropdown-item" href="#"></a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"></a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-labelledby="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    结果: <%= message %>
    <h3>学生列表</h3>
    <table class="table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <% students %>
        <% students.forEach(function(stu,i){ %>
            <tr>
                <!-- stu {id:‘‘,name:‘小明‘}  obj -->
                <td><%= stu.stuNo %></td>
                <td><%= stu.name %></td>
                <td><%= stu.age %></td>
                <td><%= stu.gender %></td>
                <!-- 虽然可以if判断把性别代码装换成字符串,但ejs的语法随着逻辑复杂会变得复杂容易写错,应该在后端
                     <% if(stu.gender==1){ %><td>男</td><% }else{ %><td>女</td><% } %> 
                -->
                <td><%= stu.phone %></td>
                <td>
                    <a href="/students/update/<%= stu._id %>">
                        <button class="btn btn-warning">更新</button></a>
                    <!-- <a href="/students/delete?id=<%= stu._id %>">删除</a> -->
                    <a href="/students/delete/<%= stu._id %>">
                        <button class="btn btn-danger">
                            <img src="/images/icon/delete3.png" >
                            <span class="glyphicon glyphicon-trash"></span>
                            删除                                                              
                        </button>
                    </a>
                </td>
            </tr>
        <% }) %>
    </table>
</body>
</html>
后端
students.js
/**
 * 学生管理模块
 */
var debug = require(‘debug‘)(‘10studentsmanage:routes‘);
var express = require(‘express‘);

var mongoUtil = require(‘../common/mongoUtil‘);
var crud = mongoUtil.crud;
var router = express.Router();
 
/**
 * 查询学生列表
 * 匹配http://students/
 */

 router.get(‘/‘,function(req,res){
     res.redirect(‘/students/list‘);
 })
 /**
  * 查询学生列表(简易版)
  */
router.get(‘/list‘,function(req,res,next){
    var context = { }
    // 查询数据库
    crud(function(db){
        db.collection(‘students‘).find({}).toArray(function(err,docs){
            if (err) {
                context.message = ‘数据库报错,请联系管理员‘;
                throw err;
            } else {
                debug(‘docs‘,docs); // [{id:5d,no:‘001‘,name:‘小明‘},{},{}]
                // 处理下数据,代码转字符串、时间格式化、拼url
                docs.forEach(function(stu,i){
                    if (docs[i].gender == ‘1‘){
                        docs[i].gender = ‘男‘;
                    }else if (docs[i].gender == ‘2‘){
                        docs[i].gender = ‘女‘;
                    }else {
                        docs[i].gender == ‘未选择‘;
                    }
                    // docs[i].gender = docs[i].gender == ‘1‘?‘男‘:‘女‘;
                })
                
                // 上下文对象:context,连接上文代码(后端代码)和下文代码(前端代码)的变量
                // res.render(‘students/list.ejs‘,{message:‘‘,  students:docs});
                // var context = {
                //     message:‘查询成功‘,
                //     students:docs
                // }
                context.message = ‘查询成功‘;
                context.students = docs;
                debug(‘context‘,context);
                res.render(‘students/list.ejs‘,context)
            }
        })
    })
})
 
module.exports = router;

学生管理模块-列表页

原文:https://www.cnblogs.com/english19990-inng/p/11871977.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!