• 項(xiàng)目構(gòu)想與準(zhǔn)備

• 搭建python服務(wù)器

• 前端頁(yè)面

• 后臺(tái)邏輯實(shí)現(xiàn)

一、項(xiàng)目構(gòu)想與準(zhǔn)備

目標(biāo)：使用python+codeMirror制作一款類(lèi)似菜鳥(niǎo)教程的在線編譯器。

1.1項(xiàng)目架構(gòu)

1.2 開(kāi)發(fā)環(huán)境

windows系統(tǒng)

python 3.7.1

mingw-get-setup

1.3技術(shù)棧

bootstrap構(gòu)建前端頁(yè)面

codeMirror代碼編輯器插件

flask框架搭建后端服務(wù)器

1.4 環(huán)境準(zhǔn)備

安裝mingw-get-setup,下載地址：

https://sourceforge.net/projects/mingw/

安裝成功后安裝gcc,具體操作參考：

https://www.cnblogs.com/liangliangge/p/14737419.html

確保能在windows下運(yùn)行g(shù)cc命令。

二、搭建python服務(wù)器

2.1新建項(xiàng)目

使用python自帶的venv新建虛擬環(huán)境。

激活虛擬環(huán)境，安裝flask，本項(xiàng)目采用pycharm開(kāi)發(fā)，因此在settings配置項(xiàng)中選擇當(dāng)前目錄下的venv下的python.exe。

安裝命令：pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask

新建server.py,書(shū)寫(xiě)如下代碼：

運(yùn)行命令，flask run開(kāi)啟服務(wù)。

訪問(wèn)：http://127.0.0.1:5000

到此，服務(wù)端先告一段落。

三、前端邏輯與代碼實(shí)現(xiàn)

3.1項(xiàng)目中引入bootstrap

在bootstrap官網(wǎng)中下載bootstrap3.4.1,并將代碼包放在項(xiàng)目目錄下。

3.2在pages下新建index.html頁(yè)面引入bootstrap.

3.3使用bootstrap構(gòu)建前端頁(yè)面

3.4添加codeMirror代碼編輯器

下載地址：https://codemirror.net/5/

添加到項(xiàng)目中

頁(yè)面引入

注意引入的順序

3.5 首頁(yè)路由加載頁(yè)面

設(shè)置模板文件夾和靜態(tài)資源文件夾，引入render_template，渲染靜態(tài)模板

修改頁(yè)面靜態(tài)資源路徑

3.6 獲取代碼發(fā)送服務(wù)端

點(diǎn)擊run按鈕獲取代碼

渲染獲取結(jié)果

四、服務(wù)端處理代碼

import subprocess
@app.route("/compiler/",methods=['post'])
def compiler():
    content = request.data
    with open("./test.c",'w',encoding='utf-8') as f:
        f.write(str(content,'utf-8'))
    cmd_order = 'gcc test.c -o test.out && test.out'
    cmd_p = subprocess.Popen(cmd_order, shell=True, stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
    cmd_result = ""
    for i in cmd_p.stdout.readlines():
        cmd_result += i.decode()
    return cmd_result

代碼地址：git@gitee.com:amyliyanice/c-editor-online.git

牛牛IT充電站

日常分享熱門(mén)、有趣和實(shí)用的編程技術(shù)與編程案例，包括：嵌入式、物聯(lián)網(wǎng)、小程序、python、C/C++、JS、CSS、Nodejs、PHP等。

審核編輯 ：李倩