Vue+thinkJs博客网站(二)之thinkJs的使用

news/2024/4/27 17:49:36/文章来源:https://blog.csdn.net/weixin_34056162/article/details/88602659

一.简介

这个个人博客网站最初制作的目的就是练习使用thinkJs,这一篇就主要讲一下thinkJs的一些特性和注意事项。涉及到了文件上传,thinkJs的插件机制,model层建立以及CURD的编写方式等。本项目github地址在这里。

项目thinkJs端主要参考了知乎上大佬Ischo的文章,链接在这。

二.thinkJs model层写法

这里主要讲两个部分,一是表对应的js文件,二是CRUD写法。项目表结构比较简单,一共八个表,包含多对一,一对多,多对多关系。主要的几个表,都对应着model文件夹下的js文件,表关系也在这个js里维护。这里我们以model/content.js为例讲一哈:

module.exports = class extends think.Model {// 模型关联get relation() {return {category: {type: think.Model.BELONG_TO,model: "meta",key: "category_id",fKey: "id",field: "id,name,slug,description,count"},tag: {type: think.Model.MANY_TO_MANY,model: "meta",rModel: "relationship",rfKey: "meta_id",key: "id",fKey: "content_id",field: "id,name,slug,description,count"},comment: {type: think.Model.HAS_MANY,key: "id",fKey: "content_id",where: "status=99",order: "create_time desc"},user: {type: think.Model.BELONG_TO,model: "user",key: "user_id",fKey: "id",field: "id,username,email,qq,github,weibo,zhihu"}};}// 添加文章async insert(data) {const tags = data.tag;data = this.parseContent(data);delete data.tag;const id = await this.add(data);const relation = [];tags.forEach(val => {relation.push({content_id: id,meta_id: val});});think.model("relationship").addMany(relation);// 更新文章数量this.updateCount(data.category_id, tags);return id;}
}

这里代码没有截全,完整代码看github。

我们看到这个对象分为两部分,一个是get relation写的表映射关系。可以看到content表与meta表存在一对一关系(type: think.Model.BELONG_TO),这里key:category_id是content表里的字段,即外键,fkey:id是对应的meta表里的字段。查询时,会封装层user.category对象,对象属性就是field 定义的id,name,slug,description,count。content 与user也存在多对多关系(type: think.Model.MANY_TO_MANY),rfModel是多对多关系下,对应的关联关系模型名,默认值为二个模型名的组合,rfKey是多对多关系下,关系表对应的 key。

另一个是Model里的方法,相当于自定义的model方法,比如这里定义的insert,就可以在controller里通过this.model('content').insert()调用。

thinkJS的CRUD操作,不是直接写sql,而是在sql基础上封装一层,通过调用model的方法来操作。think.Model 基类提供了丰富的方法进行 CRUD 操作,具体如下:

查询数据
模型提供了多种方法来查询数据,如:find 查询单条数据
select 查询多条数据
count 查询总条数
countSelect 分页查询数据
max 查询字段的最大值
avg 查询字段的平均值
min 查询字段的最小值
sum 对字段值进行求和
getField 查询指定字段的值
同时模型支持通过下面的方法指定 SQL 语句中的特定条件,如:where 指定 SQL 语句中的 where 条件
limit / page 指定 SQL 语句中的 limit
field / fieldReverse 指定 SQL 语句中的 field
order 指定 SQL 语句中的 order
group 指定 SQL 语句中的 group
join 指定 SQL 语句中的 join
union 指定 SQL 语句中的 union
having 指定 SQL 语句中的 having
cache 设置查询缓存
添加数据
模型提供了下列的方法来添加数据:add 添加单条数据
thenAdd where 条件不存在时添加
addMany 添加多条数据
selectAdd 添加子查询的结果数据
更新数据
模型提供了下列的方法来更新数据:update 更新单条数据
updateMany 更新多条数据
thenUpdate 条件式更新
increment 字段增加值
decrement 字段减少值
删除数据
模型提供了下列的方法来删除数据:delete 删除数据
手动执行 SQL 语句
有时候模型包装的方法不能满足所有的情况,这时候需要手工指定 SQL 语句,可以通过下面的方法进行:query 手写 SQL 语句查询
execute 手写 SQL 语句执行

比如我们要查询content表数据,在Controller里通过thin.model('content').where(param).select()来查询。

thinkJs的Model层与之前用过的java的数据层框架hibernate比较相似,都是基于面向对象的思想对sql进行封装,表与Model(实体类),通过model方法进行CRUD操作,特别省sql。

三.插件机制的实现

参考的博主实现的插件机制还是很好用的,这里我就拿了过来。插件机制可以说是自定义的钩子函数。首先在src新建service文件夹,新建js文件(以cache.js为例)

module.exports = class extends think.Service {static registerHook() {return {content: ["contentCreate", "contentUpdate", "contentDelete"]};}/*** 更新内容缓存* @param  {[type]} data [description]* @return {[type]}      [description]*/content(data) {think.cache("recent_content", null);}
};

