實戰 vue仿dos命令介面

關注[前端小謳]，閱讀更多原創技術文章

// 引入koa

const router =

require

("koa-router");

// 引入koa-router

newkoa()

;// 建立koa應用

const router =

newrouter()

;// 建立路由，支援傳遞引數

const bodyparser =

require

("koa-bodyparser");

// 處理post請求

use(

bodyparser()

);// 配置post bodyparser的中介軟體

const cors =

require

("koa-cors");

// 設定跨域

use(

cors()

);// 全部允許跨域

const iconv =

require

("iconv-lite");

// iconv進行轉碼

iconv.skipdecodewarning =

true

;const child_process =

require

("child_process");

// 對exec進行封裝，返回乙個promise物件，便於處理

function

doshellcmd

(cmd)

;return

newpromise

(function

(resolve, reject)

,function

( err,

stdout,

stderr

);if

(result.data.data ==="")

』不是內部或外部命令，也不是可執行的程式或批處理檔案`;}

resolve

(result);}

else

;resolve

(result);}

});}

);}// api

router.

post

("/koa/action/doshellcmd"

,async ctx =>);

use(router.

routes()

);listen

(3000);

console.

log(

);接著本地啟動這個服務~

import axios from

"@/libs/api.request"
;// 這裡是封裝好的axios，若未封裝可單獨引入並使用
// 執行命令語句
export
const
doshellcmd
= data =>);
};

="cmd-dialog"

title=
"常用工具"
:visible.sync=
"dialo**isiblecmd"
top=
"10vh"
@close=
"closecmd"
>
輸入命令：
"command"
@keyup.enter.native=
"optioncmd"
:disabled=
"contentloading"
style=
"width:300px"
>
<
/el-input>
"warning"
size=
"medium"
@click=
"rescontent='';command=''"
:disabled=
"contentloading"
style=
"float:right"
>清空<
/el-button>
"success"
size=
"medium"
@click=
"optioncmd"
:disabled=
"contentloading"
style=
"float:right;margin-right:10px"
>執行<
/el-button>
"rescontent"
v-loading=
"contentloading"
element-loading-text=
"連線中"
element-loading-spinner=
"el-icon-loading"
element-loading-background=
"rgba(0, 0, 0, 0.8)"
style=
"margin:20px 0 10px 0;white-space:pre-wrap;background:#000;color:#fff;padding:10px;height:400px;overflow:auto"
>
<
/p>
<
/el-dialog>
<
/template>
import
from
"@/api/cmd"
;export
default;}
,  methods:
,// 執行ssh
async
optioncmd()
)).data.data;
this
.contentloading =
false;}
,// 關閉dialog
closecmd()
}};<
/script>

在VUE專案中編寫仿dos命令列介面

效果如下 首先用乙個div作為dos命令視窗並且放入element的卡片中，然後在div中寫入ul序列以及input輸入框 可自己進行優化 card class box card style background black color white max height 27.2em overflo...

Vue實戰篇（Vue仿今日頭條）

vue也弄了一段時間了,前段時間一直想用vue寫個移動端,加之年底也不是很忙,於是前幾天便著手開始弄了,到今天為止也算是勉強能看了 因為也是純粹的寫寫前端頁面,所以資料方面用的是mock.js,為了真實的模擬請求,可以直接在 easy mock 自己生成api也可直接登陸我這專案的easy mock...

Vue2仿錘子商城實戰專案專案實戰

目錄,j7 x y m i p5 h 01 專案介紹.mp4 02 環境配置及目錄結構.mp4 03 商品列表頁的布局.mp4 04 商品列表套資料.mp4 n s w7 x s9 y8 s d5 h 05 商品頁元件.mp45 s l g r l v h 06 商品加入購物車.mp4 x9 n1 ...