微信小程序实现登录页面及表单验证

本文主要围绕微信小程序自定义登录页面布局及常规校验，完成登录 *** 作。

1常规登录页面布局

2表单验证 登录号码 密码非空校验提示，长度控制等常规 *** 作

3表单提交

4轮播图

5本地缓存功能

温故而知新，本文为一时兴起写出，如有错误还请指正

本文后台基于SpringBoot256编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子

如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）

本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于环境搭建部分的内容

在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码

细心的人应该留意到了，最后使用变量接收参数的时候只接收了 username 这一个值，并没有接收 password ，作为扩展在这里解释一下， 不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了

如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：

可以看到请求体内容是存到了 InputStream 输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到

SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口

这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：

这里推荐一个Chrome浏览器的插件 JSONView ，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡

之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看

代码已经写完了，接下来打开页面试一下能不能调通：

可以看到请求代码报错了，查看报错信息找到重点关键词 CORS ，表示该请求属于 跨域请求

什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的协议、域名、端口号有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在9000端口上，后台接口运行在8080端口上，端口号没有对上所以该请求为跨域请求

如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里

怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可

首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口

过滤器创建完成了，回来看前端提示的报错信息为 Access-Control-Allow-Origin ，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上

添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值

再次进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试

可以看到POST请求还是提示跨域请求，对应的错误信息则是 Access-Control-Allow-Headers ，也就是说请求头中包含了不被允许的信息，这里图省事儿用 通配符把所有请求头都放行

这样处理之后，请求就可以正常访问啦

路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参

这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例

这里需要注意区分路径占位传参和路径传参两个概念，不要记混

什么是路径传参？发起一个请求 >

success没执行，那肯定就执行fail了，你添加个fail事件看看返回的错误信息是什么就明白了。

一般发生这种情况都是后台的问题，你只说后台接受数据成功，但它在接受后处理数据时（比如查询数据库）仍然会发生错误的，这时候前端的success事件就不会触发，转而触发fail事件。

有两种方法获取表单项的值

监听form提交事件 bindsubmit (一般都要这样做，因为很多场景下要推送模板消息，就要用到formId 只有在form提交事件里才能获取到formId)

在radio-group里监听change事件(bindchange) ，事件中的edetailvalue即是选中的值，如果是checkbox，会是一个数组

小程序文档：radio

参考文档：

>

以上就是关于微信小程序实现登录页面及表单验证全部的内容，包括:微信小程序实现登录页面及表单验证、SpringMVC前后端分离交互传参详细教程-、小程序POST提交表单不执行success事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！