express学生管理系统、前后端分离（十二）

╰+攻爆jí腚メ 2023-03-12 14:28 24阅读 0赞

前言：该案例用到的技术栈有：express + bootstrap + mongodb + mongoose + jquery(Ajax)

## 一、环境部署 ##

1.  前端

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>前后端分离的学生管理系统</title>
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
        <script src="./js/jquery.js"></script>
        <script src="./bootstrap/js/bootstrap.min.js"></script>
        <script src="./js/myself.js"></script>
    </head>
    <body>
        <div class="container">
        <form action="" method="">
            <div class="form-group">
                <label for="exampleInputEmail1">姓名：</label>
                <input type="text" name='user' class="form-control user" id="exampleInputEmail1" aria-describedby="emailHelp">
                
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">年龄</label>
                <input type="number" class="form-control age" id="exampleInputPassword1" name='age'>
              </div>
              <div class="form-group">
                <label for="">性别</label>
      
                <div class="form-check form-check-inline">
                  <input class="form-check-input sex" checked type="radio" name="sex" id="inlineRadio1" value="男">
                  <label class="form-check-label" for="inlineRadio1">男</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input sex" type="radio" name="sex" id="inlineRadio2" value="女">
                  <label class="form-check-label" for="inlineRadio2">女</label>
                </div>
              </div>
              <button type="submit" class="btn btn-outline-info btn-block btn_add">提交</button>
            </form>
    
            
            <form class="form-inline mt-4">
                <div class="form-group mr-3 mb-2">
                  <label for="inputPassword2" class="sr-only">Password</label>
                  <input type="text" name='keyword' class="form-control" id="inputPassword2" placeholder="请输入你要查询的姓名">
                </div>
                <button type="button" class="btn btn-outline-info mb-2 btn_search"> 查询 </button>
            </form>
        
        
    
            
          <table class="table mt-4 table-bordered table-hover table-sm">
            <thead class="thead-dark">
              <tr>
                <th scope="col">姓名</th>
                <th scope="col">性别</th>
                <th scope="col">年龄</th>
                <th scope="col">时间</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody class="tbody">
    
                
             
            </tbody>
          </table>
    
    
    
        </div>
    
    
            
    
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">删除</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                    </div>
                    
                    <div class="modal-body">
                        <h3>您确定要删除吗？</h3>
                    </div>
                    
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                      <button type="button" class="btn btn-primary del">确定</button>
                    </div>
                  </div>
                </div>
              </div>
    </body>
    </html>
    
    <script> //删除 //获取模态框，然后绑定事件（show.bs.modal) 该事件当且仅当模态框弹出是触发 $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal 弹出模态框的button console.log(button); // 按钮 借助 data-whatever 属性传参过来。 var recipient = button.data('whatever') // 获取button的属性值。data-whatever的属性值。 // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. console.log(recipient) var modal = $(this)// 获取当前模态框 // modal.find('.modal-title').text('New message to ' + recipient) // modal.find('.modal-body input').val(recipient) // 通过ajax 进行删除 $('.del').on('click',function(){ $.ajax({ url:'http://127.0.0.1:3000/api/del', type:'get', data:{ _id:recipient}, success:function(res){ console.log(res); if(res.code==1){ // {code:1,msg:'删除成功'} // 关闭模态框 modal.modal('hide'); //刷新当前页面 // window.location.href='/' location.reload() } } }) }) }) </script>

myself.js

