1.使用node http-server 起本地服务器  或者打开nginx 直接用nginx的默认页面也可以 (用下面的html文件替换nginx下html文件夹下的index.html)

http-server -p 8888

然后在浏览器打开 localhost:8888 打开页面 
jQuery ajax 请求数据

<!DOCTYPE html>
<html>
<head>
<title>node</title>
</head>
<body>
<p id="text">jquery 请求数据</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function get(){
$.ajax({
type:'get',
//url: 'localhost: 8081/docs/',//由于 服务启动的8888端口请求 8081端口 跨域,用nginx配置跨域
url: '/docs/',
success:function(data){
$('#text').html(data.data)
},
error:function(err){
console.log(err);
}
})
} </script>
<input type="hidden" id="dat3" value="3">
<button onClick="get()">请求数据</button>
</body>
</html>
2.由于 服务启动的8888/80端口请求 8081端口 跨域,用nginx配置跨域 nginx下载
 server {
listen 80;
server_name localhost; #charset koi8-r; access_log logs/host.access.log; location / { root html;
index index.html index.htm; } location ^~ /docs/ {
proxy_pass http://localhost:8081;
}
3.python接口文件 新建api.py 在bash下打开  python api.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import pymysql #导入 pymysql
import urllib2 import json
from urlparse import parse_qs
from wsgiref.simple_server import make_server #打开数据库连接
def get_data():
db= pymysql.connect(host="localhost",user="root",
password="",db="user",port=3306) # 使用cursor()方法获取操作游标
cur = db.cursor() #1.查询操作
# 编写sql 查询语句 user 对应我的表名
sql = "select * from users"
# results =
try:
cur.execute(sql) #执行sql语句 results = cur.fetchall() #获取查询的所有记录
# print("id","name","password")
#遍历结果
for row in results :
id = row[0]
name = row[1]
password = row[2]
# print(id,name,password)
return results
except Exception as e:
raise e
finally:
db.close() #关闭连接 # 定义函数,参数是函数的两个参数,都是python本身定义的,默认就行了。 def application(environ, start_response):
# 定义文件请求的类型和当前请求成功的code
start_response('200 OK', [('Content-Type', 'text/html')])
# environ是当前请求的所有数据,包括Header和URL,body,这里只涉及到get
# 获取当前get请求的所有数据,返回是string类型
params = parse_qs(environ['QUERY_STRING'])
# 获取get中key为name的值
name = params.get('name', [''])[0]
no = params.get('no', [''])[0] # 组成一个数组,数组中只有一个字典
# dic = {'name': 'name', 'no': 'no'}
   #dic = get_data() dic = {'data':[ { 'a' : ['',''], 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5 } ]} # dic = get();
return [json.dumps(dic)] if __name__ == "__main__":
  url = '127.0.0.1' # 监听的请求url
port = 8081 #监听的端口 只要是8081端口的都会返回数据,下面请求的url加了/docs/ 是nginx 匹配的需要
# httpd = make_server("0.0.0.0", port, application)
httpd = make_server(url, port, application)
print "serving http on port {0}...".format(str(port))
httpd.serve_forever()

配置ok 点击打开页面请求下 是不是 是不是请求到数据了
数据自定义 不用再求后端修改接口了。

有问题 欢迎来指点。

