登录
当前位置： 首页 > 工具软件 > Bootstrap News Box > 使用案例 >

AJAX BootStrap Vue

竺鸿骞
2023-12-01

  • 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是异步网络请求

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

请求的步骤

  1. 创建请求对象
  2. 与服务器建立连接
  3. 发送请求
  4. 注册监听 监听服务器给该请求的响应
    响应码
    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 render_template("register.html")

# 验证用户名是否已存在
@fls.route("/checkname/")
def checkname():
    names = ["lucy", "jack", "tom", "韩梅梅", "李雷"]
    # 现在的请求是get请求
    '''
    当客户端发送过来一个请求之后 都会形成一个对应的请求对象 request
    通过request对象获取客户端请求发送的数据
    '''
    print(request.args) #get请求对应的数据  是字典格式的

    name = request.args["uname"]

    return "yes" if name in names else "no"

新闻

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
	<button>请求新闻列表</button>
	<ul>
		<li>时间 新闻的标题</li>
	</ul>
	<script>
		$("button").click(function(){
			// ajax请求  --- JQ
			$.ajax({
				type: "post",  // 请求方式
				url: "http://127.0.0.1:5000/news/", // 服务器的地址
				//data:, // 传递的数据
				success: function(result, status){  // 请求成功之后返回的状态
					console.log(status)
					console.log(typeof result) // json数据
					console.log(result)
					if(status == "success"){
						// 遍历新闻列表
						for(var i = 0; i < result.length; i++){
							console.log(result[i]) // 小字典
							var li = $("<li></li>")
							$("ul").append(li)

							li.append($("<span>" + result[i].date + "</span>"))
							li.append($("<span>" + result[i].title + "</span>"))
						}
					}
				}
			})
		})
	</script>
</body>

# 新闻
@fls.route("/news/", methods = ["GET", "POST"])
def news():
    if request.method == "POST":
        news_list = [
            {"date": "2019-01-01", "title":"元旦到了"},
            {"date": "2019-02-14", "title": "情人节到了"},
            {"date": "2019-03-12", "title": "植树节到了"},
            {"date": "2019-04-01", "title": "愚人节到了"},
            {"date": "2019-05-01", "title": "劳动节到了"},
            {"date": "2019-06-01", "title": "儿童到了"}
        ]
        # 把数据转化为json格式并响应回去
        return jsonify(news_list)
    return render_template("ajax_jQ.html")

BootStrap

  • <div class=“container”>
    居中
  • <table class=“table table-bordered table-hover”>
    • 基本的样式 — 少量的内补（padding）和水平方向的分隔线
    • 为表格和其中的每个单元格增加边框
    • 让 <tbody> 中的每一行对鼠标悬停状态作出响应
  • 按键
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
  • 图片
    • <img src="…" alt="…" class=“img-rounded”>
      圆角
    • <img src="…" alt="…" class=“img-circle”>
      圆形
    • <img src="…" alt="…" class=“img-thumbnail”>
      缩略图
  • 图标
<div class="glyphicon glyphicon-trash"></div>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  • 下拉菜单
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				水果和蔬菜
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li class="dropdown-header">水果</li>
				<li>苹果</li>
				<li>香蕉</li>
				<li>草莓</li>
				<li class="dropdown-header">蔬菜</li>
				<li>大白菜</li>
				<li>胡萝卜</li>
				<li>西红柿</li>
			</ul>
		</div>
	</div>
	<script>
		var btn_flag = false // 标记按钮是否被点击过展开下拉菜单
		// 默认是没有展开的
		$("#dropdownMenu1").click(function(){
			btn_flag = !btn_flag
			if (btn_flag){
				$(".dropdown-menu").css("display", "block")
			}else{
				$(".dropdown-menu").css("display", "none")
			}
		})
	</script>
</body>
  • 导航
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<ul class="nav nav-tabs">
			<li role="presentation" class="active"><a href="#">Home</a></li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
		<script>
		// 选中导航 切换导航
		$(".nav li").click(function(){
			$(".nav li").removeClass("active")
			// 设置被点击的哪个是选中状态
			$(this).addClass("active")
		})
	</script>
