【JSON2WEB】10 基于 Amis 做个登录页面login.html

2024-03-22 18:20
文章标签 登录 页面 html login frontend 做个 amis json2web

本文主要是介绍【JSON2WEB】10 基于 Amis 做个登录页面login.html，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

【JSON2WEB】08 Amis的事件和校验

【JSON2WEB】09 Amis-editor的代码移植到json2web

基于 Amis 做个登录页面 login.html ，用于验证用户名和密码的，验证成功后返回token,并保存token在 localStorage中。
参考视频教程，https://www.bilibili.com/video/BV1wu411Q7y3/?spm_id_from=333.788 ，Amis官方也没有视频教程，没有一点基础学起来很费劲啊。

1 创建登录页面 Login.html

1 新建登录页面

从官方文档 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started 拷贝hello.html,并修改后代码如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>amis demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><link rel="stylesheet" href="/sdk/sdk.css" /><link rel="stylesheet" href="/sdk/helper.css" /><link rel="stylesheet" href="/sdk/iconfont.css" /><!-- 这是默认主题所需的，如果是其他主题则不需要 --><!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 --><!-- <link rel="stylesheet" href="sdk-ie11.css" /> --><!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue --><style>html,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head><body><div id="root" class="app-wrapper"></div><script src="/sdk/sdk.js"></script><script type="text/javascript">(function () {let amis = amisRequire('amis/embed');// 通过替换下面这个配置来生成不同页面let amisJSON = {type: 'page',title: '登录JSON2WEB',body: {type: 'form',title: '',mode: 'horizontal',api: {url: 'http://127.0.0.1:5217/token/generate-token?userid=$userId&passwd=$passWd',method: 'post',adaptor: function (payload) {console.log(payload);if (payload.status === 0) {localStorage.setItem('token', payload.data.token);// localStorage.clear(); location.href = '/login.html';return payload;}}},redirect: '/index.html',body: [{label: '用户名：',type: 'input-text',name: 'userId'},{label: '密码：',type: 'input-password',name: 'passWd'}]}};let amisScoped = amis.embed('#root', amisJSON);})();</script>
</body></html>

1.2 核心就是 API的配置

在这里插入图片描述

1.3 页面预览

在这里插入图片描述

2 主页 index.html的代码

2.1 所有的API请求都带上token

token放在请求头里的Authorization，请求适配器代码如下：

requestAdaptor(api) {// Api前缀// if (api.url.indexOf("pages") == -1){//   api.url = "http://127.0.0.1:5217" + api.url;// }//api.url = "http://127.0.0.1:5217" + api.url;// token 认证            // api.headers['Authorization'] = "Bearer " + localStorage.getItem('token');api.headers['Authorization'] = localStorage.getItem('token');console.log("全局请求适配器", api);return api;},

2.2 所有的响应适配器

也就是没有token或过期等都请求不到后台的数据，代码如下：

// 全局 api 适配器。// 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。responseAdaptor(payload, response) {console.log("全局响应适配器", response);if (response.state == 401) {localStorage.clear();location.href = '/';}return payload, response;},

2.3 退出代码

退出时清空token并跳转到登录页，用内嵌js代码实现如下？

 header: {type: 'tpl',inline: false,className: 'w-full',tpl: `<div class="flex justify-between"><div>顶部区域左侧</div><div><a href="#" οnclick="localStorage.clear(); location.href = '/';">退出</a></div></div>`},

2.4 首页全部代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>amis admin</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--  <link rel="stylesheet" title="default" href="https://cdn.jsdelivr.net/npm/amis@beta/sdk/sdk.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@beta/sdk/helper.css" /><script src="https://cdn.jsdelivr.net/npm/amis@beta/sdk/sdk.js"></script> --><link rel="stylesheet" title="default" href="/sdk/sdk.css" /><link rel="stylesheet" title="default" href="/sdk/antd.css" /><!-- <link rel="stylesheet" title="default" href="/sdk/cxd.css" /> --><link rel="stylesheet" href="/sdk/helper.css" /><script src="/sdk/sdk.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> --><!-- <script src="https://cdn.jsdelivr.net/npm/history/umd/history.js"></script> --><script src="/sdk/history.js"></script><style>html,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head><body><div id="root" class="app-wrapper"></div><script>(function () {let amis = amisRequire('amis/embed');const match = amisRequire('path-to-regexp').match;// 如果想用 browserHistory 请切换下这处代码, 其他不用变//const history = History.createBrowserHistory();const history = History.createHashHistory();const app = {type: 'app',brandName: 'JSON2WEB',//logo: '/public/logo.png',logo: '/public/5217.jpg',header: {type: 'tpl',inline: false,className: 'w-full',tpl: `<div class="flex justify-between"><div>顶部区域左侧</div><div><a href="#" οnclick="localStorage.clear(); location.href = '/';">退出</a></div></div>`},// 如果想用 browserHistory 请切换下这处代码, 他不用变">退出登录</a></div></div>`footer: '<div class="p-2 text-center bg-light">版权没有，翻版不究！底部区域</div>',asideBefore: '<div class="p-2 text-center">菜单前面区域</div>',asideAfter: '<div class="p-2 text-center">菜单后面区域</div>',api: '/pages/site.json'};function normalizeLink(to, location = history.location) {to = to || '';if (to && to[0] === '#') {to = location.pathname + location.search + to;} else if (to && to[0] === '?') {to = location.pathname + to;}const idx = to.indexOf('?');const idx2 = to.indexOf('#');let pathname = ~idx? to.substring(0, idx): ~idx2? to.substring(0, idx2): to;let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';let hash = ~idx2 ? to.substring(idx2) : location.hash;if (!pathname) {pathname = location.pathname;} else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {let relativeBase = location.pathname;const paths = relativeBase.split('/');paths.pop();let m;while ((m = /^\.\.?\//.exec(pathname))) {if (m[0] === '../') {paths.pop();}pathname = pathname.substring(m[0].length);}pathname = paths.concat(pathname).join('/');}return pathname + search + hash;}function isCurrentUrl(to, ctx) {if (!to) {return false;}const pathname = history.location.pathname;const link = normalizeLink(to, {...location,pathname,hash: ''});if (!~link.indexOf('http') && ~link.indexOf(':')) {let strict = ctx && ctx.strict;return match(link, {decode: decodeURIComponent,strict: typeof strict !== 'undefined' ? strict : true})(pathname);}return decodeURI(pathname) === link;}let amisInstance = amis.embed('#root',app,{location: history.location},{// watchRouteChange: fn => {//   return history.listen(fn);// },requestAdaptor(api) {// Api前缀// if (api.url.indexOf("pages") == -1){//   api.url = "http://127.0.0.1:5217" + api.url;// }//api.url = "http://127.0.0.1:5217" + api.url;// token 认证            // api.headers['Authorization'] = "Bearer " + localStorage.getItem('token');api.headers['Authorization'] = localStorage.getItem('token');console.log("全局请求适配器", api);return api;},// 全局 api 适配器。// 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。responseAdaptor(payload, response) {console.log("全局响应适配器", response);if (response.state == 401) {localStorage.clear();location.href = '/';}return payload, response;},updateLocation: (location, replace) => {location = normalizeLink(location);if (location === 'goBack') {return history.goBack();} else if ((!/^https?\:\/\//.test(location) &&location ===history.location.pathname + history.location.search) ||location === history.location.href) {// 目标地址和当前地址一样，不处理，免得重复刷新return;} else if (/^https?\:\/\//.test(location) || !history) {return (window.location.href = location);}history[replace ? 'replace' : 'push'](location);},jumpTo: (to, action) => {if (to === 'goBack') {return history.goBack();}to = normalizeLink(to);if (isCurrentUrl(to)) {return;}if (action && action.actionType === 'url') {action.blank === false? (window.location.href = to): window.open(to, '_blank');return;} else if (action && action.blank) {window.open(to, '_blank');return;}if (/^https?:\/\//.test(to)) {window.location.href = to;} else if ((!/^https?\:\/\//.test(to) &&to === history.pathname + history.location.search) ||to === history.location.href) {// do nothing} else {history.push(to);}},isCurrentUrl: isCurrentUrl,// theme: 'cxd'theme: 'cxd'});history.listen(state => {amisInstance.updateProps({location: state.location || state});});})();</script>
</body></html>

3 后端REST2SQL修改

3.1 所有REST请求都要验证token

token从请求头Authorization获取。

switch req["RESTorSQL"] {case "REST":// token有效性验证tokenString := req["Authorization"].(string)if vToken(w, tokenString) != 200 {return}

token验证函数：

// token 验证函数
func vToken(w http.ResponseWriter, tokenString string) int {tokenmap := make(map[string]interface{})tokenmap = token.ValidateTokenHandler(w, tokenString)if tokenmap["status"] != http.StatusOK {// 抛出错误信息httpResWriter(w,tokenmap)return 401}return 200
}

主要内容就是抛出token错误信息，并设置返回代码为 401

4 nodejs路由配置

// 定义路由以加载不同的页面
app.get('/', (req, res) => {res.sendFile(path.resolve(__dirname, 'login.html'));
});app.get('/index.html', function (req, res) {res.sendFile(path.join(__dirname, 'index.html'));
});

http://localhost:3000/ 请求的就是登录页面 login.html
http://localhost:3000/index.html请求的是 index.html

5 实操演练

Step1 登录

http://localhost:3000/
在这里插入图片描述

Step 2 提交跳转

点【提交】按钮，登录成功跳转到主页index.html,可以查看token

在这里插入图片描述

Step 3 用户管理

在这里插入图片描述
可查询到信息，并可以crud操作。

Setp 4 退出

点主页右上角的【退出】按钮，可退出主页，并跳转到登录页，并清除了token
在这里插入图片描述

Step 5 直接在访问index.html

页面可以打开请求不到api的数据。
在这里插入图片描述
没有token或token过期都请求不到数据

脑子不好用，搞一点都记录一下，方便自己查询，好记性不如烂笔头。
本文完。

这篇关于【JSON2WEB】10 基于 Amis 做个登录页面login.html的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/835910。

相关文章

全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
Java中的登录技术保姆级详细教程

Java中的登录技术保姆级详细教程

《Java中的登录技术保姆级详细教程》：本文主要介绍Java中登录技术保姆级详细教程的相关资料,在Java中我们可以使用各种技术和框架来实现这些功能,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录1.登录思路2.登录标记1.会话技术2.会话跟踪1.Cookie技术2.Session技术3.令牌技
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...
CSS 样式表的四种应用方式及css注释的应用小结

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》：本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结，本文通过实例代码给大家介绍的非常详细，详细内容请阅读本文，希望能对你有所帮助... 一、外部 css（推荐方式）定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签
阅读更多...
SpringBoot后端实现小程序微信登录功能实现

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2