在與客戶的溝通中，聆聽了許多建議，學習到了很多知識，也收到過贊美與批評，在經過千錘百煉過后 總結了一點點經驗
首先：
框架選擇
網站css框架選擇（簡潔，節約成本，快速開發）
對于一些簡單靜態網站，展示類網站項目，達到快速開發建站，而又節約成本人力的情況下 選擇一些用于css庫的框架最為合適，
1.Bootstrap
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
預處理工具 雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，但是不要忘記，Bootstrap 的源碼是采用最流行的 CSS 預處理工具
一個框架、多種設備。 你的網站和應用能在 Bootstrap 的幫助下通過同一份源碼快速、有效地適配手機、平板和 PC 設備，這一切都是 CSS 媒體 查詢（Media Query）的功勞。
功能完備 Bootstrap 提供了全面、美觀的文檔，你能在這里找到關于普通 HTML 元素、HTML 和 CSS 組件以及 jQuery 插件方面的所有詳細文檔。
Bootstrap 是最受歡迎的 CSS 框架，被認為是擁有最好的響應性的CSS框架。專為前端開發而設計，有助于構建web設計理念、移動優先項目、網格系統、排版和按鈕等。
2.layui
開源模塊化前端 UI 框架
開源模塊化前端 UI 框架
由職業前端傾情打造，面向全層次的前后端開發者，易上手開箱即用的 Web UI 組件庫
Layui 是一款采用自身模塊規范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。
3.Semantic-UI
Semantic 是一個開發框架，可以使用人性化的 HTML 幫助創建漂亮的響應式布局。Semantic UI 旨在使網站構建過程更加語義化。核心特征是利用自然語言原理使代碼更易于閱讀，更容易理解。
4.Pure
Pure 非常輕量級，經過壓縮后不過 3.8KB。這是一個特別為移動端考慮的框架，為了壓縮大小，每一行代碼都經過仔細考量。當然如果你不使用框架給出的全部模塊，體量還可以更小。
5.Skeleton
Skeleton 如其名字，非常小巧，設計簡約，麻雀雖小五臟俱全。網格系統，文本，表單，按鈕，列表，表格，媒體查詢等功能面面俱到。非常適合快速創建簡約網站的需求。
快速搭建
為客戶節省時間成本， 并滿足客戶快速建站的需求，開發過程中 使用到css模塊化,html也應簡潔實用。
在我們最初學習寫頁面的時候，大家都學過怎么去寫 css，也就以下幾種情況：
我們在不斷摸索中，逐漸形成了以編寫內嵌樣式和外部樣式為主要的編寫習慣。
讀到這里大家肯定有所疑問，為什么不建議使用行內樣式？
使用行內樣式的缺點
然后我們繼續剖析一下，為什么不建議使用導入樣式？
經測試，在 css 中使用 @import 會有以下兩種情況：
1、在 IE6-8 下，@import 聲明指向的樣式表并不會與頁面其他資源并發加載，而是等頁面所有資源加載完成后才開始下載。
2、如果在 link 標簽中去 @import 其他 css，頁面會等到所有資源加載完成后，才開始解析 link 標簽中 @import 的 css。
使用導入樣式的缺點 - 導入樣式，只能放在 style 標簽的第一行，放其他行則會無效。 - @import 聲明的樣式表不能充分利用瀏覽器并發請求資源的行為，其加載行為往往會延后觸發或被其他資源加載掛起。 - 由于 @import 樣式表的延后加載，可能會導致頁面樣式閃爍。
隨著時間的不斷發展，我們逐漸發現，編寫源生的 css 其實并不友好，例如：源生的 css 不支持變量，不支持嵌套，不支持父選擇器等等，這些種種問題，催生出了像 sass/less 這樣的預處理器。
預處理器主要是強化了 css 的語法，彌補了上文說了這些問題，但本質上，打包出來的結果和源生的 css 都是一樣的，只是對開發者友好，寫起來更順滑。
隨著前端工程化的不斷發展，越來越多的工具被前端大佬們開發出來，愿景是把所有的重復性的工作都交給機器去做，在 css 領域就產生了 postcss。
postcss 可以稱作為 css 界的 babel，它的實現原理是通過 ast 去分析我們的 css 代碼，然后將分析的結果進行處理，從而衍生出了許多種處理 css 的使用場景。
常用的 postcss 使用場景有：
隨著 react、vue 等基于模塊化的框架的普及使用，我們編寫源生 css 的機會也越來越少。我們常常將頁面拆分成許多個小組件，然后像搭積木一樣將多個小組件組成最終呈現的頁面。
但是我們知道，css 是根據類名去匹配元素的，如果有兩個組件使用了一個相同的類名，后者就會把前者的樣式給覆蓋掉，看來解決樣式命名的沖突是個大問題。
為了解決這個問題，產生出了 CSS 模塊化的概念。
你如果遇到如上問題，那么就很有必要使用 css 模塊化。
BEM 的意思就是塊（block）、元素（element）、修飾符（modifier）。是由 Yandex 團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的 css 類對其他開發者來說更加透明而且更有意義。
BEM 的命名規范如下：
/* 塊即是通常所說的 Web 應用開發中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。 */ .block { } /* 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。 */ .block__element { } /* 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之后，會有不同的外觀 */ .block--modifier { }通過 bem 的命名方式，可以讓我們的 css 代碼層次結構清晰，通過嚴格的命名也可以解決命名沖突的問題，但也不能完全避免，畢竟只是一個命名約束，不按規范寫照樣能運行。
CSS Modules 指的是我們像 import js 一樣去引入我們的 css 代碼，代碼中的每一個類名都是引入對象的一個屬性，通過這種方式，即可在使用時明確指定所引用的 css 樣式。
并且 CSS Modules 在打包的時候會自動將類名轉換成 hash 值，完全杜絕 css 類名沖突的問題。
使用方式如下：
1、定義 css 文件。
.className { color: green; } /* 編寫全局樣式 */ :global(.className) { color: red; } /* 樣式復用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }2、在 js 模塊中導入 css 文件。
import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 3、配置 css-loader 打包。
CSS Modules 不能直接使用，而是需要進行打包，一般通過配置 css-loader 中的 modules 屬性即可完成 css modules 的配置。
// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定義 hash 名稱 localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 4、最終打包出來的 css 類名就是由一長串 hash 值生成。
._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }CSS in JS，意思就是使用 js 語言寫 css，完全不需要些單獨的 css 文件，所有的 css 代碼全部放在組件內部，以實現 css 的模塊化。
CSS in JS 其實是一種編寫思想，目前已經有超過 40 多種方案的實現，最出名的是 styled-components。
使用方式如下：
import React from "react"; import styled from "styled-components"; // 創建一個帶樣式的 h1 標簽 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 創建一個帶樣式的 section 標簽 const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // 通過屬性動態定義樣式 const Button = styled.button` background: ${props => (props.primary ? "palevioletred" : "white")}; color: ${props => (props.primary ? "white" : "palevioletred")}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // 樣式復用 const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 可以看到，我們直接在 js 中編寫 css，案例中在定義源生 html 時就創建好了樣式，在使用的時候就可以渲染出帶樣式的組件了。
除此之外，還有其他比較出名的庫：
最后放一張總結好的圖。
下一篇我們講一下主流js框架 與js開發
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：知乎 作者：孟思行
原文鏈接：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
現在是互聯網逐漸發展，已經出現了很多可以供自己寫博客的網站，大家可以在上面 發表自己的文章，供自己記錄或者是供他人閱讀。但是，可不可以自己搭建一個只屬于自己的個人博客網站呢？這篇文章就帶你從0開始搭建一個自己的個人博客網站，并部署到屬于自己服務器。這里有一點要說的是，沒有服務器的同學使用自己機器的linux系統也是一樣的操作。我們選用一個很好用的博客框架Hexo進行搭建我們的個人博客。
Hexo是一個快速，簡介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可生成一個靜態網頁展示我們發布的文章，同時也提供了大量精美的博客主題供我們使用。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]](https://img-blog.csdnimg.cn/20210526204228907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
我們使用Centos7系統作為演示，使用其他linux系統也是可以的，只需要更換為對應Linux版本的軟件安裝命令即可。
1.安裝Git
直接使用yum安裝即可，在命令行輸入 yum -y install git
完成之后輸入git version 查看是否安裝成功，如果顯示git版本信息即為成功，如下：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]](https://img-blog.csdnimg.cn/2021052620425035.png)
2.安裝Node.js
Node.js是一種運行在服務端的JavaScript，是一個基于Chrome JavaScript運行時建立的一個平臺。
Hexo基于Node.js，所以安裝Node.js是必須的一個操作，安裝步驟如下：
2.1：下載安裝包：
wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz
2.2：解壓縮軟件包并配置環境變量：
#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環境變量生效
2.3：測試是否安裝成功：
在命令行輸入node -v 和 npm -v，若是顯示出了版本號，即為安裝成功：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]](https://img-blog.csdnimg.cn/20210526204418535.png)
3.安裝并使用Hexo
Hexo的安裝較為簡單，使用如下命令安裝
npm install -g hexo-cli #這里有一點要注意的就是，npm的源是在國外的，訪問可能會很慢，這里可以換成我們國內的源進行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]](https://img-blog.csdnimg.cn/20210526204930856.png)
3.1：初始化Hexo
上面的安裝完成之后執行下面的命令進行對Hexo進行一個初始化
#這個文件名字可以自己指定，之后會在當前目錄下生成對應文件夾 hexo init <文件名字> cd 文件名字 npm install
可以看到安裝好之后的一個目錄結構：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]](https://img-blog.csdnimg.cn/20210526204949450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
目錄文件說明：
_config.yml：網站的配置信息，您可以在此配置大部分的參數。
package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。
scaffolds：模版文件夾。當您新建文章時Hexo 會根據 scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。
source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。
themes：主題 文件夾。Hexo 會根據主題來生成靜態頁面。
查看hexo的版本以及對應的數據：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]](https://img-blog.csdnimg.cn/20210526205007939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
3.2生成靜態文件，并開啟Hexo服務：
進入到了hexo的安裝目錄之后，使用hexo generate來生成靜態文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動服務，操作如下：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]](https://img-blog.csdnimg.cn/20210526205023957.png)
可以看到4000端口的服務已經開啟，之后在你的瀏覽器輸入http://<你的linux機器的ip地址或者服務器公網地址>:4000,如下可以看到最開始的一個界面：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]](https://img-blog.csdnimg.cn/20210526205035279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
4.初步使用Hexo：
使用前，我們對我們的站點進行一個配置，也就是我們創建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：
# Site
title: QIMING.INFO #博客網站的標題
subtitle: #博客網站的副標題
description: #你的網站描述
keywords: #網站的關鍵詞
author: #作者的名字
language: #博客網站使用的語言
timezone: #網站時區
我自己的修改如下供大家參考，這里的修改沒有太大的限制：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]](https://img-blog.csdnimg.cn/20210526210405679.png)
4.1：開始使用Hexo發布自己的第一篇博客！
執行下面的目錄創建一篇新文章：
hexo new post <文章標題>
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]
這里我創建了一篇標題為First_Blog的博客，創建之后hexo目錄下面的source/_post文件夾下會產生一個First_Blog.md的文件
4.2:編輯文章
進入到上面說的那個目錄下可以看到我們創建的博客文件：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]](https://img-blog.csdnimg.cn/20210526210424359.png)
直接使用vim或者vi就可以對我們的博客文章進行編輯了，打開此First_Blog.md后可以看到—分隔的區域，這部分主要對文章進行標注變量，如下：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]](https://img-blog.csdnimg.cn/20210526210437302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
title：標題
tage：標簽
categories：分類
date：時間
這些標注大家在-----區域可以進行使用
4.3：發布文章
輸入如下命令，生成靜態網頁，靜態網頁會存放在public文件下
hexo g
hexo s
之后就可以去瀏覽器訪問了！可以看到我們發布的文章已經成功在瀏覽器顯示，到這里個人博客網站就已經成功搭建了。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]](https://img-blog.csdnimg.cn/20210526210506192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
5.主題的選擇：
主題網站：https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇，選擇喜歡的主題，在hexo目錄下的themes文件夾下使用git clone下載主題，之后再配置文件_config.yml把theme后面修改成下載的主題的名字，之后運行hexo clean ，hexo g即可看到生效的主題。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]](https://img-blog.csdnimg.cn/20210526210519406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
如果是有服務器的小伙伴，也可以將Hexo部署到服務器供全網訪問，服務器的購買這里就不多說，阿里云跟騰訊云上面對于學生也有較為優惠的價格。部署到服務器的話，就需要將上面的全部操作，在你的服務器系統上面執行，之后我們使用Nginx（反向代理服務器）進行部署。
Nginx安裝：
Nginx是一款高性能的 HTTP 和反向代理服務器，這里我們采用編譯安裝的方式,按照下面的指引依次執行命令
#安裝gcc編譯環境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應的版本下載下來之后上傳到我們的服務器，也可以使用wget直接下載 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install
下載編譯安裝nginx：
nginx下載官網：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #編譯指定安裝路徑需要進入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module 這是支持https的一個模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝
啟動nginx服務：
#啟動： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動 -c #測試： /usr/local/nginx/sbin/nginx -t #這個用于測試nginx的語法是否有問題 顯示is successful即為成功。 #關閉： /usr/local/nginx/sbin/nginx -s stop #繼續輸入以下命令使Nginx開機自動啟動： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf
之后我們需要配置服務器公網ip，編輯配置文件。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]](https://img-blog.csdnimg.cn/20210526210531881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
之后再重啟nginx服務，開啟hexo服務，這個時候使用公網的ip就可以訪問到我們的hexo服務了！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn 作者：YO哥教你大數據
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
第一步：
-
//安裝
-
npm install crypto-js --save-dev
第二步：在src目錄下新建個放公用js文件夾(common)，再建一個AES.js文件，例如：
第三步：在AES.js中填寫如下代碼，key密鑰長度則可以是128，192或256位（默認情況下是128位），正常情況下固定16位數即可
-
import CryptoJS from 'crypto-js';
-
-
export default {
-
//隨機生成指定數量的16進制key
-
generatekey(num) {
-
let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
let key = "";
-
for (var i = 0; i < num; i++) {
-
let randomPoz = Math.floor(Math.random() * library.length);
-
key += library.substring(randomPoz, randomPoz + 1);
-
}
-
return key;
-
},
-
-
//加密
-
encrypt(word, keyStr) {
-
keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345'; //判斷是否存在ksy，不存在就用定義好的key
-
var key = CryptoJS.enc.Utf8.parse(keyStr);
-
var srcs = CryptoJS.enc.Utf8.parse(word);
-
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
-
return encrypted.toString();
-
},
-
//解密
-
decrypt(word, keyStr) {
-
keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345';
-
var key = CryptoJS.enc.Utf8.parse(keyStr);
-
var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
-
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
-
}
-
-
}
第四步：在需要的地方引入
import AES from "@/common/AES.js";第五步：調用
-
// var keys = AES.generatekey(16);
-
-
//如果是對象/數組的話，需要先JSON.stringify轉換成字符串
-
// 不傳key值，就默認使用上述定義好的key值
-
-
var encrypts = AES.encrypt(JSON.stringify(cars));
-
var dess = JSON.parse(AES.decrypt(encrypts));
-
-
// var encrypts = AES.encrypt('1234asdasd');
-
// var dess = AES.decrypt(encrypts);
-
-
console.log(encrypts)
-
console.log(encrypts.length)
-
console.log(dess)
特別提示：當解密的時候是為空的時候（也沒有報錯），那么就一定是你的key長度不符合規范， 可以調整為key長度為16位。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先項目是基于vue開發的項目
需要引入js
import cryptoJs from 'crypto-js'
// DES加密
export const encryptDes = (message, key) => {
return cryptoJs.DES.encrypt(message, cryptoJs.enc.Utf8.parse(key), {
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
}).toString()
}
package com.huihui.until;
import java.security.SecureRandom;
import java.util.Scanner;
import javax.crypto.Cipher;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.DESKeySpec;
import org.apache.commons.codec.binary.Base64;
/**
* <b>類說明：DES</b>
* <p>
* <b>詳細描述：</b>
* @since 2019年3月31日 下午17:00:16
*/
public class DESCryptUtil {
private static final String DES = "DES";
public static final String desKey = "ba54ee44";
public static String doEncrypt(String plainMessage, String hexDesKey) throws Exception {
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = plainMessage.getBytes();
return Base64.encodeBase64URLSafeString(desCrypt(desKey, desPlainMsg, Cipher.ENCRYPT_MODE));
}
/**
* 獲取解密后的字符串
* @param hexEncryptMessage
* @param hexDesKey
* @return
* @throws Exception
*/
public static String doDecrypt(String hexEncryptMessage, String hexDesKey) throws Exception{
if (hexEncryptMessage == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
byte desPlainMsg[] = Base64.decodeBase64(hexEncryptMessage);
return new String(desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE));
}
/**
* 獲取解密后的數組
* @param desPlainMsg
* @param hexDesKey
* @return
* @throws Exception
*/
public static byte[] doDecryptByte(byte[] desPlainMsg, String hexDesKey) throws Exception{
if (desPlainMsg == null) {
return null;
}
byte desKey[] = hexDesKey.getBytes();
return desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE);
}
private static byte[] desCrypt(byte[] desKey, byte[] desPlainMsg, int CipherMode) throws Exception{
try {
SecureRandom sr = new SecureRandom();
DESKeySpec dks = new DESKeySpec(desKey);
SecretKeyFactory keyFactory = SecretKeyFactory.getInstance(DES);
javax.crypto.SecretKey key = keyFactory.generateSecret(dks);
Cipher cipher = Cipher.getInstance(DES);
cipher.init(CipherMode, key, sr);
return cipher.doFinal(desPlainMsg);
} catch (Exception e) {
String message = "";
if (CipherMode == Cipher.ENCRYPT_MODE) {
message = "DES\u52A0\u5BC6\u5931\u8D25";
} else {
message = "DES\u89E3\u5BC6\u5931\u8D25";
}
throw new Exception(message, e);
}
}
/**
* 獲取8位的key
* @param str
* @return
*/
public static String processString(String str) {
if(str==null||"".equals(str)) {
return "";
}
StringBuilder sb = new StringBuilder();
for(int i=0;i<8;i++) {
int index = i<<2&(32-i);
sb.append(str.charAt(index));
}
return sb.toString();
}
public static void main(String[] args) throws Exception{
DESCryptUtil se=new DESCryptUtil();
for (int i = 0; i < 5; i++) {
Scanner scanner=new Scanner(System.in);
/*
* 加密
*/
System.out.println("請輸入要加密的內容:");
String content = scanner.next();
System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
/*
* 解密
*/
System.out.println("請輸入要解密的內容:");
content = scanner.next();
System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
}
}
}
這是我是在在線生成公鑰私鑰的網站中生成了自己的公鑰私鑰用來測試
前臺
import JsEncrypt from 'jsencrypt'
// RSA加密
export function encryptRsa(publickey, message) {
const rsa = new JsEncrypt()
rsa.setPublicKey(publickey)
return rsa.encrypt(message)
}
后臺
package com.huihui.until;
import org.apache.commons.codec.binary.Base64;
import com.googosoft.config.GlobalConstants;
import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.KeyPair;
import java.security.KeyPairGenerator;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.interfaces.RSAPrivateKey;
import java.security.interfaces.RSAPublicKey;
import java.security.spec.PKCS8EncodedKeySpec;
import java.security.spec.X509EncodedKeySpec;
import java.util.HashMap;
import java.util.Map;
public class RSAUtil {
private static Map<Integer, String> keyMap = new HashMap<Integer, String>(); //用于封裝隨機產生的公鑰與私鑰
public static void main(String[] args) throws Exception {
//生成公鑰和私鑰
genKeyPair();
//加密字符串
String message = "df723820";
//GlobalConstants.PUBLICKEY 公鑰加密
String messageEn = encrypt(message,GlobalConstants.PUBLICKEY);
System.out.println(message + "\t加密后的字符串為:" + messageEn);
//GlobalConstants.PRIVATEKEY 私鑰解密
String messageDe = decrypt(messageEn,GlobalConstants.PRIVATEKEY);
System.out.println("還原后的字符串為:" + messageDe);
}
/**
* 隨機生成密鑰對
* @throws NoSuchAlgorithmException
*/
public static void genKeyPair() throws NoSuchAlgorithmException {
// KeyPairGenerator類用于生成公鑰和私鑰對，基于RSA算法生成對象
KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance("RSA");
// 初始化密鑰對生成器，密鑰大小為96-1024位
keyPairGen.initialize(1024,new SecureRandom());
// 生成一個密鑰對，保存在keyPair中
KeyPair keyPair = keyPairGen.generateKeyPair();
RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate(); // 得到私鑰
RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic(); // 得到公鑰
String publicKeyString = new String(Base64.encodeBase64(publicKey.getEncoded()));
// 得到私鑰字符串
String privateKeyString = new String(Base64.encodeBase64((privateKey.getEncoded())));
// 將公鑰和私鑰保存到Map
keyMap.put(0,publicKeyString); //0表示公鑰
keyMap.put(1,privateKeyString); //1表示私鑰
}
/**
* RSA公鑰加密
*
* @param str
* 加密字符串
* @param publicKey
* 公鑰
* @return 密文
* @throws Exception
* 加密過程中的異常信息
*/
public static String encrypt( String str, String publicKey ) throws Exception{
//base64編碼的公鑰
byte[] decoded = Base64.decodeBase64(publicKey);
RSAPublicKey pubKey = (RSAPublicKey) KeyFactory.getInstance("RSA").generatePublic(new X509EncodedKeySpec(decoded));
//RSA加密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.ENCRYPT_MODE, pubKey);
String outStr = Base64.encodeBase64String(cipher.doFinal(str.getBytes("UTF-8")));
return outStr;
}
/**
* RSA私鑰解密
*
* @param str
* 加密字符串
* @param privateKey
* 私鑰
* @return 銘文
* @throws Exception
* 解密過程中的異常信息
*/
public static String decrypt(String str, String privateKey) throws Exception{
//64位解碼加密后的字符串
byte[] inputByte = Base64.decodeBase64(str.getBytes("UTF-8"));
//base64編碼的私鑰
byte[] decoded = Base64.decodeBase64(privateKey);
RSAPrivateKey priKey = (RSAPrivateKey) KeyFactory.getInstance("RSA").generatePrivate(new PKCS8EncodedKeySpec(decoded));
//RSA解密
Cipher cipher = Cipher.getInstance("RSA");
cipher.init(Cipher.DECRYPT_MODE, priKey);
String outStr = new String(cipher.doFinal(inputByte));
return outStr;
}
}
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.nodejs接收上傳的圖片主要是使用formidable模塊，服務器是使用的express搭建。
引入formidable
var formidable = require('./node_modules/formidable');
攔截請求，設置formidable的常規項
app.post("/image",function (req,res) { var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = path.join(__dirname + "/../page/upload"); form.keepExtensions = true;//保留后綴 form.maxFieldsSize = 2 * 1024 * 1024; });
解析圖片，重命名圖片名稱，返回給前端
//處理圖片 form.parse(req, function (err, fields, files){ console.log(files.the_file); var filename = files.the_file.name var nameArray = filename.split('.'); var type = nameArray[nameArray.length - 1]; var name = ''; for (var i = 0; i < nameArray.length - 1; i++) { name = name + nameArray[i]; } var date = new Date(); var time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes(); var avatarName = name + time + '.' + type; var newPath = form.uploadDir + "/" + avatarName; fs.renameSync(files.the_file.path, newPath); //重命名 res.send({data:"/upload/"+avatarName}) })
完整代碼如下
var path = require("path"); var fs = require("fs"); var express =require("./node_modules/express"); var app=express(); var bodyParser = require('./node_modules/body-parser'); var formidable = require('./node_modules/formidable'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); app.use(express.static(__dirname + "./../page")); app.listen("8083",function () { console.log("服務啟動") }); //攔截請求 app.post("/image",function (req,res) { var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = path.join(__dirname + "/../page/upload"); form.keepExtensions = true;//保留后綴 form.maxFieldsSize = 2 * 1024 * 1024; //處理圖片 form.parse(req, function (err, fields, files){ console.log(files.the_file); var filename = files.the_file.name var nameArray = filename.split('.'); var type = nameArray[nameArray.length - 1]; var name = ''; for (var i = 0; i < nameArray.length - 1; i++) { name = name + nameArray[i]; } var date = new Date(); var time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes(); var avatarName = name + time + '.' + type; var newPath = form.uploadDir + "/" + avatarName; fs.renameSync(files.the_file.path, newPath); //重命名 res.send({data:"/upload/"+avatarName}) }) });
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
PM2是node進程管理工具，可以利用它來簡化很多node應用管理的繁瑣任務，如性能監控、自動重啟、負載均衡等，而且使用非常簡單。
全局安裝
npm install -g pm2
挑express應用來舉例。一般我們都是通過npm start啟動應用，其實就是調用node ./bin/www。那么，換成pm2就是
注意，這里用了–watch參數，意味著當你的express應用代碼發生變化時，pm2會幫你重啟服務(長時間監測有可能會出現問題，這時需要重啟項目)
pm2 start ./bin/www –watch
參數說明：
–watch：監聽應用目錄的變化，一旦發生變化，自動重啟。如果要精確監聽、不見聽的目錄，最好通過配置文件。
-i –instances：啟用多少個實例，可用于負載均衡。如果-i 0或者-i max，則根據當前機器核數確定實例數目。
–ignore-watch：排除監聽的目錄/文件，可以是特定的文件名，也可以是正則。比如–ignore-watch=”test node_modules “some scripts”“
-n –name：應用的名稱。查看應用信息的時候可以用到。
-o –output ：標準輸出日志文件的路徑。
-e –error ：錯誤輸出日志文件的路徑。
–interpreter ：the interpreter pm2 should use for executing app (bash, python…)。比如你用的coffee script來編寫應用。
完整命令行參數列表：地址
pm2 start app.js –watch -i 2
pm2 restart app.js
停止特定的應用?？梢韵韧ㄟ^pm2 list獲取應用的名字（–name指定的）或者進程id。
pm2 stop app_name|app_id
如果要停止所有應用，可以
pm2 stop all
pm2 stop app_name|app_id
pm2 stop all
pm2 list
pm2 start app.js –watch
*這里是監控整個項目的文件
除了可以打開日志文件查看日志外，還可以通過pm2 logs來查看實時日志。
pm2 logs
pm2 save # 記得保存進程狀態
npm install pm2 -g
pm2 update
附pm2命令：
$ npm install pm2 -g # 命令行安裝 pm2 $ pm2 start app.js -i 4 # 后臺運行pm2，啟動4個app.js # 也可以把'max' 參數傳遞給 start # 正確的進程數目依賴于Cpu的核心數目 $ pm2 start app.js --name my-api # 命名進程 $ pm2 list # 顯示所有進程狀態 $ pm2 monit # 監視所有進程 $ pm2 logs # 顯示所有進程日志 $ pm2 stop all # 停止所有進程 $ pm2 restart all # 重啟所有進程 $ pm2 reload all # 0 秒停機重載進程 (用于 NETWORKED 進程) $ pm2 stop 0 # 停止指定的進程 $ pm2 restart 0 # 重啟指定的進程 $ pm2 startup # 產生 init 腳本 保持進程活著 $ pm2 web # 運行健壯的 computer API endpoint (http://localhost:9615) $ pm2 delete 0 # 殺死指定的進程 $ pm2 delete all # 殺死全部進程
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先
了解chattr命令：
Linux chattr命令用于改變文件屬性。
這項指令可改變存放在ext2文件系統上的文件或目錄屬性，這些屬性共有以下8種模式：
a：讓文件或目錄僅供附加用途。
b：不更新文件或目錄的最后存取時間。
c：將文件或目錄壓縮后存放。
d：將文件或目錄排除在傾倒操作之外。
i：不得任意更動文件或目錄。
s：保密性刪除文件或目錄。
S：即時更新文件或目錄i。
u：預防意外刪除。
我們主要用的是 i 的模式
第二：
切換到 .user.ini 目錄
第三：
使用命令 chattr -i .user.ini 解除文件不可更動屬性，之后就可以修改/刪除.user.ini這個文件了
第四：
chattr +i .user.ini 重新恢復文件不可更動屬性
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這里用到的 等于(=)， 還有更多的條件 大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)....
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
需要對應的js代碼和css樣式，大家可以通過www.htmldrive.net平臺下載，也可以在我文章的底部下載。對應的資源如下，將資源引入頁面（別忘了JQuery）：
注意：jQuery最好使用1.3版本的，有些版本行不通，親測1.8版本不行
HTML代碼：
js代碼：
-
$(".test").imgbox({
-
'speedIn': 500,
-
'speedOut': 500,
-
'alignment': 'center',
-
'overlayShow': true,
-
'allowMultiple': false,
-
'autoScale': true
-
});
效果：
講解：
以上例子中，我們只用了一行js代碼“$(".test").imgbox();”，就實現了圖片彈出放大效果。這是因為在jquery.imgbox.js中imgbox()函數有默認的參數。當我們調用函數但沒有傳遞參數時，會加載默認的參數，顯示默認效果和樣式。
如果覺得默認樣式不合適，有兩種方式進行修改：1、修改jquery.imgbox.js中imgbox()函數的默認參數；2、調用imgbox()函數時，給參數賦值。
-
//在jquery.imgbox.js中，默認參數如下，可以修改：
-
$.fn.imgbox.defaults = {
-
padding : 10,
-
alignment : 'auto', // auto OR center
-
allowMultiple : true,
-
autoScale : true,
-
speedIn : 500,
-
speedOut : 500,
-
easingIn : 'swing',
-
easingOut : 'swing',
-
zoomOpacity : false,
-
overlayShow : false,
-
overlayOpacity : 0.5,
-
hideOnOverlayClick : true,
-
hideOnContentClick : true
-
};
參數的含義：
padding：彈窗中圖片的邊框，0為沒有邊框。
alignment：彈窗的位置，“auto”或“center”，默認情況下，它從縮略圖所在方向擴展彈窗
allowMultiple：如果選true，允許多個彈出窗口同時打開
autoScale：如果為true，彈窗會自適應窗口的大小
speedIn、speedOut:打開彈窗和關閉彈窗的速度，單位：毫秒
zoomOpacity：如果為true，會在彈窗縮放時改變透明度
overlayShow：如果為true，會有遮罩層（默認為false；遮罩層的顏色在css中設置）
overlayOpacity:遮罩層的透明度（取值范圍0~1）
hideOnOverlayClick：當點擊遮罩層時，關閉彈窗
hideOnContentClick：當點擊圖片時，關閉彈窗
轉載自：https://blog.csdn.net/kangnan00/article/details/72518352
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
uni-app 代碼
選擇圖片代碼（uniapp 代碼示例）
uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } });
tempFilePaths 為選擇圖片res 里面的其中一個對象
注意：uniapp 上傳圖片不能上傳選中的File 文件（tempFiles這個數組的東西不能夠上傳） 要上傳（tempFilePaths）讀取圖片后數組的 此數組可以用來瀏覽，上傳
選擇圖片加上傳圖片代碼
*多圖上傳注意 files 數組 對象不能直接傳 tempFilePaths這個數組 必須要更改
let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; }
uni.chooseImage({ count: 9, success: (res) => { //上傳文件的臨時路徑 const tempFilePaths = res.tempFilePaths; let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } const tempFilePaths = res.tempFilePaths; console.log(res); uni.uploadFile({ url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles, filePath: tempFilePaths[0], files: img , name: 'file', success: (uploadFileRes) => { console.log(uploadFileRes) uni.hideLoading(); if (back.status == "0") { console.log(that.host + back.filepath[0]) that.editorCtx.insertImage({ src: that.host + back.filepath[0], alt: '圖像', success: function() {} }) } else { console.log(back.msg); } }, fail: () => { uni.hideLoading(); console.log('圖片上傳失敗，請聯系開發'); } }); } })
var express = require("express"); //Express框架 const multer = require("multer"); // multer中間件上傳圖片 接收文件post數據 // 設置文件上傳的地方 let storage = multer.diskStorage({ destination: (req: any, file: any, cb: Function) => { cb(null, "./StaticResource/pudate/"); }, filename: (req: any, file: any, cb: Function) => { cb(null, Date.now() + "-" + file.originalname); }, }); let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上傳的文件 app.use(multerObj.any()); // 存放所有的類型文件 //設置跨域訪問 app.all("*", (req: any, res: any, next: Function) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild" ); res.header( "Access-Control-Allow-Headers", "content-type,SelfSummerHeader,Authorization" ); //自定義請求頭 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=UTF-8"); res.header("Content-Type", "text/xml"); if (req.method === "OPTIONS" || req.url === "/favicon.ico") { // 攔截請求 return res.send(); } next(); }); app.listen(COMPort, (err: Error) => { if (err) { console.log('啟動錯誤', err) } console.table({ 端口: COMPort, IP: systemOs.IP(), 服務地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`, 靜態資源: `IP端口地址加上文件名`, 描述: `Node服務已啟動成功`, "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代碼轉為js代碼可以正常使用)`, }); // 掛載自定義中間件 app.use(middleware_router.bodyData); }); router.all( "/pudatefiles", (req: { files: { path: string }[] }, res: any, next: any) => { let data: Array<string> = []; console.log(req.files); req.files?.forEach((item: any) => { let url = item?.path.replace(/\\/g, "/"); data.push(url?.replace("StaticResource", "")); }); res.sendSuccess(data, "上傳成功"); } );
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://www.syprn.cn