服务器(环境linux)--Vue项目使用axios访问tornado后端
一.准备tornado项目tornado是什么就不多解释啦,这个看其他博客就好。1.python的基本环境的配置这些也很简单,pip installtornado就好,然后看看缺什么就pip install 什么。2.编写基本的tornado文件# coding:utf-8import tornado.webimport tornado.ioloopclass IndexHandler(torna
一.准备tornado项目
tornado是什么就不多解释啦,这个看其他博客就好。
1.python的基本环境的配置
这些也很简单,pip install tornado就好,然后看看缺什么就pip install 什么。
2.编写基本的tornado文件
# coding:utf-8
import tornado.web
import tornado.ioloop
class IndexHandler(tornado.web.RequestHandler):
"""主路由处理类"""
def get(self):
"""对应http的get请求方式"""
self.write("Hello Itcast!")
if __name__ == "__main__":
app = tornado.web.Application([
(r"/", IndexHandler),
])
app.listen(90)
# http_server = tornado.httpserver.HTTPServer(app)
#http_server.listen(8080)
tornado.ioloop.IOLoop.current().start()
命名为hello.py, 然后记得打开服务器的90端口!! 曾经因为忘记打开搞死我了
3.测试tornado项目能否被访问
在命令行输入
python hello.py
然后在浏览器输入 ip:端口号,我这里是ip:90,能正常访问就代表ok了
二.Vue项目的准备
1.安装Vue
这里就不多说,可以参考我之前的博客
linux(Ubuntu)搭建Vue开发环境
要上线就参考
linux(Ubuntu)下Vue部署到Nginx上
2.安装使用axios
使用 cnpm 安装 axios
命令行输入
cnpm install axios -S
然后在vue项目的入口文件(通常是main.js)中加上这两行代码
import axios from 'axios';
Vue.prototype.$axios = axios;
然后就可以使用axios编写函数啦,如get函数,主要获取数据
this.$axios({
method: 'get',
url: 'XXX',
params: {
memberName: _this.searchMessage,
provinceCode: JSON.stringify(_this.selectedProvince),
size: _this.pageSize
}
})
post函数
this.$axios({
method: 'post',
url: 'XXX',
data: {
id:'132',
memberId: this.orderId
}
})
注意,可能会遇到跨域问题
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:90’ is therefore not allowed access
这种的时候,可以参考我这个方法:
先找到前端 /config/index.js 配置文件(没有就自己创建)中的proxyTable:{ }
做出相应的修改
最后回到调用接口的 .vue 文件中 :
这时候重启前端服务:npm run dev
即可
这样就应该大功告成,完成了vue项目使用axios访问tornado后端啦。
更多推荐
所有评论(0)