zoukankan      html  css  js  c++  java
  • Haskell之Yesod开发–边踩坑边开发(2)

    今天继续上一节的开发
    今天我们须要详细的开发一个图书馆站点,分为下面几个页面

    • / HomeR GET 主页
    • /login LoginR GET 用户登录页面
    • /library LibraryR GET 图书馆介绍页面
    • /booklist BookListR GET 图书列表页面
    • /book/#Integer BookR GET 详细图书页面
    • /user/#Integer UserR GET 详细用户页面

    首先我们简单完毕HomeRLibraryR的页面(详细代码省略,大家自己完毕)。
    假设要做一个站点,必要的图片是不可或缺的。我们想在LibraryR中放置一个Logo图标。因此我们须要像通常的web开发框架那样。在一个详细文件夹下存放logo.jpg,然后在页面上引用。


    引用代码很easy

    <img src=@{StaticR logo_jpg}>

    这里须要注意的是,yesod会将文件夹结构和.分隔符用_来替代
    接下来在src的同级创建一个static文件夹,并copylogo.jpg到当中
    然后我们在routes结构中添加对于static的声明/static StaticR Static getStatic,当中的getStatic是说明从何处存取static文件

    我们须要全局声明static的文件夹,在全局范围上添加$(staticFiles "static")

    改动App的声明 data App = App{getStatic::Static}

    改动App的构造方式,添加注入static文件夹的方式

    main = do
        s@(Static settings) <- static "static"
        wrap 3000 $ App s

    这样就能够读入static文件夹和当中的文件了

    首页上的内容大家自己构造,在这里我们来说明一下怎样做一个带參数的链接。

    我们已经声明了UserR路由。这个路由带有一个用户ID

    getHomeR :: Handler Html
    getHomeR = do
        ...
        let userid = -1 :: Integer
        ...

    在页面上我们希望通过该ID的不同值来渲染节点

    $if (userid == -1)
        <label>
    $else
        <a href=@{UserR userid} #userClick>用户设置

    这样通过使用$if $else标签,我们就差别了用户存在和不存在的状态

  • 相关阅读:
    HTML5学习记录
    CSS学习记录
    HTML扩展(thead,tbody,tfoot标签的使用)
    测删除功能
    jmeter-连接数据库
    jmeter-正则表达式提取器
    jmeter常用函数
    java基础(二)
    git基本使用
    波特的钻石模型
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5199828.html
Copyright © 2011-2022 走看看