registerHook里content对应的数组表示钩子函数的调用名,具体调用的是下面的content方法。在controller里这么调用

 await this.hook("contentUpdate", data);

钩子函数的注册这里放到了worker进程里,thinkJs运行流程具体的可以看看官网在这里

work.js代码如下:

think.beforeStartServer(async () => {const hooks = [];for (const Service of Object.values(think.app.services)) {const isHookService = think.isFunction(Service.registerHook);if (!isHookService) {continue;}const service = new Service();const serviceHooks = Service.registerHook();for (const hookFuncName in serviceHooks) {if (!think.isFunction(service[hookFuncName])) {continue;}let funcForHooks = serviceHooks[hookFuncName];if (think.isString(funcForHooks)) {funcForHooks = [funcForHooks];}if (!think.isArray(funcForHooks)) {continue;}for (const hookName of funcForHooks) {if (!hooks[hookName]) {hooks[hookName] = [];}hooks[hookName].push({ service, method: hookFuncName });}}}think.config("hooks", hooks);
});

这里将service里定义的method遍历取出,按一定格式保存并存放到数组,最后放到think.config里面,项目启动后这些过程就已经执行了。

think.Controller本身没有hook方法,这里需要在extend里面加上controller.js,代码如下:

module.exports = {/*** 执行hook* @param  {[type]}    name [description]* @param  {...[type]} args [description]* @return {[type]}         [description]*/async hook(name, ...args) {const { hooks } = think.config();const hookFuncs = hooks[name];if (!think.isArray(hookFuncs)) {return;}for (const { service, method } of hookFuncs) {await service[method](...args);}}
};

这样自定义钩子函数就实现了,一些通用的后置方法就可以直接共用一个了。

四.路由

thinkJs路由写在config/router.js里,具体代码如下:

module.exports = [// RESTFUL[/\/api\/(\w+)(?:\/(.*))?/, 'api/:1?id=:2', 'rest'],[/\/font\/(\w+)\/(\w+)/, 'fontend/:1/:2'],['/:category/:slug', 'content/detail'],['/:category/:slug/comment', 'content/comment']
];

里面的数组的第一个元素是匹配url的表达式,第二个元素是分配的资源,如果是采用RESTFUL规范定义的接口,第三个元素要写作'rest'。本项目的后台接口基本都是采用RESTFUL规范,具体路由的详细讲解可以看官网链接

五.部署

项目线上部署采用PM2管理node进程,部署时把src,view,www,pm2.json,production.js放到服务器上。安装好pm2后运行

pm2 start pm2.json

注意pm2.json里需要修改cwd为服务器上你项目的目录。本项目前后端是一个服务,不存在所以没有用nginx代理。thinkJs部署相关可以看这里

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_814311.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记

前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。 TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年 势头迅猛,可谓遍地开花。 Vue3.0 将使用 TS 重写,…

第2章 大型网站架构模式

2019独角兽企业重金招聘Python工程师标准>>> ##2.1 网站架构模式## 为了解决大型网站面临的高并发访问,海量数据处理,高可靠运行等一系列问题与挑战,大型互联网公司在实践中提出了许多解决方案,以实现网站高性能&#…

基于jQuery游戏网站焦点图轮播特效

基于jQuery的一款游戏网站焦点图轮播特效。这是一款带进度条定时切换&#xff0c;带缩略图切换的jQuery网站焦点图代码。效果图如下: 在线预览 源码下载 实现的代码。 html代码&#xff1a; <center><br><div id"chinaz"><div class"ba…

保护您的网站不受黑客攻击系列二

步骤#1&#xff1a;使用CSP 跨站点脚本&#xff08;XSS&#xff09;攻击与SQL注入类似&#xff0c;是网站所有者需注意的另一常见威胁。当黑客找到渠道把恶意JavaScript代码偷偷写入您的网页时&#xff0c;曝露在该代码下的您访客的页面也会随之受到影响&#xff0c;这就是所谓…

onmouseover和onmouseout在GridView中应用 Ver2

第一个版本&#xff0c;可以参考&#xff1a;http://www.cnblogs.com/insus/archive/2009/03/13/1411057.html以前的版本&#xff0c;是在Gridview的OnRowCreated事件进行写代码。现今此版本&#xff0c;是使用Override Render方法进行&#xff0c; 能写更少与简洁的代码&#…

IIS网站服务器性能优化指南(转载)

原文网址:http://www.phontol.com/20090507_419416_1.html Windows Server自带的互联网信息服务器&#xff08;Internet Information Server&#xff0c;IIS&#xff09;是架设网站服务器的常用工具&#xff0c;它是一个既简单而又麻烦的东西&#xff0c;新手都可以使用I…

如何在电脑上测试手机网站(全)

最近公司要开发网站的移动版&#xff0c;让我准备准备知识&#xff0c;话说本人开发移动网站的经验还真不多&#xff0c;最悲剧的事情就是我的手机是个经典的诺基亚&#xff0c;而且公司还不给配手机&#xff0c;这是有多讨厌&#xff0c;没办法&#xff0c;没有手机只能用电脑…

