Vue+element+axios+tornado开发环境配置笔记

 

本系列文章由ex_net（张建波）编写，转载请注明出处。

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

作者：张建波 邮箱： 281451020@qq.com 电话：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

打开Chrome浏览器开发工具

成功的话，可以看到 tornado服务器返回的hello world!