appweb的開發(fā)步驟簡(jiǎn)介

發(fā)表時(shí)間：2014-8-22

發(fā)布人：葵宇科技

瀏覽次數(shù)：70

之前的博客上講了開發(fā)板上移植appweb的過程，這篇博客就記錄一下如何開發(fā)一個(gè)典型的基于appweb的mvc架構(gòu)的網(wǎng)站

1.前言

1.1環(huán)境參數(shù)

開發(fā)板：mini2440 64MB內(nèi)存 256MB Flash

PC系統(tǒng)：X86 ubuntu10.04 gcc：4.4.3

交叉編譯器：gcc 4.4.3

appweb版本：5.0.0-rc1

1.2簡(jiǎn)介

ESP全稱是Embedded Server Page，和jsp（Java Server Pages）很相似，前者支持將C語言嵌套到html中后者支持將Java語言嵌套到html中來實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁。下面摘抄一點(diǎn)官網(wǎng)上的原話：

ESP is the blazing fast "C" language web framework that works at thought-speed.ESP is not a traditional low-level environment. It is a powerhouse MVC framework in a tiny footprint with most things you'd expect from an enterprise web framework including: MVC, scaffolds, templates, WebSockets, integrated databases, database migrations and more.

ESP的document：https://embedthis.com/esp/doc/index.html

AppWeb的document：https://embedthis.com/appweb/doc/index.html

其他工具的網(wǎng)址：https://embedthis.com/products.html

2.一個(gè)簡(jiǎn)單的MVC登錄

由于開發(fā)的是嵌入式web，每改動(dòng)一點(diǎn)內(nèi)容就要重新編譯然后再下載到開發(fā)板中測(cè)試，很是麻煩，所以一般采取的方法是先在PC上開發(fā)好，測(cè)試好后然后移植到開發(fā)板上。所以我們先要在PC上安裝AppWeb以及其它工具，然后開發(fā)一個(gè)web應(yīng)用，最后移植到開發(fā)板上。

2.1向PC上安裝AppWeb

下載源碼：

去網(wǎng)址：http://appwebserver.org/downloads/appweb/download.esp下載appweb的源碼，我下載的版本是appweb5.0
編譯：
（i）解壓源碼文件
（ii）把文件appweb-linux-default-me.h中的#define ME_COMPILER_HAS_SYNC64 1注釋掉，不然會(huì)報(bào)錯(cuò)“undefined reference to `__sync_add_and_fetch_8'collect2: ld returned 1 exit status”
//#define ME_COMPILER_HAS_SYNC64 1
（iii）make
make -f projects/appweb-linux-default.mk

編譯完后會(huì)在../appweb-5.0.0-rc1/linux-x86-default文件下生成目標(biāo)文件將

(iiii)安裝

make –f project/appweb-linux-default.mk install

2.2利用appweb提供的工具建立MVC模板

參考網(wǎng)址：https://embedthis.com/esp/doc/guide/esp/start/mvc-tour.html

這個(gè)程序很簡(jiǎn)單，就是輸入用戶名和密碼，如果用戶名是“abc”密碼是“123”那么頁面就跳到loginOK頁面，如果不是那么頁面就跳轉(zhuǎn)到loginError頁面。

目的是熟悉流程和簡(jiǎn)單地理解appweb，里面沒有涉及到數(shù)據(jù)庫，所以MVC中的M就沒有很好地體現(xiàn)，主要是V和C，如果要完整的實(shí)現(xiàn)可以認(rèn)真地閱讀上面的參考網(wǎng)址。

2.2.1模板生成

(1)$ mkdirmylogin

(2)$cd mylogin

(3)$esp install esp-html-mvc

執(zhí)行完(3)后會(huì)在文件夾里面出現(xiàn)：client layouts package.json paks這幾個(gè)文件或是文件夾，將package.json中的auth中的內(nèi)容type刪除，不然會(huì)報(bào)錯(cuò)：esp: Error: Cannot find auth type app

(4)$esp generate controller login
執(zhí)行(4)的目的是產(chǎn)生controller，執(zhí)行玩了之后就會(huì)發(fā)現(xiàn)文件夾里面多了個(gè)文件夾controllers，里面已經(jīng)自動(dòng)生成了login.c

2.2.2 修改/編寫View

