整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。
昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。
建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。
示例代碼如下：
<form>
最高學歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。
向服務器提交時，name叫做"education"（教育），value對應不同層次。
頁面效果如下：
大家可以點點試試，每次只能有一個被選中。如圖：
綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
興趣愛好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>讀書
<input type = "checkbox" name = "hobby" value = "film"/>電影
<input type = "checkbox" name = "hobby" value = "painting"/>繪畫
<input type = "checkbox" name = "hobby" value = "music"/>音樂
<br>
最高學歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>頁面效果如下：
密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：
如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>頁面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁面效果如下：
點擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁面效果如下：用一個src導入圖片即可。
示例圖片：路徑自行設置即可！
為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：
<input type="reset" /><br>頁面如圖所示：
大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！
舉個例子，如圖：
下面我們點擊"重置"后效果如下：
form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！
type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。
button值以后在JavaScript部分還會細說，這里也先略過。
除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！
今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。
碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！
喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！
喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
為一名技術工作者, 我們經常會遇到編寫技術文檔, 技術分享等需求, 網上也有很多現成的文檔管理工具, 出于好奇心, 我拉著朋友一起實現了一個, 用來自給自足. 接下來就來介紹一下輕量級且靈活方便的文檔編輯工具—— powerNice.
powerNice 提供兩種方式來編寫文章/文檔, 即程序員最喜歡的 markdown, 也可以使用非技術人員最容易上手的富文本編輯器.
實現 powerNice 在線文檔編輯器我們采用如下核心技術棧: - React - Ant Design - Dva - For-editor - Braft-editor - Nodejs - 瀏覽器指紋識別技術
多模式編輯主要是指我們可以用富文本和md編輯器來編輯我們的文章, 我們采用最熟悉的 React 來實現, 效果如下:
2. 多主題
目前支持2套主題, 淺色和深色, 主要從用戶體驗的角度方便用戶夜間寫作. 效果如下: 1. 深色
2. 淺色
3. 支持一鍵導入導出
為了提高我們的寫作效率以及對文章的多路復用, 我們提供了一鍵導入導出文件等功能, 具體如下:
使用截圖如下:
下載的html內容預覽如下:
還原度還是非常高的~
4. 多模式預覽
多模式預覽主要是右側的預覽區, 我們支持手機端預覽和pc端預覽, 如下圖:
5. 字數行數統計
字數行數統計主要是幫助作者做內容統計, 這塊實現不是很難, 我們看看預覽效果:
6. 文章管理
文章管理主要是管理用戶編寫的內容, 這里因為我們做的是線上工具, 用戶識別主要采用瀏覽器指紋識別技術來區分用戶, 用戶可以輕松在編輯器文章列表中切換文章進行編輯, 效果如下:
核心技術實現
1. 導入導出多類型文件
{ name: 'file', showUploadList: false, beforeUpload(file: any): any { const reader = new FileReader() reader.onload = function(e: Event) { const data = (e as any).target.result if (editor === 'richText') { // ... } else { // ... } } reader.readAsText(file) }, }
核心代碼如下:
const doc = document.querySelector('.for-markdown-preview') as HTMLElement const html = createMDHtml(doc.innerHTML, article) file = new File([html], `${moment().format('YYYYMMDDHHmmss')}.html`, { type: 'text/html;charset=utf-8' }) // 下載文件 saveAs(file)
2. 基于瀏覽器指紋識別技術的用戶識別
瀏覽器指紋這塊知識點涉及的比較多, 筆者這里簡單介紹一下canvas指紋.
Canvas指紋是利用系統之間, 字體渲染引擎, 抗鋸齒、次像素渲染等處理方式的差異而實現的一種指紋識別技術. 我們使用canvas將同樣的文字轉成圖片, 即便使用Canvas繪制相同的元素，但由于上述的差別得到的結果也是不同的。
所以我們可以利用以上技術, 對不同用戶瀏覽器進行識別, 從而區分用戶(雖然存在概率事件), 實現無需登錄就能保存對應內容的目的. 基本實現代碼如下:
createFingerprint = () => { const canvas = document.getElementById('anchor-uuid') as HTMLCanvasElement const context = canvas.getContext('2d') as CanvasRenderingContext2D context.font = '18pt Arial' context.textBaseline = 'top' context.fillText('hello, user.', 2, 2) const fingerprint = canvas.toDataURL('image/jpeg') // hash const secret = 'nice' const hash = crypto.createHmac('sha256', secret) .update(fingerprint) .digest('hex') return hash }
大家也可以參考此方法來設計自己的指紋識別方案.
在線體驗: 傳送門
最后
目前筆者也在持續更新H5編輯器 H5-Dooring, 近期更新如下:
覺得有用 ？喜歡就收藏，在 “趣談前端”，發現更多有趣的H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.
想必你一定使用過易企秀或百度H5等微場景生成工具制作過炫酷的h5頁面，除了感嘆其神奇之處有沒有想過其實現方式呢？本文從零開始實現一個H5編輯器項目完整設計思路和主要實現步驟，并開源前后端代碼。有需要的小伙伴可以按照該教程從零實現自己的H5編輯器。（實現起來并不復雜，該教程只是提供思路，并非最佳實踐）
Github: https://github.com/huangwei9527/quark-h5
演示地址：http://47.104.247.183:4000/
演示帳號密碼均admin
編輯器預覽：
前端： vue: 模塊化開發少不了angular，react，vue三選一，這里選擇了vue。 vuex: 狀態管理 sass: css預編譯器。 element-ui：不造輪子，有現成的優秀的vue組件庫當然要用起來。沒有的自己再封裝一些就可以了。 loadsh：工具類
服務端： koa：后端語言采用nodejs，koa文檔和學習資料也比較多，express原班人馬打造，這個正合適。 mongodb：一個基于分布式文件存儲的數據庫，比較靈活。
1、了解vue技術棧開發 2、了解koa 3、了解mongodb
基于vue-cli3環境搭建
···
·
|-- client // 原 src 目錄，改成 client 用作前端項目目錄
|-- server // 新增 server 用于服務端項目目錄
|-- engine-template // 新增 engine-template 用于頁面模板庫目錄
|-- docs // 新增 docs 預留編寫項目文檔目錄
·
···
復制代碼這樣我們搭建起來一個簡易的項目目錄結構。
|-- client --------前端項目界面代碼
|--common --------前端界面對應靜態資源
|--components --------組件
|--config --------配置文件
|--eventBus --------eventBus
|--filter --------過濾器
|--mixins --------混入
|--pages --------頁面
|--router --------路由配置
|--store --------vuex狀態管理
|--service --------axios封裝
|--App.vue --------App
|--main.js --------入口文件
|--permission.js --------權限控制
|-- server --------服務器端項目代碼
|--confog --------數據庫鏈接相關
|--middleware --------中間件
|--models --------Schema和Model
|--routes --------路由
|--views --------ejs頁面模板
|--public --------靜態資源
|--utils --------工具方法
|--app.js --------服務端入口
|-- common --------前后端公用代碼模塊（如加解密）
|-- engine-template --------頁面模板引擎，使用webpack打包成js提供頁面引用
|-- docs --------預留編寫項目文檔目錄
|-- config.json --------配置文件
復制代碼編輯器的實現思路是：編輯器生成頁面JSON數據，服務端負責存取JSON數據，渲染時從服務端取數據JSON交給前端模板處理。
確認了實現邏輯，數據結構也是非常重要的，把一個頁面定義成一個JSON數據，數據結構大致是這樣的：
頁面工程數據接口
{
title: '', // 標題
description: '', //描述
coverImage: '', // 封面
auther: '', // 作者
script: '', // 頁面插入腳本
width: 375, // 高
height: 644, // 寬
pages: [], // 多頁頁面
shareConfig: {}, // 微信分享配置
pageMode: 0, // 渲染模式，用于擴展多種模式渲染，翻頁h5/長頁/PC頁面等等
}
復制代碼多頁頁面pages其中一頁數據結構：
{
name: '',
elements: [], // 頁面元素
commonStyle: {
backgroundColor: '',
backgroundImage: '',
backgroundSize: 'cover'
},
config: {}
}
復制代碼元素數據結構：
{
elName: '', // 組件名
animations: [], // 圖層的動畫,可以支持多個動畫
commonStyle: {}, // 公共樣式，默認樣式
events: [], // 事件配置數據，每個圖層可以添加多個事件
propsValue: {}, // 屬性參數
value: '', // 綁定值
valueType: 'String', // 值類型
isForm: false // 是否是表單控件，用于表單提交時獲取表單數據
}
復制代碼用戶在左側組件區域選擇組件添加到頁面上，編輯區域通過動態組件特性渲染出每個元素組件。
最后，點擊保存將頁面數據提交到數據庫。至于數據怎么轉成靜態 HTML方法有很多。還有頁面數據我們全部都有，我們可以做頁面的預渲染，骨架屏，ssr，編譯時優化等等。而且我們也可以對產出的活動頁做數據分析~有很多想象的空間。
編輯器核心代碼，基于 Vue 動態組件特性實現：
為大家附上 Vue 官方文檔：cn.vuejs.org/v2/api/#is
編輯畫板只需要循環遍歷pages[i].elements數組，將里面的元素組件JSON數據取出，通過動態組件渲染出各個組件，支持拖拽改變位置尺寸.
在client目錄新建plugins來管理組件庫。也可以將該組件庫發到npm上工程中通過npm管理
編寫組件，考慮的是組件庫，所以我們竟可能讓我們的組件支持全局引入和按需引入，如果全局引入，那么所有的組件需要要注冊到Vue component 上，并導出：
client/plugins下新建index.js入口文件
```
/**
* 組件庫入口
* */
import Text from './text'
// 所有組件列表
const components = [
Text
]
// 定義 install 方法，接收 Vue 作為參數
const install = function (Vue) {
// 判斷是否安裝，安裝過就不繼續往下執行
if (install.installed) return
install.installed = true
// 遍歷注冊所有組件
components.map(component => Vue.component(component.name, component))
}
// 檢測到 Vue 才執行，畢竟我們是基于 Vue 的
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
// 所有組件，必須具有 install，才能使用 Vue.use()
Text
}
```
復制代碼示例： text文本組件
client/plugins下新建text組件目錄
|-- text --------text組件
|--src --------資源
|--index.vue --------組件
|--index.js --------入口
復制代碼text/index.js
// 為組件提供 install 方法，供組件對外按需引入
import Component from './src/index'
Component.install = Vue => {
Vue.component(Component.name, Component)
}
export default Component
復制代碼text/src/index.vue
<!--text.vue-->
<template>
<div class="qk-text">
{{text}}
</div>
</template>
<script>
export default {
name: 'QkText', // 這個名字很重要，它就是未來的標簽名<qk-text></qk-text>
props: {
text: {
type: String,
default: '這是一段文字'
}
}
}
</script>
<style lang="scss" scoped>
</style>
復制代碼編輯器里使用組件庫：
// 引入組件庫
import QKUI from 'client/plugins/index'
// 注冊組件庫
Vue.use(QKUI)
// 使用：
<qk-text text="這是一段文字"></qk-text>
復制代碼按照這個組件開發方式我們可以擴展任意多的組件，來豐富組件庫
需要注意的是這里的組件最外層寬高都要求是100%
Quark-h5編輯器左側選擇組件區域可以通過一個配置文件定義可選組件 新建一個ele-config.js配置文件：
export default [
{
title: '基礎組件',
components: [
{
elName: 'qk-text', // 組件名，與組件庫名稱一致
title: '文字',
icon: 'iconfont iconwenben',
// 給每個組件配置默認顯示樣式
defaultStyle: {
height: 40
}
}
]
},
{
title: '表單組件',
components: []
},
{
title: '功能組件',
components: []
},
{
title: '業務組件',
components: []
}
]
復制代碼公共方法中提供一個function 通過組件名和默認樣式獲取元素組件JSON，getElementConfigJson(elName, defaultStyle)方法
公共樣式屬性編輯比較簡單就是對元素JSON對象commonStyles字段進行編輯操作
1.為組件的每一個prop屬性開發一個屬性編輯組件. 例如：QkText組件需要text屬性，新增一個attr-qk-text組件來操作該屬性 2.獲取組件prop對象 3.遍歷prop對象key, 通過key判斷顯示哪些屬性編輯組件
動畫效果引入Animate.css動畫庫。元素組件動畫,可以支持多個動畫。數據存在元素JSON對象animations數組里。
監聽mouseover和mouseleave，當鼠標移入時將動畫className添加入到元素上，鼠標移出時去掉動畫lassName。這樣就實現了hover預覽動畫
組件編輯時支持動畫預覽和單個動畫預覽。
封裝一個動畫執行方法
/**
* 動畫方法， 將動畫css加入到元素上，返回promise提供執行后續操作（將動畫重置）
* @param $el 當前被執行動畫的元素
* @param animationList 動畫列表
* @param isDebugger 動畫列表
* @returns {Promise<void>}
*/
export default async function runAnimation($el, animationList = [], isDebug , callback){
let playFn = function (animation) {
return new Promise(resolve => {
$el.style.animationName = animation.type
$el.style.animationDuration = `${animation.duration}s`
// 如果是循環播放就將循環次數置為1，這樣有效避免編輯時因為預覽循環播放組件播放動畫無法觸發animationend來暫停組件動畫
$el.style.animationIterationCount = animation.infinite ? (isDebug ? 1 : 'infinite') : animation.interationCount
$el.style.animationDelay = `${animation.delay}s`
$el.style.animationFillMode = 'both'
let resolveFn = function(){
$el.removeEventListener('animationend', resolveFn, false);
$el.addEventListener('animationcancel', resolveFn, false);
resolve()
}
$el.addEventListener('animationend', resolveFn, false)
$el.addEventListener('animationcancel', resolveFn, false);
})
}
for(let i = 0, len = animationList.length; i < len; i++){
await playFn(animationList[i])
}
if(callback){
callback()
}
}
復制代碼animationIterationCount 如果是編輯模式的化動畫只執行一次，不然無法監聽到動畫結束animationend事件
執行動畫前先將元素樣式style緩存起來，當動畫執行完再將原樣式賦值給元素
let cssText = this.$el.style.cssText;
runAnimations(this.$el, animations, true, () => {
this.$el.style.cssText = cssText
})
復制代碼提供事件mixins混入到組件，每個事件方法返回promise，元素被點擊時按順序執行事件方法
參考百度H5，將腳本以script標簽形式嵌入。頁面加載后執行。 這里也可以考慮mixins方式混入到頁面或者組件，可根據業務需求自行擴展，都是可以實現的。
將psd每個設計圖中的每個圖層導出成圖片保存到靜態資源服務器中，
服務端安裝psd依賴
cnpm install psd --save
復制代碼加入psd.js依賴，并且提供接口來處理數據
var PSD = require('psd');
router.post('/psdPpload',async ctx=>{
const file = ctx.request.files.file; // 獲取上傳文件
let psd = await PSD.open(file.path)
var timeStr = + new Date();
let descendantsList = psd.tree().descendants();
descendantsList.reverse();
let psdSourceList = []
let currentPathDir = `public/upload_static/psd_image/${timeStr}`
for (var i = 0; i < descendantsList.length; i++){
if (descendantsList[i].isGroup()) continue;
if (!descendantsList[i].visible) continue;
try{
await descendantsList[i].saveAsPng(path.join(ctx.state.SERVER_PATH, currentPathDir + `/${i}.png`))
psdSourceList.push({
...descendantsList[i].export(),
type: 'picture',
imageSrc: ctx.state.BASE_URL + `/upload_static/psd_image/${timeStr}/${i}.png`,
})
}catch (e) {
// 轉換不出來的圖層先忽略
continue;
}
}
ctx.body = {
elements: psdSourceList,
document: psd.tree().export().document
};
})
復制代碼最后把獲取的數據轉義并返回給前端，前端獲取到數據后使用系統統一方法，遍歷添加統一圖片組件
這里只需要注意下圖片跨域問題，官方提供html2canvas: proxy解決方案。它將圖片轉化為base64格式，結合使用設置(proxy: theProxyURL), 繪制到跨域圖片時，會去訪問theProxyURL下轉化好格式的圖片，由此解決了畫布污染問題。 提供一個跨域接口
/**
* html2canvas 跨域接口設置
*/
router.get('/html2canvas/corsproxy', async ctx => {
ctx.body = await request(ctx.query.url)
})
復制代碼在engine-template目錄下新建swiper-h5-engine頁面組件，這個組件接收到頁面JSON數據就可以把頁面渲染出來。跟編輯預覽畫板實現邏輯差不多。
然后使用vue-cli庫打包命令將組件打包成engine.js庫文件。ejs模板引入該頁面組件配合json數據渲染出頁面
提供兩種方案解決屏幕適配 1、等比例縮放 在將json元素轉換為dom元素的時候，對所有的px單位做比例轉換，轉換公式為 new = old * windows.x / pageJson.width，這里的pageJson.width是頁面的一個初始值，也是編輯時候的默認寬度，同時viewport使用device-width。 2.全屏背景， 頁面垂直居中 因為會存在上下或者左右有間隙的情況，這時候我們把背景顏色做全屏處理
頁面垂直居中只適用于全屏h5, 以后擴展長頁和PC頁就不需要垂直居中處理。
package.json中新增打包命令
"lib:h5-swiper": "vue-cli-service build --target lib --name h5-swiper --dest server/public/engine_libs/h5-swiper engine-template/engine-h5-swiper/index.js"
執行npm run lib:h5-swiper 生成引擎模板js如圖
ejs中引入模板
<script src="/third-libs/swiper.min.js"></script>
使用組件
<engine-h5-swiper :pageData="pageData" />
工程目錄上文已給出，也可以使用 koa-generator 腳手架工具生成
app.js
//配置ejs-template 模板引擎
render(app, {
root: path.join(__dirname, 'views'),
layout: false,
viewExt: 'html',
cache: false,
debug: false
});
復制代碼因為html2canvas需要圖片允許跨域，所以在靜態資源服務中所有資源請求設置'Access-Control-Allow-Origin':'*'
app.js
//配置靜態web
app.use(koaStatic(__dirname + '/public'), { gzip: true, setHeaders: function(res){
res.header( 'Access-Control-Allow-Origin', '*')
}});
復制代碼app.js
const fs = require('fs')
fs.readdirSync('./routes').forEach(route=> {
let api = require(`./routes/${route}`)
app.use(api.routes(), api.allowedMethods())
})
復制代碼app.js
const jwt = require('koa-jwt')
app.use(jwt({ secret: 'yourstr' }).unless({
path: [
/^\/$/, /\/token/, /\/wechat/,
{ url: /\/papers/, methods: ['GET'] }
]
}));
復制代碼middleware/formatresponse.js
module.exports = async (ctx, next) => {
await next().then(() => {
if (ctx.status === 200) {
ctx.body = {
message: '成功',
code: 200,
body: ctx.body,
status: true
}
} else if (ctx.status === 201) { // 201處理模板引擎渲染
} else {
ctx.body = {
message: ctx.body || '接口異常，請重試',
code: ctx.status,
body: '接口請求失敗',
status: false
}
}
}).catch((err) => {
if (err.status === 401) {
ctx.status = 401;
ctx.body = {
code: 401,
status: false,
message: '登錄過期，請重新登錄'
}
} else {
throw err
}
})
}
復制代碼當接口發布到線上，前端通過ajax請求時，會報跨域的錯誤。koa2使用koa2-cors這個庫非常方便的實現了跨域配置，使用起來也很簡單
const cors = require('koa2-cors');
app.use(cors());
復制代碼我們使用mongodb數據庫，在koa2中使用mongoose這個庫來管理整個數據庫的操作。
根目錄下新建config文件夾，新建mongo.js
// config/mongo.js
const mongoose = require('mongoose').set('debug', true);
const options = {
autoReconnect: true
}
// username 數據庫用戶名
// password 數據庫密碼
// localhost 數據庫ip
// dbname 數據庫名稱
const url = 'mongodb://username:password@localhost:27017/dbname'
module.exports = {
connect: ()=> {
mongoose.connect(url,options)
let db = mongoose.connection
db.on('error', console.error.bind(console, '連接錯誤:'));
db.once('open', ()=> {
console.log('mongodb connect suucess');
})
}
}
復制代碼把mongodb配置信息放到config.json中統一管理
const mongoConf = require('./config/mongo');
mongoConf.connect();
復制代碼... 服務端具體接口實現就不詳細介紹了，就是對頁面的增刪改查，和用戶的登錄注冊難度不大
npm run dev-client
復制代碼npm run dev-server
復制代碼注意： 如果沒有生成過引擎模板js文件的，需要先編輯引擎模板，否則預覽頁面加載頁面引擎.js 404報錯
npm run lib:h5-swiper*請認真填寫需求信息，我們會在24小時內與您取得聯系。
