今天继续上一节的开发
今天我们需要具体的开发一个图书馆网站,分为以下几个页面
- / 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,然后在页面上引用。
引用代码非常简单
<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标签,我们就区别了用户存在和不存在的状态
本文详细介绍了如何构建一个图书馆网站,包括页面设计、关键元素引用及静态资源管理。通过实现主页和图书馆介绍页面,展示了如何在页面上放置Logo图标,并通过参数化链接实现用户交互。
851

被折叠的 条评论
为什么被折叠?



