ASP.NET Core에서 SPA 대신 Vue.js를 사용해보십시오 (2)

14965 단어 블루마Vue.jsC#ASP.NET_Core
클라이언트측에 Vue.js를 SPA(싱글 페이지 어플리케이션)가 아닌 방법으로 이용하는 것에 대해 기술해 갑니다.

전체



　・ Vue.js 및 bluma 설정(이전)
・css를 bluma로 변경(본고)
　・ 유효성 검사 변경
　・ Vue.js에서 구성 요소 사용

-css를 bluma로 변경-



환경



"ASp.Net Core에서 PostgreSQL을 이용하여 Identity에서 인증을 사용할 수 있도록 한다"에서 만든 환경에 Vue.js를 포함하고 CSS 프레임 워크를 bluma로 변경합니다.
- VisualStudio2019 Ver.16.2.3
- ASP.NET Core 2.2
- PostgreSQL 9.6 설치, 연결을 위한 계정 생성
- EntityFramework
- Vue.js 2.6.10
- 블루마 0.7.5

로그인 화면을 슬림하게 하여 bluma에 대응시킨다.



템플릿으로 작성된 화면은 소비자 전용으로 개인이 등록할 수 있거나 SNS 인증을 이용하거나 하는 링크가 있으므로, 모두 삭제하고 간단한 로그인 화면으로 변경합니다.

"Pages/Shares/_Layout.cshtml"을 다음과 같이 변경합니다.
메뉴는 bluma의 "navbar"를 통해 "Home"과 "Privacy"의 링크 만 문지르고 있습니다.
콘텐츠와 바닥글의 기술을 bluma에 대응시키고 있습니다.

_Layout.cshtml

@inject SignInManager<IdentityUser> SignInManager
@inject UserManager<IdentityUser> UserManager
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" integrity="sha256-ufGElb3TnOtzl5E4c/qQnZFGP+FYEZj5kbSEdJNrw0A=" crossorigin="anonymous"></script>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar has-background-info">

            <div class="navbar-brand">
                <div class="navbar-item title">
                    WebApplication1
                </div>

            </div>

            <div class="navbar-menu is-active is-tab">
                <div class="navbar-start">
                    <a class="navbar-item has-text-light" asp-area="" asp-page="/Index">Home</a>
                    <a class="navbar-item has-text-light" asp-area="" asp-page="/Privacy">Privacy</a>
                </div>
                <div class="navbar-end">
                    @if (SignInManager.IsSignedIn(User))
                    {
                        <div class="navbar-item">
                            Hello @User.Identity.Name!
                        </div>
                        <div class="navbar-item">
                            <form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })" method="post">
                                <button type="submit" class="button is-primary is-outlined">Logout</button>
                            </form>
                        </div>
                    }
                </div>
            </div>
        </nav>
    </header>

    <content class="container is-centered">
        @RenderBody()
    </content>

    <footer class="footer">
        <div class="container">
            <div class="content has-text-centered">
                &copy; 2019 - WebApplication1 -
            </div>
        </div>
    </footer>

    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

그런 다음 "Areas/Identity/Pages/Account/Login.cshtml"을 다음과 같이 변경합니다.
bkuma는 css의 class만을 이용하고 있는 것 같기 때문에, 기본 태그와 class를 잘 조종하면 사용할 수 있다고 생각합니다. bluma에 대해서는, 본가의 페이지를 참조하거나 그 밖에 여러가지 구르고 있으므로 그쪽을 참고로 해 주세요. 다만, bluma도 발전 도상 때문에, 참고로 한 페이지의 내용이 현재의 사양과 다른 일도 있었으므로, 이 기술도 낡아져 가므로 주의해 주세요.

Login.cshtml

@page
@model LoginModel

@{
    ViewData["Title"] = "Log in";
}

<div class="section">

    <form id="account" method="post">

        <div style="width:300px;margin: 0 auto;">
            <header class="label ">
                ログイン
            </header>

            <div class="box" >

                <div class="field">
                    <label>ユーザーID</label>
                    <div class="control">
                        <input asp-for="Input.UserID" class="input" type="text" placeholder="userID"/>
                    </div>
            </div>

                <div class="field">
                    <label>パスワード</label>
                    <div class="control">
                        <input asp-for="Input.Password" class="input" type="password" placeholder="password" />
                    </div>

                    <div class="help">
                        <a id="forgot-password" asp-page="./ForgotPassword" class="text-right mt-md-3">パスワードを忘れた場合</a>
                    </div>

                    <br />

                    <div class="field">
                        <label class="checkbox help">
                            <input type="checkbox" asp-for="Input.RememberMe"/>
                            ユーザーIDとパスワードを記憶する
                        </label>
                    </div>

                </div>

                <div class="field has-text-centered">
                    <button type="submit" class="button is-primary is-outlined">ログイン</button>
                </div>
            </div>
        </div>
    </form>
</div>

또한 개인적인 변경을 '/wwwroot/css/site.css'로 다음 내용을 설정하여 '.section'과 '.footer'의 여백을 줄이고 있습니다. (bluma의 페이지에서는 변수를 바꾸도록 쓰고 있습니다만, css를 사용하고 있으므로 덮어쓰고 있습니다)

site.css


.section {
    padding: 1rem 1rem;
}

.footer {
    padding: 1rem 1.5rem 1rem;
}

이제 디버깅하면 이런 화면이 됩니다.



다음번에는 JQuery를 추방한 탓에 없어져 버린 데이터 검증의 애트리뷰트에 의한 밸리데이션을 어떻게 할까를 기재하고 싶습니다.
ASP.NET Core 웹 응용 프로그램을 Azure에 배포
.NETCore3.0이 출시되었으므로 VisualStudio2019에서 Blazor를 만들고 Azure로 업그레이드하십시오.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage