极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 12217|回复: 5

web server的網頁製作!!

[复制链接]
发表于 2013-10-26 15:42:01 | 显示全部楼层 |阅读模式
本帖最后由 s9930081 于 2013-11-13 11:11 编辑

我用記事本寫出這樣的網頁(下圖),可是我把它存到SD卡中,再用Arduino做成web server!

不過會變成(下圖)


請各位大大幫忙,謝謝


程式碼如下:
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 2, 107); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile1;
File webFile2;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
   
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("test~1.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();
                    client.println("<html>");
                    // send web page
                    webFile1 = SD.open("test~1.htm");        // open web page file
                    if (webFile1) {
                        while(webFile1.available()) {
                            client.write(webFile1.read()); // send web page to client
                        }
                        webFile1.close();
                    }
                    //client.println(" <frame src='webFile1'>");
                    
                    break;
                    
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                }
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        client.println("</html>");
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
回复

使用道具 举报

发表于 2013-10-26 15:53:47 | 显示全部楼层
frame 有问题, 左下角的 html内容不知是哪个文件。
你晒一下  webfile1,webfile2,test~1.htm这三个文件(这个test~1文件名有点怪,最好改成常规名字)
回复 支持 反对

使用道具 举报

发表于 2013-10-26 16:51:21 | 显示全部楼层
LZ你用了frame tag来写网页,然后没有在web server端判断client来获取的是哪个html文件,不管啥请求返回的都是test~1.html当然会出问题咯
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-10-27 17:57:39 | 显示全部楼层
histamine 发表于 2013-10-26 16:51
LZ你用了frame tag来写网页,然后没有在web server端判断client来获取的是哪个html文件,不管啥请求返回的都 ...

我知道是這個問題!!但我想不出來要怎讓他把frame tag的html讀出來...
回复 支持 反对

使用道具 举报

发表于 2013-10-27 22:14:56 | 显示全部楼层
s9930081 发表于 2013-10-27 17:57
我知道是這個問題!!但我想不出來要怎讓他把frame tag的html讀出來...

收到client请求的时候,把http请求头解析一下,提取出client请求的页面的名称

可参考此代码:
http://playground.arduino.cc/Code/WebServer
回复 支持 反对

使用道具 举报

发表于 2014-1-18 21:02:16 | 显示全部楼层
不要用框架吧  这个样子直接CSS+DIV就可以解决啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|联系我们|极客工坊

GMT+8, 2026-6-5 14:33 , Processed in 0.050735 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表