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

最新推荐文章于 2024-05-21 21:06:26 发布

JY创建美好

最新推荐文章于 2024-05-21 21:06:26 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/benzimi/article/details/104688804

版权

序

我一个一直是用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的问题。

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

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

JY创建美好

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
Vue访问webservice的辛酸历程（不会走路就开始跑之一）

序我一个一直是用pb开发pc端的管理软件的普通开发人员。一直想搞搞移动端、微信小程序开发的东西。一年前就谋算着要开始搞搞…………但是一年多了，还是在起跑线上徘徊。因为……不想着太多理由，但是确实有一点理由（真不要脸 ^_^）,就是因为之前主要用的PB开发工具的开发的pc端程序代码规则与Vue这类开发语言的差异非常大，开始看了一些入门资料，基本上看不进去，感觉无从下手，看来看...
复制链接

扫一扫