（3）使用易语言CCHTTP开发WEB网站-后台登录

于 2024-02-28 20:13:35 发布
阅读量778 收藏 6
点赞数 5
分类专栏： 易语言-开发WEB网站 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44276861/article/details/136354137
版权

目录

1.创建数据库结构

.新建一张e_user表，结构如下，当然前期我们只验证用户名和密码
在这里插入图片描述

列	类型	注释
id	int(9) 自动增量	
fid	int(5) [0]	用户类型 0普通用户 1管理员 2普通管理员 3vip
off	int(1) [1]	1正常 0未审核 -1封禁 
username	varchar(16)	登录账号
password	varchar(32)	密码 md5加密
token	varchar(32)	登录令牌 有效30天。重新登录会重置
regtiem	char(13)	注册时间
logintime	char(13)	最后登录时间
qq	char(13)	QQ号
mail	char(100)	邮箱
balance	float [0]	余额
integral	int(11) [0]	积分点
time	int(11)	租用到期时间

.然后新建一个用户，作为管理员账户
在这里插入图片描述
账号密码都是：admin admin

2.创建前端.html页面

.创建两个html页面，路径
在这里插入图片描述

项目/模板/admin/index.html  #管理后台主页
项目/模板/admin/login.html  #管理登录页

登录页登录表单html代码如下，这里我用的layui：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{{网站名称}} - 后台登录</title>
		{{>/admin/css.html}}
		<style>
			body {
			  background-image: url("/src/images/rlogin.jpg");
			}
		</style>
	</head>
	<body>
		<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
		
		  <div class="layadmin-user-login-main layui-card">
		    <div class="layadmin-user-login-box layadmin-user-login-header">
		      <h2>{{网站名称}}</h2>
		      <p>{{站点描述}}</p>
		    </div>
		    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
		      <div class="layui-form-item">
		        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
		        <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
		      </div>
		      <div class="layui-form-item">
		        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
		        <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
		      </div>
		      <div class="layui-form-item">
		        <div class="layui-row">
		          <div class="layui-col-xs7">
		            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
		            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
		          </div>
		          <div class="layui-col-xs5">
		            <div style="margin-left: 10px;">
		              <img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
		            </div>
		          </div>
		        </div>
		      </div>
		      <div class="layui-form-item" style="margin-bottom: 20px;">
		        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
		        <a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
		      </div>
		      <div class="layui-form-item">
		        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
		      </div>
		    </div>
		  </div>
		  
		  <div class="layui-trans layadmin-user-login-footer">
		    <p>C 2024 <a href="#">layui.com</a></p>
		    <p>
		      <span><a href="#admin/#get">获取授权</a></span>
		      <span><a href="#">在线演示</a></span>
		      <span><a href="/" target="_blank">官网首页</a></span>
		    </p>
		  </div>
		  
		</div>
	{{>/admin/js.html}}
	<script>
	layui.config({
	  base: '/dist/layuiadmin/' //静态资源所在路径
	}).extend({
	  index: 'lib/index' //主入口模块
	}).use(['index', 'user'], function(){
	  var $ = layui.$
	  ,setter = layui.setter
	  ,admin = layui.admin
	  ,form = layui.form
	  ,router = layui.router()
	  ,search = router.search;
	  form.render();
	  //提交
	  form.on('submit(LAY-user-login-submit)', function(obj){
	    admin.req({
	      url: '/api/get?functionid=login' //发送给请求
	      ,data: obj.field
	      ,done: function(res){
	        //请求成功后，写入 access_token
	        layui.data(setter.tableName, {
	          key: setter.request.tokenName
	          ,value: res.data.access_token
	        });
	        //登入成功的提示与跳转
	        layer.msg('登入成功', {
	          offset: '15px'
	          ,icon: 1
	          ,time: 1000
	        }, function(){
	          location.href = '/admin/index'; //后台主页
	        });
	      }
	    });
	  });
	  
	  //欢迎下
	  layer.msg('你好欢迎来到 - {{网站名称}}', {
	    offset: '15px'
	    ,icon: 1
	  });
	  
	});
	</script>
	</body>
</html>
  • 关于里面使用到的{{****}}变量 疑问解答
    参考e2ee：输出变量
    这里我输出的数据库建立号的完整信息表，结构和数据如下：
    在这里插入图片描述
    前期可以忽略

