目录

微信小程序一微信小程序与服务器的简单链接

目录

微信小程序(一):微信小程序与服务器的简单链接

生活无趣且不易,一起找点乐子吧。欢迎评论,和文章无关的东西也没关系。

关于小程序的有些问题,我搜索不到太有价值的东西(可能是我对关键字的理解不好)。

在这里我总结下遇到各种问题,可能看来会比较可笑,但对新手来说也许会有些帮助,我会尽量去注重具体的实现。

这篇文章来说下小程序和服务器的链接问题,或许有些人会和我一样。二者要链接,知道小程序要向服务器发送带参或不带参请求,然后服务器对其作出反应处理,并将处理结果返回,最后小程序接受并显示。But, how?

不知道怎样让小程序向服务器发送请求,不知道服务器怎样发送消息给客户端,更不知道怎样去接收。主要就是怎样具体实现它,而不是缺理论,我尝试着去解释下。

先简单介绍下服务器的部署吧,了解的请直接略过。 服务器容器Tomcat,编译环境myeclipse。(Eclipse也没关系,可能有些按钮的位置和文章里的不同,查下就好。)

https://i-blog.csdnimg.cn/blog_migrate/f3d69e918f454583f4d0ac7f99374a9c.png

(后记:服务端重点了解两部分,servlet和jsp。简单说明servlet处理请求,JSP显示页面。这两块就能实现大部分的功能了。如果不需要界面,JSP也可以省去。)

首先,我们需要知道,请求是向servlet发送的,(微信小程序只支持http协议)换句话说,用JAVA编写的servlet处理客户端请求。

先来看看怎样去创建一个servlet。

在编辑器里,file->new->servlet,然后填相关信息。

https://i-blog.csdnimg.cn/blog_migrate/c4d7a6a3d7efd4f6768e8265c2fbfd31.png

填写Name,创建的方法点选doget 和 doput就好,因为简单的事例,不用太复杂,了解http的知道,这两种方法分别是处理get和put方法请求的。简单情况下我们不区别对待,所以,完全可以doput函数里只写this.doGet();(让put方法去调用get)。(请求的方式有很多种,get和put是最基本的两种,put请求用于向服务端提交数据,get用于得到指定为的数据。)

https://i-blog.csdnimg.cn/blog_migrate/37f538382bc849c5093443e8206bd0cd.png

建好servlet前一定要写好jsp mapping url,也就是图中第三行内容,这就是客户端请求时需要的url(可以理解成地址,我们打开浏览器输入www.xxxxxx.com,地址栏里这个链接就是url【Uniform Resource Locator】,统一资源定位符)。

当建好后你可以通过项目里webroot文件夹web—inf里的web.xml查看创建情况。

https://i-blog.csdnimg.cn/blog_migrate/e0e19e63301a6a98579c5e7896cf6b6c.png

https://i-blog.csdnimg.cn/blog_migrate/c1aececd0bdf5167c8542ddc798008dc.png

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的功能就是收到请求后,在控制台打出“收到!”

下一步,部署服务器(编辑器不同的按钮位置去搜下~)

https://i-blog.csdnimg.cn/blog_migrate/b992e45e713a21db090008386fbda1b5.png

1————————————————————————————

https://i-blog.csdnimg.cn/blog_migrate/32cc5308a558371ebc9cc967d9e90d1c.png

选择好你的项目工程,选择tomcat服务器,点“ok”(不是tomcat的需要先把服务容器配好,一般搜索下就能找到详细的配置过程,windows - performance里面,选中容器后出现Successful deployed算是没问题,不然你可能需要重新配置下服务器了。)

2————————————————

启动tomcat服务器

https://i-blog.csdnimg.cn/blog_migrate/b67dc4f2f53507e5c1abc9bf64df0215.png

启动成功后控制台显示信息

ok,到这里服务器就算布置完了。接下来我们来谈一下什么是客户端,又怎样与服务器建立链接。

我们先简单点解释,我觉得,其实我们经常用的浏览器就可以说成客户端。而上面的,我们通常说的网址,就是要发送请求的服务器地址,也就是我们刚刚设置的url。

https://i-blog.csdnimg.cn/blog_migrate/86f11a9dc1ef5918d734407c1f03f95c.png

那么,我们的服务请求的处理已经编写完毕,而且url也已经设置好,tomcat也处于打开状态(也就是处在可以接受请求的状态)。

前面我们说到,向我们编写的那个servlet·发送请求,如果服务器接收到了,服务器端就会在控制台打出那个“收到”。

现在,我们以浏览器为客户端,向刚才我们写的服务端的servlet发送请求,这时候就要用到我们设置的url了。

https://i-blog.csdnimg.cn/blog_migrate/d054d10c2af283c35021bb42ae36c967.png

图例分别是,IP地址:端口,项目名称,servlet的url   因为我们的服务器是本地的,所以是localhost  至于8080是tomcat的端口(不同的服务器容器端口不同),这里不做过多解释,需要的大家去查一下,可以查到。Amess是项目的名称,text就是我们设置的url还记得吗?

https://i-blog.csdnimg.cn/blog_migrate/095accd0e5bb648a17e09c1bffc79e6e.png

https://i-blog.csdnimg.cn/blog_migrate/c1aececd0bdf5167c8542ddc798008dc.png

