三周学会小程序第七讲：提交问题

截止到上一讲可以支持数据库存储了，所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩，文末附源码。

对小程序端分模块重构

使用 实现多 切换

和

引入

表单提交

优先级

工具的封装和校验逻辑

添加 用户校验登录状态和获取用户信息

添加 API 提交问题到服务器端并存储

小程序端

先用一张图描绘一下这一讲的工作

如图，登录成功以后进入主页，区分为四个选项卡，首页、通知、礼品和我几个选项卡，所以对前端小程序进行了重构。把 index.js 从 question 启动到最外层，然后分别创建了 gift、notification、profile和question 文件夹用于存放相对应的选项卡的页面内容，同时记得修改 /app.json 里面的 pages 内容。

这个地方值得讲的是，小程序组件默认支持这种选项卡的方式，使用方式也是非常简单。

在 里面添加如下文件，就可以自动定义页面的选项卡。

需要注意的是上面的 对应的页面路径一定要存在， 是跳转以后头部显示的名称。 和 分别是选中前后展示的图标，小编特意选择了一些对应的图片，这个图片直接在

下载，并且可以免费试用，如果你想换成自己的图标，可以去里面碰碰运气。

这一讲用了两种跳转的方式 和 ，其中 是跳转选项卡的时候用，并且只能用这个方法跳转，而 是让页面导航到页面，同时这个方法会记录历史，也就是说你会发现左上角会有一个后退按钮，点击可以回退到历史浏览的页面。如果你不想有这个后退按钮可以使用 进行跳转，这样会覆盖掉之前的访问堆栈。

是微信官方默认的样式库，没有第三方的漂亮，但是够用即可，直接下载下来放到 下面，在需要使用的地方用如下语句引入即可。

接下来就是小程序端关键的一步，提交表单。这个被小程序组件优化的还是比较简单。直接在 里面添加 标签，然后定义 属性指定点击提交绑定的方法即可。同时定义一个 绑定提交属性 ，这样点击这个按钮的时候，就会自动调用 绑定的方法了，具体代码如下。里面用的 便是 提供的一些样式，这个直接对着 css 找就可以了。

点击 按钮以后，触发了定义在 的 ，这个时候我们可以通过 获取到绑定到 上面的所有对象，可以做简单的校验，然后传递给服务器端。

有读者问过，怎么样封装一个好的 工具，答案是没有的。你觉得好用就时好的封装。这里小编简单对 工具进行了封装。

为什么在这一章节封装呢？因为只有两个地方调用的时候才需要封装，如果调用 我们只有一个地方需要，其实不封装也是可以的，封装是为了抽象、公用，所以对于封装我们还是要做到恰如其分。

我直接独立出来一个 用于专门调用服务端的 代码如下。

如上我们简单进行讲解，封装主要涉及两个地方，一个是对于 的封装，我们把 统一定义到了 格式如下

这样在使用的地方直接引用即可，

同时直接传入 数据然后通过 返回的回调处理正确和失败即可，这样把调用 的处理全部封装起来，便于使用和管理。

另一个方便的地方是，统一处理了一下登录状态，简单点说就是每次调用服务端接口的时候都需要检查一下是否登录。检查分为三个部分，

第一部分是检查本地是否存储了 ，否则提示需要登录。这个在

《第五讲：登录的原理和实现》

中有讲解怎么存 。

第二部分是把本地存储的 通过 传递给服务器端，这样是最关键的地方，不然服务器端怎么校验你的登录态？

第三部分如果调用服务端接口检测登录态过期会提示登录异常并跳转到登录页面。

到此小程序端逻辑已经全部完成，现在默认返回正确以后会跳转到列表也没，现在是空白没关系，下一讲就会展示出一个列表。

服务器端

因为上一讲已经把基础的服务器端处理好，这一讲就比较简单，主要就需要做两件事情：登录校验和存储问题。

登录校验

和小程序的思路类似，我们不能每一个请求过来都写一段逻辑校验一下是否有传递 ，然后再获取一下用户信息看是否正确。于是服务端引入了 的概念，它可以在请求开始和结束的时候做拦截处理，这样每次请求来的时候先校验是否传递 ，然后通过 到数据库里面查询是否有用户资料，如果没有返回错误，如果验证全部通过把查询出来的用户信息存储到 里面，供下文使用。关于 使用有不理解的可以查看一下小编之前的文章《如何优雅的使用 ThreadLocal》。具体实现如下。

首先在 配置一下拦截器。

如上代码，指定了具体的拦截器，拦截 地址， 代表任意，但是不可以拦截 ，因为它是登录接口肯定没有 。其次编写拦截器。

拦截器的实现比较简单，直接实现 接口，在 里面处理访问拦截并存入 即可，需要注意的是在 里面需要把 移除。拦截器的如果需要返回数据给小程序端，需要使用 ，这里不能像 那么简洁了。

接口

接口就相对比较简单了，直接上代码。

上面的内容在《第五讲：登录原理和实现》里面已经讲解，不在累述。另外还需要注意的是创建一个名为 的数据库脚本，在运行的时候会自动帮你创建数据库表，为什么呢？《第六讲：数据的验证和存储》已经讲解。

到此已经全部结束，回看上文是不是编写一个小程序也是很简单呢？

相关资料

源码

小程序源码地址，Tag V7

https://github.com/codedrinker/jiuask

服务端源码地址，Tag V7

https://github.com/codedrinker/jiuask-server