[TOC]
# 介绍
ThinkJS 是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单、高效。从 3.0 开始,框架底层基于 Koa 2.x 实现,兼容 Koa 的所有功能。
# 特性
* 基于 Koa 2.x,兼容 middleware
* 内核小巧,支持 Extend、Adapter 等插件方式
* 性能优异,单元测试覆盖程度高
* 内置自动编译、自动更新机制,方便快速开发
* 使用更优雅的 `async/await` 处理异步问题
* 从 3.2 开始支持 [TypeScript](http://www.typescriptlang.org/)
# 架构
![](https://box.kancloud.cn/d5ddd84c2c1fbe0148415902774f6894_1000x777.png)
### 快速入门
借助 ThinkJS 提供的脚手架,可以快速的创建一个项目。为了可以使用更多的 ES6 特性,框架要求 Node.js 的版本至少是 `6.x`,建议使用 [LTS 版本](https://nodejs.org/en/download/)。
### 安装 ThinkJS 命令
~~~
$ npm install -g think-cli
~~~
安装完成后,系统中会有 thinkjs 命令(可以通过 thinkjs -V 查看 think-cli 的版本号,此版本号非 thinkjs 的版本号)。如果找不到这个命令,请确认环境变量是否正确。
如果是从 2.x 升级,需要将之前的命令删除,然后重新安装。
### 卸载旧版本命令
~~~
$ npm uninstall -g thinkjs
~~~
### 创建项目
执行 thinkjs new \[project\_name\] 来创建项目,如:
~~~
$ thinkjs new demo;
$ cd demo;
$ npm install;
$ npm start;
~~~
执行完成后,控制台下会看到类似下面的日志:
~~~
[2017-06-25 15:21:35.408] [INFO] - Server running at http://127.0.0.1:8360
[2017-06-25 15:21:35.412] [INFO] - ThinkJS version: 3.0.0-beta1
[2017-06-25 15:21:35.413] [INFO] - Enviroment: development
[2017-06-25 15:21:35.413] [INFO] - Workers: 8
~~~
打开浏览器访问 http://127.0.0.1:8360/,如果是在远程机器上创建的项目,需要把 IP 换成对应的地址。
### 项目结构
默认创建的项目结构如下:
~~~
|--- development.js //开发环境下的入口文件
|--- nginx.conf //nginx 配置文件
|--- package.json
|--- pm2.json //pm2 配置文件
|--- production.js //生产环境下的入口文件
|--- README.md
|--- src
| |--- bootstrap //启动自动执行目录
| | |--- master.js //Master 进程下自动执行
| | |--- worker.js //Worker 进程下自动执行
| |--- config //配置文件目录
| | |--- adapter.js // adapter 配置文件
| | |--- config.js // 默认配置文件
| | |--- config.production.js //生产环境下的默认配置文件,和 config.js 合并
| | |--- extend.js //extend 配置文件
| | |--- middleware.js //middleware 配置文件
| | |--- router.js //自定义路由配置文件
| |--- controller //控制器目录
| | |--- base.js
| | |--- index.js
| |--- logic //logic 目录
| | |--- index.js
| |--- model //模型目录
| | |--- index.js
|--- view //模板目录
| |--- index_index.html
~~~
4. 项目服务启动
入口文件是 development.js,启动时直接和一般的node启动一样 node development.js即可。查看入口文件可知启动的时候,实际上是实例化 ThinkJS 里的 Application 类,执行 run 方法。
5.配置数据库
本项目使用mysql数据库,配置文件的位置:src/config/adapter.js
~~~
exports.model = {
type: 'mysql',
common: {
logConnect: isDev,
logSql: isDev,
logger: msg => think.logger.info(msg)
},
mysql: {
handle: mysql,
database: 'thinkjsplus',
prefix: '',
encoding: 'utf8',
host: '127.0.0.1',
port: '3306',
user: 'root',
password: 'root',
dateStrings: true
}
};
~~~
5.1 创建模型文件
~~~
thinkjs model +模型文件名
~~~
6. 控制器
创建控制器的命令是 thinkjs controller +控制器名,我们创建admin后台登录控制器,同时在视图层我们创建admin控制器对应的html页面admin\_index.html页面,启动服务,浏览器访问[http://localhost:8360/admin就可以访问到admin\_index.html的登录页面](http://localhost:8360/admin%E5%B0%B1%E5%8F%AF%E4%BB%A5%E8%AE%BF%E9%97%AE%E5%88%B0admin_index.html%E7%9A%84%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2).
~~~
thinkjs controller admin
~~~
~~~javascript
const user = this.model('thinkjsplus_user'); // controller 里实例化模型
const data = await user.select();
this.assign('title',data);
return this.display();
~~~
7. 视图
thinkjs3默认模板引擎是 nunjucks,如果在控制器action中这样写
~~~javascript
this.assign('title',"测试网页之thinkjsplus!");
return this.display();
~~~
视图html页面中就可以这样写,拿到title
~~~~~~javascript
{{title}}
~~~
8. 权限控制
权限代码如下:
~~~javascript
module.exports = class extends think.Controller {
async __before() {
if(this.ctx.controller === 'admin' && this.ctx.action === 'index'||this.ctx.action === 'login' ){ //如果是admin_index那么久不验证了,直接返回给予登录。
return;
}
let userinfo =await this.session('userinfo')
if (!think.isEmpty(userinfo)){
this.assign('userinfo',userinfo);
}else{
return this.redirect('/admin/index');
}
}
~~~
9.本项目用到了mysql数据库,CRUD操作具体可以查看项目,本项目具有详细注释
~~~javascript
/**
* 保存分类
*/
async saveAction() {
let data = this.post();
if (think.isEmpty(data.id)) {
//保存
let res = await this.model("thinkjsplus_category").add(data);
if (res) {
this.json({"succ":true});
} else {
this.json({"succ":false});
}
} else {
//更新
let res = await this.model("thinkjsplus_category").update(data);
if (res) {
this.json({"succ":true});
} else {
this.json({"succ":false});
}
}
}
/**
* 删除分类
*/
async delAction() {
let categoryModel = this.model("thinkjsplus_category");
let posts = this.post("id");
let delNums = categoryModel.where({id: ['IN', posts]}).delete();
if(delNums){
this.json({"succ":true});
}else{
this.json({"succ":false});
}
}
/**
* 查看分类
*/
async listAction() {
const user = this.model('thinkjsplus_category'); // controller 里实例化模型
const data = await user.select();
return this.json(data);
}
~~~
10.运行
首先安装mysql,之后导入项目sql文件夹,然后在项目根目录下运行 npm install,之后运行 npm start,即可启动本项目
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范