Vue+element+axios+tornado前后端一体化开发环境配置笔记

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

本系列文章由ex_net(张建波)编写,转载请注明出处。

作者:张建波 邮箱: 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!

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章