0

我需要帮助才能将 BootStrap 添加到我的 YesodForm 项目中。你们能帮帮我吗，伙计们？

那是我的代码。我只想添加 BootStrap 样式以添加到我已经阅读了 aloot 教程但很复杂的 html 组件中，我是 Haskell 的新手。对于那个简单的项目，我需要一个简单的东西。谢谢

{-# LANGUAGE OverloadedStrings, TypeFamilies, QuasiQuotes,
             TemplateHaskell, GADTs, FlexibleInstances,
             MultiParamTypeClasses, DeriveDataTypeable,
             GeneralizedNewtypeDeriving, ViewPatterns, EmptyDataDecls #-}
import Yesod
import Database.Persist.Postgresql
import Data.Text
import Text.Lucius
import Control.Monad.Logger (runStdoutLoggingT)

data Pagina = Pagina{connPool :: ConnectionPool}

share [mkPersist sqlSettings, mkMigrate "migrateAll"] [persistLowerCase|
Animals json
   nome Text
   idade Int
   deriving Show

Users json
   nome Text
   login Text
   senha Text
   deriving Show
|]

mkYesod "Pagina" [parseRoutes|
/ HomeR GET
/animal/cadastro AnimalR GET POST
/animal/checar/#AnimalsId ChecarAnimalR GET
/erro ErroR GET

/login LoginR GET POST
/usuario UsuarioR GET POST
/perfil/#UsersId PerfilR GET
/admin AdminR GET
/logout LogoutR GET
|]

instance Yesod Pagina where
    authRoute _ = Just LoginR

    isAuthorized LoginR _ = return Authorized
    isAuthorized ErroR _ = return Authorized
    isAuthorized HomeR _ = return Authorized
    isAuthorized UsuarioR _ = return Authorized
    isAuthorized AdminR _ = isAdmin
    isAuthorized _ _ = isUser

isUser = do
    mu <- lookupSession "_ID"
    return $ case mu of
        Nothing -> AuthenticationRequired
        Just _ -> Authorized

isAdmin = do
    mu <- lookupSession "_ID"
    return $ case mu of
        Nothing -> AuthenticationRequired
        Just "admin" -> Authorized 
        Just _ -> Unauthorized "Acesso Restrito para Administrador"

instance YesodPersist Pagina where
   type YesodPersistBackend Pagina = SqlBackend
   runDB f = do
       master <- getYesod
       let pool = connPool master
       runSqlPool f pool

type Form a = Html -> MForm Handler (FormResult a, Widget)

instance RenderMessage Pagina FormMessage where
    renderMessage _ _ = defaultFormMessage
------------------------

formAnimal :: Form Animals
formAnimal = renderDivs $ Animals <$>
           areq textField "Nome: " Nothing <*>
           areq intField "Idade: " Nothing

formUser :: Form Users
formUser = renderDivs $ Users <$>
           areq textField "Nome: " Nothing <*>
           areq textField "Login: " Nothing <*>
           areq passwordField "Password: " Nothing

formLogin :: Form (Text,Text)
formLogin = renderDivs $ (,) <$>
           areq textField "Login: " Nothing <*>
           areq passwordField "Senha: " Nothing           

getAnimalR :: Handler Html
getAnimalR = do
           (widget, enctype) <- generateFormPost formAnimal
           defaultLayout $ do 
           toWidget [cassius|
               label
                   color:blue;
           |]
           [whamlet|
                 <form .form-horizontal method=post enctype=#{enctype} action=@{AnimalR}>
                     ^{widget}
                     <input type="submit" value="Cadastrar Animal">
           |]

getPerfilR :: UsersId -> Handler Html
getPerfilR uid = do
      user <- runDB $ get404 uid
      defaultLayout $ do
          toWidget $ $(luciusFile "templates/perfil.lucius")
          $(whamletFile "templates/perfil.hamlet")

getUsuarioR :: Handler Html
getUsuarioR = do
           (widget, enctype) <- generateFormPost formUser
           defaultLayout [whamlet|
                 <form method=post enctype=#{enctype} action=@{UsuarioR}>
                     ^{widget}
                     <input type="submit" value="Enviar">
           |]

postAnimalR :: Handler Html
postAnimalR = do
           ((result, _), _) <- runFormPost formAnimal
           case result of 
               FormSuccess anim -> (runDB $ insert anim) >>= \piid -> redirect (ChecarAnimalR piid)
               _ -> redirect ErroR

postUsuarioR :: Handler Html
postUsuarioR = do
           ((result, _), _) <- runFormPost formUser
           case result of 
               FormSuccess user -> (runDB $ insert user) >>= \piid -> redirect (PerfilR piid)
               _ -> redirect ErroR

getHomeR :: Handler Html
getHomeR = defaultLayout [whamlet|Hello World!|]

addStyle :: Widget
addStyle = addStylesheetRemote "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css"

getAdminR :: Handler Html
getAdminR = defaultLayout [whamlet|
    <b><h1><font size="11"> Bem vindo ao Painel Administrativo</font></h1></b>
|]

getLoginR :: Handler Html
getLoginR = do
           (widget, enctype) <- generateFormPost formLogin
           defaultLayout [whamlet|
                 <form method=post enctype=#{enctype} action=@{LoginR}>
                     ^{widget}
                     <input type="submit" value="Login">
           |]

postLoginR :: Handler Html
postLoginR = do
           ((result, _), _) <- runFormPost formLogin
           case result of 
               FormSuccess ("admin","eitapleuga") -> setSession "_ID" "admin" >> redirect AdminR
               FormSuccess (login,senha) -> do 
                   user <- runDB $ selectFirst [UsersLogin ==. login, UsersSenha ==. senha] []
                   case user of
                       Nothing -> redirect LoginR
                       Just (Entity pid u) -> setSession "_ID" (pack $ show $ fromSqlKey pid) >> redirect (PerfilR pid)

getChecarAnimalR :: AnimalsId -> Handler Html
getChecarAnimalR pid = do
    animal <- runDB $ get404 pid
    defaultLayout  [whamlet|
    <font size="10">Perfil do Pet</font><br>
        <p><b> Nome do Pet:</b>  #{animalsNome animal}  
        <p><b> Idade do Pet:</b> #{show $ animalsIdade animal} Anos
    |]

getErroR :: Handler Html
getErroR = defaultLayout [whamlet|
    <h1>Falha no Cadastro !</h1>
|]

getLogoutR :: Handler Html
getLogoutR = do
     deleteSession "_ID"
     defaultLayout [whamlet| 
         <h1> <b>Logout</b> efetuado com sucesso! </h1>
     |]

connStr = "dbname=d4673as0stmsm7 host=ec2-54-221-225-242.compute-1.amazonaws.com user=nzjfptmglfomng password=fyYms4A9T8gkP4_Go8GswcfIiE port=5432"

main::IO() main = runStdoutLoggingT $ withPostgresqlPool connStr 10 $ \pool -> liftIO $ do runSqlPersistMPool (runMigration migrateAll) pool warp 8080 (Pagina pool)

4

2 回答 2

1

你可以Handler像这样在你的函数中添加它：

getUsuarioR :: Handler Html
getUsuarioR = do
       (widget, enctype) <- generateFormPost formUser
        defaultLayout $ do
           addStylesheetRemote "http://remote-bootstrap-path.css"
           [whamlet|
                 <form method=post enctype=#{enctype} action=@{UsuarioR}>
                     ^{widget}
                     <input type="submit" value="Enviar">
           |]

此外，如果您是 Haskell 新手，我建议您在深入 Yesod 之前学习一些最基本的 Haskell。

于 2016-06-04T15:56:53.567 回答
0

特别是对于第一个项目，我建议使用脚手架站点。您可以按照 Yesod 主页上的快速入门指南获得它。您不仅可以获得合理的默认设置，而且还集成了 bootstrap css。

缺点当然是脚手架会向您抛出很多您可能不想要或不同意的东西和意见。但是，即使您不喜欢脚手架，您也可以始终将其保存在单独的文件夹中，并从中获取灵感并将其中的一部分合并到您自己的站点中——例如集成 bootstrap 或 jquery。

您接下来需要做的是将适当的类添加到您的 html 元素中。有两种方法可以做到这一点，具体取决于上下文。在您自己的小部件中，您只需像添加任何其他类一样添加它们（前面有一个点）。如果您使用生成的代码，例如表单或 yesod-table，您通常可以在不同的渲染函数之间进行选择。例如，您可以使用renderTable呈现函数在两列中呈现表单。但是几乎总是有另一个函数，其名称类似于renderBootstrap，它将内容呈现为带有引导类的普通 div。

所以总而言之，Yesod 与 bootstrap 集成得非常好。在我个人看来，甚至太多了。但是在您的情况下，在初始设置混乱之后，它应该使您的任务相对容易。

于 2016-06-04T21:38:47.810 回答