</body>
  • 数字动态变化
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<button class="add">＋</button>
		<a >
		  Messages <span class="badge">0</span>
		</a>
		<button class="sub">-</button>
		<!-- 
		需求： 信息量在9条以上一直显示的是9+
			点击+  message数量增加 增加到9以上 就显示9+
			点击-  message数量减少  最少减到0
		 -->
	</div>
	<script>
		// 获取当前的信息量
		var message_num = parseInt($(".badge").text())
		$(".add").click(function(){
			message_num++
			$(".badge").text(message_num + "")
			if(message_num > 9){
				$(".badge").text("9+")
			}
		})
		$(".sub").click(function(){
			message_num--
			if(message_num > 9){
				$(".badge").text("9+")
			}else{
				if(message_num < 0){
					message_num = 0
				}
				$(".badge").text(message_num + "")
			}
		})
	</script>
</body>
  • 进度
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<button class="process_add">＋</button>
		<div class="progress">
		 	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
		     0%
			</div>
		</div>
	</div>
	<script>
		// 1-15之间随机增加
		// 获取当前的进度数量
		var process_num = parseInt($(".progress-bar").text())
		$(".process_add").click(function(){
			// 生成一个1-15之间的随机数
			// Math.random() * 15  [0, 15) 0.31 1 14.78888  15
			var num = Math.ceil(Math.random() * 15) // Math.random()[0, 1)
			process_num += num
			if(process_num >= 100){
				process_num = 100  // 满了100之后就不用在增加了
			}
			$(".progress-bar").text(process_num + "%")
			$(".progress-bar").css("width", process_num + "%")
		})
	</script>
</body>

<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<table class="table table-bordered table-hover">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>

		<a class="btn btn-danger btn-sm">百度</a>
		<a class="btn btn-danger btn-lg">百度</a>
		
		<img src="../img/pic21.jpg" class="img-circle" />
		<img src="../img/pic21.jpg" class="img-thumbnail" />
		
		<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<div class="glyphicon glyphicon-trash"></div>
		
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				水果和蔬菜
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li class="dropdown-header">水果</li>
				<li>苹果</li>
				<li>香蕉</li>
				<li>草莓</li>
				<li class="dropdown-header">蔬菜</li>
				<li>大白菜</li>
				<li>胡萝卜</li>
				<li>西红柿</li>
			</ul>
		</div>
		
		<ul class="nav nav-tabs">
			<li role="presentation" class="active"><a href="#">Home</a></li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
		</ul>
		
		<button class="add">＋</button>
		<a >
		  Messages <span class="badge">0</span>
		</a>
		<button class="sub">-</button>
		<!-- 
		需求： 信息量在9条以上一直显示的是9+
			点击+  message数量增加 增加到9以上 就显示9+
			点击-  message数量减少  最少减到0
		 -->
		<br />
		<br />
		<button class="process_add">＋</button>
		<div class="progress">
		 	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
		     0%
			</div>
		</div>
	</div>
	<script>
		// 1-15之间随机增加
		// 获取当前的进度数量
		var process_num = parseInt($(".progress-bar").text())
		$(".process_add").click(function(){
			// 生成一个1-15之间的随机数
			// Math.random() * 15  [0, 15) 0.31 1 14.78888  15
			var num = Math.ceil(Math.random() * 15) // Math.random()[0, 1)
			process_num += num
			if(process_num >= 100){
				process_num = 100  // 满了100之后就不用在增加了
			}
			$(".progress-bar").text(process_num + "%")
			$(".progress-bar").css("width", process_num + "%")
		})
		
		// 获取当前的信息量
		var message_num = parseInt($(".badge").text())
		$(".add").click(function(){
			message_num++
			$(".badge").text(message_num + "")
			if(message_num > 9){
				$(".badge").text("9+")
			}
		})
		$(".sub").click(function(){
			message_num--
			if(message_num > 9){
				$(".badge").text("9+")
			}else{
				if(message_num < 0){
					message_num = 0
				}
				$(".badge").text(message_num + "")
			}
		})
		
		var btn_flag = false // 标记按钮是否被点击过展开下拉菜单
		// 默认是没有展开的
		$("#dropdownMenu1").click(function(){
			btn_flag = !btn_flag
			if (btn_flag){
				$(".dropdown-menu").css("display", "block")
			}else{
				$(".dropdown-menu").css("display", "none")
			}
		})
		
		// 选中导航 切换导航
		$(".nav li").click(function(){
			$(".nav li").removeClass("active")
			// 设置被点击的哪个是选中状态
			$(this).addClass("active")
		})
	</script>
</body>

