脚本宝典收集整理的这篇文章主要介绍了

入手thinkjs,学习笔记

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>最近刚刚学习了th<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>kjs--一个<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>的MVC开发框架,最重要的是可以用<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>/es7开发<a href="https://thinkjs.org/" rel="nofollow noreferrer" target="_blank">【传送门】</a></p> <p>以下是学习过程中的笔记:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install thinkjs@2 -g --verbose" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> thinkjs@<span class="hljs-number">2</span> -g <span class="hljs-comment">--verbose</span></code></pre> <p>上面时全局安装 th<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>kjs 完成后用 <code>thinkjs -v</code> 检查是否成功</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="thinkjs new think" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;">thinkjs <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> think</code></pre> <p>创建了一个名为think的项目,然后<code>cd think</code> 进入think目录, <code>npm inst<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a></code> 安装依赖, <code>npm start</code>启动项目,浏览器打开<code>127.0.0.1:8360</code>就可以看到页面了。</p> <p><strong>路由访问规则</strong><br />thinkjs 的路由访问规则和 think<a href="http://www.js-code.com/tag/php" title="php" target="_blank">php</a> 的差不多</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="域名/模块名/控制器名 /action名 test.com/admin/index/index" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code>域名/模块名/控制器名 /<span class="hljs-keyword">action</span>名 test.com/admin/<span class="hljs-built_in">index</span>/<span class="hljs-built_in">index</span></code></pre> <p><strong>模块</strong><br />在thinkjs中是用模块来分拆项目的,当然官网说也可以用别的方式</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="thinkjs module admin" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">thinkjs <span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">admin</span></span></code></pre> <p>创建一个名为<code>admin</code>的模块,模块下有四个文件夹:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="config---配置信息,如数据库等等 controller --- 控制器目录,控制器用于获取post与get数据和处理逻辑 logic --- 据说这是thinkjs最有特色的一点,和controller一一对应用于验证controller数据合法性与处理数据,在controller之前调用 model --- 用于操作数据库,返回数据" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code><span class="hljs-built_in">config</span><span class="hljs-comment">---配置信息,如数据库等等</span> controller <span class="hljs-comment">--- 控制器目录,控制器用于获取post与get数据和处理逻辑</span> logic <span class="hljs-comment">--- 据说这是thinkjs最有特色的一点,和controller一一对应用于验证controller数据合法性与处理数据,在controller之前调用</span> model <span class="hljs-comment">--- 用于操作数据库,返回数据</span></code></pre> <p><strong>视图</strong><br />thinkjs把所有的视图文件放在了根目录下的<code>view</code>文件夹,命名规则<code>模块名/控制器_action名</code>有点怪是吧,没问题可以改<a href="https://thinkjs.org/zh-cn/doc/2.2/view.html" rel="nofollow noreferrer" target="_blank">【传送门】</a></p> <p><strong>静态文件</strong><br /> thinkjs把所有的静态文件放在<code>www/<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a></code></p> <p><strong>简单例子</strong><br />接下来我们来实现一个模拟登录操作:<br />首先按照我们步骤创建一个项目,接着安装依赖,然后别急着启动,先创建模块,<code>thinkjs module useracount</code>,然后创建控制器 <code>thinkjs controller signin</code>,关于<code>thinkjs命令</code><a href="https://thinkjs.org/zh-cn/doc/2.2/thinkjs_command.html" rel="nofollow noreferrer" target="_blank">【传送门】</a>,最后启动项目 <code>npm start</code>,用你喜欢的编辑器打开项目。<br />打开<code>src/useracount/controller/signin.js</code>,在<code>indexAction</code>后面加入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" indexAction(){ //auto render template file index_index.html return this.display(); } signinAction() { let name = this.post('name'); let pw = this.post('pw'); let data = this.model('singin').signIn(name, pw);//跟model下的对应 this.success(data);//返回数据 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> indexAction(){ <span class="hljs-comment">//auto render template file index_index.html</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.display(); } signinAction() { <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> = <span class="hljs-keyword">this</span>.post(<span class="hljs-string">'name'</span>); let pw = <span class="hljs-keyword">this</span>.post(<span class="hljs-string">'pw'</span>); let <span class="hljs-keyword">data</span> = <span class="hljs-keyword">this</span>.model(<span class="hljs-string">'singin'</span>).signIn(name, pw);<span class="hljs-comment">//跟model下的对应</span> <span class="hljs-keyword">this</span>.success(<span class="hljs-keyword">data</span>);<span class="hljs-comment">//返回数据</span> }</code></pre> <p>打开<code>src/useracount/model</code>创建<code>signin.js</code>,写入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="'use strict'; export default class extends think.model.base { signIn(name, pw) { return {isSuccess:(name==&quot;admin&quot;&amp;&amp;pw==&quot;123&quot;)}; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-meta">'use strict'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a></span> <span class="hljs-title">think</span>.<span class="hljs-title">model</span>.<span class="hljs-title">base</span> </span>{ signIn(name, pw) { <span class="hljs-keyword">return</span> {<span class="hljs-attr">isSuccess</span>:(name==<span class="hljs-string">"admin"</span>&amp;&amp;pw==<span class="hljs-string">"123"</span>)}; } }</code></pre> <p>也可以用<code>thinkjs model signin</code> 创建model</p> <p>打开<code>view/useracount</code>创建<code>signin_index.html</code>,写入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <script src=&quot;https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js&quot;></script><br /> <title>登录</title><br /> </head><br /> <body><br /> <input type=&quot;text&quot; placeholder=&quot;用户名&quot;><br /> <input type=&quot;password&quot; placeholder=&quot;密码&quot;><br /> <button>提交</button><br /> <script> $(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){ $('<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>').click(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() { <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a> = $('input[type=<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>]').val(); <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> pw = $('input[type=<a href="http://www.js-code.com/tag/password" title="password" target="_blank">password</a>]').val(); $.ajax({ type: 'POST', url: 'http://127.0.0.1:8360/useracount/signin/signin', data:{<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: name, pw: pw}, success: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> (data) { console.log(data); } }) }); }); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"用户名"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/password" title="浏览关于“password”的文章" target="_blank" class="tag_link">password</a>"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"密码"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a></span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> $(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">'button'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> name = $(<span class="hljs-string">'input[type=text]'</span>).val(); <span class="hljs-keyword">var</span> pw = $(<span class="hljs-string">'input[type=password]'</span>).val(); $.ajax({ <span class="hljs-attr">type</span>: <span class="hljs-string">'POST'</span>, <span class="hljs-attr">url</span>: <span class="hljs-string">'http://127.0.0.1:8360/useracount/signin/signin'</span>, <span class="hljs-attr">data</span>:{<span class="hljs-attr">name</span>: name, <span class="hljs-attr">pw</span>: pw}, <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(data); } }) }); }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>浏览器打开<code>http://127.0.0.1:8360/useracount/signin/index</code>就可以看到登录界面了(虽然很丑,凑合用吧)向输入框输入提交,打开控制台就可以看见了数据了。到此就走通了一个简单的流程了。</p> <blockquote> <p>PS:个人觉等<code>thinkjs</code>还是挺不错的目录结构比较清晰,分的比较细,便于管理,配置灵活,喜欢的同学可以研究哦,我还是初学者写的不好的请指出</p> </blockquote> <p></code></p>

总结

以上是脚本宝典为你收集整理的

入手thinkjs,学习笔记

全部内容,希望文章能够帮你解决

入手thinkjs,学习笔记

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过