VFP+VUE碰撞出火花来了，我入门猫框后开始摸索开发自己的系统

最新推荐文章于 2024-03-21 09:31:35 发布

加菲猫的VFP

最新推荐文章于 2024-03-21 09:31:35 发布

阅读量3k

点赞数 1

分类专栏： VFP 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fitche/article/details/122295731

版权

VFP 专栏收录该内容

143 篇文章 33 订阅

订阅专栏

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 &copy; 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 &copy; 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”公众号发送“web1”获取。

我学习到此时，发现从VFP开发BS系统，从web1.0编程跨入到web2.0编程，还需要好多知识学习：

第一个就是多看猫框文档，多看实现例子，多看代码，多写代码，能熟悉更多的实现方法；
第二个学习VUE、UI、路由的相关知识；
第三个就是要多实践，不要停留在口头上，只有在练习中才能发现问题。未知的太多，就如面向黑洞，如果不走出第一步，永远不知道黑洞的深度，只有你丈量了，你才知道你下一步向哪儿走。希望在猫老师的带领下，我们能走得更远。

更多资料http://www.sn58.cn

加菲猫的VFP

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VFP+VUE碰撞出火花来了，我入门猫框后开始摸索开发自己的系统

ie11下面axios无法获取webapi数据大家好，我们前段时间跟着加菲猫老师学习了VFP+VUE入门课程。通过这门课程我们了解了VUE在网页开发的应用情况，也学会了利用axios组件从网页前端获取后台数据。我在练习过程中，遇到了在IE11中axios无法获取数据源的问题，我搜了一下才知道问题出axios与IE版本的兼容问题。如果全站使用VUE的element-ui组件开发网站，需要引入ES6-promise才能解决这个问题。鉴于时间问题和我并非全站使用VUE，我就跳过了这个步骤。幸而从猫老师哪儿获取
复制链接

扫一扫