(这里补充点内容,在你的DOS窗口下输入ipconfig,就可以看到你的局域网IP地址,上面的localhost就可以换成那个IP。例如 ,这个链接里面的blog.csdn.net不是IP地址,这个东西就是我们经常说的域名,简单理解就是种替换。当我们购买了服务器后,我们只能通过IP去请求它,IP地址就直接公之于众了,也是出于保护吧。我们可以再买个域名,然后把域名和IP绑定,之后我们就可以通过域名来访问。我们都知道百度的域名www.baidu.com,但谁能立马说出来它的IP?上面的localhost理解成自己本机的域名也没有什么问题的。)

ok,当我们敲击回车后,浏览器(客户端)就向我们编写的servlet发送了请求。但是网页却什么也不显示。

https://i-blog.csdnimg.cn/blog_migrate/dcc24a3aaaf450ec9153ea9de915aac6.png

这是当然,因为我们对请求的处理就是在服务端控制台输出个“收到”,而如果想在浏览器上显示信息,就是服务器向客户端发送信息了。(不要忘记把浏览器理解成客户端啊)

我们再切换到后台:

https://i-blog.csdnimg.cn/blog_migrate/1ecbad3bc61865c77ddd1e5e66f4777c.png

可以看到,服务器打出了“收到”,客户端向服务器发送请求没问题。

那么,下一步,服务器怎样向浏览器(也就是客户端)发东西呢?

https://i-blog.csdnimg.cn/blog_migrate/cde4f8e1abc26edc03886b96751b4f5a.png

我们需要创建一个printwriter 的对象,通过这个对象, 调用他的print方法,输出想要的内容,不要忘记close,只有关闭了输出流,才能将内容输出。(像许多编程语言中,打开文件后进行编写,close后才能实现保存,如果忘记close直接退出了程序,那写的东西就白写了。)现在我们更新网页,看看效果。

https://i-blog.csdnimg.cn/blog_migrate/908269c9cc73db4c9888d5a0505c4760.png

ok,没问题。现在,大家对客户端 向服务器发请求,及服务器向客户端写东西,就基本算是有了大致的了解了。

你现在可以去冲杯咖啡或者刷下手机,再回来我们就进入主题:小程序和后台服务器的链接

来具体说,小程序(客户端)怎样去与服务器建立连接。

https://i-blog.csdnimg.cn/blog_migrate/b7ac77c4d6db4d9d186a15670719cd77.png

简单事例,我们只写一个按钮,绑定点击事件click,在js里边来处理事件,向服务器发送请求。(前端界面语言是种标记语言,不是这篇文章的重点,我们不详谈。如果是零基础,可以先去粗略学习下html+css+js。)

js编写click函数功能:

https://i-blog.csdnimg.cn/blog_migrate/85f081f4bbdf1ff3148ed21dbfae032a.png

其实很简单,我们需要调用微信提供的一个API,request,用它向服务器发送请求。开发者工具有具体介绍,大家可以去查看,之后就是设置参数,url和浏览器一样,依旧是服务器地址,data内是你要向服务器发送的数据。如图,我们发送了一个数据叫做username,他的值是一个字符串“haha”。success函数就是成功请求服务器,服务器返回后进行的处理,这里我们让他输出res的data内容,res参数(当然名字你可以自定义)是服务器返回的的信息,他的data就是后台返回的数据。我们用console.log函数输出下,这个语句当成print就行(学会类比)。这时重新编译后,点击按钮就可以了。注意,小程序编译时会对协议进行检查,不允许向本地的服务器发送请求的,所以之前要设置下调试模式。(header是请求头信息,不作为主要讲述的内容,感兴趣的可以去查下。)

https://i-blog.csdnimg.cn/blog_migrate/1c3419096186f59615d6b623aab8aaac.png

在开发者工具中右上角的详情里,选择不校验http。(之后的新版本开发者工具,我不确定位置会不会变。)

接下来我们来看服务器的编写。

https://i-blog.csdnimg.cn/blog_migrate/9ddf0c8b5f3b3c4072a95600229ca671.png

首先我们要获得客户端给我们的username,这时我们要调用request的getParameter函数获取,参数就是数据的名字。如图,那么我们的变量name就得到了客户端发来的username的值,也就是“haha”。

之后,我们向客户端返回数据,这时需要用到write,创建一个write类型变量来返回,调用对象的write函数,参数是要发送的内容,同上记得close。如果你发送的数据过多,一个缓冲流不够用,可以用flush函数,先传送一批,再传送下一批。大家有兴趣自己查询,这里我们返回了“man”字符串,那么客户端的success函数的res.data就应该得到“man”。万事俱备,差你一鼠标。点击按钮吧。看看效果。

https://i-blog.csdnimg.cn/blog_migrate/2b1a93351c3543c411f7736f3b30dbe0.png

服务器得到username:“haha”(其他的输出是项目里的其他的测试内容,大家自行忽略)

https://i-blog.csdnimg.cn/blog_migrate/d8757ee61e03dcb0cb11de895faebcd2.png

客户端获得服务器data:“man”:

https://i-blog.csdnimg.cn/blog_migrate/d7f9c41ed8d0b0170f022430211e9fa9.png

现在我们的小程序和服务器就建起了简单的链接,至于传什么数据,又做什么处理,就是你的问题了。

因为只是个人的闲暇娱乐,从点击量和搜索量上来说,你很难看到这篇文章,如果我有幸让您看到,那也是种缘分吧。有些基础的东西如在本章中说道,不会做过多原理上的解释,您可以去详细查询,或者查看这个系列的其他内容,应该可以帮您滤清一些思路思维上的东西。

这就是我的理解,希望对你有帮助。欢迎讨论,纠错。水平一般,能力有限,撰写不妥之处,多包涵。