cryptojsvue的簡單介紹

本文目錄一覽：

• 1、求大神指導，有沒有前端學習視頻，自己找了好多，感覺有點亂，覺得學的路線會錯
• 2、vue+typescript如何使用crypto-js
• 3、vue.js 怎麼設置md5加密？
• 4、web前端需要掌握的哪些知識
• 5、【uniapp】Vue.js CryptoJs 中的 3des 加密解密
• 6、關於 vue中使用crypto-js，進行DES 的加密解密

求大神指導，有沒有前端學習視頻，自己找了好多，感覺有點亂，覺得學的路線會錯

   1.首先零基礎學習前端先要有一個計劃，了解前端要學習哪些技術。

2.做好自己的時間規劃，如何快速入門前端那肯定是需要不斷的提高自己的學習效率，學習過程中盡量把手機調至靜音給自己一個安靜的學習環境和氛圍。

3.快速入門顧名思義肯定是少走彎路，在學習過程中看下自己身邊有沒有前端這方面的大神盡量多問，多交流，如果是沒有的話，可以多去找一些前端的交流群，學習肯定是不能閉門造車。

學習是一個循序漸進的過程，前端的學習也是如此。

不論前端開發還是後端開發的學習都要求我們多動手，既要反覆的看書，也把學習到的知識點第一時間去實踐。前端的學習入門快要三個月，慢的要 5-6 個月左右，看個人的理解速度來評估，只要入門了不論理解能力，還是學習的速度都會有明顯的提升。

在學習前端的過程中，除了要把學到的知識點第一時間去實踐，也要在學習的每個階段自己創建課題，用所學到的知識去實現課題的內容。這樣可以更好有助於理解和累計一定的項目經驗。

前端的學習從來不是孤軍奮戰，需要一個前輩的領路，也需要一個平台不斷交流和思維碰撞。這樣可以快速入門和少走彎路，也能讓自己發現問題的根本所在。

階段一

在學習前端之前呢，你需要一個編輯器，在網上你可以看到很多編輯器用來編寫前端，甚至 Windows 系統默認的文本文檔也可以作為前端代碼的編輯器。俗話說，沒有金剛鑽怎麼攬瓷器活，所以一個好的編輯器很重要，我在這裡推薦給大家的編輯器是 VSCode。

思維導圖

前端開發工具

一、HTML+CSS

前端的入門門檻是極低的，主要體現在 HTML 和 CSS 部分，運行環境就是瀏覽器，不像如 Java 需要配置開發/運行環境。

HTML 和 CSS 不是編程語言，HTML 是結構標籤，CSS 是結構標籤的樣式配置。

HTML

屬性

事件

標籤

字符集

CSS

CSS基礎教程

CSS樣式

CSS框模型

CSS定位

CSS選擇器

CSS高級

思維導圖

HTML+CSS以上內容的學習用時 20天左右，再花 2 天的時間項目實踐，這部分總花費時間在 22天左右。

二、HTML5+CSS3

HTML5 作為 HTML 的最新版本，引入了多項新技術，大大增強了對於應用的支持能力，使得Web技術不再局限於呈現網頁內容。

HTML5 可以使開發者的工作大大簡化，理論上單次開發就可以在不同平台藉助瀏覽器運行，降低開發的成本，這也是產業界普遍認為 HTML5 技術的主要優點之一。

CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進階版，拆分和增加了盒子模型、列表模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等。

CSS3的改變有很多，增加了文字特效，豐富了下劃線樣式，加入了圈重點的功能。在邊框方面，有了更多的靈活性，可以更加輕鬆地操控漸變效果和動態效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，並且網絡瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕鬆。

HTML5

HTML5視頻

HTML5音頻

HTML5拖放

HTML5畫布

HTML5 SVG

HTML5地理定位

HTML5 Web存儲

HTML5 應用緩存

HTML5表單

CSS3

CSS3邊框

CSS3背景

CSS3文本效果

