当前位置:  开发笔记 > 后端 > 正文

Asp.net MVC利用knockoutjs实现登陆并记录用户的内外网IP及所在城市(推荐)

这篇文章主要介绍了Asp.netMVC利用knockoutjs实现登陆并记录用户的内外网IP及所在城市(推荐),需要的朋友可以参考下

前言

前面第一篇开了头个,现在想先从登陆写起,但感觉还有很多东西应该放在前面写,比如

1、MVC及Web API的Route配置,Web API的Route配置如何支持命名空间

2、如何配置Filters(实现安全验证、错误处理等等)

3、自定义Filters、HttpRouteConstraint、ModelBinder及HttpParameterBinding等

这些问题在我开发过程中都有碰到,但感觉每一点都要说太多了。如果有需要到时候再回过头来写。

需求

还是老样子,我们先要明白要登陆实现哪些东西:

1、登陆页面(用户名、密码、记住我、登陆按钮、重置按钮)

2、消息显示(比如 错误时显示某某错误,登陆时显示正在登陆,登陆成功显示正在跳转等)

3、登陆处理(验证、登陆、正在登陆时禁用表单、更新用户登陆次数及时间、添加登陆履历其中要包括用户的内网IP外网IP还有所在城市、其它业务处理)

4、成功跳转

实现效果

在实现之前我们先看看实现出来的效果截图

登陆页面

image

跳转页面

image

登陆履历

image

需求分析及实现

需求中基本都好实现,只有登陆履历中要记录内外网IP及所在城市要考虑一下。在asp.NET中取得客户端内外网IP还是比较麻烦的,而要取得所在城市就基本不可能了,所以我们只好考虑借助第三方api去实现了。

1、内网IP直接在后台取

2、外网IP可以通过新浪API http://counter.sina.com.cn/ip 取得,原来也可以返回城市的,后台不知道什么原因,只能返回IP了

3、所在城市通过百度API http://api.map.baidu.com/location/ip?ak=&ip=取得,但是这个不会返回外网IP所以我就两个一起用了,挺蛋疼的。

以上在客户端去访问相应的API又存在一个跨域的问题,通过调查发现百度API支持JSONP,可以很好的解决跨域的问题,新浪API不支持但它返回一个变量,我们可以直接把新浪API写在页面srcipt中即可取得相应变量。

技术都应该没问题了,那我们开始写吧。

具体实现

第一步:在MVC中新建LoginController添加如下代码

using System;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Zephyr.Core;
using Zephyr.Models;
using Zephyr.Web.Areas.Mms.Common;
namespace Zephyr.Controllers
{
 [AllowAnonymous]
 public class LoginController : Controller
 {
 public ActionResult Index()
 {
 ViewBag.CnName = "建筑材料管理系统";
 ViewBag.EnName = "Engineering Material Mangange System";
 return View();
 }
 }
}

类要用AllowAnonymous属性修饰,才能保证未登陆也能够访问。

第二步:添加对应的View,添加~/Views/Login/Index.cshtml,代码如下

@{
 ViewBag.Title = "登录系统";
 Layout = null;
}


 
 @ViewBag.Title
 
 
 
 
 
 




















    
拾味湖
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有