2
头图

以前php在巅峰的时候,出现了WordpressTypechoZ-Blog,等等一批流行的CMS框架,当然他们也得益于,Thinkphp,Laravel等等一批流行的mvc框架,时至至今,像Thinkphp和Laravel依然很流行,建设一个网站从部署到发布可能也就3分钟搞定了

当然我今天要介绍的node.js框架的strapi框架,我们可以对比流行的Wordpress

Strapi

Strapi 是一款开源无头 CMS,它使开发者可以自由选择自己喜欢的工具和框架,并允许编辑人员使用应用的管理面板来管理和分发其内容。 Strapi 基于插件系统,是一个灵活的 CMS,其管理面板和 API 是可扩展的 - 并且每个部分都可以定制以匹配任何用例。 Strapi 还具有内置用户系统,可详细管理管理员和终端用户有权访问的内容

Wordpress

WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的,用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客

他们最大的特点就是来说Wordpress它是自带UI的,Strapi只关注Api数据,当然Strapi也可以做到配合nuxt.js支持UI界面

安装Strapi

npx create-strapi-app@latest my-project

根据提示安装即可,如果选择的数据库是MySQL,请记住它需大于5.7,默认的数据库是SQLiteNode最好大于20,因为Strapi正在升级下一代v5,目前你所安装的v4,到时候可以平滑升级

MySQL

选择MySQL,会提示你输入数据库名、密码、端口、地址,最后系统会写入在这个环境变量文件中

image.png

安装完成后,需要启动 Strapi 应用,请在项目文件夹中运行以下命令

npm run develop

看到以下说明启动成功,在浏览器中打开http://localhost:1337/admin

image.png

后台管理

由于我已经注册了,所以是登录界面,你们如果是第一次使用的会提示你注册用户,输入用户名、邮箱、密码即可,都是在你本地的数据库中

image.png

建立数据模型

这边我已建立了几个数据库模型,建立模型很简单

image.png

为表中新增加字段

image.png

然后可以到内容管理界面下,去新增或者管理数据

image.png

建立模型关联

通过这个模型管理,可以将两张表的数据连接关联起来,我后面会做一个演示

image.png

如何查询数据

Strapi查询数据很简单,他的风格是REST API,过滤条件参数,我猜测他的底层查询数据库使用的# Sequelize.js,只是看到他的查询风格参数类型很像

image.png

可以看到是有关联的数据的,因为在后来的添加了关联字段

image.png

好了我们讲了半天的界面操作,看看实际的代码如何

这是通过npx create-strapi-app@latest my-project命令生成完后的代码结构

image.png

如何添加路由中间件和全局中间件

中间的作用处很大,所以如果你要用好这个框架,得学会利用好中间件,我这概述下如何使用

image.png

路由中间件-在同级目录下有个routes目录,

module.exports = createCoreRouter('api::article.article', {  
    config: {  
        findOne: {  
            auth: false,  
            policies: [],  
            middlewares: ['api::article.analytics'], //看截图的文件名
        },  
    },  
});
module.exports = (config, {strapi}) => {  
    return async (context, next) => {  
        console.log('单个路由局部中间接')  
        await next();  
    };  
};

全局中间件的添加位置在config/middlewares.js

module.exports = [  
    'strapi::logger',  
    'strapi::errors',  
    'strapi::security',  
    'strapi::cors',  
    'strapi::poweredBy',  
    'strapi::query',  
    'strapi::body',  
    'strapi::session',  
    'strapi::favicon',  
    'strapi::public',  
    'global::white'  //看截图的文件名
];
module.exports = (config, {strapi}) => {  
    // Add your own logic here.  
    return async (ctx, next) => {  
        strapi.log.info('In white middleware.');  
        console.log('全局中间件')  
        await next();  
    };  
};

image.png

如何自定义接口

我们在路由文件下新建

image.png

然后在回到controllers目录,写入以下内容

image.png

回到管理面板,需要把这个勾搭上,不然无权限

image.png

我们进行测试

image.png

由于strapi我也是第一次接触,正在摸索中,目前只写已经够用了我工作中的需要,遇到问题,在去研究看如何使用

中英文文档

https://strapi.nodejs.cn/中文

https://docs.strapi.io/dev-docs/quick-start英文

过滤条件的使用

最后在列举一些,常用的查询条件

运算符描述
$eq平等的
$eqi等于(不区分大小写)
$ne不等于
$nei不等于(不区分大小写)
$lt少于
$lte小于或等于
$gt比...更棒
$gte大于或等于
$in包含在数组中
$notIn不包含在数组中
$contains包含
$notContains不含
$containsi包含(不区分大小写)
$notContainsi不包含(不区分大小写)
$null一片空白
$notNull不为空
$between在。。。之间
$startsWith以。。开始
$startsWithi开头为(不区分大小写)
$endsWith以。。结束
$endsWithi结尾为(不区分大小写)
$or连接 "or" 表达式中的过滤器
$and连接 "and" 表达式中的过滤器
$not连接 "not" 表达式中的过滤器

如果你不知道如何使用,他这里有列子

image.png


羊先生
1.9k 声望821 粉丝