python 前后端分离 简单的数据库返回接口的更多相关文章

  1. 前后端分离,如何防止api接口被恶意调用或攻击

    无论网站,还是App目前基本都是基于api接口模式的开发,那么api的安全就尤为重要了.目前攻击最常见的就是“短信轰炸机”,由于短信接口验证是App,网站检验用户手机号最真实的途径,使用短信验证码在提 ...

  2. SpringBoot+Shiro+JWT前后端分离实现用户权限和接口权限控制

    1. 引入需要的依赖 我使用的是原生jwt的依赖包,在maven仓库中有好多衍生的jwt依赖包,可自己在maven仓库中选择,实现大同小异. <dependency> <groupI ...

  3. thinkphp 前后端分离

    thinkphp 前后端分离 简单记录一下之前学习tp的历程吧. 前端HTML页面渲染 <?php namespace app\index\controller; use think\Contr ...

  4. 巨蟒python全栈开发flask8 MongoDB回顾 前后端分离之H5&pycharm&夜神

    1.MongoDB回顾 .启动 mongod - 改变data/db位置: --dbpath D:\data\db mongod --install 安装windows系统服务 mongod --re ...

  5. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十 || AOP面向切面编程浅解析:简单日志记录 + 服务切面缓存

    代码已上传Github+Gitee,文末有地址 上回<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之九 || 依赖注入IoC学习 + ...

  6. 采用异步来实现重新连接服务器或者重新启动服务 C#中类的属性的获取 SignalR2简易数据看板演示 C#动态调用泛型类、泛型方法 asp .net core Get raw request. 从壹开始前后端分离[.NetCore 不定期更新] 38 ║自动初始化数据库

    采用异步来实现重新连接服务器或者重新启动服务 开启异步监听,不会导致主线程的堵塞,在服务异常断开后一直检测重新连接服务,成功连接服务后通知各个注册的客户端! #region 检测断线并重连OPC服务 ...

  7. SpringBootSecurity学习(12)前后端分离版之简单登录

    前后端分离 前面讨论了springboot下security很多常用的功能,其它的功能建议参考官方文档学习.网页版登录的形式现在已经不是最流行的了,最流行的是前后端分离的登录方式,前端单独成为一个项目 ...

  8. Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之十 || AOP面向切面编程浅解析:简单日志记录 + 服务切面缓存

    本文梯子 本文3.0版本文章 代码已上传Github+Gitee,文末有地址 大神反馈: 零.今天完成的深红色部分 一.AOP 之 实现日志记录(服务层) 1.定义服务接口与实现类 2.在API层中添 ...

  9. spring security简单教程以及实现完全前后端分离

    spring security是spring家族的一个安全框架,入门简单.对比shiro,它自带登录页面,自动完成登录操作.权限过滤时支持http方法过滤. 在新手入门使用时,只需要简单的配置,即可实 ...

随机推荐

  1. 字节顺序标记——BOM,Byte Order Mark

    定义 BOM(Byte Order Mark),字节顺序标记,出现在文本文件头部,Unicode编码标准中用于标识文件是采用哪种格式的编码.     介绍 UTF-8 不需要 BOM,尽管 Unico ...

  2. select option 选中 取消js

    今天在写select option标签的过程中遇到一个问题,就是刷新页面自己选中的标签回显选择的值,清空表单,下拉选择默认的值: 1.这是默认的下拉框: 2.自己定义的下拉选项,红色方框中主要处理第一 ...

  3. FTP:500 OOPS: failed to open vsftpd log file:/var/log/vsftpd.log

    如下:从10.12.8.165 FTP 到 10.1.3.34,报failed to open vsftpd log[a4_csbdc@localhost ~]$ ftp  10.1.3.34Conn ...

  4. MVC模式和MVP模式的区别

    MVC模式: 1. MVC的所有通信都是单向的. 2. view传送指令到controller(用户也可以直接将指令传到controller). 3. controller完成业务逻辑后要求model ...

  5. python的出生

    1.语言的种类 机器语言------>汇编语言------>高级语言 高级语言按转换方式分为两类: 解释类:执行方式类似于我们日常生活中的“同声翻译”,应用程序源代码一边由相应语言的解释器 ...

  6. 使用CURL进行模拟登录

    在信息采集的时候,要采集的站点可能需要登录,这样使用简单的采集方式(例如file_get_contents)就无法做到了,我们可以利用PHP的CURL扩展库来进行模拟登录,下面给出代码示例: < ...

  7. Java集合类框架的最佳实践有哪些?

    1.根据应用需要正确选择要使用的集合类型对性能非常重要,比如:假如知道元素的大小是固定的,那么选用Array类型而不是ArrayList类型更为合适. 2.有些集合类型允许指定初始容量.因此,如果我们 ...

  8. 一、JAVA变量类型:②局部变量

    局部变量声明在方法.构造方法或者语句块中: public class Test{ public void pupAge(){ int age = 0; //定义age为方法pupAge中的局部变量,并 ...

  9. Qml和C++开发的学生信息管理软件一

    一个月前接触到了Qml,也做过一些练习,但只能实现动画和简单的布局功能,逻辑部分和数据处理很难上手,看到许多人将C++和结合起来,Qml负责界面设计,C++实现逻辑处理,但将C++注册到 Qml中一直 ...

  10. 《TypeScript 中文入门教程》

    转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...