今天继续上一节的开发

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

  • / 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} #userC∑lick>用户设置

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

Haskell之Yesod开发–边踩坑边开发(2)的更多相关文章

  1. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  2. ubuntu搭建开发环境踩坑实录

    谨以此文,记录和ubuntu系统不死不休的搏斗过程,后续待补. 1.双系统安装,windows采用uefi模式安装(优启通可制作uefi的win10安装盘),ubuntu不要划分boot区,而应该划分 ...

  3. VScode+Flutter 开发继续踩坑

    运行慢解决方法1:修改build.gradle,注释掉jcenter(),google().使用阿里的镜像.原因是jcenter google库无法访问到导致的问题.虽然我有万能的爬墙工具,开启全局代 ...

  4. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  5. iOS开发遇到的坑之一: 开发遇见如下错误:Undefined symbols for architecture arm64

    博客处女作,写得不好望谅解! “for architecture arm64”就是说没有支持arm64,在Build settings里architecture相关的几项需要配置正确 在最近升级coc ...

  6. react学习 | 踩坑指南

    react样式模块化的"omit -loader"坑 众所周知 react样式的模块化(css modules) 是自己模块中写自己的css,与其他模块互补影响,解决了命名冲突和全 ...

  7. Java 开发中如何正确踩坑

    为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...

  8. Android SDK 开发——发布使用踩坑之路

    前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...

  9. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

随机推荐

  1. android 05

    控件:RadioButton CheckedBox RatingBar ProgressBar 下拉列表:ListView Spinner <!-- 单选按钮必须放在单选按钮组当中才能生效 ,并 ...

  2. 『重构--改善既有代码的设计』读书笔记----Replace Method with Method Object

    有时候,当你遇到一个大型函数,里面的临时变量和参数多的让你觉得根本无法进行Extract Method.重构中也大力的推荐短小函数的好处,它所带来的解释性,复用性让你收益无穷.但如果你遇到上种情况,你 ...

  3. linux文件系统结构和权限

    linux文件系统的目录结构 熟话说的好,好记性不如烂笔头,虽然没用笔,但动动手指还是可以的.下面的目录结构都是摘抄过来的,动动手指来加深下印象吧,还能练习下打字速度,哈哈,多好啊. ...突然又改变 ...

  4. Entity Framework中实现指定字段更新

    foreach (var entity in databasePatents) { var patentTmp = sourcePClist.FirstOrDefault(p => p.Oid ...

  5. 【行为型】State模式

    状态模式其意图是在一个对象的状态发生变化时能够同时改变它的行为.一个生活中比较常见的例子就如你(是指你自己本人)在走时时,整个人全身的动作是双手臂前后慢慢摇摆且双脚也是一步一步慢慢往前移的,即:该走路 ...

  6. MVC中的区域

    authour: chenboyi updatetime: 2015-05-03 08:26:30 friendly link:   目录: 1,思维导图 2,AreaRegistration类的Re ...

  7. Oracle中批量插入

    为了防止OracleConnection的重复打开和关闭,使用begin end:将sql语句包在里面,然后一次性执行提高插入的效率. 下面代码中要插入的数据在list集合中,如果list集合的cou ...

  8. Solr4.8.0源码分析(13)之LuceneCore的索引修复

    Solr4.8.0源码分析(13)之LuceneCore的索引修复 题记:今天在公司研究elasticsearch,突然看到一篇博客说elasticsearch具有索引修复功能,顿感好奇,于是点进去看 ...

  9. Solr4.8.0源码分析(7)之Solr SPI

    Solr4.8.0源码分析(7)之Solr SPI 查看Solr源码时候会发现,每一个package都会由对应的resources. 如下图所示: 一时对这玩意好奇了,看了文档以后才发现,这个serv ...

  10. EntityFramework 插件之EntityFramework.Extended (批量处理)

    接手了一个用EF来做的项目,由于项目中使用的原生处理,导致很多update都是采用先select 后 update的方式来实现,同时无法批量执行逻辑如:根据订单类型统一更新状态等.所以在经过了N多查找 ...