👅妈妈在也不用担心我不会写接口了

以前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

bash 复制代码
npx create-strapi-app@latest my-project

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

MySQL

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

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

bash 复制代码
npm run develop

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

后台管理

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

建立数据模型

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

为表中新增加字段

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

建立模型关联

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

如何查询数据

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

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

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

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

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

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

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

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

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

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'  //看截图的文件名
];
js 复制代码
module.exports = (config, {strapi}) => {  
    // Add your own logic here.  
    return async (ctx, next) => {  
        strapi.log.info('In white middleware.');  
        console.log('全局中间件')  
        await next();  
    };  
};

如何自定义接口

我们在路由文件下新建

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

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

我们进行测试

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

中英文文档

strapi.nodejs.cn/中文

docs.strapi.io/dev-docs/qu...

过滤条件的使用

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

运算符 描述
$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" 表达式中的过滤器

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

相关推荐
_.Switch37 分钟前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光41 分钟前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   41 分钟前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   42 分钟前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web1 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常1 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇2 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr2 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho3 小时前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常4 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js