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

發表於2024-02-23

以前php在巔峰的時候，出現了Wordpress，Typecho，Z-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，預設的資料庫是SQLite，Node最好大於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

相關文章