一.ajax
后台
# 通过flask框架搭建后台 from flask import Flask, request # 创建一个服务器对象 app = Flask(__name__) # 解决ajax请求的跨域问题 from flask_cors import CORS CORS(app, supports_credentials = True) # 设置处理请求的功能(路由route => 接口) # 设置一个主页路由,对应一个处理主页的功能方法,返回主页信息 @app.route('/') def home_action(): return '<h1 style = "color: red">主页</h1>' # 为ajax登录请求配置一个处理登录的功能 @app.route('/login') def login_action(): # 拿到前台数据,进一步判断处理 # 需要: 需要账号与密码,匹配成功与否决定返回结果 user = request.args['user'] # 'user'是规定前台需要传入数据的key pwd = request.args['pwd'] # print(user) if user == 'abc' and pwd == '123': return "登录成功" return "登录失败" # 启动服务(该文件作为自启文件) if __name__ == '__main__': app.run(port = '8888')
前台
<h1>请登录</h1> <form class = "fm"> <input id = "user" type = "text" name = "user" placeholder = "请输入用户名"> <input id = "pwd" type = "password" name = "pwd" placeholder = "请输入密码"> <input class = "sbm" type = "submit" value = "提交..."> </form>
// 取消表单的默认事件 $(.fm).submit(function() { return false; }) // 表单提交完成的是ajax请求 $('.sbm').click(function () { // 前提: 准备发送的数据 var user = $('#user').val(); var pwd = $('#pwd').val(); // 1.通过ajax发生请求,获得后台响应的结果 // 2.用得到的结果来局部渲染页面内容 $.ajax({ url: "http://127.0.0.1:8888/login",//接口 data: { // 数据 user: user, pwd: pwd }, success: function (data) { // 结果 // 2. doSomething(data); } }) }) // 处理结果数据的功能 function doSomething(data) { // console.log(data) $('h1').text(data) }
二.bootstrap
引入
<head>
<! -- 在head标签上部导入bs的css-->
<link rel = "stylesheet" href = "bootstrap-3.3.7-dist/css/bootstrap.css">
<! -- 再导入自定义修改的css -->
<link rel = "stylesheet" href= "css/my.css">
</head>
<body>
<! -- html代码结构 -->
..
<! -- bs的脚本依赖于jq,所以要提前导入jq-->
<! -- 脚本逻辑尽量放在html结构之下-->
<script src = "js/jquery-3.3.1.js"></script>
</body>
容器
<!--总结; 两种容器(container | container-fluid)默认都有左右15px padding> <! --固定宽度容器(采用响应式布局)--> <div class = "container"> <!-- 行: .row, 可以取消容器的默认左右15px padding> <div class = "row"> <h1 class = "bg-info">标题</h1> </div> </div> <! --动态宽度布局(采用流式布局)--> <div class = "container-fluid"> <div class = "row"> <h1 class = "bg-info">标题</h1> </div> </div>