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

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

• 对小程序端分模块重构

• 使用 tabbar 实现多 Tab 切换

• switchTab 和 navigateTo

• weui.wxss 引入

• form 表单提交

• css 优先级

• API 工具的封装和校验逻辑

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

• 添加 api/question API 提交问题到服务器端并存储

小程序端

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

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

{ "tabBar": { "selectedColor": "#3c506f", "list": [ { "navigationBarTitleText": "首页", "pagePath": "pages/question/list", "text": "首页", "iconPath": "images/index-default.png", "selectedIconPath": "images/index-selected.png" }, { "navigationBarTitleText": "通知", "pagePath": "pages/notification/list", "text": "通知", "iconPath": "images/notification-default.png", "selectedIconPath": "images/notification-selected.png" }, { "navigationBarTitleText": "礼品", "pagePath": "pages/gift/list", "text": "礼品", "iconPath": "images/gift-default.png", "selectedIconPath": "images/gift-selected.png" }, { "navigationBarTitleText": "我", "pagePath": "pages/profile/index", "text": "我", "iconPath": "images/me-default.png", "selectedIconPath": "images/me-selected.png" } ] }
}

需要注意的是上面的 pagePath 对应的页面路径一定要存在&＃xff0c; navigationBarTitleText 是跳转以后头部显示的名称。 iconPath 和 selectedIconPath 分别是选中前后展示的图标&＃xff0c;小编特意选择了一些对应的图片&＃xff0c;这个图片直接在http://www.iconfont.cn

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

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

&＃64;import "../../lib/weui.wxss";

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

