Mojolicious+Boostrap3 Longin Example

下载源码：LoginExample.zip

use Mojolicious::Lite;

helper auth => sub {
  my ($c, $username, $password) = @_;
  state $users = {tianyv => '123',};
  return unless $users->{$username} eq $password;
  $c->session( user => $username );
};

any '/' => sub {
  my $c = shift;
  my ($username, $password) = map {$c->param($_)} qw/username password/;
  $c->auth($username, $password) if $username;
  $c->render('index');
};

any '/logout' => sub {
  my $c = shift;
  $c->session( expires => 1 );
  $c->redirect_to('/');
};

app->start;

__DATA__

@@ index.html.ep

% my $username = session 'user';
% title $username ? "Welcome back \u$username" : "Not logged in";
% layout 'basic';

<h1><%= title %></h1>

% unless ($username) {
  %= form_for '/' => (class => "form-signin", id => "form-signin") => begin
    %= label_for username => 'Username' => (class => "sr-only")
    %= text_field 'username' => (class => "form-control", placeholder => "Usename", required => "")
    %= label_for password => 'Password' => (class => "sr-only")
    %= password_field 'password' => (class => "form-control", placeholder => "Password", required => "")
    %= submit_button 'Login' => (class => "btn btn-lg btn-primary btn-block")
  % end
% }


    <div>
      <p>1、配置</p>
      <pre class="prettyprint">
&lt;!--####影响表单布局####--&gt;
&lt;link href="/css/style.css" rel="stylesheet"&gt;</pre>

      <p>2、TT CODE</p>
        <pre class="prettyprint">
 &#37; unless ($username) {
  &#37;= form_for '/' => (class => "form-signin", id => "form-signin") => begin
    &#37;= label_for username => 'Username' => (class => "sr-only")
    &#37;= text_field 'username' => (class => "form-control", placeholder => "Usename", required => "")
    &#37;= label_for password => 'Password' => (class => "sr-only")
    &#37;= password_field 'password' => (class => "form-control", placeholder => "Password", required => "")
    &#37;= submit_button 'Login' => (class => "btn btn-lg btn-primary btn-block")
  &#37; end
&#37; }

 #HTML Code
  &lt;form id="form_body" action="/" class="form-signin" id="form-signin" method="post"&gt;
  &lt;label for="username"&gt;Username class="sr-only"&lt;/label&gt;
  &lt;input name="username" type="text" class="form-control" placeholder="Usename" required=""&gt;
  &lt;label for="password"&gt;Password class="sr-only"&lt;/label&gt;
  &lt;input name="password" type="text" class="form-control" placeholder="Password" required=""&gt;
  &lt;button type="submit" class="btn btn-lg btn-primary btn-block"&gt;Login</button&gt;
&lt;/form&gt;</pre>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
        <p>3、Mojolicious CODE</p>

        <pre class="prettyprint">
use Mojolicious::Lite;

helper auth => sub {
  my ($c, $username, $password) = @_;
  state $users = {tianyv => '123',};
  return unless $users->{$username} eq $password;
  $c->session( user => $username );
};

any '/' => sub {
  my $c = shift;
  my ($username, $password) = map {
     $c->param($_)} qw/username password/;
  $c->auth($username, $password) if $username;
  $c->render('index');
};

any '/logout' => sub {
  my $c = shift;
  $c->session( expires => 1 );
  $c->redirect_to('/');
};

app->start;</pre>

      </div>

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
      <p>4、Mojolicious CODE(Plugin 实现)</p>

        <pre class="prettyprint">
use Mojolicious::Lite;
plugin 'MyAuth';
#C:\Dwimperl\perl\site\lib\Mojolicious\Plugin\MyAuth

any '/' => sub {
    my $c = shift;
    my $username = $c->param('username');
    $c->auth( 'tianyv', '123' ) if $username;;
    $c->session( user => $username );
    $c->render('index');
};

any '/logout' => sub {
    my $c = shift;
    $c->session( expires => 1 );
    $c->redirect_to('/');
};

app->start;


###Mojolicious\Plugin\MyAuth###
package Mojolicious::Plugin::MyAuth;
use Mojo::Base 'Mojolicious::Plugin';

sub register {
    my ( $self, $app ) = @_;
    $app->helper(
        auth => sub {
            my ( $self, $username, $password ) = @_;

            return 1
              if $self->param('username') eq $username
                and $self->param('password') eq $password;
        }
    );
}
1;</pre>

      </div>
    </div>



@@ layouts/basic.html.ep
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title><%= title %></title>
  <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
  <link href="/bootstrap/css/prettify.css" rel="stylesheet" >

  <link href="/css/style.css" rel="stylesheet">



  <meta name="viewport" content="width=device-wdith,initial-scale=1.0">

  </head>


  <body onload="prettyPrint()">
  <div class="container">
  <header class="header">
          <nav>
            <ul class="nav nav-pills pull-right">
              <li><%= link_to 'Home' => '/' %></li>
              <li><%= link_to 'Logout' => 'logout' %></li>
          </nav>
          <h3 class="text-muted">Mojo-Boostrap3</h3>
      </header>

      <div class="container">
        <%= content %>
      </div>

    </div>
      <script src="/bootstrap/js/jquery.js"></script>
  </body>
  </br>
  </br>
  </br>

  <footer class="footer navbar-fixed-bottom ">
     <span class="footer_bottom"><p class="text-center"> Author:赖韬 | [e-mail] &copy;2015 <a href="http://blog.chinaunix.net/uid/22674875.html">Blog:http://blog.chinaunix.net/uid/22674875.html</a></p>
       <p class="text-center">Welcome to the Mojolicious (use Bootstrap3) real-time web framework! </p>
     </span>
  </footer>

  </body>
  </div>

  <script src="/bootstrap/js/jquery.js"></script>
  <script src="/bootstrap/js/bootstrap.js"></script>
  <script src="/bootstrap/js/prettify.js"></script>
</html>