(1)修改mylogin/client/index.esp頁面為用戶名密碼形式,這里一定要加這句話<% inputSecurityToken(); %>不然的話會(huì)報(bào)錯(cuò)誤：

Access Error: 401 -- Unauthorized
Security token is stale. Please reload page.

<html>
<head>
<title>MyLogin</title>
</head>

<body>
    <h1>MyLogin</h1>
    <form action=/do/login/check method=POST>
        <table>
        <tr>
            <td>Name:</td><td><input type=text name=name size=50 value=""></td>
        </tr>
        <tr>
            <td>Pwd:</td><td><input type=text name=pwd size=50 value=""></td>
        </tr>
        <tr>
            <td align="CENTER"> 
                <input type=submit name=login value="Login"> 
                <% inputSecurityToken();%>
            </td>
        </tr>
        </table>
    </form>
</body>
</html>

(2)在mylogin/client文件夾下建立app/login文件夾，在里面新建兩個(gè)esp頁面，login-ok.esp和login-error.esp

<html>
<head>
<title>OK</title>
</head>

<body>
    <h1>login OK</h1>
</body>
</html>

<html>
<head>
<title>error</title>
</head>

<body>
    <h1>login Error</h1>
</body>
</html>

2.2.3 修改/編寫Controller
這里主要是修改controller文件夾下的login.c，這里的action的命名是這樣的：比如./do/login/check的uri對(duì)應(yīng)的就是login-cmd-check

/*
    login Controller for esp-html-mvc (esp-html-mvc)
 */
#include "esp.h"
static void checkLogin() {
    cchar *name = param("name");
    cchar *pwd = param("pwd");
    if(smatch("abc",name) && smatch("123",pwd))
    {
        renderView("login/login-ok");
    }else{
        renderView("login/login-error");  
    }      
}
static void common(HttpConn *conn) {
}

/*
    Dynamic module initialization
 */
ESP_EXPORT int esp_controller_mylogin_login(HttpRoute *route, MprModule *module) {
    espDefineBase(route, common);
    espDefineAction(route, "login-cmd-check", checkLogin);
    return 0;
}

2.2.3編譯

$esp compile

如果沒有錯(cuò)誤的話，機(jī)會(huì)生成cache文件，里面的.so文件就是appweb要加載的文件，這里我們可以看到，esp會(huì)被“翻譯”成c文件，就像jsp會(huì)被“翻譯”成java文件（servlet）一樣

2.2.4配置文件

為了節(jié)省空間我把不必要的注釋和其它的東西都刪除了，如果想看完整版（里面有很多的注釋，建議看一下），就去看appweb-5.0.0-rc1/src/server/sample.conf

需要注意的是以下幾個(gè)：

（1）Listen 4000 監(jiān)聽端口

（2）Documents /home/jxm 這個(gè)表示你的web應(yīng)用所在的目錄，比如我的文件夾mylogin就在/home/jxm文件夾下

（3）EspRoute name="login" methods="GET,POST" prefix="^/{controller}(~/{action}~)" target="${controller}-${action}" source="${controller}.c" 這個(gè)文件就是配置action的語句，只需要修改name就行，其它的用模板里面的就行

ErrorLog "error.log" size=10MB level=2 backup=5 anew stamp=1hr
Listen 4000

Documents /home/jxm

AddHandler fileHandler html gif jpeg jpg png pdf ico css js txt ""


<if ESP_MODULE>
    LoadModule espHandler libmod_esp
    AddHandler espHandler esp
    EspUpdate off

    EspKeepSource>
 
2.2.5啟動(dòng) 
 
$appweb --config sample.conf
 2.2.6訪問 
向?yàn)g覽器中輸入網(wǎng)址：127.0.0.1:4000就會(huì)出現(xiàn)登錄界面，如果要去掉最上面的“Home”banner，需要將文件夾mylogin/layouts中的default.esp文件刪除，然后重新編譯再運(yùn)行
  

 2.2移植到開發(fā)版 
2.2.1 交叉編譯 
在編譯前建議將cache文件夾刪除 
$export CC=arm-linux-gcc 
$esp --platform../appweb-5.0.0-r1/linux-arm-release(這個(gè)路徑是你之前交叉編譯appweb產(chǎn)生的目錄) compile 
然后將整個(gè)mylogin文件拷貝到開發(fā)板中，這里需要注意的是，由于目錄變化所以在sample.conf 中的Document的目錄也要變