【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中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
kali linux 无法登录root的问题及解决方法

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》：本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2