精华内容
下载资源
问答
  • 如何用python做后端写网页-flask框架

    千次阅读 多人点赞 2021-02-21 23:32:34
    如何以python做后端写网页-flask框架什么是Flask安装flask模块Hello World更深一步:数据绑定如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...

    什么是Flask

    Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。Flask使用 BSD 授权。以下程序均在自己服务器上运行(在vs code利用ssh进行连接)

    安装flask模块

    首先使用pip进行安装:

    pip install flask
    

    在所在项目文件夹下创建templates文件夹(用于存放html等文件)和app.py,如图:
    在这里插入图片描述

    Hello World

    我们可以在templates文件中新建index.html文件,其内容如下:

    <html>
        <h1>Hello Word!</h1>
    </html>
    

    在上一步建立的app.py文件中,写入:

    from flask import Flask, render_template, request, jsonify
    #创建Flask对象app并初始化
    app = Flask(__name__)
    
    #通过python装饰器的方法定义路由地址
    @app.route("/")
    #定义方法 用jinjia2引擎来渲染页面,并返回一个index.html页面
    def root():
        return render_template("index.html")
    #定义app在8080端口运行
    app.run(port=8080)
    

    我们写好app.py文件后,我们按F5 运行,即终端输出:
    在这里插入图片描述
    我们访问服务器的8080端口,即Hello World出现在眼前!
    在这里插入图片描述

    更深一步:数据绑定

    上一步我们简单地搭建好一个静态网页,它的显示只取决于前端,是固定不变的。我们如何做到从后端传递数值并在前端显示呢?这就需要使用数据绑定.
    数据绑定,顾名思义,是为了实现一种“动态”的效果,后台的数据更新了,前端页面也自动更新;前端页面上的数据更新了,后台的数据也自动更新。在flask框架中,后端先将网页进行加载,并把传入的数据放在合适的位置后使用jinjia2引擎渲染,最后将渲染好的页面返回。

    后端传入数据

    我们首先在render_template函数中传递需要绑定的数据name,age:

    from flask import Flask, render_template, request, jsonify
    #创建Flask对象app并初始化
    app = Flask(__name__)
    
    #通过python装饰器的方法定义路由地址
    @app.route("/")
    #定义方法 用jinjia2引擎来渲染页面,并返回一个index.html页面
    def root():
        return render_template("index.html",name="zxy",age=21)
    #定义app在8080端口运行
    app.run(port=8080)
    

    在前端index.html中,我们获取传入的数据:

    <html>
        <h1>我是{{name}},今年{{age}}岁</h1>
    </html>
    

    我们再按F5运行,并访问服务器的8080端口,页面显示:
    在这里插入图片描述

    从前端获取数据

    那么,前端提交的数据如何传到后端呢?
    在这里,我使用ajax实现数据的异步传输。我们将主要步骤概括为:

    1.在前端页面中引入jQuery
    2.创建两个输入框,一个按钮用于输入数据和事件提交。
    3.在js中编写事件,使用ajax进行数据提交
    4.在后端app.py中编写对应的事件处理函数

    前端index.html内容如下:

    <html>
        <!--引入jQuery包用于使用ajax-->
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <h1>请输入你的姓名和年龄</h1>
        <!--创建两个input输入框,定义id分别为name,age-->
        <input type="text" id="name" name="name" placeholder="姓名">
        <br>
        <input type="text" id="age" name="age" placeholder="年龄">
        <br>
        <!--创建button按钮,点击则激发submit()事件-->
        <button onclick="submit();">提交</button>
        <script>
            /*在这里编写submit()事件*/
            function submit() {
                $.ajax({
                    url: "submit", /*数据提交到submit处*/
                    type: "POST",  /*采用POST方法提交*/
                    data: { "name": $("#name").val(),"age":$("#age").val()},  /*提交的数据(json格式),从输入框中获取*/
                    /*result为后端函数返回的json*/
                    success: function (result) {
                        if (result.message == "success!") {
                            alert(result.message+"你的名字是"+result.name+",你的年龄是"+result.age)
                        }
                        else {
                            alert(result.message)
                        }
                    }
                });
            }
        </script>
    </html>
    

    当我们完成ajax数据提交后,则在后端app.py处编写对应的处理函数submit()。
    app.py中的内容如下:

    from flask import Flask, render_template, request, jsonify
    #创建Flask对象app并初始化
    app = Flask(__name__)
    
    #通过python装饰器的方法定义路由地址
    @app.route("/")
    #定义方法 用jinjia2引擎来渲染页面,并返回一个index.html页面
    def root():
        return render_template("index.html")
    
    #app的路由地址"/submit"即为ajax中定义的url地址,采用POST、GET方法均可提交
    @app.route("/submit",methods=["GET", "POST"])
    #从这里定义具体的函数 返回值均为json格式
    def submit():
        #由于POST、GET获取数据的方式不同,需要使用if语句进行判断
        if request.method == "POST":
            name = request.form.get("name")
            age = request.form.get("age")
        if request.method == "GET":
            name = request.args.get("name")
            age = request.args.get("age")
        #如果获取的数据为空
        if len(name) == 0 or len(age) ==0:
            return {'message':"error!"}
        else:
            return {'message':"success!",'name':name,'age':age}
    
    #定义app在8080端口运行
    app.run(port=8080)
    

    编写完成后,我们访问服务器8080端口进行测试,结果如下:
    在这里插入图片描述

    数据库连接

    数据库是一个网页不可或缺的部分。前面的例子中,数据都是从前端获取或者随机输入的。如何从数据库中获取数据呢?
    首先我们引入pymysql库 并编写Database类,该类写在database.py中:

    import pymysql
    class Database:
        #设置数据库的连接参数,由于我是在服务器中编写的,所以host是localhost
        host = "localhost"
        user = "root"
        password = "Zhangxy0212!!"
        #类的构造函数,参数db为欲连接的数据库。该构造函数实现了数据库的连接
        def __init__(self,db):
            connect = pymysql.connect(host=self.host,user=self.user,password=self.password,database=db)
            self.cursor = connect.cursor()
        #类的方法,参数command为sql语句
        def execute(self, command):
            try:
                #执行command中的sql语句
                self.cursor.execute(command)
            except Exception as e:
                return e
            else:
                #fetchall()返回语句的执行结果,并以元组的形式保存
                return self.cursor.fetchall()
    
    

    我们可以在templates文件中新建一个data.html文件,用于创建一个新的页面,文件内容如下:

    <html>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <h1>请输入你的名字</h1>
    <input type="text" id="name" name="name">
    <button onclick="show();">提交</button>
    <!--result用来显示提交结果-->
    <p id="result"></p>
    <script>
        function show() {
            $.ajax({
                url: "show",
                type: "POST",
                data: { "name": $("#name").val()},
                /*不要忘记 result为后端处理函数的返回值!*/
                success: function (result) {
                    if (result.status == "success") {
                        $("#result").text($("#name").val() + "是" + result.message)
                    }
                    else {
                        $("#result").text("出错了")
                    }
                }
            });
        }
    </script>
    </html>
    

    按钮的触发事件为show();接下来我们在app.py中编写 渲染data.html页面的函数data()事件处理函数show().
    切记,这两个函数一定要加在 创建app对象定义运行端口之间!!
    由于我们要使用写好的Database类进行数据库的连接,因此需要在app.py顶部进行引入:

    from database import Database
    

    data()函数和show()函数如下:

    #通过python装饰器的方法定义路由地址
    @app.route("/data")
    #定义方法 用jinjia2引擎来渲染页面,并返回一个index.html页面
    def data():
        return render_template("data.html")
    
    #app的路由地址"/show"即为ajax中定义的url地址,采用POST、GET方法均可提交
    @app.route("/show",methods=["GET", "POST"])
    def show():
        #首先获取前端传入的name数据
        if request.method == "POST":
            name = request.form.get("name")
        if request.method == "GET":
            name = request.args.get("name")
        #创建Database类的对象sql,test为需要访问的数据库名字 具体可见Database类的构造函数
        sql = Database("test")
        try:
            #执行sql语句 多说一句,f+字符串的形式,可以在字符串里面以{}的形式加入变量名 结果保存在result数组中
            result = sql.execute(f"SELECT type FROM type WHERE name='{name}'")
        except Exception as e:
            return {'status':"error", 'message': "code error"}
        else:
            if not len(result) == 0:
                #这个result,我觉得也可以把它当成数据表,查询的结果至多一个,result[0][0]返回数组中的第一行第一列
                return {'status':'success','message':result[0][0]}
            else:
                return "rbq"
    

    我们按F5 运行app.py文件后,访问http://121.41.111.94/data
    运行结果如图:
    在这里插入图片描述
    多提一句,数据表type中的内容如下:
    在这里插入图片描述

    screen

    至此,使用flask框架搭建简单网页的基本流程结束啦!
    我想你们心中一定有个疑问,每次运行python程序总是需要按F5运行,如果关掉 VS Code ,那么进程将会被杀掉,服务器页面就无法显示,如图:
    在这里插入图片描述
    那么我们就需要在服务器中使用screen创建一个后台,将app.py程序放在后台中运行,达到持续运行的目的。

    创建后台

    由于我的服务器是Centos,所以我使用 yum install screen的方式下载的screen。
    下载完成后,在服务器的任意位置 输入screen命令即可创建后台,后台如图:
    在这里插入图片描述
    即上面会显示screen 0.
    我们进入工程所在的文件try 输入命令:python app.py 如图:

    在这里插入图片描述
    这样 我们再访问一下121.41.111.94,会发现 网站已经启动啦!我们即使关闭命令行,程序也继续在后台运行。

    查看删除后台

    如果我们需要查看后台的运行情况,在服务器中输入命令:screen -x
    如果需要停止后台运行,则先通过 screen -x [pid号] 进入某一后台。进入之后 Ctrl+C即可停止运行。
    如果删除后台,则先通过 screen -x [pid号] 进入某一后台,进入之后输入exit

    结束

    由于大三下学期做项目需要,临时学了学flask框架。本人第一次写CSDN博客,如有不对的地方,欢迎指正~

    展开全文
  • 利用Pycharm下的Flask框架写网页

    千次阅读 2019-04-11 21:42:50
    利用Pycharm下的Flask框架写网页 from flask import Flask from flask import render_template from studentclass import Student app = Flask(name) @app.route(’/’) def showstudent(): stus=[] stu1 = ...

    利用Pycharm下的Flask框架写网页

    from flask import Flask
    from flask import render_template
    from studentclass import Student
    app = Flask(name)

    @app.route(’/’)
    def showstudent():
    stus=[]
    stu1 = Student()
    stu3 = Student()
    stu3.stuID = “003”
    stu3.stuName = “王五”
    stu3.stuAge = 20
    stus.append(stu1)
    stus.append(stu3)
    return render_template(“学生管理系统.html”,student=stus)

    if name == ‘main’:
    app.run()

    学生管理系统 class Student: stuID='001' stuName='张三' stuAge=18 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190411213436334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXI5,size_16,color_FFFFFF,t_70)

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述!
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    一般来说可以在Pycharm设置里面下载flask框架,但有的时候无法下载成功。这时候可以用cmd命令行来下载flask。
    另外所有的文件都需要放到Template文件夹下面,否则也会出问题。

    展开全文
  • 我们为什么不用c++写网页

    千次阅读 2017-12-21 00:00:00
    要回答这个问题首先要明确题主对于写网页的定义。一个网页往往包含前端、后端两部分。前端负责页面的呈现,后端负责数据的处理,可以大概的理解成前端是人的衣服,而后端是人的五脏六腑。1前端前端的话主要是采用...
        
    0?wx_fmt=gif&wxfrom=5&wx_lazy=1

    640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

    要回答这个问题首先要明确题主对于写网页的定义。

    一个网页往往包含前端、后端两部分。前端负责页面的呈现,后端负责数据的处理,可以大概的理解成前端是人的衣服,而后端是人的五脏六腑。

    1

    前端

    前端的话主要是采用html+css+javascript这样的组合。html有点像word里面的操作,告诉浏览器,哪里是题目,哪里是正文。然后用css去定义这些标题,正文,链接的样式。而JavaScript则让这些内容能够动起来,比如有些网站烦人的弹窗,其实就是js里的alert指令完成的。在前端部分里,html和css似乎是不可替代的,JavaScript的话,近年来有typescript等,但都没能成为主流,c++在前端在的应用似乎是没有的。

    2

    后端

    再来说后端部分,后端的语言有很多,市场占有比例最大的是应该是java,这也是java前几年就业火热的一大原因。php作为“世界上最好的语言”,则是一门专门为网页开发而设计的一门语言,近年来,python的Flask,Django等框架,也渐渐进入人们的视野,airbnb就采用了Django。

    那么为什么我们不在后端里使用C++呢?这个问题其实,本身是不对的。因为我们并不是不使用,而是使用的比较少。腾讯就是以C++作为开发的主要语言。因为腾讯的产品主要偏向于通讯,而做通讯的大部分都是采用C++来开发的,产品需求决定了团队,而团队则决定了传统。还有一个原因就是,C++虽然开发效率低,但是性能会比java等好。而腾讯这样大体量的公司,是不在乎开发效率的问题的。

    0?wx_fmt=jpeg

    这也就不难理解,为什么使用C++使用的人少了。

    1

    开发效率低,现成的类库少,编译还存在问题,有时会觉得用别人的库,还不如自己撸一个轮子。而Python、php等则容易上手很多,甚至一星期就能做一个还过得去的网站。

    2

    C++语言难,因为C++比较偏向底层的开发,内存,指针,这些东西对于一个入门的开发者来说很伤脑筋,debug的过程很艰难,而且C++很灵活,其它语言的一些语言特性,你基本在C++上面都可以实现,这就使得你做一件事,有了很多条路可以选,这很容易陷入一种怪圈,写完一种方法觉得不够优雅,然后再用另一种方法,再写一次。写完C++再去写Java,你会觉得爽快很多。

    0?wx_fmt=gifAI&ML 一个有用的公众号

    0?wx_fmt=png

    0?wx_fmt=png长按,识别二维码,加关注


    展开全文
  • 如何用servlet写网页访问量计数器?

    千次阅读 2017-02-16 07:07:08
    如何用servlet写网页访问量计数器? 1. 原料 l MyEclipse l Tomcat l html 2. 步骤 1、新建工程 项目栏鼠标右键 New-Web Project,这里我起名为:myexm4,点击确定。如下图所示: 图 1.1新建工程...

    如何用servlet写网页访问量计数器?

    1.  原料

    MyEclipse

    Tomcat

    html

    2.  步骤

    1、新建工程

    项目栏鼠标右键 New-Web Project,这里我起名为:myexm4,点击确定。如下图所示:


    图 1.1新建工程

    图1.2 书写项目名

    2、建立一个package和两个servlet文件

           一个名为servletDemo.java ,另一个ServletDemo1.java

    图 2 建立servlet文件

    3、在名为servletDemo文件上书写如下代码:

    图 3 在doPost函数中书写的代码段

     

    4、在ServletDemo1文件中书写如下代码


                                图 4 在doPost函数中书写的代码段

          5、在tomcat上加载该项目 用debug运行该项目


    图 5 加载运行myexm4项目

    6、在浏览器中访问两个服务器,页面上即可获得总的访问量

              

    图6 用debug加载运行

    7、在浏览器中访问


    图 7.1


    图 7.2

    展开全文
  • **如题,大家平时写网页,用flex布局多吗?,挺灵活的布局,但是看过有些帖子说兼容不好。**
  • 用Eclipse写网页出现乱码问题

    千次阅读 2012-12-21 06:56:49
    今天用eclipse写网页,调试的时候出现了乱码问题,很是纠结,用度娘找了好久,终于找到了个很好的文章, 链接如下: http://www.cnblogs.com/feichexia/archive/2012/11/23/eclipseandwebpageencoding.html
  • 一直想着整理出网页抓取的具体实现功能代码,方便大家指正,也方便自己学习...当然这个并不是针对所有网页,自己的功能有限,只能针对某一特定结构的网页进行数据采集,如果有更好的方法,请大家不吝指教,在此谢过!
  • ASP问题 Response.Write 里写网页代码 双引号  asp里面两个双引号代替一个双引号 response.write("这里是一个测试,""看看效果"",输出的内容里一定包含双引号的") response.write("这里是html内容,标签里用双...
  • VS Code写网页方法

    千次阅读 2020-03-05 17:36:16
    下载Visual Studio Code ... 设置Visual Studio Code(VSCode)语言为中文 Windows系统下按快捷键:ctrl+shift+p打开命令面板,界面如下: 也可以直接通过界面调出来 ...安装中文版可以在左边栏选择最下面一...
  • 我想出一个这样的网页,背景有底色和两张背景图片上下相连,背景宽度一定(680px),高度适应网页,不能有滚动条。刚学html+css 不知道应该用什么方法(用container可以做到吗),谢谢了。
  • 大学课堂作业,用sublime text3 源码,实现插入图片,用border,position等基础代码实现网站
  • Python 竟然也可以写网页前端了!

    万次阅读 多人点赞 2020-07-27 08:20:38
    Python作为胶水语言,真的是无所不能。这不,最近又出现一个基于 Python3,目标是替代 JavaScript 的前端开发工具 — Brython好用吗?咱今天来试试用它一个计算...
  • 简单的flask入门,自己来写网页

    千次阅读 2019-01-15 19:11:07
    简单的flask入门 简单的flask入门 我这里使用的是ubuntu系统,不是windows系统,解释器是python3.6,软件是pycharm ...首先要创建虚拟环境, ...可以拷贝一个网页的源代码,放在python中,运行即可得到网页
  • 从数据库查询到的数据显示在页面中,每一条数据后面都有删除按钮 这个删除代码该怎么
  • 解决sublime 3写网页中文显示乱码

    千次阅读 2016-03-22 23:10:12
    好的网页用web浏览器打开时中文显示为乱码 的问题 在head中添加或者 2>解决sublime 3 代码时中文显示乱码 a>搜索并下载ConvertToUTF8 b>在sublime 3中选择preference-->browse package... c>将第...
  • 我们一起写网页(html+javascript+css)

    千次阅读 2012-12-27 20:50:27
    简介:html(HyperText Markup Language),超文本标记语言,是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述...
  • 又经过两天的补习,这回复习的是原生JSP增删改查,主要是Java部分逻辑,然后再JSP中调用相应的逻辑从而实现网页的增删改查以及登陆功能,并且通过Filter过滤器来实现未登录拦截功能。下面是目录结构:  这里大致...
  • 现在写网页最好的语言是什么语言?用什么框架?
  • jSignature网页手写签名

    千次阅读 2018-07-02 17:45:38
     注意:1、CSS样式自己调,这里的很简陋。  2、单击下载,并不是下载图片,而是保存到后台。 二、前端 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;...
  • html网页写一个时钟

    千次阅读 2015-12-29 13:07:24
    html网页写一个时钟 1.js的形式来 function time1(){ var today = new Date(); var hour = today.getHours(), minute = today.getMinutes(), second = today.getSeconds(); minute = checkTime...
  • 用localhost打开自己网页,发现在编辑器修改的CSS样式刷新网页没用改变,确定不是CSS的问题,因为用直接双击打开网页的方式刷新CSS样式会改变。请问怎样让用localhost方式打开的网页也可以刷新查看更改的内容
  • eclipse里html网页

    万次阅读 2018-12-01 16:30:30
    第一步新建工程,选择Dynamic Web Project 第二部输入工程名字 第三步 点击finish,完成工程的创建,打开工程... ... 第五步,浏览好的文件,在html文件上右键,选择properties,打开文件的目录 选择浏览器浏览...
  • HBuilder算是一个比较强大的Web网页编辑器了,里面有很多强大的功能,比如它内置了浏览器,可以一边编写网页代码,一边查看网页效果。 但是在如果JSP网页是放在Tomcat服务器下的话,则需要设置一下HBuilder内置...
  • 大家好,本人使用intellij idea了一个简单的静态网页,主要是想熟悉一下该工具,网页的运行方式是点击工具右上方的浏览器图标,例如chrome,但是点击后浏览器却显示的是360的主页,自己网页却无法显示。...
  • 教你一个简单的网页(html网页开发入门)

    万次阅读 多人点赞 2017-10-16 15:02:49
    网页的组成 HTML  网页的具体内容和结构 CSS  网页的样式(美化网页最重要的一块) JavaScript  网页的交互效果,比如对用户鼠标事件作出响应 HTML 什么是HTML HTML的全称是...
  • Linux下简单动态网页

    千次阅读 2018-07-03 22:42:35
    要求:在LAMP、LNMP等环境下,任意挑选下列2种或以上动态网页语言,出一个页面,读取MYSQL实验中的数据表数据。(PHP,JSP,Perl,Python,Ruby,Go,ASP.NET)LAMP是指:linux、Apache、mysql,phpLNMP是指:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 757,534
精华内容 303,013
关键字:

如何写网页