2

最近刚刚学习了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,写入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <title>登录</title>
</head>
<body>
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <button>提交</button>
  <script>
    $(function(){
      $('button').click(function() {
        var name = $('input[type=text]').val();
        var pw = $('input[type=password]').val();
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1:8360/useracount/signin/signin',
          data:{name: name, pw: pw},
          success: function (data) {
            console.log(data);
          }
        })
      });
    });
  </script>
</body>
</html>

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

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


雨林
227 声望3 粉丝

vue + node + go初学者