今天继续上一节的开发
今天我们须要详细的开发一个图书馆站点,分为下面几个页面
- / HomeR GET 主页
- /login LoginR GET 用户登录页面
- /library LibraryR GET 图书馆介绍页面
- /booklist BookListR GET 图书列表页面
- /book/#Integer BookR GET 详细图书页面
- /user/#Integer UserR GET 详细用户页面
首先我们简单完毕HomeR
和LibraryR
的页面(详细代码省略,大家自己完毕)。
假设要做一个站点,必要的图片是不可或缺的。我们想在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
标签,我们就差别了用户存在和不存在的状态