CSS3字體

CSS3 2D轉換

CSS3 3D 轉換

CSS3 過渡

CSS3 動畫

CSS3 多列

思維導圖

HTML5+CSS以上內容用時 10 天左右，這部分內容是在 HTML+CSS 做的升級改進，只需要了解他們的一些特性即可，再結合這些特性做一些小項目加深學習。

請點擊輸入圖片描述

四、JavaScript

JavaScript 是 web 開發者必學的三種語言之一，這裡我們需要區別 JavaScript 和 Java 他們是完全不同的語言，不論是概念還是設計。javascript 部分需要我們學習的知識點如下所示：

認識JavaScript

基本語法

變量

數據類型

字符串

數字

布爾

數組

對象

Null

Undefined

5. 函數

內置函數

自定義哈數

6. 運算符

7. 流程控制

8. DOM對象

String

Array

Date

Boolean

Math

Number

9. BOM對象

WIndow

Navigator

Screen

History

Location

10. 綜合實例

思維導圖

javascript以上內容的學習用時 35天 左右，這裡推薦幾本 Javascript 的書籍，如下：

《JavaScript 高級程序設計（第3版）》，俗稱紅寶書。前七章講的是語言特性，是重點學習的部分，必須需要反覆閱讀，直至完全理解為止。DOM、事件流、表單、JSON、Ajax 與最後幾章也需要重點學習，這是一些常用的 Web API。至於本書的其餘部分大致讀一下就可以，不做重點要求。

《JavaScript 語言精粹》，俗稱蝴蝶書。很薄的一本書總頁數就 147 頁，花一天時間就能看完，快的話半天就能看完。這本書雖然很薄，但是承載的內容卻非常的豐厚和深入。JavaScript是一門有很多坑的語言，所以這本書”取其精華，去其糟粕“就是精粹了。

《你不知道的 JS》非常精彩的一本書，將 JavaScript 的細節一網打盡。

階段二

這部分內容是對 JavaScript 的補充學習

四、 Jquery學習

1. 基礎語法

2. 選擇器

基本選擇器

層次選擇器

過濾選擇器

表單選擇器

3. DOM操作

查找節點

創建節點

插入節點

刪除節點

複製節點

替換節點

包裹節點

屬性操作

樣式操作

4. 事件

事件綁定

事件冒泡

5. 動畫

show、hide

fadeIn、fadeOut

slideUp、slideDown

自定義動畫animate

動畫回調以及停止動畫

6. 常用工具

瀏覽器及特性檢測

數組和對象操作

Layer UI，主要學習柵格布局，圖標，動畫，按鈕，表單，導航，選項卡，進度條，面板，表格，時間線等

7. Ajax

8. Jquery插件編寫

思維導圖

請點擊輸入圖片描述

二、其他

JavaScript 進階

DOM+BOM綜合演練

網頁特效

ES6 進階

bootstrap

animate.css學習

請點擊輸入圖片描述

以上內容的學習用時 10天左右

階段三

這部分是框架和前後端交互技術的學習

一、Vue

Vue基礎

模版語法

計算屬性偵聽器

Class與Style綁定

條件/列表渲染

事件處理

表單輸入綁定

組件基礎、註冊

Prop

自定義事件

2. Vuex

State

Getter

Mutation

Action

Module

3. Vue-router

認識路由

動態路由

嵌套路由

編程式導航

路由組件傳參

4. axios

認識axios

全局配置

發送POST、GET請求等

思維導圖

請點擊輸入圖片描述

二、React

認識React

React元素渲染

JSX

組件

State

Props

事件處理

條件渲染

列表

組件API

組件聲明周期

思維導圖

三、Node

基礎

console（控制台）

crypto（加密）

debugger（調試器）

fs（文件系統）

http（網絡）

os（操作系統）

path（路徑）

2. 高級

NPM介紹及使用

MVC模式簡介

Express框架學習

鏈接Mysql

鏈接Redis

