Vue访问webservice的辛酸历程 (不会走路就开始跑之一)

我一个一直是用pb开发pc端的管理软件的普通开发人员。

一直想搞搞移动端、微信小程序开发的东西。

一年前就谋算着要开始搞搞…………

但是一年多了,还是在起跑线上徘徊。

因为……

不想着太多理由,但是确实有一点理由(真不要脸 ^_^),就是因为之前主要用的PB开发工具的开发的pc端程序代码规则与Vue这类开发语言的差异非常大,开始看了一些入门资料,基本上看不进去,感觉无从下手,看来看去总是那些入门的基础语法等等......

不知道其他同志是否也有这样的“赶脚”……还有一点理由就是前段时间手头上的工作比较多,确实腾不开时间能潜心学习。

anyway,今年疫情和手头项目基本告一段落,感觉应该可以开始有点时间又来折腾这个Vue了,据说So easy,那就just do it吧。

好吧,但是我怎么想呢?

  • 首先我打算基础语法边用边学,不想一开始就在这方面花太多时间,毕竟有PB的开发经验,语法上基本上还是能理解和消化的。
  • 所以一开始就行直奔主题,先做个简单的前端登录界面。
  • 不是用直连数据库的形式,而是调用Webservice的方式,为什么用这种方式不用数据库直连的方式呢?因为毕竟有其他系统开发经验,这种web型的app或者软件客户端肯定非常多,如果直连数据库肯定会把数据库拖垮掉,所以实用性不高。所以先定这个小目标吧。
  • 其次为了督促自己,决定开始写写blog,记录一下学习过程。也许以后回过头来看看,有点小成就感(希望……有)。

(一)前段时间已经了解过uni-app,并下载了HBuilder X的开发工具。

这个uni-app前段应用框架开发据说非常牛B,但老夫暂时还不得法门,就像孙悟空不知铁扇公主的芭蕉扇怎么用一样。

但是看官网的介绍有点“不明觉厉”的赶脚,先摆一边吧。他们还提供HBuilder X 这个开发编辑工具,据说也很牛B,而且说它的语法解析和提示功能是世界级的牛B。所以就下它来搞搞看吧。其他小白朋友可以去他们网站看看(以后有机会我要找他们老板收点广告费)

看了一下他们的论坛,看了几次,一脸懵逼,都是很高大上的问题了,看不懂。自信心受到了严重的打击……我就想找找简单入门的小教程好吗?怎么没人写呢?我也不想看那些从语法开讲的那些教程。真是觉得看又浪费时间,不看又没什么其他可看的。郁闷。(哪天我会了,我来写几篇,我这暴脾气……)

好了,喷了很多口水………………感觉有看官要喷我了。求饶……小弟乃性情中人,情感来了不发则已,一发而不可收拾。见谅。

--------------------------------------------------------------华丽的分割线--------------------------------------------------------------

上面交代了开发工具。

昨天我找了一段Vue 使用AJAX调用webservice的脚本。

写到了一个html文件里。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
<!-- 		<table id="getData" class="getData" >
		    <tr class="tableHeader">
		    <td>齐套码</td>
			<td>机种名</td>
			<td>工位名</td>
			<td>小项名</td>
			<td>日期</td>
		    </tr>
		    <tr v-for="site in sites">
			<td>{{site.neatCode}}</td>
			<td>{{site.productName}}</td>
			<td>{{site.processName}}</td>
			<td>{{site.minterm}}</td>
			<td>{{site.workDate}}</td>
		    </tr>
		</table> -->
	</body>
	<script>
		new Vue({
		    el: '#getData',
		    data(){
		        return {
		        	sites: ""
		        }
		    },
		    created: function(){
		    	var self = this;
		   	$.ajax({
				type:"post",
				url:"http://27.154.230.166:8081/webservice_uat/n_webservice_uat.asmx/get_client_info",    //接口地址,后面加上 /方法名即可
				contentType: "application/json",
				dataType:"json",
				success:function(inf){
					self.sites = JSON.parse(inf.d);    //将获取的JSON字符串转化成JSON对象
					console.log(inf);                  //在控制台输出获取的数据形式
				},
				error:function(){
					alert("获取数据失败!");
				}
			});
		     }
		})
		 
	</script>
	
</html>

但是预览出错:

暂时还没找到解决此问题的办法。。。。我今天得找找,初步认为应该是Vue 不能使用ajax的问题。

如果哪位看官知道,烦请指点一二,不胜感激。

昨天的日记到此结束,请看下回分解。。。。。

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值