微信小程序一微信小程序与服务器的简单链接
微信小程序(一):微信小程序与服务器的简单链接
生活无趣且不易,一起找点乐子吧。欢迎评论,和文章无关的东西也没关系。
关于小程序的有些问题,我搜索不到太有价值的东西(可能是我对关键字的理解不好)。
在这里我总结下遇到各种问题,可能看来会比较可笑,但对新手来说也许会有些帮助,我会尽量去注重具体的实现。
这篇文章来说下小程序和服务器的链接问题,或许有些人会和我一样。二者要链接,知道小程序要向服务器发送带参或不带参请求,然后服务器对其作出反应处理,并将处理结果返回,最后小程序接受并显示。But, how?
不知道怎样让小程序向服务器发送请求,不知道服务器怎样发送消息给客户端,更不知道怎样去接收。主要就是怎样具体实现它,而不是缺理论,我尝试着去解释下。
先简单介绍下服务器的部署吧,了解的请直接略过。 服务器容器Tomcat,编译环境myeclipse。(Eclipse也没关系,可能有些按钮的位置和文章里的不同,查下就好。)
(后记:服务端重点了解两部分,servlet和jsp。简单说明servlet处理请求,JSP显示页面。这两块就能实现大部分的功能了。如果不需要界面,JSP也可以省去。)
首先,我们需要知道,请求是向servlet发送的,(微信小程序只支持http协议)换句话说,用JAVA编写的servlet处理客户端请求。
先来看看怎样去创建一个servlet。
在编辑器里,file->new->servlet,然后填相关信息。
填写Name,创建的方法点选doget 和 doput就好,因为简单的事例,不用太复杂,了解http的知道,这两种方法分别是处理get和put方法请求的。简单情况下我们不区别对待,所以,完全可以doput函数里只写this.doGet();(让put方法去调用get)。(请求的方式有很多种,get和put是最基本的两种,put请求用于向服务端提交数据,get用于得到指定为的数据。)
建好servlet前一定要写好jsp mapping url,也就是图中第三行内容,这就是客户端请求时需要的url(可以理解成地址,我们打开浏览器输入www.xxxxxx.com,地址栏里这个链接就是url【Uniform Resource Locator】,统一资源定位符)。
当建好后你可以通过项目里webroot文件夹web—inf里的web.xml查看创建情况。
url没问题就可以。打开我们的sevlet,把一些没必要的东西删掉简单些,像这样:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class textServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");//这里是设置一下编码格式
System.out.println("收到!");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
大家可以看到这个servlet的功能就是收到请求后,在控制台打出“收到!”
下一步,部署服务器(编辑器不同的按钮位置去搜下~)
1————————————————————————————
选择好你的项目工程,选择tomcat服务器,点“ok”(不是tomcat的需要先把服务容器配好,一般搜索下就能找到详细的配置过程,windows - performance里面,选中容器后出现Successful deployed算是没问题,不然你可能需要重新配置下服务器了。)
2————————————————
启动tomcat服务器
启动成功后控制台显示信息
ok,到这里服务器就算布置完了。接下来我们来谈一下什么是客户端,又怎样与服务器建立链接。
我们先简单点解释,我觉得,其实我们经常用的浏览器就可以说成客户端。而上面的,我们通常说的网址,就是要发送请求的服务器地址,也就是我们刚刚设置的url。
那么,我们的服务请求的处理已经编写完毕,而且url也已经设置好,tomcat也处于打开状态(也就是处在可以接受请求的状态)。
前面我们说到,向我们编写的那个servlet·发送请求,如果服务器接收到了,服务器端就会在控制台打出那个“收到”。
现在,我们以浏览器为客户端,向刚才我们写的服务端的servlet发送请求,这时候就要用到我们设置的url了。
图例分别是,IP地址:端口,项目名称,servlet的url 因为我们的服务器是本地的,所以是localhost 至于8080是tomcat的端口(不同的服务器容器端口不同),这里不做过多解释,需要的大家去查一下,可以查到。Amess是项目的名称,text就是我们设置的url还记得吗?
(这里补充点内容,在你的DOS窗口下输入ipconfig,就可以看到你的局域网IP地址,上面的localhost就可以换成那个IP。例如 ,这个链接里面的blog.csdn.net不是IP地址,这个东西就是我们经常说的域名,简单理解就是种替换。当我们购买了服务器后,我们只能通过IP去请求它,IP地址就直接公之于众了,也是出于保护吧。我们可以再买个域名,然后把域名和IP绑定,之后我们就可以通过域名来访问。我们都知道百度的域名www.baidu.com,但谁能立马说出来它的IP?上面的localhost理解成自己本机的域名也没有什么问题的。)
ok,当我们敲击回车后,浏览器(客户端)就向我们编写的servlet发送了请求。但是网页却什么也不显示。
这是当然,因为我们对请求的处理就是在服务端控制台输出个“收到”,而如果想在浏览器上显示信息,就是服务器向客户端发送信息了。(不要忘记把浏览器理解成客户端啊)
我们再切换到后台:
可以看到,服务器打出了“收到”,客户端向服务器发送请求没问题。
那么,下一步,服务器怎样向浏览器(也就是客户端)发东西呢?
我们需要创建一个printwriter 的对象,通过这个对象, 调用他的print方法,输出想要的内容,不要忘记close,只有关闭了输出流,才能将内容输出。(像许多编程语言中,打开文件后进行编写,close后才能实现保存,如果忘记close直接退出了程序,那写的东西就白写了。)现在我们更新网页,看看效果。
ok,没问题。现在,大家对客户端 向服务器发请求,及服务器向客户端写东西,就基本算是有了大致的了解了。
你现在可以去冲杯咖啡或者刷下手机,再回来我们就进入主题:小程序和后台服务器的链接
来具体说,小程序(客户端)怎样去与服务器建立连接。
简单事例,我们只写一个按钮,绑定点击事件click,在js里边来处理事件,向服务器发送请求。(前端界面语言是种标记语言,不是这篇文章的重点,我们不详谈。如果是零基础,可以先去粗略学习下html+css+js。)
js编写click函数功能:
其实很简单,我们需要调用微信提供的一个API,request,用它向服务器发送请求。开发者工具有具体介绍,大家可以去查看,之后就是设置参数,url和浏览器一样,依旧是服务器地址,data内是你要向服务器发送的数据。如图,我们发送了一个数据叫做username,他的值是一个字符串“haha”。success函数就是成功请求服务器,服务器返回后进行的处理,这里我们让他输出res的data内容,res参数(当然名字你可以自定义)是服务器返回的的信息,他的data就是后台返回的数据。我们用console.log函数输出下,这个语句当成print就行(学会类比)。这时重新编译后,点击按钮就可以了。注意,小程序编译时会对协议进行检查,不允许向本地的服务器发送请求的,所以之前要设置下调试模式。(header是请求头信息,不作为主要讲述的内容,感兴趣的可以去查下。)
在开发者工具中右上角的详情里,选择不校验http。(之后的新版本开发者工具,我不确定位置会不会变。)
接下来我们来看服务器的编写。
首先我们要获得客户端给我们的username,这时我们要调用request的getParameter函数获取,参数就是数据的名字。如图,那么我们的变量name就得到了客户端发来的username的值,也就是“haha”。
之后,我们向客户端返回数据,这时需要用到write,创建一个write类型变量来返回,调用对象的write函数,参数是要发送的内容,同上记得close。如果你发送的数据过多,一个缓冲流不够用,可以用flush函数,先传送一批,再传送下一批。大家有兴趣自己查询,这里我们返回了“man”字符串,那么客户端的success函数的res.data就应该得到“man”。万事俱备,差你一鼠标。点击按钮吧。看看效果。
服务器得到username:“haha”(其他的输出是项目里的其他的测试内容,大家自行忽略)
客户端获得服务器data:“man”:
现在我们的小程序和服务器就建起了简单的链接,至于传什么数据,又做什么处理,就是你的问题了。
因为只是个人的闲暇娱乐,从点击量和搜索量上来说,你很难看到这篇文章,如果我有幸让您看到,那也是种缘分吧。有些基础的东西如在本章中说道,不会做过多原理上的解释,您可以去详细查询,或者查看这个系列的其他内容,应该可以帮您滤清一些思路思维上的东西。
这就是我的理解,希望对你有帮助。欢迎讨论,纠错。水平一般,能力有限,撰写不妥之处,多包涵。