AJAX BootStrap Vue

最新推荐文章于 2024-06-02 10:47:03 发布

weixin_40354992

最新推荐文章于 2024-06-02 10:47:03 发布

阅读量173

点赞数 1

分类专栏： 3-WEB 文章标签： js ajax vue

本文链接：https://blog.csdn.net/weixin_40354992/article/details/104439022

版权

这篇博客介绍了前端与后端的交互技术，包括使用AJAX进行局部请求，讲解了AJAX的请求步骤和常见响应码。同时，介绍了后端的Flask框架，阐述了如何安装、配置以及使用视图函数和路由。此外，还探讨了BootStrap的响应式布局和Vue.js的基础知识，如生命周期钩子和基本语法。

摘要由CSDN通过智能技术生成

AJAX
前端向后端请求的工具，跟后端服务器进行交互的
BootStrap
对CSS的封装
Vue基础
前后端进行分离来写前端项目的

flask

flask — Python web的框架写后台操作的框架
pip install flask

host 允许访问服务的ip地址 127.0.0.1 【仅允许自己访问默认的】 0.0.0.0 【允许所有的ip地址都可以访问】
port 这个服务的端口号默认的是5000

http://127.0.0.1:5000/
404 NOT Found

不知到定位的什么位置 — 路由
不知道该定位到哪个位置去请求数据
解决方案 ---- 给他定位的位置

视图函数+路由
在视图函数上绑定对应的路由使用该路由访问的时候
调用的是被修饰的视图函数在视图函数中将数据渲染到页面上或者返回给请求者

Debug mode: off
是否是调试模式默认是关闭的
开启调试模式的效果 — 修改东西之后会自动启动不用再手动启动服务
Environment: production
项目环境默认生产环境 ---- 项目已经完成了并且上线了进行推广了这个时候用的生产环境
环境应该改成开发环境

# 导入Flask类
from flask import Flask, render_template, request, jsonify

# 创建一个Flask对象
fls = Flask(__name__)
print(fls.config)
# 将环境设置为开发环境
fls.config["ENV"] = "development"
# 设置当前的模式为调试模式
fls.config["DEBUG"] = True

# 体现的是这个项目的入口
if __name__ == '__main__':
    #启动服务
    fls.run()

AJAX

客户端向服务器端进行数据请求
局部请求
MTV模式：

M — Model 数据
T — Template 模板 — 界面
V ----View 视图函数
将数据渲染到界面上的

AJAX是异步网络请求

异步请求 — 客户端发送一个请求之后无需等待即可发送另一个请求
同步请求 — 客户端向服务器端发送一个请求之后需要等该请求被服务器响应才可以发送下一个请求

请求的步骤

创建请求对象
与服务器建立连接
发送请求
注册监听监听服务器给该请求的响应
响应码
404 找不到请求的资源
403 服务器拒绝请求
200 请求成功
500 服务器崩了

注册

<head>
	<meta charset="utf-8">
	<title>注册</title>
	<style>
		.exist_name{
			color: red;
			/* 一开始的时候是隐藏的 */
			display: none;
		}
	</style>
</head>
<body>
	<form action="http://127.0.0.1:5000/register/" method="post">
		<p>用户名: <input type="text" name="uname" class="username">
			<span class="exist_name">用户名已存在</span>
		</p>
		<p>密码：<input type="text" name="upsw"></p>
		<p><input type="submit" value="注册"></p>
	</form>
	<script>
		// 用户名输入框
		var name_input = document.querySelector(".username")
		// 用户名是否存在的标记
		var span_node = document.querySelector(".exist_name")
		
		// 当他失去焦点的时候就发送这个请求
		name_input.onblur = function(){
			// 1.创建一个请求对象
			var xmlhttp;
			if (window.XMLHttpRequest)
			{
			    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			    xmlhttp = new XMLHttpRequest();
			}else{
			    // IE6, IE5 浏览器执行代码
			    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			// 2.与服务器之间建立连接
			// 请求方式 get  post
			// 请求连接的地址
			xmlhttp.open("GET", "http://127.0.0.1:5000/checkname/?uname=" + this.value)
			// 3.发送请求并传递数据
			xmlhttp.send()
			// 4. 注册监听
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 4){
					// 请求已被处理完成 而且 响应已经就绪
					if(xmlhttp.status == 200){
						// 请求成功 数据返回
						//console.log(xmlhttp.responseText)
						if(xmlhttp.responseText == "yes"){
							// 用户名已经存在了
							span_node.style.display = "inline"
						}else{
							span_node.style.display = "none"
						}
					}
				}
			}
		}
	</script>
</body>

# 声明一个视图函数 接受注册的请求
# 网址请求路由 请求方式是 GET  超链接请请求也是get请求
# 怎么让一个路由既能接受GET请求 也能接受POST请求
@fls.route("/register/", methods=["GET","POST"])
def register():
    if request.method == "POST":
        # post请求时 数据的获取
        print("post提交的数据：",request.form)
        return "注册成功"
    #渲染 注册页面  alt + 回车 万能键  GET请求渲染的页面
    return