Haskell之Yesod开发–边踩坑边开发(2)

本文介绍了使用Yesod框架进行Web开发的过程,重点讲解如何构建一个包含多个页面的图书馆站点,包括主页、登录页、图书列表等。文章还详细解释了如何处理静态资源如logo图片的加载,并展示了如何根据不同条件渲染页面元素。

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

  • / 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标签,我们就差别了用户存在和不存在的状态

转载于:https://www.cnblogs.com/blfshiye/p/5199828.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值