我给女朋讲编程网络系列(2)--IIS8 如何在本地发布网站

通过IIS8 在本地发布网站&#xff0c;一个截图&#xff0c;你就全明白了&#xff0c;越是简单&#xff0c;越是实用。 如果有现成的网站&#xff0c;就将你的网站放到一个文件夹中&#xff0c;比如WebTest2中。 如何没有网站&#xff0c;可以在WebTest2中新建一个index.html文…

网站运营,从一条日志说起

2019独角兽企业重金招聘Python工程师标准>>> 网站运营的过程中需要关注的点很多&#xff0c;包括业务层面的&#xff0c;比如活跃用户数&#xff0c;刷单用户&#xff0c;新增用户数&#xff0c;恶意注册用户等&#xff1b;也包括安全层面&#xff0c;包括恶意密码猜…

互联网安全和数据挖掘网站

检测、踩点网站&#xff1a;https://www.netcraft.com/ 转载于:https://www.cnblogs.com/ZQWelcomeIndex/p/11442145.html

大型网站架构系列:消息队列(二) (转)

本文是大型网站架构系列&#xff1a;消息队列&#xff08;二&#xff09;&#xff0c;主要分享JMS消息服务&#xff0c;常用消息中间件&#xff08;Active MQ&#xff0c;Rabbit MQ&#xff0c;Zero MQ&#xff0c;Kafka&#xff09;。【第二篇的内容大部分为网络资源的整理和汇…

教你如何快速下载网站?如何仿制网址,下载网站,获取网站html文件,图像文件

原文地址&#xff1a;https://www.yii666.com/share/92.html 如何仿制网址,下载网站,获取网站html文件,图像文件 1、本文通过 WinHTTrack Website Copier 软件讲解如何实现下载网站进行离线访问。 安装包&#xff1a;httrack_x64-3.49.2.zip,点击下载。 2、点开软件&#xff0…

减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)...

减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术) 原文:减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)在网站开发过程中&#xff0c;对于页面的加载效率一般都想尽办法求快。…

苹果在线签名服务器搭建,苹果iOS企业签名 、apple 超级签名网站服务器选用

苹果iOS企业签名运行流程1.用户手机安装预留的描述文件&#xff0c;获取本机udid后&#xff0c;向服务器返回用户的udid2.服务器收到UDID后&#xff0c;将UDID添加到开发者账号下&#xff0c;下载此udid签名用的证书描述文件。3.然后用此udid签名用的证书描述文件&#xff0c;把…

网站新文章全自动监控工具 支持 『论坛、贴吧』等新帖提醒

来源于&#xff1a;http://www.52pojie.cn/thread-532237-1-1.html 前言每天打开电脑&#xff0c;就是逛论坛&#xff0c;看一些娱乐网&#xff0c;看看有没有啥新鲜干货&#xff0c;现在已经有强迫症&#xff0c;于是这款工具诞生了&#xff0c;可以一键获取所有想要关注的网站…

参加google.com的送钱广告计划---“全面发挥贵网站的创收潜力”

分享一下我老师大神的人工智能教程&#xff01;零基础&#xff0c;通俗易懂&#xff01;http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识&#xff0c;造福人民&#xff0c;实现我们中华民族伟大复兴&#xff01;Google.com的金字招牌作保证&#xff0c;放心…

日常实用网站推荐

经常会有朋友让我推荐一些好用的网站&#xff0c;因此今天就写一篇博客&#xff0c;为大家介绍一些我认为爱不释手的日常实用网站&#xff1a;01 | 搞学习CSDN哔哩哔哩TED网易公开课菜鸟教程02 | 写代码GitHub码云开源中国源码之家03 | 小工具果核剥壳字体天下矢量图标库表情符…

SEO深度解读之HITS链接分析算法

HITS(Hyperlink - Induced Topic Search)链接分析算法诞生在1997年&#xff0c;该算法是由康奈尔大学中的一位博士提出&#xff0c;并且该算法沿用于全球多个搜索引擎当中。当然&#xff0c;不同的搜索引擎针对于该算法的侧重点和内部公式都有不一的算法结构调整&#xff0c;并…

Linux三大主流网站构建平台,Linux快速构建LAMP网站平台

1.1 问题本例要求基于Linux主机快速构建LAMP动态网站平台&#xff0c;并确保可以支撑PHP应用及数据库&#xff0c;完成下列任务&#xff1a;1)安装LAMP平台各组件&#xff0c;启动LAMP平台软件包&#xff1a;httpd、mariadb-server、mariadb、php、php-mysql系统服务&#xff1…

推荐一个制作卡通头像的网站(超强)

推荐一个制作卡通头像的网站 http://faceyourmanga.it/faceyourmanga.php?langeng 非常方便 灵活。 看看图的选择项目&#xff0c;脸型、眼睛、鼻子、嘴巴、发型、甚至连各种装饰品、纹身都有 如图