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

因为学习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、点击表格的对话框编辑
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

致虚守静~归根复命

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值