资讯专栏INFORMATION COLUMN

入手thinkjs,学习笔记

shuibo / 452人阅读

摘要:最近刚刚学习了一个的开发框架,最重要的是可以用开发传送门以下是学习过程中的笔记上面时全局安装完成后用检查是否成功创建了一个名为的项目,然后进入目录,安装依赖,启动项目,浏览器打开就可以看到页面了。

最近刚刚学习了thinkjs--一个node的MVC开发框架,最重要的是可以用es6/es7开发【传送门】

以下是学习过程中的笔记:

npm install thinkjs@2 -g --verbose

上面时全局安装 thinkjs 完成后用 thinkjs -v 检查是否成功

thinkjs new think

创建了一个名为think的项目,然后cd think 进入think目录, npm install 安装依赖, npm start启动项目,浏览器打开127.0.0.1:8360就可以看到页面了。

路由访问规则
thinkjs 的路由访问规则和 thinkphp 的差不多

域名/模块名/控制器名 /action名
test.com/admin/index/index

模块
在thinkjs中是用模块来分拆项目的,当然官网说也可以用别的方式

thinkjs module admin

创建一个名为admin的模块,模块下有四个文件夹:

config---配置信息,如数据库等等
controller --- 控制器目录,控制器用于获取post与get数据和处理逻辑
logic --- 据说这是thinkjs最有特色的一点,和controller一一对应用于验证controller数据合法性与处理数据,在controller之前调用
model --- 用于操作数据库,返回数据

视图
thinkjs把所有的视图文件放在了根目录下的view文件夹,命名规则模块名/控制器_action名有点怪是吧,没问题可以改【传送门】

静态文件
thinkjs把所有的静态文件放在www/static

简单例子
接下来我们来实现一个模拟登录操作:
首先按照我们步骤创建一个项目,接着安装依赖,然后别急着启动,先创建模块,thinkjs module useracount,然后创建控制器 thinkjs controller signin,关于thinkjs命令【传送门】,最后启动项目 npm start,用你喜欢的编辑器打开项目。
打开src/useracount/controller/signin.js,在indexAction后面加入

 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);//返回数据
  }

打开src/useracount/model创建signin.js,写入

"use strict";

export default class extends think.model.base {
  signIn(name, pw) {
    return {isSuccess:(name=="admin"&&pw=="123")};
  }
}

也可以用thinkjs model signin 创建model

打开view/useracount创建signin_index.html,写入




  
  
  
  
  登录


  
  
  
  

浏览器打开http://127.0.0.1:8360/useracount/signin/index就可以看到登录界面了(虽然很丑,凑合用吧)向输入框输入提交,打开控制台就可以看见了数据了。到此就走通了一个简单的流程了。

PS:个人觉等thinkjs还是挺不错的目录结构比较清晰,分的比较细,便于管理,配置灵活,喜欢的同学可以研究哦,我还是初学者写的不好的请指出

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82458.html

相关文章

  • Thinkjs3入门笔记一:添加一个新的页面

    摘要:本文帮助你往中添加一个新的页面,没有原理描述,只提供一个感性认识。首先需要一个项目我们创建一个叫做的项目所有选项一路确认即可在该目录下通过命令向项目添加模块通过命令行工具,添加模块的控制器文件。感性认识命令行工具可以用来做很多事情。 本文帮助你往Thinkjs3中添加一个新的页面,没有原理描述,只提供一个感性认识。 首先需要一个Thinkjs3项目 我们创建一个叫做fuck的项目 $ ...

    oujie 评论0 收藏0
  • Thinkjs3入门笔记一:添加一个新的页面

    摘要:本文帮助你往中添加一个新的页面,没有原理描述,只提供一个感性认识。首先需要一个项目我们创建一个叫做的项目所有选项一路确认即可在该目录下通过命令向项目添加模块通过命令行工具,添加模块的控制器文件。感性认识命令行工具可以用来做很多事情。 本文帮助你往Thinkjs3中添加一个新的页面,没有原理描述,只提供一个感性认识。 首先需要一个Thinkjs3项目 我们创建一个叫做fuck的项目 $ ...

    or0fun 评论0 收藏0
  • ThinkJS 作者李成银:择善而从之,笃行致远

    摘要:非常有幸邀请到李成银老师,进行一期图灵专访。具体工作中,技术能力可能只占了,软素质方面的能力却高达。大数据处理随着大数据处理越来越热门,很多项目都要在前端进行大数据处理和展现。提案可以大大提升在大数据处理方面的性能。 非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/260246 李成银,奇虎360前端技术专家,Th...

    alin 评论0 收藏0
  • Vue+thinkJs博客网站(一)之vue多页面应用的webpack3配置

    摘要:首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件,因为是多页面应用,需要多个入口文件来保证打包成不同的。 一.项目简介     本项目使用vue作为前端框架,thinkJs作为后端框架,构建个人博客网站,页面分为博客展示和后台管理,主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能,发现webpack的配置遇到了一些坑,这里先记录下。项目目录结构如下...

    NickZhou 评论0 收藏0

发表评论

0条评论

shuibo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<