【ASP.NET MVC】第一个登录页面（8）

一、准备工作

先从网上（站长之家、模板之家，甚至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 内容

    
    
    


    

        

            
超市账单管理系统
        
        

            

                

                    用户名：
                    
                
                

                    密码：
                    
                
                

                    
                    
                

            
        
    

修改CSS路径后，如下：

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

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

    
    
    
    
    


    

        

            
超市账单管理系统
        
        

            

                

                    用户名：
                    
                
                

                    密码：
                    
                
                

                    
                    
                

            
        
    

说明：

1、添加JQUERY  :     ；

2、自定义login的JS函数，来响应按钮登录的点击事件：

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的内容：

    
    
    
    




    
超市账单管理系统

    

        
下午好！ Admin , 欢迎你！
        退出
    



    2015年1月1日 11:11  星期一
    温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）



    

        
功能列表 
        

            

                
账单管理
                
供应商管理
                
用户管理
                
密码修改
                
退出系统
            
        
    
    

        
        

            
Admin
            
欢迎来到超市账单管理系统!
			
        
    





更多模板：源码之家

运行结果：

密码错误

 无用户：

 

 正常登录：

 总结：

本例基本上完成了，MVC三者之间的数据交互，其实MVC也没那么神秘，切记把握数据传递的主线来学习将会使学习路线更加清晰！