$(function(){ 
        //代码
        // 添加
        $('.btn_add').click(function(event){ 
    
            event.preventDefault();
    
            var user=$('.user').val();
            var age=$('.age').val();
            var sex=$('.sex:checked').val();
    
            console.log(user,age,sex);
    
            if(user==''||age==""){ 
              alert('不能为空');
              return;
            }
        
            $.ajax({ 
                url:'http://127.0.0.1:3000/api/add',
                type:'post',
                data:{ user:user,age:age,sex:sex},
                success:function(res){ 
                  console.log(res);
    
                   if(res.code==1){ 
                       // 查询 如果添加成功看，需要请求查询接口。
                        find();
                   }
                }
            })
    
    
            // return false;
        })
    
    
        // 搜索
        $('.btn_search').on('click',function(event){ 
            console.log('搜索')
            event.preventDefault();
            var keyword=$('[name=keyword]').val();
            $.ajax({ 
                url:'http://127.0.0.1:3000/api/search',
                type:'get',
                data:{ keyword},
                success:function(res){ 
                    console.log(res);
                    var str='';
                    
                    res.data.forEach(function(item,index){ 
    
                        var date=new Date(item.updatedAt)
                        var year=date.getFullYear();
                        var month=date.getMonth()+1;
                        var day=date.getDate();
                        str+=`<tr> <th scope="row">${ item.user}</th> <td>${ item.sex}</td> <td>${ item.age}</td> <td>${ year+'-'+month+'-'+day}</td> <td>  <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#exampleModal" data-whatever="${ item._id}">删除</button>  <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#update" data-whatever='{"_id":"<%= list[item]._id %>","user":"<%= list[item].user %>","age":"<%= list[item].age %>","sex":"<%= list[item].sex %>"}'>修改</button> </td> </tr> `
                    })
                    $('.tbody').html(str);
                }
    
            })
    
    
        })
    
        // 全局 也要请求查询接口
    
        find();
        function find(){ 
                            // 查询 如果添加成功看，需要请求查询接口。
                            $.ajax({ 
                                url:'http://127.0.0.1:3000/api/find',
                                type:'get',
                                data:{ },
                                success:function(res){ 
                                    console.log(res);
                                    var str='';
                                    res.data.forEach(function(item,index){ 
                                        // console.log(item)
                                         var date=new Date(item.updatedAt)
                                        var year=date.getFullYear();
                                        var month=date.getMonth()+1;
                                        var day=date.getDate();
                                        console.log(year,month,day);
                                       str+=`<tr> <th scope="row">${ item.user}</th> <td>${ item.sex}</td> <td>${ item.age}</td> <td>${ year+'-'+month+'-'+day}</td> <td>  <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#exampleModal" data-whatever="${ item._id}">删除</button>  <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#update" data-whatever='{"_id":"<%= list[item]._id %>","user":"<%= list[item].user %>","age":"<%= list[item].age %>","sex":"<%= list[item].sex %>"}'>修改</button> </td> </tr> `
                                    });
            
                                    $('.tbody').html(str);
                                }
                            })
        }
    })

1.  后端  
    app.js需要配置cors跨域请求

//设置允许跨域访问该服务. cors
    app.all('*', function (req, res, next) { 
      res.header('Access-Control-Allow-Origin', '*');
      //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      res.header('Access-Control-Allow-Methods', '*');
      res.header('Content-Type', 'application/json;charset=utf-8');
      next();
      });

api.js

//创建路由
    var express = require('express');
    var router = express.Router();
    var Student = require('../model/Student');
    
    //写一个中间件，设置每次返回的json数据结构。（保证数据结构的一致性）
    router.use(function(req,res,next){ 
       req.obj={ code:0,msg:'',data:[]};
       next();// 放行
    })
    
    /* 查询 */
     router.get('/find',function(req,res,next){ 
         Student.find({ },function(err,datas){ 
             if(!err){ 
                 req.obj.code=1;
                 req.obj.msg='查询成功';
                 req.obj.data=datas;
                 res.json(req.obj);
             }
         })
     })
    
    /* 添加 */
    router.post('/add', function(req, res, next) { 
        Student.create({ user:req.body.user,age:req.body.age,sex:req.body.sex},function(err){ 
            if(!err){ 
                console.log('写入成功');
                // res.redirect('/') ajax 是异步操作，不可以用res.redirect()相应。
                req.obj.code=1;
                req.obj.msg='添加成功'
                res.json(req.obj)
            }
        })
    });
    //删除
    router.get('/del',function(req,res,next){ 
       Student.remove({ _id:req.query._id},function(err){ 
           if(!err){ 
               req.obj.code=1;
               req.obj.msg='删除成功';
               res.json(req.obj)
           }
       })
    })
    //搜索
    router.get('/search',function(req,res,next){ 
        var keyword=req.query.keyword;
        var reg=new RegExp(keyword,'i');
    
        Student.find({ user:reg},function(err,datas){ 
            if(!err){ 
                req.obj.code=1;
                req.obj.msg='搜索成功'
                req.obj.data=datas;
                res.json(req.obj)
            }
        })
    })
    
    
    module.exports = router;

## 二、node 服务器解决跨域 CORS ##

什么是跨域请求：  
页面在 http://www.baidu.com:3000服务器上，需要请求接口  
http://www.tencent.com:4000/api.

只要，协议，域名，端口号 三者有一个不同就是跨域。

跨域请求会报错：

Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/add' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在node服务器中，可以通过设置中间件的形式，允许跨域请求。（cors）

//设置允许跨域访问该服务.
    app.all('*', function (req, res, next) { 
    //可以指定 允许的请求源 ‘*’ 表示允许所欲源请求 可以指定 ‘http://xxxx.xx:2000’
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
    });