Vue+element+axios+tornado前後端一體化開發環境配置筆記

Vue+element+axios+tornado開發環境配置筆記

本系列文章由ex_net（張建波）編寫，轉載請註明出處。

http://blog.csdn.net/ex_net/article/details/103688547

作者：張建波郵箱： [email protected] 電話：13577062679 歡迎來電交流！

一、相關技術概述

前端：Vue+element+axios

後端：tornado

（1）tornado

Tornado龍捲風是一個開源的網絡服務器框架，它是基於社交聚合網站FriendFeed的實時信息服務開發而來的。2007年由4名Google前軟件工程師一起創辦了FriendFeed，旨在使用戶能夠方便地跟蹤好友在Facebook和Twitter等多個社交網站上的活動。

特點

輕量級Web框架
異步非阻塞IO處理方式
Tornado採用的單進程單線程異步IO的網絡模式，其高性能源於Tornado基於Linux的Epoll（UNIX爲kqueue）的異步網絡IO。
出色的抗負載能力
不依賴多進程或多線程
WSGI全棧替代產品
WSGI把應用（Application）和服務器（Server）結合起來，Tornado既可以是WSGI應用也可以是WSGI服務。
既是WebServer也是WebFramework

（2）Vue+element+axios

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。

Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

二、Tornado 環境搭建

（1）安裝Python運行環境

https://www.python.org/

（2）安裝PyCharm CE 開發工具

Python的開發工具很多，但是我推薦使用PyCharmCE。而且【社區版】是免費的。用來做Python開發，尤其是斷點調試尤其方便。關鍵是插件少，基本不用安裝。

（3）安裝tornado

使用阿里巴巴的鏡像源安裝，這樣會加速

pip install tornado -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com
（4）新建2個py文件，敲入下面的代碼

MainCGI.py

import tornado.ioloop
import tornado.web
import logging
import time
import requests

import SytConfig



app_start = time.perf_counter()

app_start_time = time.time()

from logging.handlers import RotatingFileHandler
logger = logging.getLogger('MainECLP')
logger.setLevel(level = logging.DEBUG)
#定義一個RotatingFileHandler，最多備份3個日誌文件，每個日誌文件最大1K
rHandler = RotatingFileHandler(SytConfig.RotatingFile,maxBytes = 2*1024*1024,backupCount = 500,encoding='utf-8')
rHandler.setLevel(logging.DEBUG)
formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s')
rHandler.setFormatter(formatter)

console = logging.StreamHandler()
console.setLevel(logging.WARNING)
console.setFormatter(formatter)

logger.addHandler(rHandler)
logger.addHandler(console)


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")


def make_app():
    return tornado.web.Application([
        (r"/", MainHandler),
    ])


if __name__ == "__main__":
    app = make_app()
    app.listen(8888)
    logger.warning("ECLP Admin CGI Server started on 127.0.0.1,port 8888.....")
    tornado.ioloop.IOLoop.current().start()

SytConfig.py

RotatingFile = "log/log.txt"

(5)點擊Run運行代碼

(6)程序運行成功後提示

此時打開瀏覽器可以看到

至此Tornado龍捲風web server服務器搭建完成。下面我們開始搭建vue-element-axios環境

三、vue-element-axios環境搭建

說真心話vue-element-axios就像一大堆黑箱，也說不清究竟拉下來了多少代碼多少莫名其妙的東西。反正大家都是這麼用，我們也就只能這麼湊合了。

（1）安裝nodejs環境

http://nodejs.cn/

（2）安裝git

https://git-scm.com/

（3）安裝vscode開發工具

經過幾天的使用測試，感覺還是vscode好用些。推薦給大家。vscode需要安裝EsLint、Vetur、Prettier這3個插件。如果你不安裝也可以。

（4）安裝vue cli腳手架

爲啥稱呼腳手架？不太明白，不過習慣了就好。

npm install @vue/cli -g

推薦使用yarn global add @vue/cli

(5) 新建一個文件夾，並且用vscode 打開它

在vscdeo裏面的TERMINAL終端裏創建一個文件夾、並且cd進去

輸入： vue create vue-manage-system 創建一個vue管理系統項目

選擇自定義，然後選擇

OK，至此Vue CLI環境創建完畢，就等着拉代碼框架了。。。。。。

至此vue項目創建安裝完成

(6)安裝element庫

npm i element-ui -S 或 yarn add element-ui -S

推薦用yarn

安裝完畢後，打開main.js 添加下面的代碼

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

(7)安裝axios庫

yarn add axios -S

安裝完畢後，打開main.js添加下面的代碼

import axios from "axios";

//全局註冊，使用方法爲:this.$axios
Vue.prototype.$axios = axios;

(8)完整main.js代碼如下，方便大家覈對

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import axios from "axios";

//全局註冊，使用方法爲:this.$axios
Vue.prototype.$axios = axios;

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

(9)找到vue項目示例代碼About.vue

修改爲下面的代碼。

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary" @click="goMain()">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    goMain() {
      //alert("hello");
      this.$axios.get("/api").then(response => {
        this.info = response;
        console.log(response.data);
      });
    }
  }
};
</script>

四、把前端vue啓動

yarn serve