全栈学习之心态爆炸的每一天！！！

最新推荐文章于 2024-07-14 14:57:40 发布

致虚守静~归根复命

最新推荐文章于 2024-07-14 14:57:40 发布

阅读量783

点赞数

分类专栏：笔记文章标签： html jquery js

本文链接：https://blog.csdn.net/weixin_44412311/article/details/107567319

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

因为学习Python，然后呢就学到了Django框架，在B站呢就搜到了“老男孩全栈教程”，还饶有兴趣的学了起来，一开始还是可以接受的，但是随着学习的深入，用到的东西也越来越多，像这个Ajax，jQuery，是真心不会这两个框架，为了能更快地跟上视频的进度，我选择先去学习前端，总的来说，HTML语言还是比较简单的，目前的话已经开始接触到CSS,这个框架总的来说很好用，但是需要掌握的东西还是比较多的，哦对了，在这里要感谢一下pink老师，讲的很好，而且他的视频每个都比较短，他的视频共有388p，我在三天之内爆淦92p，今天还有25p没有看完呢，我会抓紧的(昨晚熬夜到1点），今晚可能还要熬夜了吧。
闲话不说了，跟随着老男孩视频做的一个学院管理（还是得吐槽一下，真的是越来越难了，30分钟的视频我得看一个小时），然后把其中的班级管理的代码承上给各位爷看一下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
    <style>
        .hide{display: none;}
        .shadow{position: fixed;
                left: 0;
                top:0;
                right:0;
                bottom:0;
                background-color: black;
                opacity: 0.4;}
        .modal{
            z-index: 1000;
            position: fixed;
            left:50%;
            top:50%;
            height: 300px;
            width:400px;
            background-color: white;
            margin-left: -200px;
            margin-top:-150px;
            }
        .red {
            color: red;
        }
        .word {
            font-style: normal;
            font-weight: 700;
        }
        a:hover {
            color: blue;
        }
        .text {
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>

 <h1>班级列表</h1>
 <div>
     <a href="/add_class/" class="text">
         <i class="fa fa-hand-o-right fa-fw" aria-hidden="true"></i>:&nbsp;添加
     </a><br/><br/>

     <a οnclick="showModal();" class="word">
         <i class="fa fa-user-circle-o fa-fw " aria-hidden="true"></i>:&nbsp;对话框添加
     </a><br/>
 </div><br/>

<label for="school">
     <a href="https://www.ytu.edu.cn/" target="_blank" >

         <i class="fa fa-picture-o  fa-pull-left fa-border" aria-hidden="true"></i>&nbsp;<img src="/static/YTU.jpg" width="200" height="120" title="点击图片跳转至烟台大学官网">

     </a>
</label>

    <table align="center" border="1" cellpadding="1" cellspacing="0" width="400" height="100">
    <thead>
    <tr>
        <th>ID</th>
        <th>班级名称</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody>
    {% for row in class_list %}
    <tr>
        <td class="red word">{{ row.id }}</td>
        <td class="word">{{ row.title }}</td>
        <td>
            <a href="/edit_class/?nid={{ row.id }}">编辑</a>
            |
            <a οnclick="modelEdit(this);">对话框编辑</a>
            |
            <a href="/del_class/?nid={{ row.id }}">删除</a>
        </td>
    </tr>
    {%  endfor %}
    </tbody>
</table>

    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">

        <form method="post" action="/modal_add_class/">
        <p>
            <p>班级ID</p>
            <input id="id" type="text" name="id"/>
            <p>班级名称</p>
            <input id="title" type="text" name="title"/>
            <span id="errormeg"></span>
        </p>
            <input type="button" value="提交" οnclick="AjaxSend();"/>
            <input type="button" value="取消" οnclick="CancleModel();"/>
        </form>
    </div>

    <div id="editmodal" class="modal hide">
        <form method="post" action="/modal_edit_class/">
        <p>
            <h3>对话框编辑（此处更改ID无效）</h3>
            <p>班级ID</p>
            <input id="editId" type="text" name="id"/>
            <span id="errormeg"></span>
            <p>班级名称</p>
            <input id="editTitle" type="text" name="title"/>
            <span id="errormeg"></span>

        </p>
            <input type="button" value="提交" οnclick="EditAjaxSend();"/>
            <input type="button" value="取消" οnclick="CancleModel();"/>
        </form>
    </div>

 <script src="/static/jquery-3.5.1.js"></script>

<script>

    function showModal() {
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('modal').classList.remove('hide');
    }
    function CancleModel() {
        document.getElementById('shadow').classList.add('hide');
        document.getElementById('modal').classList.add('hide');
        document.getElementById('editmodal').classList.add('hide');
    }
    function AjaxSend() {
        $.ajax({
            url:'/modal_add_class/',
            type:'POST',
            data:{"title":$('#title').val(),"id":$("#id").val()},
            success:function (data) {
                console.log(data);
                if(data=='Ok'){
                    location.href="/classes/";
                }
                else{
                    $("#errormeg").text(data);
                }
            }
        })
    }
    function modelEdit(self) {
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('editmodal').classList.remove('hide');
        /*  1、获取当前标签
            2、当前父标签，再找上方标签
            3、获取班级当前行和名称，复制到编辑对话框
        */
        var row = $(self).parent().prevAll();
        {#获取内容#}
        var context = $(row[0]).text();
        var id = $(row[1]).text();
        $("#editTitle").val(context);
        $("#editId").val(id);
    }
    function EditAjaxSend() {
        var nid = $('#editId').val();
        var context = $("#editTitle").val();
        $.ajax({
            url:'/modal_edit_class/',
            type: 'POST',
            data:{'nid':nid,"context":context},
            success:function (arg) {
                arg = JSON.parse(arg);
                if(arg.status)
                {
                    location.reload();
                }
                else{
                    alert(arg.message);
                }
            }
        })
    }
</script>
</body>
</html>

tips：没有找到HTML格式，就只能用CSS格式了
网页如下图：
在这里插入图片描述
在这里呢自己也用自己学到一些前端，稍微修改了一下，还有font-Awesome的一些图标修饰了一下（做的也不好看，主要是为了联系一下吧）。

通过这一段时间的学习，我逐渐明白了全栈的含义吧，就是后台去数据库拿（筛选）数据，将数据传给前端，前端再用html将数据用文字，表格或者图片的形式呈现给用户，在这个过程还有很多细节的地方，比如后台要将前端传回的数据进行整理放入数据库等等吧，我对于全栈的理解就是这些吧，才疏学浅，也纯属于在胡扯吧。

数据库 <–> 后台 <–> 前端，这个过程是双向的，三者缺一不可，继续努力吧，明后天我买的Django的书也应该差不多到了，目前所有编程的知识几乎都是自学的，学这些东西只是看视频我觉得效果都挺一般的，所以学到那些地方都是买书配合视频区学习，最近攒的博客但就是这些吧，主要是为了吐槽一下，快七点了，还有几个任务没有完成呢，就先写到着吧，等前端学完了就把html和css，后面好像还会学js(应该就是jQuery吧），到时都像亨利一下再把笔记携程博客。

最后把学院管理的其他几个子页面截图放上来：
1、添加班级：
在这里插入图片描述
2、对话框添加班级

3、鼠标放到图标上会出现提示：“点击图片跳转至烟台大学官网”，当然，点击之后是会真的跳转哦

4、点击表格的编辑

5、点击表格的对话框编辑