【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,并修改后代码如下：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>amis demo</title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/><metahttp-equiv="X-UA-Compatible"content="IE=Edge"/><linkrel="stylesheet"href="/sdk/sdk.css"/><linkrel="stylesheet"href="/sdk/helper.css"/><linkrel="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><divid="root"class="app-wrapper"></div><scriptsrc="/sdk/sdk.js"></script><scripttype="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 首页全部代码
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>amis admin</title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/><metahttp-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>
--><linkrel="stylesheet"title="default"href="/sdk/sdk.css"/><linkrel="stylesheet"title="default"href="/sdk/antd.css"/><!-- <link rel="stylesheet" title="default" href="/sdk/cxd.css" /> --><linkrel="stylesheet"href="/sdk/helper.css"/><scriptsrc="/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> --><scriptsrc="/sdk/history.js"></script><style>html,
body,
.app-wrapper{position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="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'};functionnormalizeLink(to, location = history.location){
to = to ||'';if(to && to[0]==='#'){
to = location.pathname + location.search + to;}elseif(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;}elseif(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;}functionisCurrentUrl(to, ctx){if(!to){returnfalse;}const pathname = history.location.pathname;const link =normalizeLink(to,{...location,
pathname,hash:''});if(!~link.indexOf('http')&&~link.indexOf(':')){let strict = ctx && ctx.strict;returnmatch(link,{decode: decodeURIComponent,strict:typeof strict !=='undefined'? strict :true})(pathname);}returndecodeURI(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();}elseif((!/^https?\:\/\//.test(location)&&
location ===
history.location.pathname + history.location.search)||
location === history.location.href
){// 目标地址和当前地址一样，不处理，免得重复刷新return;}elseif(/^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;}elseif(action && action.blank){
window.open(to,'_blank');return;}if(/^https?:\/\//.test(to)){
window.location.href = to;}elseif((!/^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)ifvToken(w, tokenString)!=200{return}
token验证函数：
// token 验证函数funcvToken(w http.ResponseWriter, tokenString string)int{
tokenmap :=make(map[string]interface{})
tokenmap = token.ValidateTokenHandler(w, tokenString)if tokenmap["status"]!= http.StatusOK {// 抛出错误信息httpResWriter(w,tokenmap)return401}return200}
主要内容就是抛出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 登录
Step 2 提交跳转
点【提交】按钮，登录成功跳转到主页index.html,可以查看token
Step 3 用户管理
可查询到信息，并可以crud操作。
Setp 4 退出
点主页右上角的【退出】按钮，可退出主页，并跳转到登录页，并清除了token
Step 5 直接在访问index.html
页面可以打开请求不到api的数据。
没有token或token过期都请求不到数据
脑子不好用，搞一点都记录一下，方便自己查询，好记性不如烂笔头。
本文完。
本文转载自: https://blog.csdn.net/sufuq/article/details/136911096
版权归原作者 白龙马5217 所有， 如有侵权，请联系我们删除。
版权归原作者 白龙马5217 所有， 如有侵权，请联系我们删除。