項目實戰

思維導圖

Node

四、webpack

概念

主要講什麼是入口，出口，loader，插件等

2. 入口

單個入口語法

對象語法

常見場景

3. 輸出

用法

多個入口起點

高級進階

4. 模式

development

production

5. loader

實例

配置

6. 插件

剖析

用法

配置

7. 配置

基本配置

多個Target

使用其他語言配置

8. 模塊

思維導圖

webpack

以上內容用時 兩個月 左右

階段四（擴展部分，了解即可）

一、Mysql

階段一

認識mysql

安裝mysql

創建數據庫、數據表

學習常用的SQL命令，完成增刪查改

2. 階段二

學習Mysql關聯查詢，子查詢等

學習Mysql常用函數

學習Mysql分組、分頁、排序等

3. 階段三

學習Mysql高級查詢

了解存儲過程，自定義函數等

了解Mysql配置文件

二、Redis

認識Redis

學習redis的數據類型

redis常用操作

redis事務

思維導圖

數據庫

以上內容用時 7 天左右

階段五

一、項目管理篇

SVN使用

認識svn

安裝

生命周期

啟動模式

創建版本庫

檢出操作

解決衝突

提交操作

版本回退

查看歷史

分支

標籤

2. GIT使用

認識git

安裝配置

工作流程

工作區、暫存區和版本庫

創建倉庫

基本操作

分支管理

查看歷史等

標籤

github

二、擴展部分

小程序

1. 了解小程序開發流程

2. 視圖容器

view

scroll-view

movable-view

cover-view

cover-image

3. 基礎內容

icon

text

rich-text

progress

4. 表單組件

button

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

5. 導航

navigator

function-page-navigator

6. 媒體組件

audio

image

video

camera

live-player

live-pusher

7. 地圖（map）

8. 畫布（canvas）

9. 開放能力

open-data

web-view

ad

official-account

apicloud（移動app開發）

認識apicloud

開發工具講解

端API

API對象

設備訪問

功能擴展

界面布局

導航菜單

小程序模塊

雲服務對接

4. 雲API

數據云API

統計雲API

推送雲API

雲API SDK

5. 小程序模塊使用

三、常用框架使用篇

iview （vue框架）

element ui （vue框架）

echarts (百度圖標庫)

阿里巴巴開源圖標使用

Sass學習

Swiper學習

zoom.js 學習

四、綜合項目實戰

教務管理系統（node+express+mysql）實現

思維導圖

擴展學習部分

參考資料：前端學習路線，如何學習前端

vue+typescript如何使用crypto-js

先說重點，如果要支持ie11，crypto的版本就一定要用我寫的

“@types/crypto-js”: “^4.0.2”,

“crypto-js”: “^4.0.0”,

① 安裝

npm install crypto-js@4.0.0 —-這個一定要用這個版本，或者更低一點，再低的我沒有試，反正這個是支持ie的-如果不考慮ie就忽略

npm install –save @types/crypto-js

②創建

好了 就這樣引入啦~

③使用

簡簡單單~ 就這樣吧~

vue.js 怎麼設置md5加密？

一，有關於JS md5加密：

下載包：

1：md5.js    ；

2： md4.js   ；

3： sha1.js。

二，使用MD5加密的方法：

下載md5.js文件，在網頁中引用該文件:

script type=”text/javascript” src=”md5.js” /script

三，在你需要使用MD5加密的地方如此調用:

script type=”text/javascript”

hash = hex_md5(“input string”);

/script

其他兩個算法類似。

用javascript加密的好處是可以在客戶端完成加密之後傳送到服務端，

即可以減輕服務端負擔，也可以保證傳輸的安全。

可以使用crypto-js插件來進行加密的。

我就說一下在node環境中使用吧（直接引入其實也差不多）

1，首先安裝crypto-js包：

一般加密的地方都是需要發送ajax，所以最好把ajax再封裝一下（這樣只要在這裡加密就可以了），將封裝的ajax文件掛到VUE全局方法（就是在在入口的地方使用Vue.prototype）

