NancyFx 2.0的开源框架的使用-Stateless(二)
继续上一篇Stateless的博文，在上一篇的博文的基础上稍微加点东西
接下来右键解决方案添加新项目，一样建一个空的Web项目
然后在StatelessDemoWeb项目里面添加Views文件夹，Scripts文件夹，并在Views文件夹里面添加index，login，secure三个页面
在index页面添加如下代码
<body>
<div id="loggedIn" style="display:none;"><p>欢迎<span id="username">.</span><a href="#" id="logout">登出</a></p></div>
<h1>非安全页面</h1>
<p><a href="secure.html">安全页面</a></p>
<script type="text/javascript">
$(document).ready(function () {
var apiToken = ApiToken.Get();
if (apiToken.IsValid) {
$("#loggedIn").show();
$("#username").html(apiToken.Username);
$("#logout").click(function () {
var request = { apiKey: apiToken.Key };
var success = function () {
ApiToken.Delete();
window.location = "index.html";
};
$.ajax({
type: 'DELETE',
url: api.auth,
data: request,
success: sucess,
dataType: "json"
});
});
}
});
</script>
</body>
在login页面添加如下代码
<body>
<div>
<input type="text" id="Username" placeholder="登陆名"/><br />
<input type="password" id="Password" placeholder="密码"/><br />
<input id="RememberMe" type="checkbox" value="True"/><br />
<button id="submitButton">登陆</button>
</div>
<div id="errorBox" style="display:none">
无效的用户名和密码
<script type="text/javascript">
$(document).ready(function () {
$("#submitButton").click(function () {
$("#errorBox").hide();
var authRequest = {
username: $("#Username").val(),
password: $("#Password").val(),
rememberMe: $("RememberMe").val()
};
var success = function (response) {
ApiToken.Set(authRequest.username, response.ApiKey, authRequest.rememberMe);
window.location = "index.html";
};
var error = function () {
$("#errorBox").show();
};
$.ajax({
type: 'POST',
url: api.auth,
data: authRequest,
success: success,
error: error,
dataType: "json"
});
});
});
</script>
</div>
</body>
在secure页面添加如下代码
<body style="display:none">
<div>
<a href="index.html"><<主页</a>
<div id="loggedIn" style="display:none">
<p>欢迎<span id="username"></span>.<a href="#" id="logout">登出</a></p>
</div>
<h1>安全页面</h1>
<div>安全内容:<span id="secureContent" class="secure"></span></div>
<div>
<input type="text" id="newusername" placeholder="用户名"/><br />
<input id="newpassword" type="password" placeholder="密码"/><br />
<input type="button" onclick="createUser()"/>
<div id="createuserresult"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//如果 apiKey 存在, 则表示用户已登录
//检查 apiKey 是否存在
var apiToken = ApiToken.Get();
if (apiToken.IsValid) {
//用户已登录
//获取和显示安全内容
//使用我们存储在 cookie 中的 apiKey
var request = { apiKey: apiToken.Key };
//成功视图
var success = function (response) {
$("#username").html(apiToken.Username);
$("#secureContent").html(response.SecureContent);
$("body").show();
};
//将用户重定向到401上的登录页
var error = function (response) {
if (response.status == ) {
window.location = "login.html";
return;
}
alert("出问题了" + response.error);
};
$.ajax({
url: api.secure,
data: request,
success: success,
error: error,
dataType:"json"
});
}
else {
//如果没有保存 apiToken, 则表示用户尚未登录
//将 "em 打包" 发送到登录页
window.location = "login.html";
}
if (apiToken.IsValid) {
$("#loggedIn").show();
$("#username").html(apiToken.Username);
$("#logout").click(function () {
//将 apiKey 发送到要销毁的 api
var request = { apiKey: apiToken.Key };
//当契约在服务器上完成时,
//删除客户端中的 cookie, 然后重定向到主页。
var success = function () {
apiToken.Delete();
window.location = "index.html";
};
$.ajax({
type: 'DELETE',
url: api.auth,
data: resquest,
dataType: "json"
});
});
}
});
function createUser() {
var apiToken = ApiToken.Get();
if (apiToken.IsValid) {
//用户已登录
var request = {
username: $("#newusername").val(),
password: $("#newpassword").val()
};
//成功视图
var success = function (response) {
$("#createuserresult").html("用户" + response.username + "已创建");
};
//将用户重定向到401上的登录页
var error = function (response) {
if (response.status == ) {
window.location = "login.html";
return;
}
alert("出问题了" + response.error);
};
$.ajax({
type: "POST",
url: api.create_user + "?ApiKey=" + apiToken.Key,
data: request,
success: success,
error: error,
dataType:"json"
});
}
else {
//如果没有保存 apiToken, 则表示用户尚未登录
//将 "em 打包" 发送到登录页
window.location = "login.html";
}
}
</script>
</body>
然后在script文件夹添加api.js,apiToken.js两个文件，然后修改api.js文件如下
var api = {
auth: "http://localhost:9611/restApi/auth",
secure: "http://localhost:9611/restApi/secure",
create_user:"http://localhost:9611/resApi/secure/create_user"
};
apiToken.js文件添加如下代码
var apiKeyKey = "sample_apiKey";
var usernameKey = "sample_username"; var ApiToken = {
Set: function (username, apiKey, rememberMe) {
var days = rememberMe ? : ;
createCookie(apiKeyKey, apiKey, days);
createCookie(usernameKey,username,days);
},
Get: function ()
{
var key = readCookie(apiKeyKey);
var username = readCookie(usernameKey);
var token = { Key: key, Username: username, IsValid: key != null };
return token;
},
Delete: function ()
{
eraseCookie(apiKeyKey);
eraseCookie(usernameKey);
}
};
function createCookie(name,value,days)
{
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * * * ));
var expires = ";expires=" + date.toGMTString();
} else {
var expires = "";
document.cookie = name + "=" + value + expires + ";path=/";
console.log(document.cookie);
}
}
function readCookie(name) {
var cookieValue = null;
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = ; i < ca.length; i++) {
var c = cap[i];
while (c.charAt() == ' ') {
c = c.substring(, c.length);
}
if (c.indexOf(nameEQ) == ) {
var found = c.substring(nameEQ.length, c.length);
cookieValue = found;
}
}
return cookieValue;
}
function eraseCookie(name) {
createCookie(name,"",-);
}
运行如下
谢谢观赏
NancyFx 2.0的开源框架的使用-Stateless(二)的更多相关文章
- NancyFx 2.0的开源框架的使用-Stateless
同样和前面一样新建一个空的Web项目,都在根目录添加Module,Models,Views文件夹 添加Nuget包 在Models文件夹里面添加UserModel类 public string Use ...
- NancyFx 2.0的开源框架的使用-Basic
这是NancyFx开源框架中的Basic认证,学习一下! 首先当然是新建一个空的Web,BasicDemo 继续在项目中添加Nuget包,记得安装的Nuget包是最新的预发行版 Nancy Nancy ...
- NancyFx 2.0的开源框架的使用-CustomModule(自定义模块)
NancyFx框架的自定义模块 新建一个空的Web项目 然后通过NuGet库安装下面的包 Nancy Nancy.Hosting.Aspnet 然后添加Models,Module,Views三个文件夹 ...
- NancyFx 2.0的开源框架的使用-ModelBinding(实现绑定)
NancyFx框架中使用绑定模型 新建一个空的Web程序 然后安装Nuget库里面的包 Nancy Nancy.Hosting.Aspnet Nancy.ViewEnglines.Spark 并在We ...
- NancyFx 2.0的开源框架的使用-HosingOwin
Nancy框架的Owin使用 先建一个空的Web项目 然后往Nuget库里面添加Nancy包 Nancy Nancy.Owin Nancy.ViewEnglines.Spark 然后添加Models, ...
- NancyFx 2.0的开源框架的使用-Authentication
新建一个空的项目 新建好了空的项目以后,接着通过NuGet安装一下三个包 Nancy Nancy.Hosting.Aspnet Nancy.ViewEnglines.Razor 然后在项目中添加Mod ...
- NancyFx 2.0的开源框架的使用-Forms
同样的像前面2篇博文一样,每个项目的开始基本都是建个空的Web项目 在NuGet库中安装以下几个NuGet包 Nancy Nancy.Authentication.Forms Nancy.Hostin ...
- NancyFx 2.0的开源框架的使用-AspnetBootstrapping
新建一个空的Web项目AspnetBootstrappingDemo 然后添加NuGet组件 Nancy Nancy.Hosting.Aspnet Nancy.ViewEngines.Razor 继续 ...
- NancyFx 2.0的开源框架的使用-Caching
新建一个空的Web项目,命名CachingDemo 然后添加三个Nuget安装包 Nancy Nancy.Hosting.Aspnet Nancy.ViewsEngines.Razor 然后往项目里面 ...
随机推荐
- 腾讯云总监手把手教你，如何成为AI工程师？
作者:朱建平 腾讯云技术总监,腾讯TEG架构平台部专家工程师 1.关于人工智能的若干个错误认知 人工智能是AI工程师的事情,跟我没有什么关系 大数据和机器学习(AI) 是解决问题的一种途径和手段,具有 ...
- zookeeper的安装与部署-伪集群
1.Zookeeper的下载与解压 通过后面的链接下载Zookeeper: Zookeeper下载在此我们下载zookeeper-3.4.5下载后解压至安装目录下,本文我们解压到目录:/ ...
- ecshop点滴记录
会员中心: 用户中心页面的内容分布在两个模板文件中: user_clips.dwt(包含:欢迎页.我的留言.我的评论.我的标签.收藏商品.缺货登记.添加缺货登 记.我的推荐.单个商品推荐) user_ ...
- 老李分享：大数据框架Hadoop和Spark的异同 1
老李分享:大数据框架Hadoop和Spark的异同 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...
- jquery的冒泡事件event.stopPropagation()
js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的冒泡应该 说是交换更加准确:js ...
- [Paxos] Paxos Made Simple 读后感
Paxos 由著名图灵奖获得者Leslie Lamport提出,该算法是分布式一致性算法中的奠基之作,今天初读此文仅将相关学习心得予以记录. 1.Paxos 是什么?主要用来解决什么问题? Paxos ...
- 一个可能让你记忆力飙升的软件 —— 这是一道填空(keng)题
本文题目的两个含义: 1.填上次挖的坑,将优化后的软件分享给需要的网友(下载链接附在文末): 还没有看过的网友可以先看看这篇文章: 一个可能让你记忆力飙升的软件 2.这个软件的本质其实就是生成各种填空 ...
- Sitemesh 3 配置和使用(最新)
Sitemesh 3 配置和使用(最新) 一 Sitemesh简介 Sitemesh是一个页面装饰器,可以快速的创建有统一外观Web应用 -- 导航 加 布局 的统一方案~ Sitemesh可以拦截任 ...
- Lambda&Java多核编程-7-类型检查
本篇主要介绍Lambda的类型检查机制以及周边的一些知识. 类型检查 在前面的实践中,我们发现表达式的类型能够被上下文所推断.即使同一个表达式,在不同的语境下也能够被推断成不同类型. 这几天在码一个安 ...
- node.js系列（实例）：原生node.js+formidable模块实现简单的文件上传
/** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...