Thinkjs3新手入门之添加一个新的页面

前言

ThinkJS 是一款拥抱未来的 Node.js Web 框架，致力于集成项目最佳实践，规范项目让企业级团队开发变得更加简单，更加高效。

目前该版本已经在线上多个项目中使用，简单一个命令就可以让你下载使用它：

npm install -g think-cli

本文将帮助大家往Thinkjs3中添加一个新的页面，没有原理描述，只提供给入门者一个感性认识。

0x0 首先需要一个Thinkjs3项目

我们创建一个叫做1uck的项目

$ thinkjs new 1uck
$ cd ./1uck
$ npm install
$ npm start

0x1 在该目录下通过命令向项目添加模块

通过thinkjs命令行工具，添加模块1hit的model（模型）文件 和 controller（控制器）文件。

这些命令将会往项目的src/controller和src/model中添加1hit模块所需要的文件。

$ thinkjs model 1hit
$ thinkjs controller 1hit

此时访问http://127.0.0.1:8360/1hit将会有如下错误提示。

她说没有找到对应的View(视图)文件。

0x2 那么我们乖乖地去添加就好了

$ cd view
$ touch 1hit_index.html
$ echo 'fuck' > 1hit_index.html

解释：

  • cd进入了项目的view（视图）目录。
  • touch新建了1hit_index.html文件。
  • echo配合>完成了往1hit_index.html中写入字符。

此时访问http://127.0.0.1:8360/1hit，就可以看到她在骂人了。

0xSegmentFuck 感性认识

  • thinkjs命令行工具很强大。
  • thinkjs项目的URL结构似乎像是 项目域名/模块名
  • thinkjs项目中的模块的默认(index)视图，以模块名_index.html放在view文件夹中。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • ThinkJS中如何使用MongoDB的CURD操作

    前言 众所周知目前使用Node.js + mongodb已经成为很多公司的技术栈.ThinkJS其实也提供了对mongo的支持,虽然官方文档较少,但是保证了ORM的API的一致性,所以用起来需要查看基本的>Model api 基本的模型文件放在common/model下 获取列表 getList(q, page) { return this.select(); } 分页加条件搜索 search(q, page) { if(q) { q = new RegExp(q,'i'); } return

  • Thinkjs3新手入门之如何使用静态资源目录

    Thinkjs3新手入门之如何使用静态资源目录

    静态资源访问 项目开发时,一般都需要在模版里引用静态资源. 使用 thinkjs 命令创建项目时,会自动创建 www/static 目录,该目录下专门用来存放 JS.CSS.图片等静态资源. 0x0 听说new的项目自动就有www/static!? 传说默认创建的项目结构如下: |--- development.js //开发环境下的入口文件 |--- nginx.conf //nginx 配置文件 |--- package.json |--- pm2.json //pm2 配置文件 |---

  • thinkjs 文件上传功能实例代码

    thinkjs 文件上传功能实例代码

    介绍 ThinkJS 是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单.高效.从 3.0 开始,框架底层基于 Koa 2.x 实现,兼容 Koa 的所有功能. 特性 基于 Koa 2.x,兼容 middleware 内核小巧,支持 Extend.Adapter 等插件方式 性能优异,单元测试覆盖程度高 内置自动编译.自动更新机制,方便快速开发 使用更优雅的 async/await 处理异步问题,不再支持 */yield 从 3.2 开始支持 Type

  • thinkjs之页面跳转同步异步操作

    thinkjs之页面跳转同步异步操作

    对于刚入手thinkjs项目的新手来说,时常会犯的一个错误就是"混用"各种代码逻辑,比如:我们经常在做后台管理系统的时候用到的登录框, 其实它原本是有一个路由专门存放自己的代码逻辑,而在点击提交按钮的时候,要达到的效果便是账号密码正确的时候,正常跳转页面,而错误的时候给出提示:为了发现问题,就先把源代码贴出来吧: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • Thinkjs3新手入门之添加一个新的页面

    Thinkjs3新手入门之添加一个新的页面

    前言 ThinkJS 是一款拥抱未来的 Node.js Web 框架,致力于集成项目最佳实践,规范项目让企业级团队开发变得更加简单,更加高效. 目前该版本已经在线上多个项目中使用,简单一个命令就可以让你下载使用它: npm install -g think-cli 本文将帮助大家往Thinkjs3中添加一个新的页面,没有原理描述,只提供给入门者一个感性认识. 0x0 首先需要一个Thinkjs3项目 我们创建一个叫做1uck的项目 $ thinkjs new 1uck $ cd ./1uck $

  • vue如何通过router-link或者button跳转到一个新的页面

    目录 通过router-link或者button跳转到一个新的页面 vue跳转到一个新的页面的多种方法 1.router-link路由 2.button按钮 3.a链接 通过router-link或者button跳转到一个新的页面 a.商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件) <template>   <div>     这是商品列表页面     <router-link to='/goods/title'>显示商

  • js中window.open打开一个新的页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

  • centos 7中添加一个新用户并授权的步骤详解

    前言 最近在笔记本装了一个centos,想要让别人也可以登录访问,用自己的账号确实不太好,于是准备新建一个用户给他.发现网站这方便的资料比较少,所以将自己实现的步骤总结分享出来,话不多说了,来一起看看详细的介绍: 创建新用户 创建一个用户名为:zhangbiao [root@localhost ~]# adduser zhangbiao 为这个用户初始化密码,linux会判断密码复杂度,不过可以强行忽略: [root@localhost ~]# passwd zhangbiao 更改用户 zha

  • matplotlib 向任意位置添加一个子图(axes)

    matplotlib 向任意位置添加一个子图(axes)

    当前有效matplotlib版本为:3.4.1. 概述 axes()函数功能与subplot()函数极其相似.都是向当前图像(figure)添加一个子图(Axes),并将该子图设为当前子图或者将某子图设为当前子图.两者的区别在于subplot()函数通过参数确定在子图网格中的位置,而axes()函数在添加子图位置时根据4个坐标确定位置. 函数的定义签名为:matplotlib.pyplot.axes(arg=None, **kwargs) 函数的调用签名为: # 在当前图像中添加一个铺满的子图

  • js实现动态添加上传文件页面

    js实现动态添加上传文件页面

    发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来.下面是实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title

  • php数组函数序列之array_push() 数组尾部添加一个或多个元素（入栈），返回新长度。

    array_push() 定义和用法 array_push() 函数向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度. 该函数等于多次调用 $array[] = $value. 语法 array_push(array,value1,value2...)参数 描述 array 必需.规定一个数组. value1 必需.规定要添加的值. value2 可选.规定要添加的值. 提示和注释 注释:即使数组中有字符串键名,您添加的元素也始终是数字键.(参见例子 2) 注释:如果用 a

  • ASP.NET MVC4入门教程（四）：添加一个模型

    ASP.NET MVC4入门教程（四）：添加一个模型

    在本节中,您将添加一些类,这些类用于管理数据库中的电影.这些类是ASP.NET MVC 应用程序中的"模型(Model)". 您将使用.NET Framework 数据访问技术Entity Framework,来定义和使用这些模型类.Entity Framework(通常称为 EF) 是支持代码优先的开发模式.代码优先允许您通过编写简单的类来创建对象模型.(相对于"原始的CLR objects",这也被称为POCO 类)然后可以从您的类创建数据库,这是一个非常干净快

  • ASP.NET MVC4入门教程（三）：添加一个视图

    ASP.NET MVC4入门教程（三）：添加一个视图

    在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML的过程. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎.Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML.用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程. 当前在控制器类中的Index方法返回了一个硬编码

随机推荐