最近刚刚学习了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
还是挺不错的目录结构比较清晰,分的比较细,便于管理,配置灵活,喜欢的同学可以研究哦,我还是初学者写的不好的请指出
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。