嵌入式web -- 前后端分离

z呀哈哈z

已于 2022-06-11 22:39:43 修改

阅读量1.3k

点赞数 1

分类专栏：嵌入式web 文章标签：前端 linux

于 2022-06-08 20:42:42 首次发布

本文链接：https://blog.csdn.net/m0_60292931/article/details/125172106

版权

嵌入式web 专栏收录该内容

5 篇文章 11 订阅

订阅专栏

1、Bootstrap

使用Bootstrap是为了方便设计一个简单的网页

1.1、下载

官网下载地址：bootstrap中文网

在这里插入图片描述

1.2、新建项目（clion）

将上面的环境下载解压后在clion新建好css和js目录
通过右键粘贴对应的文件
为了不联网，使用本地的jquery
下载地址：jquery
或者直接通过官网下载

新建html文件

<!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">
   <!-- 上述3个meta标签 必须 放在最前面，任何其他内容都 必须 跟随其后！ -->

   <title>bootstrap测试</title>
   <link rel="stylesheet" href="../css/bootstrap.min.css">

   <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
   <script src="../js/jquery.min.js"></script>
   <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

2、Ajax

部分更新浏览器的数据

2.1、ajax jQuery简单案例

jQuery为了简化JavaScript编程

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ajax jquery案例</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>

<div id="div1"><h1>使用 AJAX 修改该文本内容</h1></div>
<button type="button" id="bt1">修改内容</button>

<script>
    $(document).ready(function () {
        /*按钮bt1点击响应*/
        $("#bt1").click(function () {
            htmlobj = $.ajax({
                url:"../data/a.txt",
                async:false//是否异步
            });
           $("#div1").html(htmlobj.responseText);
        });
    });
</script>
</body>
</html>

点击按钮即可获取a.txt里的数据
在这里插入图片描述

2.2、json ajax简单案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ajax jquery案例</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>

<div id="div1"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" id="bt1">点击修改</button>

<script>
    $(document).ready(function () {
        /*按钮bt1点击响应*/
        $("#bt1").click(function () {
            $.getJSON("../data/a.txt",function (data) {
            /*a.txt的内容 {"a1" : 25,"b1" : "ok"}*/
                var context = "<h1>"+"温度:"+data.a1 + " 状态:" + data.b1+"</h1>";
                $("#div1").html(context);
            });
        });
    });
</script>
</body>
</html>

在这里插入图片描述

3、cJSON

它会自动的生成json对应格式的文本

源码下载
https://github.com/DaveGamble/cJSON
简单测试
解压后将cJSON.h 和 cJSON.c拷贝到项目中来

#include <stdio.h>
#include "inc/cJSON.h"

int main() {
    cJSON *cjson;
    cjson =  cJSON_CreateObject();

    cJSON_AddItemToObject(cjson,"location",
                          cJSON_CreateString("机房"));
    cJSON_AddItemToObject(cjson,"temperature",
                          cJSON_CreateNumber(25));
    cJSON_AddItemToObject(cjson,"date",
                          cJSON_CreateString("1月1日 10:10:10"));

    printf("%s\n",cJSON_Print(cjson));

    return 0;
}