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

news/2024/4/28 14:03:19/文章来源:https://blog.csdn.net/weixin_34279246/article/details/88602656

一.简介

这个个人博客网站最初制作的目的就是练习使用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_782779.aspx

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

相关文章

浅谈大型网站动态应用系统架构

动态应用,是相对于网站静态内容而言, 是指以c/c、php、Java、perl、.net等 服务器端语言开发的网络应用软件,比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通 常与数据库系统、缓存系统、分布式存储系统等密不可分。 大型动态应用…

ASP.NET实现网站评论内容无限引用使用自反+递归技术

本文中,我们实现类似网易的无限评论引用功能。我们先了解了评论引用的传统实现方式,然后介绍了数据库表结构、创建了数据库表的映射类Comment。 引言 大家每天都在看博客,发表评论,实现一个评论系统也是一名Web开发者的基本要求。…

网站漏洞如何修复网站程序问题

2019独角兽企业重金招聘Python工程师标准>>> jeecms 最近被爆出高危网站漏洞,可以导致网站被上传webshell木马文件,受影响的版本是jeecms V6.0版本到jeecmsV7.0版本。该网站系统采用的是JAVA语言开发,数据库使用的是oracle,mysql,…

[翻译 EF Core in Action 2.1] 设置一个图书销售网站的场景

Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core 书籍。原版地址. 是除了官方文档外另一个学习EF Core的不错途径, 书中由浅入深的讲解的EF Core的相关知识。因为没有中文版,所以本人对其进行翻译。 预计每两天…

[Linux] Nginx服务下统计网站的QPS

单位时间的请求数就是QPS,那么在nginx服务的网站下,如果要统计QPS并且按从高到低排列,需要使用awk配合sort进行处理awk做的主要工作是把access每行日志按分隔符分开,然后循环每一行,存到一个数组里,如果只按时间不区分脚本路径,数组里存的数据是比如arr[[28/Nov/2019:14:12:23]…

大型网站技术架构(六)网站的伸缩性架构

2019独角兽企业重金招聘Python工程师标准>>> 网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能,通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的…

转 nginx实现网站负载均衡(windows+IIS负载实测)

如果你关注过nginx,必定知道nginx这个软件有什么用的,如果你的网站访问量越来越高,一台服务器已经没有办法承受流量压力,那就增多几台 服务器来做负载吧。做网站负载可以买硬件设备来实现,比如F5,不过价格就几十万到上…

大型网站架构

引用:http://kb.cnblogs.com/page/99549/ 之前我简单向大家介绍了各个知名大型网站的架构,MySpace的五个里程碑、Flickr的架构、YouTube的架构、PlentyOfFish的架构、WikiPedia的架构。这几个都很典型,我们可以从中获取很多有关网站架构方面的…

经典网页设计:25个精美的全屏背景网站设计作品

在网页中使用精美的全屏背景能给访客浏览深刻的印象,带给访客震撼的视觉感受。当然,大尺寸的图片用在网站中也会有加载缓慢的问题,不过使用全屏背景仍然是一个非常不错的方式。今天这篇文章收集了25个非常精美的全屏背景网站设计作品分享给大…

SEO是一件需要细心的事情

刚开的博客,还不知道写点什么,就胡乱写点关于SEO的想法。SEO是什么? 很多人都知道,就是搜索引擎优化,就是针对搜索引擎的胃口优化我们自己的站点页面,让搜索引擎更多的收录站点里的页面,更好的提高页面的搜…

【转】大型网站架构演变和知识体系

本文转自:http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html 之前也有一些介绍大型网站架构演变的文章,例如LiveJournal的、ebay的,都是非常值得参考的,不过感觉他们讲的更多的是每次演变的结果,而没有…

轻量完善的网站在线客服系统源码实现-GOFLY实现浏览器通知栏

GOFLY在线客服,是一套可私有化部署的开源客服系统,安装过程不超过五分钟,基于Golang开发,二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的网页在线客服…

网站在线客服系统源码|在线客服代码下载 (2021最新版)

GOFLY,一套可私有化部署的免费开源客服系统,基于Golang开发,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的网页在线客服系统,致力于帮助广大…

网站客服系统_网页客服系统安装使用_GOFLY在线客服系统

GOFLY提供网站客服系统,网页客服系统 GOFLY,一套可私有化部署的免费开源客服系统,基于Golang开发,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即…

经典网页设计:顶尖的个人作品集网站设计欣赏【上篇】

作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站&#…

网站在线客服系统GOFLY源码开发日志- 5. gin框架整合守护进程

我的项目使用的是 gin 框架,默认开发情况下运行起来还是没有大问题的,go run xxx.go 开着命令窗口,然后去浏览器访问就行了。现在想要把服务部署到服务器,这个命令窗口可就不能保证一直运行了。 让进程后台运行很简单,…

GOFLY在线客服系统/外贸网站在线客服+多语言支持 外贸网站即时通讯工具/中英文切换教程...

GOFLY在线客服系统支持多语言展示,特别适合外贸网站和访客即时通讯沟通 访客界面切换成英文的方式方法 访客链接url参数中增加langen,界面就会切换成英文; 底部版权中文字符,管理员可以在后台改成英文的名称; 在线客服…

滚动视差网站欣赏

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了 这项技术。今天这篇文章就与大家分享30个视差滚动效果的…

国内多地测试网站访问速度

有时候我们项目在本地域挺快的,但是在国内其他地方就比较慢 这个时候可以使用下面的网站测试,能测试其他地方的访问速度 https://www.17ce.com/ 我的在线客服系统效果如图:

wordpress网站主题安装教程

前面已经搭建好了网站,但是默认的页面比较简陋,我们需要更改一下外观 现在我们安装新的主题外观,使网站更加的好看 下载主题 https://www.lovestu.com/corepress-free 可以使用上面的免费主题,直接下载.zip 安装主题 在wordpress后…