👅媽媽在也不用擔心我不會寫介面了

羊先生發表於2024-02-22

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

相關文章