3.易语言注册接口

注册三个接口

全局_网站.注册接口 (&页面_通用后台回复, “/admin/login”, “/admin/login.html”, , “GET”) 
全局_网站.注册接口 (&页面_通用后台回复, “/admin/index”, “/admin/index.html”, { “是否登录” }, “GET”) 
全局_网站.注册接口 (&接口_回复get请求, “/api/get”, , { “是否登录” }, “GET”)
  • 路由：/admin/login 管理员登录页，回复模板：/admin/login.html ‘就是刚刚我们新建的html’
  • 路由：/admin/login 管理员登录页，回复模板：/admin/login.html ‘就是刚刚我们新建的html’
  • 路由：/api/get 这个是通用处理get请求的接口，这里不需要写回复模板

子程序指针 &页面_通用后台回复

.版本 2
.支持库 spec

.子程序 页面_通用后台回复, 逻辑型, , 通用回复注册接口时填写的模板就有这个子程序就恶心
.参数 指针
.局部变量 接口, CC接口
.局部变量 json数组, json数组
.局部变量 json对象, json对象
.局部变量 json, 类_json
.局部变量 access_token, 文本型
.局部变量 i, 整数型

取回接口 (指针, 接口)
' 这里我们可以进行一些数据查询操作，比如返回网站信息，用户信息，等等,这里我就统一回复 写在数据库的站点信息 和当前登录的用户信息
接口.数据库_查询 (json数组, “SELECT * FROM `e_config` WHERE `fid` = '1'”, )
json.解析 (json数组.到JSON (), , )
.计次循环首 (json.成员数 (), i)
    json对象.置文本 (json.取通用属性 (“[” ＋ 到文本 (i － 1) ＋ “].key”, ), json.取通用属性 (“[” ＋ 到文本 (i － 1) ＋ “].value”, ), )
.计次循环尾 ()
json数组.清空 ()
json.清除 ()
access_token ＝ 接口.取Cookies (“access_token”)
.如果真 (access_token ≠ “”)
    接口.数据库_查询 (json数组, “SELECT * FROM `e_user` WHERE `token` = '” ＋ 接口.取Cookies (“access_token”) ＋ “'”, )
    json.解析 (json数组.到JSON (), , )
    json对象.置JSON文本 (“user”, json.取通用属性 (“[0]”, 真), , )
    json数组.清空 ()
    json.清除 ()
.如果真结束
调试输出 (json对象.到JSON ())
接口.回复模板 (, json对象)
返回 (真)

子程序指针 &接口_回复get请求

.版本 2
.支持库 dp1
.支持库 spec

.子程序 接口_回复get请求, 逻辑型
.参数 指针
.局部变量 接口, CC接口
.局部变量 json对象, json对象
.局部变量 json数组, json数组
.局部变量 json, 类_json
.局部变量 functionid, 文本型
.局部变量 table, 文本型
.局部变量 username, 文本型
.局部变量 password, 文本型
.局部变量 vercode, 文本型
.局部变量 access_token, 文本型
.局部变量 logintime, 文本型
.局部变量 uid, 文本型
.局部变量 off, 整数型
.局部变量 fid, 文本型
.局部变量 array, 文本型, , "0"
.局部变量 i, 整数型
.局部变量 login_ture, 逻辑型

取回接口 (指针, 接口)
functionid ＝ 接口.取参数 (“functionid”)
.如果真 (functionid ＝ “”)
    接口.回复JSON (“Function is empty”, 400, , 假, 真)  ' functionid不能为空
