一、准备工作

先从网上（站长之家、模板之家，甚至TB）下载一个HTML模板，要求一整套的CSS和必要的JS，比如下图：

登录页面的效果是：

首页：

利用这些模板可以减少前台网页的设计——拿来主义

网上模板很多，比如HUI：

SA-ADMIN

本例用比较简单的《蓝色超市模板》完成用户登录操作。

二、拷贝内容到工程

把CSS、JS和IMG目录拷贝到工程（类似文件拷贝粘贴）

右键拷贝，到工程目录下，右键，粘贴（可另外新建一个目录，也可以简单粘贴到工程根目录）

效果如下：

三、功能实现

功能：用户第一次登录 -》输入用户账号密码 -》读数据库验证 -》通过进入首页

补充：

1、登录后的状态应该维持到关闭浏览器（使用Cookie）——后面解决

2、用户信息错误应该有相应提示

解决思路：

1、修改路由（还有其他解决方法），默认为 Login ；

2、收集用户信息，传送到指定Action (POST比较好）；

3、控制器读取数据库，验证用户信息，反馈相应的操作。

修改默认路由：

在HOME控制器，添加Login Action:

右键添加Login页面：

可以测试一下，默认进入登录页面：

删除上面 Login.cshtml的内容，并且粘贴模板中，Login.html 内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>超市账单管理系统</h1>
        </header>
        <section class="loginCont">
            <form class="loginForm" action="welcome.html">
                <div class="inputbox">
                    <label for="user">用户名：</label>
                    <input id="user" type="text" name="username" placeholder="请输入用户名" required/>
                </div>
                <div class="inputbox">
                    <label for="mima">密码：</label>
                    <input id="mima" type="password" name="password" placeholder="请输入密码" required/>
                </div>
                <div class="subBtn">
                    <input type="submit" value="登录" />
                    <input type="reset" value="重置"/>
                </div>

            </form>
        </section>
    </section>

</body>
</html>

修改CSS路径后，如下：

这时候，执行功能进入了登录页面：

页面上添加JS代码收集用户信息（推荐JQUERY，JS和JQUERY在菜鸟学堂有介绍）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="~/css/style.css"/>
    <script src="~/js/jquery.js"></script>
    <script>
        function login() {
            var name = $("#user").val();
            var psw = $("#mima").val();
            $.post("/Home/Login", { id: name, password: psw }, function (data) {
                if (data == "OK")
                    window.location.href = "/Home/Index";
                else
                    alert(data);
            }
            );
        }
    </script>
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>超市账单管理系统</h1>
        </header>
        <section class="loginCont">
            <form class="loginForm" >
                <div class="inputbox">
                    <label for="user">用户名：</label>
                    <input id="user" type="text" name="username" placeholder="请输入用户名" required/>
                </div>
                <div class="inputbox">
                    <label for="mima">密码：</label>
                    <input id="mima" type="password" name="password" placeholder="请输入密码" required/>
                </div>
                <div class="subBtn">
                    <input type="submit" value="登录" onclick="login()"/>
                    <input type="reset" value="重置"/>
                </div>

            </form>
        </section>
    </section>

</body>
</html>

说明：

1、添加JQUERY : <script src="~/js/jquery.js"></script> ；

2、自定义login的JS函数，来响应按钮登录的点击事件：<input type="submit" value="登录" οnclick="login()"/>

3、登录事件处理：获取用户名+密码两个输入框的内容，利用post方式提交到服务器，获取服务器的反馈，如果是OK，转到index页面，否则弹出反馈信息

后台控制器再添加一个Login（需要与前面的有不同的参数，重载）：

        public ActionResult Login()
        {            
            return View();
        }
        [HttpPost]
        public ActionResult Login(string id,string password)
        {
            DataSet set = TestMysql.Query("select * from user where name='"+id+"'");
            if(set.Tables[0].Rows.Count <= 0)
            {
                return Content("无此用户");
            }
            if (set.Tables[0].Rows[0]["psw"].ToString() != password)
            {
                return Content("密码错误");
            }
            return Content("OK");
        }

最后按照Login的方法，修改Index的内容：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="~/css/public.css"/>
    <link rel="stylesheet" href="~/css/style.css"/>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>

    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
        <a href="login.html">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li ><a href="billList.html">账单管理</a></li>
                <li><a href="providerList.html">供应商管理</a></li>
                <li><a href="userList.html">用户管理</a></li>
                <li><a href="password.html">密码修改</a></li>
                <li><a href="login.html">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <img class="wColck" src="~/img/clock.jpg" alt=""/>
        <div class="wFont">
            <h2>Admin</h2>
            <p>欢迎来到超市账单管理系统!</p>
			<span id="hours"></span>
        </div>
    </div>
</section>
<footer class="footer">
</footer>
<script src="js/time.js"></script>
<div style="text-align:center;">
<p>更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>

运行结果：

密码错误