VFP+VUE碰撞出火花来了，我入门猫框后开始摸索开发自己的系统
VFP+VUE碰撞出火花来了，我入门猫框后开始摸索开发自己的系统
加菲猫的VFP
发布于 2022-01-05 09:27:59
发布于 2022-01-05 09:27:59
文章被收录于专栏：加菲猫的VFP
ie11下面axios无法获取webapi数据
大家好，我们前段时间跟着加菲猫老师学习了VFP+VUE入门课程。通过这门课程我们了解了VUE在网页开发的应用情况，也学会了利用axios组件从网页前端获取后台数据。
我在练习过程中，遇到了在IE11中axios无法获取数据源的问题，我搜了一下才知道问题出axios与IE版本的兼容问题。如果全站使用VUE的element-ui组件开发网站，需要引入ES6-promise才能解决这个问题。鉴于时间问题和我并非全站使用VUE，我就跳过了这个步骤。幸而从猫老师哪儿获取可以使用别的方法实现从前端获取后台数据的办法，比如用Jquery 或 ExtJS。
在这儿我先讲一下我实际使用JQery获取后台数据的实现步骤。（ExtJS尚未研究中）
先上界面，先看实现效果。
登录界面：验证码为JS文件。
登录之后界面。
接下来我们讲述一下后期需要用到的文件。 首先在猫框下建表：
上图为DBF表，也可以创建到sqlserver中，本例以SQLserver为例 。
以上两表，仅实现登录及登录之后转向为例，因为我本人也在练习中，相信你们会有更多的应用方式。
登录之前可以先下载JQuery文件。
我们使用猫框开发BS系统,告别了给一个项目管理器一编到底的情况。我们学会多个项目管理器一起使用。（后端我们用猫框，前端用HBX,还要用到DOS命令行和浏览器）
接下来看一登录页面代码：
<!DOCTYPE html>
<html lang="en">
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Site Metas -->
<title>文件传输系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- Site Icons -->
<link rel="shortcut icon" href="imgs/fevicon.png" type="image/x-icon" />
<!-- Modernizer for Portfolio -->
<script src="js/modernizer.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="style.css">
<!-- Colors CSS -->
<link rel="stylesheet" href="css/colors.css">
<!-- ALL VERSION CSS -->
<link rel="stylesheet" href="css/versions.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!--custom js -->
<script src="basejs/yzm/jsyzm.js"></script>
<script src="basejs/jquery/jquery.min.1.11.1.js"></script>
</head>
<body class="christmas_version">
<header class="header header_style_01" style="padding:0px;margin:0px;max-height:90px;">
<nav class="megamenu navbar navbar-default" data-spy="affix">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">aa</span>
<span class="icon-bar">bb</span>
<span class="icon-bar">cc</span>
</button> -->
<a class="navbar-brand" href="index.html"><img src="imgs/logo.png" alt="image"></a>
</div>
<div class="col-md-7" style="margin:0px 0px 0px 100px;align:center">
<p style='font-family:"Times New Roman",Georgia,Serif; font-size:30px;color:#000;'>文件传输系统</p>
</div>
<!--
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-scroll href="#home">Home</a></li>
<li><a data-scroll href="#features">Donate & Gift</a></li>
<li><a data-scroll href="#chris_party">Christmas Party</a></li>
<li><a data-scroll href="#choose_gift">Your Gifts</a></li>
<li><a data-scroll href="#contact_us">Contact</a></li>
</ul>
</div>
-->
</div>
</nav>
</header>
<div id="home" class="section first-section wb banner_section" style="max-heigth:700px;min-height:700px;">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="contact_form">
<h3><b class="fa fa-envelope-o">登录</b></h3>
<form id="contactform1" action="" class="row" name="contactform" method="post">
<fieldset class="row-fluid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input type="text" name="uname" id="uname" class="form-control"
placeholder="用户名" value='hhh'>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input type="password" name='upass' id="upass" class="form-control"
placeholder="密码" value='123456'>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type=text
class="form-control" name='code_input' id="code_input" placeholder="验证码" " ></div>
<div class=" col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin:8px 0px 0px 0px;">
<div style='width:120px;' id="picyzm" title='点击切换验证码'></div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<button type="submit" value="登录" id="btn"
class="btn btn-light btn-radius btn-brd grd1 btn-block">登录</button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="wow slideInRight hidden-xs">
<img src="uploads/banner1_inner.png" alt="" class="img-responsive">
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end section -->
<div class="copyrights" style="margin:0px;padding:0px;">
<div class="container">
<div class="footer-distributed text-center">
<div class="footer-left">
<p class="footer-links">
<a data-scroll="" href="#home"></a>
<a data-scroll="" href="#features"></a>
<a data-scroll="" href="#chris_party"></a>
<a data-scroll="" href="#choose_gift"></a>
<a data-scroll="" href="#contact_us"></a>
</p>
<p class="footer-company-name">Copyright © 2021.Company name All rights reserved.</p>
</div>
</div>
</div>
<!-- end container -->
</div>
<!-- end copyrights -->
<a href="#home" data-scroll class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>
<!-- ALL JS FILES -->
</body>
</html>
<script type="text/javascript">
//初始化验证码
var verifyCode = new GVerify({
id: "picyzm",
type: "blend"
});
//点击按钮验证
var code = document.getElementById("code_input");
var btn = document.getElementById("btn");
btn.onclick = function() {
var res = verifyCode.validate(code.value);
if (res) {
//alert("验证通过");
} else {
alert("验证码错误");
return false;
}
//****************************************
$(document).ready(function() {
$.post("http://10.10.10.159:801/z2checklogin.fsp", {
uname: document.getElementById("uname").value,
upass: document.getElementById("upass").value},
function(data, status) {
//alert("数据：" + data + "\n状态：" + status);
if (status=='success'){
try
{
var aa=JSON.parse(data);
if (typeof aa === 'object' && aa)
{
if (aa.success=='true')
{
var bb=aa.url+"?aa="+aa.cToken+"="+aa.qx;
window.location.href=bb;
}
else { alert("获取转向URL失败")}
}
}
catch(e){ alert(data);}
}
else{
alert('提交失败！');
}
});
});
//**********
return false;
}
</script>
再看一下登录之后首页面的代码：
<!DOCTYPE html>
<html lang="en">
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Site Metas -->
<title>文件传输系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- Site Icons -->
<link rel="shortcut icon" href="imgs/fevicon.png" type="image/x-icon" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="style.css">
<!-- Colors CSS -->
<link rel="stylesheet" href="css/colors.css">
<!-- ALL VERSION CSS -->
<link rel="stylesheet" href="css/versions.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Modernizer for Portfolio -->
<script src="js/modernizer.js"></script>
<!--custom js -->
<script src="basejs/vue/vue.min.js"></script>
<script src="basejs/jquery/jquery.min.1.11.1.js"></script>
<script>
var aa=window.location.href.split("=");
var bb=aa[1];
var cc=aa[2];
$(document).ready(function() {
$.post("http://10.10.10.159:801/z1checkdl.fsp", {tk:bb,qx:cc},
function(data, status) {
//alert("数据：" + data + "\n状态：" + status);
if (status=='success'){
try
{
var aa=JSON.parse(data);
if (typeof aa === 'object' && aa)
{
if (aa.success=='true')
{
var bb="index.html?aa="+aa.cToken+"="+aa.qx;
window.location.href=bb;
}
else { alert("获取转向URL失败")}
}
}
catch(e){ alert(data);}
}
else{
alert('提交失败！');
}
});
});
</script>
</head>
<body class="christmas_version">
<header class="header header_style_01" style="padding:0px 0px 0px 0px">
<nav class="megamenu navbar navbar-default" data-spy="affix">
<div class="container">
<div class="navbar-header">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<a class="navbar-brand" href="index.html"><img src="imgs/logo.png" alt="image"></a>
</div>
<div class="col-md-7" style="display:inline;margin:0px 0px 0px 0px;align:center;font-family:'Times New Roman',Georgia,Serif; font-size:30px;color:#000;" >
文件传输系统
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- <li><a data-scroll href="#home">Home</a></li>-->
<li><a data-scroll href="">上传文件</a></li>
<li><a data-scroll href="">下载文件</a></li>
<li><a data-scroll href="">修改密码</a></li>
<li><a data-scroll href="">退出系统</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div id="home" class="section first-section wb banner_section">
<!----------------------------------------->
<!-- section -->
<div id="chris_party" class="section" style="max-height:600px;">
<div class="container">
<div class="section-title row text-center">
<div class="col-md-12">
<h3>Christmas Party</h3>
<p></p>
</div>
<!--
<div class="col-md-12 text-center">
<a class="btn btn-dark btn-radius btn-brd">Join the Party</a>
</div>
-->
</div>
<!-- end title -->
<!-- <div class="img-center">
<img src="imgs/santa_party.png" alt="" class="img-responsive">
</div>-->
</div>
<!-- end row -->
</div>
<!-- end section -->
<!----------------------------------------->
</div>
<!-- end section -->
<div class="copyrights" style="margin:0px;padding:0px;">
<div class="container">
<div class="footer-distributed text-center">
<div class="footer-left">
<!--
<p class="footer-links">
<a data-scroll="" href="#home">Home</a>
<a data-scroll="" href="#features">Donate & Gift</a>
<a data-scroll="" href="#chris_party">Christmas Party</a>
<a data-scroll="" href="#choose_gift">Your Gifts</a>
<a data-scroll="" href="#contact_us">Contact</a>
</p>
-->
<p class="footer-company-name">Copyright © 2021.Company name All rights reserved.</p>
</div>
</div>
</div>
<!-- end container -->
</div>
<!-- end copyrights -->
</body>
</html>
注意文中有注释的部分，作为coder 我们的美工设计，有点渣渣，所以我就找模板，然后修改我不要的地方，把我们需要显示的地方空出来，加上我们的代码就可以实现了界面美化。不过要想尽心如意，需要我们花点银子找个美工设计一下。 中间代码部分：我们用到了登录检测和每个页面登录检测。 注意我们遵循猫框的标准类名即文件名的作法。
DEFINE CLASS z2checklogin as Session
PROCEDURE ondefault
PRIVATE nRow,sSQl,subSql,oDBsqlhelper
PRIVATE cid,cpas,chtml
cid=ALLTRIM(httpqueryparams2("uname"))
cpas=ALLTRIM(httpqueryparams2('upass'))
oDBsqlhelper=newobject('MSSQLHelper','MSSQLHelper.prg')
subSql=StringFormat("rtrim(ltrim(username))='{1}' and LTRIM(RTRIM(userpwd))='{2}'", ALLTRIM(cid),ALLTRIM(cpas))
*muyetrans.dbo.
sSql='select * from userdb where '+subSql
clear
?"z2"
?sSQL
nRow=oDBsqlhelper.sqlquery(sSql,'tklist')
?'nrow==',nrow
IF nRow<>1 THEN
?oDBSQLhelper.errmsg
chtml='错误的用户名或密码，请重新登录!!!！'
RETURN chtml
ENDIF
IF nRow=1 THEN
SELECT tklist
oDal_token=NEWOBJECT("Dal_token","DAL_Token.prg")
cToken=oDal_token.getToken(cid)
?"ctoken=",cToken
HttpSetCookie("token",cToken)
TEXT TO chtml ADDITIVE TEXTMERGE NOSHOW
{
"username":"<<ALLTRIM(tklist.username)>>",
"qx":"<<tklist.userQx>>",
"cToken":"<<cToken>>",
"success":"true",
"url":"index.html"
}
ENDTEXT
ELSE
chtml= '错误的用户名或密码，请重新登录!!!！'
ENDIF
USE IN SELECT('tklist')
RETURN chtml
ENDPROC
ENDDEFINE
DEFINE CLASS z1checkdl as zzchecklogin of zzchecklogin.prg
PROCEDURE ondefault
PRIVATE ct,cqx
ct =httpqueryparams('tk')
cqx=httpqueryparams('qx')
CLEAR
?"z1",ct,cqx
ENDPROC
ENDDEFINE
DEFINE CLASS zzchecklogin as Session
PROCEDURE init
LPARAMETERS iconnid
PRIVATE cToken,oDal_token
PRIVATE Herror
CLEAR
herror=""
cToken=httpgetcookie("token")
?"ctoken===z1=====",cToken oDal_token=NEWOBJECT("dal_token","DAL_Token.prg")
IF ! oDal_token.isToken(cToken) THEN
ERROR "登录超期或未登录请重新登录"
ELSE
RETURN
ENDIF
ENDPROC
ENDDEFINE
Define Class dal_token As Session
protect yt &&3600 &&1小时失效
PROCEDURE init
DO setenv &&因为session是私有工作期，要重设环境
this.yt=3600 &&3600 &&1小时失效
ENDPROC
Procedure istoken
Lparameters lcToken
Local ltouttime,llReturn ,nRow,sSql,subSql
llReturn=.f.
*muyetrans.dbo.
oDBSQLhelper=NEWOBJECT("MSSQLHelper","MSSQLHelper.prg")
subSql = StringFormat(" rtrim(ltrim(guid))='{1}' ",Alltrim(lcToken))
sSql = 'select outtime from token where '+subSql
?'token 1'
?ssql
nRow=oDBSQLhelper.SQLQuery(sSql,"tklist")
if nRow<=0
?oDBSQLhelper.errmsg
RETURN llReturn
ENDIF
IF nRow=1 THEN
Select tklist
ltouttime=Datetime()+this.yt && 不需要这个变量
?DATETIME(),tklist.outtime
If DATETIME()<tklist.outtime
*Replace outtime With ltouttime IN token &&更新有效时间 muyetrans.dbo.
sSql="update token set outtime =dateadd(s,"+ALLTRIM(STR(this.yt))+",getdate()) where "+subSql
?'istoken==ssql====',sSql
nRow=oDBSQLhelper.ExecuteSQL(sSQL)
llReturn=.T.
ENDIF
?DATETIME(),tklist.outtime
Endif
USE IN SELECT("tklist")
RETURN llReturn
Endproc
Procedure gettoken
Lparameters cuser
Local ltouttime , lcGuid,nRow,subSql,sSql
SET DELETED ON
lcGuid=GetGUID(1)
?'lcGuid=====',lcGuid
ltouttime=Datetime()+this.yt
oDBSQLhelper=NEWOBJECT("MSSQLHelper","MSSQLHelper.prg")
subSql= StringFormat(" rtrim(ltrim(username))='{1}' ",ALLTRIM(cuser))
*muyetrans.dbo.
sSql='select * from token where '+subSql
?'token 2'
?sSQl
nRow=oDBSQLhelper.SQLQuery(sSql,"tklist")
if nRow<0
?oDBSQLhelper.errmsg
RETURN ''
ENDIF
Select tklist
IF nRow=1
?"找到 muyetrans.dbo."
ssql=StringFormat("update token set outtime =dateadd(s,{1},getdate()) ,guid='{2}' where "+subSql,this.yt,lcGuid)
?ssql
nRow=oDBSQLhelper.ExecuteSQL(ssql)
ELSE
?"未找到 muyetrans.dbo."
sSql= StringFormat("insert into token (username,guid,outtime) values('{1}','{2}',dateadd(s,{3},getdate())) ",cuser,lcGuid,this.yt)
?'gettoken====',ssql
nRow=oDBSQLhelper.ExecuteSQL(ssql) ENDIF
USE IN SELECT('tklist')
Return lcGuid
ENDPROC
Enddefine我学习到此时，发现从VFP开发BS系统，从web1.0编程跨入到web2.0编程，还需要好多知识学习：
1. 第一个就是多看猫框文档，多看实现例子，多看代码，多写代码，能熟悉更多的实现方法；
2. 第二个学习VUE、UI、路由的相关知识；
3. 第三个就是要多实践，不要停留在口头上，只有在练习中才能发现问题。未知的太多，就如面向黑洞，如果不走出第一步，永远不知道黑洞的深度，只有你丈量了，你才知道你下一步向哪儿走。希望在猫老师的带领下，我们能走得更远
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-01-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码（Captcha），基于十道安全栅栏， 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时，提供更精细化的用户体验。
腾讯云开发者