.如果真结束
' 下面开始业务逻辑，根据functionid来回复用户
.判断开始 (functionid ＝ “login”)  ' ' 注册一个方法 登录,这时还需要提交username password
    username ＝ 接口.取参数 (“username”)
    password ＝ 接口.取参数 (“password”)
    vercode ＝ 接口.取参数 (“vercode”)
    接口.数据库_查询 (json数组, “SELECT * FROM `” ＋ #表_用户 ＋ “` WHERE `username` = '” ＋ username ＋ “'”, )
    json.解析 (json数组.到JSON (), , )
    uid ＝ 到小写 (文本_加密 (json.取通用属性 (“[0].id”, ), “lele2020o”))
    fid ＝ json.取通用属性 (“[0].fid”, )
    off ＝ 到整数 (json.取通用属性 (“[0].off”, ))
    .如果真 (json.取通用属性 (“[0].username”, ) ≠ username 或 json.取通用属性 (“[0].password”, ) ≠ 取数据摘要 (到字节集 (password)))
        接口.回复JSON (“账号或密码错误”, 400, , 假, 真)
    .如果真结束
    json.清除 ()
    json数组.清空 ()
    .如果真 (off ＝ -1)  ' 被禁止登录
        接口.回复JSON (“您被禁止登录”, 400, , 假, 真)
    .如果真结束
    ' ====判断有没有后台登录权限===表 e_config class=2
    接口.数据库_查询 (json数组, “SELECT * FROM `” ＋ #表_系统 ＋ “` WHERE `key` = '后台登录权限'”, )  ' 如果数据库改了这个字段‘后台登录权限’ 这里也要跟着改变
    json.解析 (json数组.到JSON (), , )
    ' 调试输出 (json数组.到JSON ())
    array ＝ 分割文本 (json.取通用属性 (“[0].value”, ), “,”, )
    调试输出 (array)
    login_ture ＝ 假
    json.清除 ()
    json数组.清空 ()
    .计次循环首 (取数组成员数 (array), i)
        .如果真 (array [i] ＝ fid)  ' 运行登录后台
            login_ture ＝ 真
        .如果真结束

    .计次循环尾 ()
    .如果真 (login_ture ＝ 假)  ' 被禁止登录
        接口.回复JSON (“您没有后台登录权限”, 400, , 假, 真)
    .如果真结束
    ' ====开始处理cookie
    access_token ＝ 取数据摘要 (到字节集 (username ＋ “/*lUs-” ＋ password ＋ “/time=” ＋ 时间_取现行时间戳 ()))
    logintime ＝ 时间_取现行时间戳 ()
    .如果真 (接口.数据库_执行SQL (“UPDATE `e_user` SET `token` = '” ＋ access_token ＋ “',`logintime` = '” ＋ logintime ＋ “' WHERE `username` = '” ＋ username ＋ “';”, , , , , ) ＝ 真)  ' 修改token
        接口.置Cookie (“user_name”, username, , , , )
        接口.置Cookie (“user_id”, uid, , , , )
        接口.置Cookie (“access_token”, access_token, , , , )

        json对象.置文本 (“user_id”, uid, )
        json对象.置文本 (“user_name”, username, )
        json对象.置文本 (“access_token”, access_token, )
        接口.回复JSON (“登入成功”, 0, json对象, 真, 真)
    .如果真结束

    接口.回复JSON (“登入失败”, 400, json对象, 假, 真)
.默认

.判断结束

接口.回复JSON (“成功”, 0, , 真, 真)
返回 (真)

在 子程序 ‘接口_前全局接口’ 处判断下是否取到access_token 如有验证通过跳转到管理员主页，认证不通过则回到登录页

.版本 2
.支持库 spec

.子程序 接口_前全局接口, 逻辑型
.参数 指针
.局部变量 接口, CC接口
.局部变量 路由, 文本型
.局部变量 access_token, 文本型
.局部变量 json数组, json数组
.局部变量 json对象, json对象
.局部变量 json, 类_json

取回接口 (指针, 接口)
路由 ＝ 接口.取地址 ()
access_token ＝ 接口.取Cookies (“access_token”)
调试输出 (“前全局接口”, 路由, access_token)
.如果 (access_token ＝ “”)
    json对象.置文本 (“titel”, “当前未登录”, )
    json对象.置文本 (“center”, “倒计时结束后，将跳转到登录页面”, )
    json对象.置文本 (“url”, “/admin/login”, )  ' 预跳转的地址
    json对象.置文本 (“ms”, “3”, )  ' 倒计时
    接口.回复模板 (“/page/redirect.html”, json对象)

.否则
    接口.数据库_查询 (json数组, “SELECT * FROM `e_user` WHERE `token` = '” ＋ access_token ＋ “'”, )
    json.解析 (json数组.到JSON (), , )
    .如果真 (json.取通用属性 (“[0].token”, ) ≠ access_token)  ' 这里是个很严重的问题
        json对象.置文本 (“titel”, “当前登录失效”, )
        json对象.置文本 (“center”, “倒计时结束后，将跳转到登录页面”, )
        json对象.置文本 (“url”, “/index/login”, )  ' 预跳转的地址
        json对象.置文本 (“ms”, “3”, )  ' 倒计时
        接口.回复模板 (“/redirect”, json对象)

    .如果真结束
    .判断开始 (路由 ＝ “/admin/login”)

    .默认

    .判断结束
    ' 鉴权通过，可以正常访问其他接口
.如果结束




返回 (真)

结束

至此一个简单的后台登录功能完成！参考附件消化，前端登录也是异曲同工
效果图
在这里插入图片描述
每个章节的学习资料我也会在交流群里发布
在这里插入图片描述

下章处理下，普通用户/管理员的权限控制

江南啊江南
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
易语言-易语言做网站 E2EE个人发卡
06-26
易语言做网站 E2EE个人发卡 运行前需要服务器安装mysql环境 或者 远程链接mysql服务器 需要下载 MYSQL ODBC http://e2ee.jimstone.com.cn/downloads/#sanye.cx 配置文件在 配置 ->数据库.conf 支付文件 ->支付.conf 支付是百度上随便找到一个对接的 源码在这 自己对接就完事
易语言制作网页-易语言
06-13
易语言制作网页
易语言网页登录 POST
热门推荐
超哥的专栏
07-30 3万+
使用精易模块 打开网页登录窗口 抓取数据 输入用户名密码，抓包 保存抓到的数据 包含post地址和数据信息 易语言代码
（1）使用易语言CCHTTP开发WEB网站-准备工作
weixin_44276861的博客
02-27 844
简单到一个点击.exe即可启动网站.记录下心血历程.作为人类必须要学会用工具，手搓一个显然不现实。# 开发目标。
易语言-易语言做网站 E2EE实现个人简易博客
06-26
易语言做网站 E2EE实现个人简易博客
网页制作源码（易语言）
10-15
易语言代码 网页制作源码（易语言）
易语言-网页编辑器
04-08
马年修改版 制作网页的小工具 交流学习之用
易语言制作网页开发系统源码
04-27
网页开发系统源码.编写网页找他就ok了~大家来用用就知道好不好~希望给大家带来好处~
（2）使用易语言CCHTTP开发WEB网站-后台登录
最新发布
02-28
《使用易语言CCHTTP开发WEB网站-后台登录详解》 在IT行业中，构建Web网站是常见的任务，尤其在后台管理系统的设计上，登录功能至关重要。本教程将深入讲解如何使用易语言配合CCHTTP模块来开发一个完整的WEB网站后台...
（2）使用易语言CCHTTP开发WEB网站-你好世界 易语言源码
02-27
在本主题中，我们将深入探讨如何使用易语言的CCHTTP模块来开发WEB网站，以及相关源码分析。 首先，"CCHTTP"是易语言中的一个模块，用于处理HTTP协议，实现客户端向服务器发送请求并接收响应的功能。在构建WEB应用时...
易语言网页操作，抢购类软件（源代码+精易模块）
09-20
易语言网页操作，抢购类软件（源代码），通过精易模块进行模拟网页按钮点击等操作，是一个很好的学习例程！
超简单的易语言写的网页浏览器
12-08
超简单的易语言写的网页浏览器，就几行代码。
易语言网页采集教程
05-13
易语言网页采集教程 详细讲解网络采集技术
易语言脚本后端（ppwjss）开源-易语言
06-12
这是写于3年前的一份代码，目的是为了测试，随便玩玩，用易语言打造一款类似php的后端脚本引擎，名字初定为ppwjss。 代码功能暂时不多，可以使用get提交。 ppwjss目前是使用光速服务引擎推动后端服务的，源码里的光速模块是未授权的，如果需要使用授权的光速模块，请联系作者购买。 大家也可以用各种其他的后端服务引擎，如HP、星光、e2ee（未探讨是否可以）、易语言的服务组件、iis等等 源码里除了有后端脚本引擎，还增加了一个测试版的js库，名为ppw.js，ppwjs目的是让html源码里的js支持中文，让更多人在审查源码的时候，阅读性增强。此js库可以继续升级和改造，例如使用各种其他js库转化为中文库。 文件里有一个3年前的文件夹，里面的服务管理器加入了测试器，可以在管理器里打开源码立即测试脚本js引擎功能。 欢迎加入ppwjss后端脚本服务引擎qq群：591895789。 也可以在百度网盘下载： 链接： https://pan.baidu.com/s/1cFGVqI 密码：0ecf
易语言-webkit引擎界面系统(HTML+CSS+JS+JQ)
06-25
源码介绍： 1、HTML是目前在用户体验、界面舒适度最先进的语言 2、HTML所有标签都是容器，CSS调试效果方便 3、最重要的一点，让做界面的去界面，写程序的去写程序吧，界面与程序分享得更彻底 4、支持js、jq和易语言交互！ 5、窗口尺寸自适应； 6、支持FLASH； 7、网页文件可以放在服务器上(如果你有虚拟机或者云主机的话)，也可以加密打包后，内存加载；还可以放在资源表里；防止界面代码泄露； 例子中，做了简单的交互示例。并无实际功能！ 本例程仅演示界面功能，实际开发需添加更多功能代码； (调用了开源的wke模块) 什么是wke？ WebKit 是一个开源的浏览器引擎，同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。WebKit 前身是 KDE 小组的 KHTML，WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。apple将 KHTML 发扬光大，推出了装备 KHTML 改进型 WebKit 引擎的浏览器 Safari。Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 等都是基于 Webkit 开发。,Webkit作为一款优秀的浏览器内核，它众多优秀的特性引起业内的的广泛关注。尤其是近来，google的加入更是让Webkit有所升温，从 Goole Chrome浏览器, Goole Anroid手机操作系统内置浏览器均采用Webkit作为内核。
【易语言模拟鼠标点击-后台】
09-07
【易语言模拟鼠标点击-后台-赶快保存-不下载就没了】
易语言-钉钉web协议-2023最稳定的粒子框架.zip
03-14
而“易语言-钉钉Web协议-2023最稳定的粒子框架”则是一个基于易语言开发的，与钉钉API接口进行交互的框架，旨在为开发者提供更加稳定、高效的方式来进行钉钉应用的开发。这个框架充分利用了易语言的特性，使得开发者...
用易语言开发web接口例子-易语言
06-11
不会PHP的也可以用易语言 来开发web程序，用易语言开发HTTP接口也很...易语言开发web也有好处。代码都是大家熟悉的，省去了了解和学习nginx、apache、IIS的时间。 也有坏处，坏处就不说了。但是方便使用和开发就行了。
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
weixin_30745641的博客
01-25 940
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。 此处手札 供后人参考~ 1.第一步 服务端设置响应头 header('Access-Control-Allow-Origin:*'); //支持全域名访问，不安全，部署后需要固定限制为客户端网址 header...
易语言 获取到表情 utf -m
01-12
易语言提供了很多函数和方法来获取表情的UTF-8编码。UTF-8是一种常用的字符编码方式，用来表示各种语言的字符和符号。在易语言中，我们可以使用一些内置函数来处理和获取表情的UTF-8编码。 首先，我们可以使用“变量”) функци来声明一个变量来存储表情的UTF-8编码。例如，可以声明一个字符串类型的变量“emoji”，用来存储表情的编码。 然后，我们可以使用“输入表情代码”)函数来获取用户输入的表情的UTF-8编码。这个函数会打开一个对话框，让用户输入表情代码。用户可以输入一些特殊的字符来表示表情，如“\u{1F602}”来表示一个笑脸表情。函数会将用户输入的表情代码作为字符串返回给我们。 接下来，我们可以使用“输出表情”)函数来将表情的UTF-8编码转换成实际的表情符号，并将其显示在屏幕上。这个函数需要接受一个参数，也就是表情的UTF-8编码，然后将其转换成可显示的字符串，并输出到屏幕上。 最后，我们可以使用“获取")函数来获取已经赋值给变量的表情的UTF-8编码。这个函数需要接受一个参数，也就是我们之前声明的变量名，然后会返回该变量中存储的表情的UTF-8编码。 总之，易语言提供了一系列函数来帮助我们获取表情的UTF-8编码，并进行相关操作。通过这些函数，我们可以轻松地获取和处理表情的编码，并将其显示在屏幕上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江南啊江南

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值