输入标题 输入提问内容 </view> </view> <view class&＃61;&＃39;page-section&＃39;> <button form-type&＃61;&＃39;submit&＃39; bindtap&＃61;"primary" class&＃61;&＃39;weui-btn&＃39;>提问</button> </view> <br></code></pre><p>点击 <code class="prettyprint code-in-text prettyprinted"><span class="pun">提问</span></code>按钮以后&＃xff0c;触发了定义在 <code class="prettyprint code-in-text prettyprinted"><span class="pln">post.js</span></code> 的 <code class="prettyprint code-in-text prettyprinted"><span class="pln">post</span></code>&＃xff0c;这个时候我们可以通过 <code class="prettyprint code-in-text prettyprinted"><span class="pln">e.detail.value</span></code> 获取到绑定到 <code class="prettyprint code-in-text prettyprinted"><span class="pln">form</span></code> 上面的所有对象&＃xff0c;可以做简单的校验&＃xff0c;然后传递给服务器端。</p><p><code class="language-Javascript">post: function(e) { console.log("submit") console.log(e.detail.value) if (!e.detail.value.title) { wx.showToast({ title: &＃39;请输入标题&＃39;, }); return; } if (!e.detail.value.content) { wx.showToast({ title: &＃39;请输入内容&＃39;, }); return; } // 调用服务端 API wx.showLoading({ title: &＃39;提交中&＃39; }); <br>}</code></pre><p>有读者问过&＃xff0c;怎么样封装一个好的 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 工具&＃xff0c;答案是没有的。你觉得好用就时好的封装。这里小编简单对 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 工具进行了封装。</p><blockquote><p>为什么在这一章节封装呢&＃xff1f;因为只有两个地方调用的时候才需要封装&＃xff0c;如果调用 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code>我们只有一个地方需要&＃xff0c;其实不封装也是可以的&＃xff0c;封装是为了抽象、公用&＃xff0c;所以对于封装我们还是要做到恰如其分。</p></blockquote><p>我直接独立出来一个 <code class="prettyprint code-in-text prettyprinted"><span class="pln">service.js</span></code> 用于专门调用服务端的 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 代码如下。</p><p><code class="language-Javascript">const service &＃61; options &＃61;> { wx.showNavigationBarLoading(); options &＃61; { dataType: "json", ...options, method: options.method ? options.method.toUpperCase() : "GET", header: { "token": wx.getStorageSync("token") || "" }, }; const result &＃61; new Promise(function(resolve, reject) { //做一些异步操作 const optionsData &＃61; { success: res &＃61;> { wx.hideNavigationBarLoading(); if (res.data.status &＃61;&＃61; 1005){ wx.showModal({ title: &＃39;请登陆&＃39;, content: &＃39;您还未登录&＃xff0c;请授权登陆&＃39;, success: res &＃61;> { app.reLogin(); wx.redirectTo({ url: &＃39;/pages/index&＃39;, }); } }); } resolve(res.data); }, fail: error &＃61;> { wx.hideNavigationBarLoading(); reject(error); }, ...options }; let token &＃61; wx.getStorageSync("token") || ""; if (!token) { if (optionsData.url.indexOf(&＃39;api/login&＃39;) &＃61;&＃61; -1) { wx.showModal({ title: &＃39;请登陆&＃39;, content: &＃39;您还未登录&＃xff0c;请授权登陆&＃39;, success: res &＃61;> { app.reLogin(); wx.redirectTo({ url: &＃39;/index&＃39;, }); } }); reject(error); return; } } wx.request(optionsData); }); return result; <br>}; <br>export default service;</code></pre><p>如上我们简单进行讲解&＃xff0c;封装主要涉及两个地方&＃xff0c;一个是对于 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 的封装&＃xff0c;我们把 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 统一定义到了 <code class="prettyprint code-in-text prettyprinted"><span class="pln">api.js</span></code> 格式如下</p><p><code class="language-Javascript">const Login &＃61; { url: config.serverHost &＃43; "/api/login", method: "post" <br>};</code></pre><p>这样在使用的地方直接引用即可&＃xff0c;</p><p><code class="language-Javascript">service({ ...Question, data: { title: e.detail.value.title, content: e.detail.value.content } }) .then(response &＃61;> { wx.hideLoading(); console.log(response); if (response.status &＃61;&＃61; 200) { // 展示 登录成功 提示框 wx.showToast({ title: &＃39;发布成功&＃39;, icon: "success", duration: 2000, success: res &＃61;> { wx.switchTab({ url: "list" }); } }); } else { // 展示 错误信息 wx.showToast({ title: response.message, icon: "none", duration: 1000 }); } }) .catch(error &＃61;> { console.log(error); wx.showToast({ title: &＃39;提交失败&＃39; }); });</code></pre><p>同时直接传入 <code class="prettyprint code-in-text prettyprinted"><span class="pln">JSON</span></code> 数据然后通过 <code class="prettyprint code-in-text prettyprinted"><span class="typ">Primose</span></code> 返回的回调处理正确和失败即可&＃xff0c;这样把调用 <code class="prettyprint code-in-text prettyprinted"><span class="pln">API</span></code> 的处理全部封装起来&＃xff0c;便于使用和管理。<code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code>&＃xff0c;否则提示需要登录。这个在《第五讲&＃xff1a;登录的原理和实现》中有讲解怎么存 <code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code>。<code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code> 通过 <code class="prettyprint code-in-text prettyprinted"><span class="pln">header</span></code> 传递给服务器端&＃xff0c;这样是最关键的地方&＃xff0c;不然服务器端怎么校验你的登录态&＃xff1f;</p><p>到此小程序端逻辑已经全部完成&＃xff0c;现在默认返回正确以后会跳转到列表也没&＃xff0c;现在是空白没关系&＃xff0c;下一讲就会展示出一个列表。</p><h2><strong>服务器端</strong></h2><p>因为上一讲已经把基础的服务器端处理好&＃xff0c;这一讲就比较简单&＃xff0c;主要就需要做两件事情&＃xff1a;登录校验和存储问题。</p><h2><strong>登录校验</strong></h2><p>和小程序的思路类似&＃xff0c;我们不能每一个请求过来都写一段逻辑校验一下是否有传递 <code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code>&＃xff0c;然后再获取一下用户信息看是否正确。于是服务端引入了 <code class="prettyprint code-in-text prettyprinted"><span class="typ">Interceptor</span></code> 的概念&＃xff0c;它可以在请求开始和结束的时候做拦截处理&＃xff0c;这样每次请求来的时候先校验是否传递 <code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code>&＃xff0c;然后通过 <code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code> 到数据库里面查询是否有用户资料&＃xff0c;如果没有返回错误&＃xff0c;如果验证全部通过把查询出来的用户信息存储到 <code class="prettyprint code-in-text prettyprinted"><span class="typ">ThreadLocal</span></code> 里面&＃xff0c;供下文使用。关于 <code class="prettyprint code-in-text prettyprinted"><span class="typ">ThreadLocal</span></code> 使用有不理解的可以查看一下小编之前的文章《如何优雅的使用 ThreadLocal》。具体实现如下。<code class="prettyprint code-in-text prettyprinted"><span class="pln">applicationContext.xml</span></code> 配置一下拦截器。</p><p><code class="language-Javascript"> <mvc:interceptors> <mvc:interceptor> <mvc:mapping path&＃61;"/api/**"/> <mvc:exclude-mapping path&＃61;"/api/login"/> <bean class&＃61;"com.codedrinker.interceptor.LoginInterceptor"></bean> </mvc:interceptor> <br></mvc:interceptors></code></pre><p>如上代码&＃xff0c;指定了具体的拦截器&＃xff0c;拦截 <code class="prettyprint code-in-text prettyprinted"><span class="str">/api/**</span></code>地址&＃xff0c; <code class="prettyprint code-in-text prettyprinted"><span class="pun">**</span></code>代表任意&＃xff0c;但是不可以拦截 <code class="prettyprint code-in-text prettyprinted"><span class="str">/api/login</span></code>&＃xff0c;因为它是登录接口肯定没有 <code class="prettyprint code-in-text prettyprinted"><span class="pln">token</span></code>。其次编写拦截器。</p><p><code class="language-Javascript">public class LoginInterceptor implements HandlerInterceptor { &＃64;Autowired private UserService userService; &＃64;Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //请求之前&＃xff0c;验证通过返回true&＃xff0c;验证失败返回false String token &＃61; request.getHeader("token"); if (StringUtils.isBlank(token)) { makeFail(response); return false; } // 通过 token 从数据库中获取信息&＃xff0c;如果没有验证失败 // 如果通过一台设备登录&＃xff0c;再通过另一台设备登录&＃xff0c;第一台设备会自动登出 User user &＃61; userService.getByToken(token); if (user &＃61;&＃61; null) { makeFail(response); return false; } //把获取到的user信息暂存到 ThreadLocal 里面&＃xff0c;以便上线文中方便的使用 SessionUtil.setUser(user); return true; } private void makeFail(HttpServletResponse response) { ResultDTO resultDTO &＃61; ResultDTO.fail(CommonErrorCode.NO_USER); response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset&＃61;utf-8"); try { PrintWriter out &＃61; response.getWriter(); out.print(JSON.toJSONString(resultDTO)); out.close(); } catch (Exception e) { log.error("LoginInterceptor preHandle", e); } } &＃64;Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { //请求结束 //请求结束以后移除 user SessionUtil.removeUser(); } <br>}</code></pre><p>拦截器的实现比较简单&＃xff0c;直接实现 <code class="prettyprint code-in-text prettyprinted"><span class="typ">HandlerInterceptor</span></code> 接口&＃xff0c;在 <code class="prettyprint code-in-text prettyprinted"><span class="pln">preHandle</span></code>里面处理访问拦截并存入 <code class="prettyprint code-in-text prettyprinted"><span class="typ">ThreadLocal</span></code>即可&＃xff0c;需要注意的是在 <code class="prettyprint code-in-text prettyprinted"><span class="pln">postHandle</span></code>里面需要把 <code class="prettyprint code-in-text prettyprinted"><span class="typ">ThreadLocal</span></code>移除。拦截器的如果需要返回数据给小程序端&＃xff0c;需要使用 <code class="prettyprint code-in-text prettyprinted"><span class="pln">response</span></code>&＃xff0c;这里不能像 <code class="prettyprint code-in-text prettyprinted"><span class="typ">RestController</span></code> 那么简洁了。</p><h2><strong>接口</strong></h2><p>接口就相对比较简单了&＃xff0c;直接上代码。</p><p><code class="language-Javascript">&＃64;RestController <br>&＃64;Slf4j <br>public class QuestionController { &＃64;Autowired private QuestionService questionService; &＃64;RequestMapping(value &＃61; "api/question", method &＃61; RequestMethod.POST) public ResultDTO post(&＃64;RequestBody Question question) { try { questionService.createQuestion(question); return ResultDTO.ok(null); } catch (Exception e) { log.error("QuestionController post error, question : {}", question, e); return ResultDTO.fail(CommonErrorCode.UNKOWN_ERROR); } } <br>}</code></pre><p>上面的内容在《第五讲&＃xff1a;登录原理和实现》 里面已经讲解&＃xff0c;不在累述。另外还需要注意的是创建一个名为 <code class="prettyprint code-in-text prettyprinted"><span class="pln">V2__</span></code>的数据库脚本&＃xff0c;在运行的时候会自动帮你创建数据库表&＃xff0c;为什么呢&＃xff1f;《第六讲&＃xff1a;数据的验证和存储》已经讲解。</p><h2><strong>相关资料</strong></h2><p>小程序组件示例</p><h2><strong>源码</strong></h2><p>小程序源码地址&＃xff0c;Tag V7</p><p>服务端源码地址&＃xff0c;Tag V7</p><h2><strong>登相关文章</strong></h2><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><p><strong>我是浪漫的分割线</strong></p></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><p><strong>问答</strong></p><p>如果您对本系列文章有兴趣&＃xff0c;欢迎置顶本订阅号&＃xff0c;第一时间获取更新。</p><p>如果有任何问题&＃xff0c;欢迎留言&＃xff0c;小编很热衷和大家一起讨论技术问题。</p><p>另外小编创建了一个技术交流群&＃xff0c;请添加小编微信&＃xff0c;切记备注“小程序”&＃xff0c;小编拉你进去。【只讨论技术&＃xff0c;非诚勿扰】</p><p><img src="https://img.php1.cn/3cd4a/1eebe/cd5/e3aa5425383ba10d.png" alt="640?wx_fmt&＃61;jpeg" /></p></div></div></div> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/小程序" target="_blank" title="小程序">小程序</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/服务器" target="_blank" title="服务器">服务器</a></li> <li><a href="https://www.php1.cn/tag/xss" target="_blank" title="xss">xss</a></li> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/api" target="_blank" title="api">api</a></li> <li><a href="https://www.php1.cn/tag/login" target="_blank" title="login">login</a></li> <li><a href="https://www.php1.cn/tag/int" target="_blank" title="int">int</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了