响应式布局

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
	<!--
	把一行分成12列
		不同屏幕尺寸时候 元素占12份中的几分  按照设计完成不同屏幕的
		样式设计
	 -->
	<div class="container">
		<div class="row">
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic16.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic17.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic18.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic19.jpg" />
		</div>                                   
		<div class="row">                        
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic20.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic21.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic22.jpg" />
			<img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="../img/pic23.jpg" />
		</div>
	</div>
	<script>
		window.onresize = function(){
			var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
			console.log(w)
		}
	</script>
</body>

Vue

入门

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.min.js"></script>
</head>
<body>
	<div id="box">
		<!-- {{ 字段名 }}来获取Vue的数据段中该字段对应的数据 -->
		<p>{{ content }}</p>
		<!-- v-text绑定数据 -->
		<h3 v-text="title"></h3>
	</div>
	<script>
		var vue = new Vue({
			// 挂载 --- 跟要设置数据的容器挂钩 通过id来进行挂载的
			el:"#box",
			// 数据段 包含的要渲染的数据
			data:{
				content:"我是Vue渲染的",
				title: "木兰辞"
			}
		})
	</script>
</body>

生命周期钩子

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">{{ message }}</div>
	<script>
		var vue = new Vue({
			// 挂载
			el: "#box",
			data:{
				message:"木兰辞"
			},
			// beforeCreate
			beforeCreate:function(){
				console.log("--- 实例初始化 数据字段或者事件一些东西还没有配置好---")
			},
			created:function(){
				console.log("--- created  实例被创建 但是挂载还没有开始----")
			},
			beforeMount:function(){
				console.log("--- 挂载之前----")
			},
			mounted:function(){
				console.log("--- 已经挂载----")
			},
			updated:function(){
				console.log("数据渲染")
			},
			beforeDestroy:function(){
				console.log("--- 实例销毁之前----")
			},
			destroyed:function(){
				console.log("--- 实例销毁---")
			}
		})
	</script>
</body>

基本语法

Vue的指令 是带有v-前缀的特殊的属性 指令的属性值都是单一JS表达式
指令的职责 就是将JS的表达式的结果 渲染到DOM层的

  • 设置文本的
    {{}}
    v-text
    v-html — 识别标签的
  • 设置css的display的属性
    v-show 属性对应的值是真或者假 真为显示 假为隐藏
  • 判断结构
    v-if 通过某个属性的值去做判断条件
    v-else
    v-else-if
  • 循环的结构
    v-for 渲染容器的数据
    数组 字符串 对象
  • 事件的绑定
    v-on
  • 操作属性的
    v-bind
  • 操作表单的
    v-model
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">
		<h3 v-text="detail"></h3>
		<h3 v-html="detail"></h3>
		<img src="../img/pic17.jpg" v-show="flag" />
		<!-- 满足条件 数据渲染 -->
		<p v-if="value == 1">{{ boy }}</p>
		<p v-else-if="value == 2">{{ girl }}</p>
		<p v-else>{{ other }}</p>
		
		<ul>
			<li v-for="ele in enjoy"> {{ ele }} </li>
		</ul>
		
		<ul>
			<li v-for="value, key in score">
				{{ key }} 的成绩是 {{ value }}</li>
		</ul>
		
		<button v-on:click="btnClick()">按钮</button>
		<!-- 事件绑定简写的行为 -->
		<button @click="btnClick()">按钮1</button>
		<input type="text" v-on:input="inputEvent()" />
		
		<img v-bind:src="imgpath" />
		<!-- 简化 -->
		<img :src="imgpath" />
		
		<input type="text" v-model="inputMessage" />
		<p> {{ inputMessage }} </p>
	</div>
	
	<script type="text/javascript">
		var vue = new Vue({
			el:"#box",
			data:{
				detail: "<font color='red'>you are very beautiful</font>",
				flag:true,
				boy: "hello boy",
				girl: "hello girl",
				other: "hello ...",
				value: 3,
				enjoy: ["篮球","足球", "排球", "棒球"],
				score:{"语文":78, "数学":88},
				imgpath:"../img/pic16.jpg",
				inputMessage:""
			},
			// 绑定事件对应的方法的位置
			methods:{
				btnClick:function(){
					console.log("按钮被点击了")
				},
				inputEvent:function(){
					console.log("内容输入了")
				}
			}
		})
	</script>
</body>
 类似资料：

相关阅读

相关文章

相关问答

快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.