您现在的位置是：主页 > news > 上海哪个公司做网站好/优化问题

上海哪个公司做网站好/优化问题

admin2025/6/5 17:18:56【news】

简介上海哪个公司做网站好,优化问题,程序开源网站,2023b站大全推广大全免费版一、ajax请求 二、前台服务器概念 三、bs导读 四、bs引入 五、bs容器与响应式 一、ajax请求 - 后台python# 通过flask框架搭建后台from flask import Flask, request# 创建一个服务器对象app Flask(__name__)# 解决ajax请求的跨域问题from flask_cors import CORSCORS(app, su…

上海哪个公司做网站好,优化问题,程序开源网站,2023b站大全推广大全免费版一、ajax请求 二、前台服务器概念 三、bs导读 四、bs引入 五、bs容器与响应式 一、ajax请求 - 后台python# 通过flask框架搭建后台from flask import Flask, request# 创建一个服务器对象app Flask(__name__)# 解决ajax请求的跨域问题from flask_cors import CORSCORS(app, su…

一、ajax请求

二、前台服务器概念

三、bs导读

四、bs引入

五、bs容器与响应式

 

一、ajax请求

- 后台
```python
# 通过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")
```
- 前台
```html
<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>
```
```js
// 取消表单的默认事件
$('.fm').submit(function () { return false; })
// 表单提交完成的是ajax请求
$('.sbm').click(function () {
    // 前提: 准备发送的数据
    var user = $('#user').val();
    var pwd = $('#pwd').val();
// 1.通过ajax发生请求, 获得后台响应的结果
    // 2.用得到的结果来局部渲染页面内容
    // 1.
    $.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)
}
``` 
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ajax</title>
</head>
<body>
<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>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {// form表单请求: 完成前后台数据交互,//      为后台提供数据, 后台反馈响应结果, 前台会发生页面转跳
    $('.fm').submit(function () { return false; })// ajax请求: 完成前后台数据交互,//      为后台提供数据, 后台反馈响应结果, 前台不需要页面转跳,//      可以完成页面局部刷新内容
    $('.sbm').click(function () {// 前提: 准备发送的数据var user = $('#user').val();var pwd = $('#pwd').val();// 1.通过ajax发生请求, 获得后台响应的结果// 2.用得到的结果来局部渲染页面内容// 1.
        $.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)}
})
</script>
</html>

 

二、前台服务器概念

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><h1>请求</h1>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>$('h1').click(function () {$.ajax({url: "http://localhost:7777/test",success: function (data) {$('h1').text(data)}})})
</script>
</html>

 

三、bs导读

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>bs导读</title><!--zero框架 样式帮你写好了 --><link href="zero/css/zero.css" type="text/css" rel="stylesheet">
</head>
<body><h2>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。</h2><h3>什么是bootstrap: 根据bs指定规则(通过标签结构与指定类名)完成快速的页面布局</h3><hr><!--按照 zero框架规定格式来书写html结构代码--><div class="z-btn">按钮</div><div class="z-btn z-btn-red">按钮</div><div class="z-btn z-btn-green">按钮</div><div class="z-btn z-btn-orange">按钮</div><hr><ul class="z-menu" z-text="爱好"><li><a href="">篮球</a></li><li><a href="">足球</a></li><li><a href="">洗脚</a></li><li><a href="">按摩</a></li><li><a href="">小鱼啃脚</a></li></ul>
</body>
<!--zero框架 脚本帮你写好了 -->
<script src="zero/js/zero.js"></script>
</html>

 

四、bs引入

```html
<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>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
```

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>bs引入</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><!--可以在bs基础上进行样式修改, 一般修改样式要出现在引入bs之后--><style>.btn {outline: none !important;}h1 {font-size: 100px;}</style>
</head>
<body>
<h1>一级标题</h1>
<button class="btn">按钮</button><div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">1</button><button type="button" class="btn btn-default">2</button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">Dropdown<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Dropdown link</a></li><li><a href="#">Dropdown link</a></li></ul></div>
</div></body>
<!--bs的脚本依赖于jq, 所以要提前导入jq-->
<!--脚本逻辑尽量放在html结构之下-->
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

 

五、bs容器与响应式

```html
 <!--总结; 两种容器(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>
```

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>容器于响应式</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><style>.box {/*width: 500px;*/height: 100px;background-color: orange;margin: 0 auto;}/*屏幕尺寸 >1200px 会激活该响应式分支*/@media (min-width: 1200px) {.box {width: 1200px;}}/*992px ~ 1200px*/@media (min-width: 992px) and (max-width: 1200px) {.box {width: 992px;}}/*小于992px*/@media (max-width: 992px) {.box {width: 50px;}}/*用来完成响应式布局@media (min-width: 768px) {}*/</style>
</head>
<body><!--响应式布局--><div class="box"></div><!--固定宽度容器(采用响应式布局)--><div class="container"><!--缩放屏幕尺寸,发现宽度有四种状态存在 => 响应式布局--><h1 class="bg-pink">标题</h1><div class="container"><h1 class="bg-pink">子标题</h1></div></div><!--动态宽度布局(采用流式布局)--><div class="container-fluid"><h1 class="bg-pink">标题</h1></div><!--总结; 两种容器默认都有左右15px padding--><!-- 行: .row, 可以取消容器的默认左右15px padding--><div class="container"><div class="row"><h1 class="bg-info">标题</h1></div></div><div class="container-fluid"><div class="row"><h1 class="bg-info">标题</h1></div></div><!--行row就是配合容器来使用, 可以抵消容器默认padding, 且可以给内容按行分组--><div class="container"><div class="row">...</div><div class="row">...</div></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

 

转载于:https://www.cnblogs.com/wuzhengzheng/p/10273618.html

相关文章

最新文章