春哥的毕业设计之前端设计

春哥的嵌入式小世界 2022-06-07

440

大家好，我是春哥。经历了很长时间的纠结，我不打算直接让大家去gitee找代码了，因为我代码确实写的太垃圾了，我只放一部分代码到gitee，然后也会贴一部分在每次的文章中。

今天主要介绍的是前端部分的设计，因为我主要是学嵌入式的，前端我也不知道怎么讲，主要介绍我是怎么实现那些该有的功能的。可能界面不美观，但是功能该有还是有的，我前端用了bootstarp和jQuery框架，你们需要去下载对应的代码库才会实现相应的界面功能。

一些静态的东西，你们可以参考我的，也可以自己去设计，我主要介绍前端和后端一些动态效果的实现。我做的是一个仓库管理系统，今天介绍的这个前端就是做了一个表格来展示采集到的温湿度的数据，然后可以通过Ajax来实现动态刷新。

<div class="container">
        <h1 class="text-center">仓库中心</h1>
        <table class="table table-hover" id="tab_ctx">
            <thead>
            <tr>
                <td>序号</td>
                <td>仓库名</td>
                <td>温度</td>
                <td>湿度</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

<script type="text/javascript">
    function get_data() {
        $.getJSON("/cgi-bin/temp_cgi", function (infos) {
            console.log(infos);
            $("#tab_ctx tbody").html("");//清空表格数据
            for (let item in infos.data) {//循环获取infos的内容，并将其添加至表格
                let x = infos.data[item];
                let i=1+item*1;
                var buf = "<tr><td>" +i+ "</td><td>" + x.label + "</td><td>" + x.temp +"&#8451;</td><td>" + x.humi+"%</td></tr>";
                $("#tab_ctx tbody").append(buf);
            }
        });
    }
    setInterval(get_data, 1000);
</script>

上面是我自己设计的表格内容和Ajax动态更新表格内容的代码，这段代码是核心代码，大家需要仔细阅读，然后我将该文件所有代码放在下面，需要的可以自取。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <title>613仓库</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .table{
            text-align: center;
        }
</style>
</head>
<body>
<section>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" >
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a herf="login.html" class="navbar-brand" href="#">613仓库欢迎您</a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">登录<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="login.html">用户登录</a></li>
                            <li><a href="admi_login.html">管理员登录</a></li>
                        </ul>
                    </li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container">
        <h1 class="text-center">仓库中心</h1>
        <table class="table table-hover" id="tab_ctx">
            <thead>
            <tr>
                <td>仓库序号</td>
                <td>仓库名</td>
                <td>温度</td>
                <td>湿度</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>




<script type="text/javascript">
    function get_data() {
        $.getJSON("/cgi-bin/temp_cgi", function (infos) {
            console.log(infos);
            $("#tab_ctx tbody").html("");//清空表格数据
            for (let item in infos.data) {//循环获取infos的内容，并将其添加至表格
                let x = infos.data[item];
                let i=1+item*1;
                var buf = "<tr><td>" +i+ "</td><td>" + x.label + "</td><td>" + x.temp +"&#8451;</td><td>" + x.humi+"%</td></tr>";


                $("#tab_ctx tbody").append(buf);
            }
        });
    }
    setInterval(get_data, 1000);
</script>
</body>
</html>

我也在B站视频里面有讲解这段代码，需要观看的兄弟转至https://www.bilibili.com/video/BV1ag41197Je/观看，其实也没有讲太多，就是简单介绍一下，后面的会讲解深入一些。

文章转载自春哥的嵌入式小世界，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

春哥的毕业设计之前端设计

评论