2，在ajax文件處引入下面兩個文件：

   var CryptoJS = require(“crypto-js/core”);var MD5 = require(“crypto-js/md5”) //或者使用ES6 importimport CryptoJS from ‘crypto-js/core’;import MD5 from ‘crypto-js/md5’;   

3，最後在需要使用的地方用這“CryptoJS.MD5（需要加密的值）”。

web前端需要掌握的哪些知識

一個合格的web前端需要掌握哪些技術？

最基礎的自然是JavaScript，HTML和css這三種語言。

首先了解下它們到底是什麼。

HTML是用戶看到的網頁的骨架，比如你會發現當前頁面分為左中右三個部分，其中還填充了不同的文字和圖片；每個子部分還會繼續細分，比如當前頁面的中間部分下方有輸入框等等。

CSS是網頁展示的細節控制，比如你會發現有的文字是紅底白色，有的子部分佔了頁面的二分之一寬，有的只佔六分之一，有些部分需要用戶進行某些操作（如點擊，滑動）才會出現等等，這些就是有CSS來控制。

JavaScript是負責捕捉用戶在瀏覽器上的操作，並與後端服務器進行數據交換的腳本語言。當用戶在前端進行點擊，輸入等操作的時候，會觸動綁定了該動作的JavaScript腳本，然後JavaScript收集數據，調用後端的api接口，再將後端返回的數據交給HTML和CSS渲染出來。

一個網頁的HTML代碼和CSS代碼是可以直接在瀏覽器中查看的，你可以直接按F12，就能看到下圖右側的模塊，左右側紅框就是代碼與實際頁面的對應關係。因此如果你看到某個網站的布局很不錯，不妨點擊F12，進行學習。

前端框架

然而，實際應用中，已經很少有正規的項目組直接用上述三種語言進行web 前端開發了，而是使用很多封裝了這三種語言的框架，比如

Vue.js

，angular，react native等等。它們是來自谷歌和Facebook的大神項目組，基於自己的經驗，封裝了原生前端語言，實現了更多更複雜更酷炫的功能。因此，可以說，學會使用這些框架，能達到事半功倍的效果。

比如用了vue，它是自底向上增量開發的設計，其核心只關心圖層，而且還可以與其他庫或已存項目融合，學習門檻極其友好；另一方面，vue可以驅動單文件組件和vue生態系統支持的庫開發的複雜單頁應用。有了這個生態系統，可以說，vue是處在一個不斷壯大，不斷完善的欣欣向榮的狀態。

網絡通信協議

由於前後端分離的趨勢，前端還需要了解很多網絡通信協議的知識，這裡不局限於http協議，因為據我的經驗，有時候我們還會用到websocket等協議。因此，前端需要簡單了解不同協議的特點以及使用方式，但是好消息是不用像學習計算機網絡課程一樣對每種協議的原理都了解的特別透徹，只要學會如何用前端語言發送這種協議的請求就夠了。

【uniapp】Vue.js CryptoJs 中的 3des 加密解密

或者手動導入工程里加密文件

注意加密方法是【TripleDES】不是【DES】

解密只支持 Base64 解密方式，如果是16進制的字符串，需要把16進制轉換成base64 再解密。

好多人寫完不知道加密的是否正確，下面提供一個 3des 加密例子

反之，解密後能獲取原字符串，即成功了。

如果你加密是下面的結果，那麼就是加密方式錯了，注意使用【CryptoJS.TripleDES】而不是【CryptoJS.DES】

使用DES加密方式的結果

關於 vue中使用crypto-js，進行DES 的加密解密

安裝: npm install crypto-js –save

在utils文件夾中新建secret.js文件，內容：

message: 需要加解密的文本

key: 加解密的秘鑰

iv: 偏移量，最短8位數，ecb模式不需要此參數

在vue頁面引入secret.js文件