摘要:介紹是以和為基礎(chǔ)搭建的開源的和應(yīng)用程序平臺(tái)。在官網(wǎng)上聲稱在中,用搭建數(shù)據(jù)驅(qū)動(dòng)的網(wǎng)站應(yīng)用程序和是最容易的。這樣實(shí)現(xiàn)一個(gè)網(wǎng)站只要定義和寫前端代碼就好了。這應(yīng)該是前端猴子接外包的一個(gè)利器吧。
介紹
Keystone是以Express和MongoDB為基礎(chǔ)搭建的開源的Node.js CMS和web應(yīng)用程序平臺(tái)。
Keystone在官網(wǎng)上聲稱:在Node.js中,用Keystone搭建數(shù)據(jù)驅(qū)動(dòng)的網(wǎng)站、應(yīng)用程序和API是最容易的。
之所以出此狂言,背后還是有料的,Keystone自帶以下功能:
內(nèi)置Express.js和MongoDB
動(dòng)態(tài)路由
實(shí)用的數(shù)據(jù)庫(kù)域類型
自動(dòng)生成管理員界面
基于數(shù)據(jù)模型的表單處理
會(huì)話管理和認(rèn)證功能
我覺得keystone最牛逼的地方就是根據(jù)你定義的模型自動(dòng)幫你實(shí)現(xiàn)后臺(tái)管理界面,創(chuàng)建、管理、編輯和刪除等,這得省掉很多功夫了。這樣實(shí)現(xiàn)一個(gè)網(wǎng)站只要定義model和寫前端代碼就好了。
這應(yīng)該是前端猴子接外包的一個(gè)利器吧。
安裝準(zhǔn)備安裝node.js 0.10+
安裝mongodb v2.4+
安裝yeoman npm install -g yo
安裝keystone生成器 npm install -g generator-keystone
開始創(chuàng)建項(xiàng)目目錄
mkdir my-keystone
進(jìn)入項(xiàng)目目錄
cd my-keystone
生成代碼
yo keystone
代碼生成器會(huì)問(wèn)你幾個(gè)問(wèn)題,比如項(xiàng)目名稱,是否內(nèi)置博客、相冊(cè)和聯(lián)系表單,是否添加User模型,添加管理員賬戶密碼
安裝依賴
npm install
運(yùn)行項(xiàng)目
node keystone
打開http://localhost:3000 在瀏覽器查看
通過(guò)http://localhost:3000/keystone 打開后臺(tái)管理
var keystone = require("keystone"), Types = keystone.Field.Types; var Post = new keystone.List("Post", { autokey: { path: "slug", from: "title", unique: true }, map: { name: "title" }, defaultSort: "-createdAt" }); Post.add({ title: { type: String, required: true }, state: { type: Types.Select, options: "draft, published, archived", default: "draft" }, author: { type: Types.Relationship, ref: "User" }, createdAt: { type: Date, default: Date.now }, publishedAt: Date, image: { type: Types.CloudinaryImage }, content: { brief: { type: Types.Html, wysiwyg: true, height: 150 }, extended: { type: Types.Html, wysiwyg: true, height: 400 } } }); Post.defaultColumns = "title, state|20%, author, publishedAt|15%" Post.register();
這是官網(wǎng)中給出的例子,一個(gè)文章的model,詳情
不得不提一下,keystone的圖片類型是Types.CloudinaryImage,需要購(gòu)買CloudinaryImage的服務(wù),如果你不想用Cloudinary的服務(wù)的話,keystone還提供了Types.LocalFile,這樣我們就可以把image改成:
image: { type: Types.LocalFile, dest: "public/upload", prefix: "/upload", format: function(item, file){ return ""; } }
這里format是指針對(duì)后臺(tái)管理用的
如果你想使用CDN服務(wù)的話,可以對(duì)圖片文件夾進(jìn)行了CDN同步,然后修改prefix為你的CDN提供商提供的前綴。
路由配置文件:routes/index.js
中間件:routes/middleware.js
var keystone = require("keystone"), middleware = require("./middleware"), importRoutes = keystone.importer(__dirname); // 常用中間件 keystone.pre("routes", middleware.initErrorHandlers); keystone.pre("routes", middleware.initLocals); keystone.pre("render", middleware.flashMessages); // 處理404錯(cuò)誤 keystone.set("404", function(req, res, next) { res.notfound(); }); // 處理其它錯(cuò)誤 keystone.set("500", function(err, req, res, next) { var title, message; if (err instanceof Error) { message = err.message; err = err.stack; } res.err(err, title, message); }); // 加載路由 var routes = { views: importRoutes("./views") }; // 綁定路由 exports = module.exports = function(app) { app.get("/", routes.views.index); // 在路由之前,通過(guò)中間件做任何事情 app.get("/protected", middleware.requireUser, middleware.other, routes.views.protected); }配置
keystone提供了很多可配置項(xiàng),你可以隨心所欲地根據(jù)自己的需求配置,要了解Keystone支持的更多選項(xiàng),請(qǐng)參見配置指南。
配置需要修改的文件是keystone.js
項(xiàng)目結(jié)構(gòu)|--lib | 定制的庫(kù)和代碼 |--models | 程序的數(shù)據(jù)庫(kù)模型 |--public | 公開的靜態(tài)文件 (css、js、images等) |--routes | |--api | | 程序的api控制器 | |--views | | 程序的視圖控制器 | |--index.js | | 初始化程序的路由和視圖 | |--middleware.js | | 為路由定制的中間件 |--templates | |--includes | | 通用的 .jade 組件放這里 | |--layouts | | 基礎(chǔ) .jade 布局放這里 | |--mixins | | 通用的 .jade mixins放這里 | |--views | | 程序的視圖模板 |--updates | 數(shù)據(jù)組裝和遷移腳本 |--package.json | 給npm的項(xiàng)目配置 |--keystone.js | 啟動(dòng)程序的主腳本缺點(diǎn)
keystone強(qiáng)大的自動(dòng)生成的管理后臺(tái),也是給我使用限制的地方,支持增刪改查、上傳文件等基礎(chǔ)功能,但是在一些業(yè)務(wù)定制下卻有失靈活性,或許是我研究不透,目前官方也沒有給出對(duì)后臺(tái)管理定制的文檔,后續(xù)我將研究下如何深度定制管理后臺(tái),如果可行的話再來(lái)分享。
參考中文文檔:http://keystonejs.com/zh/docs/
項(xiàng)目地址:https://github.com/keystonejs/keystone
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/78970.html
摘要:使用時(shí)遇到一個(gè)問(wèn)題后臺(tái)使用做富文本編輯器,但其只提供了插入網(wǎng)絡(luò)圖片的功能,而不能上傳和管理本地圖片,好在提供了選項(xiàng)來(lái)為添加插件,開搞一在編輯器中添加插件上傳圖片插件下載插件并放到靜態(tài)目錄下配置在中增加如下配置項(xiàng)上傳圖片的上傳圖片插件二后臺(tái) 使用keystone時(shí)遇到一個(gè)問(wèn)題:keystone后臺(tái)使用tinymce做富文本編輯器,但其只提供了插入網(wǎng)絡(luò)圖片的功能,而不能上傳和管理本地圖片,...
摘要:在執(zhí)行如下命令之后如果你的電腦沒有裝,那么執(zhí)行就會(huì)出現(xiàn)如下的顯示不是內(nèi)部或外部命令,也不是可運(yùn)行的程序或批處理文件。是制作的生成器需要,官網(wǎng)是。使用來(lái)生成網(wǎng)站,如果沒有安裝的話,需要使用進(jìn)行安裝。解決方法安裝后即可 在terminal執(zhí)行如下命令之后 npm install -g generator-keystone 如果你的電腦沒有裝yo,那么執(zhí)行 yo keystone 就會(huì)出...
摘要:是一款基于任務(wù)的設(shè)計(jì)模式的自動(dòng)化工具,能給你的開發(fā)效率來(lái)一次飛躍。示例配置實(shí)現(xiàn)完整的自動(dòng)編譯并刷新網(wǎng)頁(yè)官方網(wǎng)站使用文檔插件列表 Gulp 是一款基于任務(wù)的設(shè)計(jì)模式的自動(dòng)化工具,能給你的開發(fā)效率來(lái)一次飛躍。 在很多場(chǎng)合都會(huì)聽到前端工和 node 程師推薦 Grunt 來(lái)實(shí)現(xiàn)項(xiàng)目的自動(dòng)化,自動(dòng)化可以自動(dòng)完成 javascript/coffee/sass/less 等文件的的測(cè)試、檢查、合并...
摘要:旨在記錄自己的學(xué)習(xí)過(guò)程,方便日后遇到問(wèn)題是及時(shí)查閱復(fù)習(xí),另一方面也希望能幫助像筆者一樣從來(lái)沒使用過(guò)的人快速熟悉。 這篇文章主要記錄的是本人學(xué)習(xí)使用IntelliJ IDEA的筆記,可能不是特別的詳細(xì)。旨在記錄自己的學(xué)習(xí)過(guò)程,方便日后遇到問(wèn)題是及時(shí)查閱復(fù)習(xí),另一方面也希望能幫助像筆者一樣從來(lái)沒使用過(guò)IDEA的人快速熟悉IDEA。文章錯(cuò)誤之處還請(qǐng)各位大佬批評(píng)指正。(文末有本人的微信公眾號(hào),...
摘要:發(fā)布本周正式發(fā)布,包含了一系列的特性提升與問(wèn)題修復(fù),同時(shí)也在不斷致力于將打造地更為輕巧與高性能。當(dāng)然,姜振勇老師還會(huì)介紹的多種服務(wù),包括大數(shù)據(jù)網(wǎng)絡(luò)和安全,展現(xiàn)彈性安全和高可擴(kuò)展性的全方位能力。 showImg(http://upload-images.jianshu.io/upload_images/1647496-2ce7598e6987d9af.jpg?imageMogr2/aut...
閱讀 1538·2023-04-26 00:25
閱讀 923·2021-09-27 13:36
閱讀 934·2019-08-30 14:14
閱讀 2185·2019-08-29 17:10
閱讀 1018·2019-08-29 15:09
閱讀 1954·2019-08-28 18:21
閱讀 971·2019-08-26 13:27
閱讀 984·2019-08-26 10:58