c#—MVC框架-新闻管理系统二（登录功能）

本文最后更新于：November 10, 2022 pm

c#+MVC框架-新闻管理系统二（登录功能）

一、创建一个控制器（Controllers)

  • 右击Controllers，添加，选择一个空的控制器即可，便于我们操作
  • 创建完后的界面如下图所示：
    01.png

    二、在控制器中创建Login视图

    02.png
  • 在创建完控制器后会在Views视图文件下同步生成一个News文件夹
  • 创建完login视图后会在News文件夹下生成一个Login.cshtml文件，这个就是我们要设计的界面
  • 同步也会生成_Layout.cshtml布局文件
  • 在下图中注明相应包的引入来源
    03.png
  • 在刚创建的Login视图时也许会报错，这是因为运行文件的开始控制器不对，现在视图是login，但是开始视图设置的index，所以我们需要按照下面的界面进行操作
    04.png

    三、引入layui 登录框架

    https://www.moyublog.com/demo/93_20475.html
  • 在上面的网址中查看源代码，复制到我们的cshtml文件中去
  • 前提需要我们下载layui的js和css引入文件，可以自己创建一个js和css文件夹，然后以后所有的相应文件都放到里面。
  • 登录代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
@{
    ViewBag.Title = "Login";
}

    <meta charset="UTF-8">
    <title>登录界面</title>
    <!--basic_css-->
    <link rel="stylesheet" type="text/css" href="/css/layui.css" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <style type="text/css">
        body {
            background-image: url(/img/lg-bg.jpg);
            background-position: 14px 14px;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
        }

        .layui-input {
            height: 45px;
            width: 87%;
            padding-left: 5px;
            font-size: 16px;
            display: inline-block;
        }

        .layui-btn {
            height: 45px;
        }

        .captcha-input {
            height: 45px;
            padding-left: 5px;
            font-size: 16px;
        }

        .layui-form {
            width: 30%;
            height: 60%;
            margin: 0 auto;
            margin-top: 7%;
            padding: 15px 28px 0px;
            background: #fff;
        }

        .layui-input-block {
            margin-left: 0;
        }



            .layui-input-block a {
                color: blue;
                float: right;
                line-height: 30px;
                font-size: 14px;
            }

        h1 {
            text-align: center;
            color: #1d598e;
        }

        input.text {
            text-align: center;
            padding: 10px 20px;
            width: 300px;
        }

        #canvas {
            float: right;
            margin-right: 4%;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .code {
            width: 400px;
            margin: 0 auto;
        }

        .input-val {
            width: 60%;
            height: 45px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, .2);
        }

        .decrib {
            font-size: 16px;
        }
    </style>

    <div class="layui-form">
        <div class="layui-form-item">
            <h1>用&nbsp;户&nbsp;登&nbsp;录</h1>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <span class="decrib">账号：</span>
                <input type="text" name="username" id="username" placeholder="请输入账号" autocomplete="off" class="layui-input"
                       autofocus required>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <span class="decrib">密码：</span>
                <input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" class="layui-input"
                       required>
            </div>
        </div>

        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-bypercent-left btn" id="submit" type="button">登 录</button>
                &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                <a class="layui-btn layui-btn-bypercent-right" style="color:#fff;line-height:45px;font-size:20px;" href="Register.html" id="register">注 册</a>
            </div>
        </div>
        <br>
        <br>
    </div>

因为在layout中跟随的是MVC框架中的书写结构，所以在上述的html代码中开始标签和结束标签都在原有的基础上删除了，可以从网上查阅更多资料深入了解。

四、通过Ajax技术实现登录

  • 首先把layui框架的引用方式删除，使用我们内部设定好的（上面便是更改好的代码）
  • 然后书写Ajax代码连接
    05.png
    06.png
  • 在控制器中创建一个方法（不用创建视图）
    07.png
  • 因为登录成功后跳转到一个新视图界面，所以我们需要在News控制器下创建一个新的视图
    可以先在数据库手动加入一个账号密码，输入成功后会跳转到新创建的视图界面