Python开发自定义Web框架

news2024/11/17 17:44:53

在这里插入图片描述

文章目录

    • 开发自定义Web框架
      • 1.开发Web服务器主体程序
      • 2.开发Web框架主体程序
      • 3.使用模板来展示响应内容
      • 4.开发框架的路由列表功能
      • 5.采用装饰器的方式添加路由
      • 6.电影列表页面的开发案例

开发自定义Web框架

接收web服务器的动态资源请求,给web服务器提供处理动态资源请求的服务。根据请求资源路径的后缀名进行判断:

如果请求资源路径的后缀名是.html则是动态资源请求, 让web框架程序进行处理。
否则是静态资源请求,让web服务器程序进行处理。

1.开发Web服务器主体程序

1、接受客户端HTTP请求(底层是TCP)

# -*- coding: utf-8 -*-
# @File  : My_Web_Server.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/24 21:28


from socket import *
import threading


# 开发自己的Web服务器主类
class MyHttpWebServer(object):

    def __init__(self, port):
        # 创建 HTTP服务的 TCP套接字
        server_socket = socket(AF_INET, SOCK_STREAM)
        # 设置端口号互用,程序退出之后不需要等待,直接释放端口
        server_socket.setsockopt(SOL_SOCKET, SO_REUSEADDR, True)
        # 绑定 ip和 port
        server_socket.bind(('', port))
        # listen使套接字变为了被动连接
        server_socket.listen(128)
        self.server_socket = server_socket

    # 处理请求函数
    @staticmethod  # 静态方法
    def handle_browser_request(new_socket):
        # 接受客户端发来的数据
        recv_data = new_socket.recv(4096)
        # 如果没有数据,那么请求无效,关闭套接字,直接退出
        if len(recv_data) == 0:
            new_socket.close()
            return
            
# 启动服务器,并接受客户端请求
    def start(self):
        # 循环并多线程来接收客户端请求
        while True:
            # accept等待客户端连接
            new_socket, ip_port = self.server_socket.accept()
            print("客户端ip和端口", ip_port)
            # 一个客户端的请求交给一个线程来处理
            sub_thread = threading.Thread(target=MyHttpWebServer.handle_browser_request, args=(new_socket, ))
            # 设置当前线程为守护线程
            sub_thread.setDaemon(True)
            sub_thread.start()  # 启动子线程


# Web 服务器程序的入口
def main():
    web_server = MyHttpWebServer(8080)
    web_server.start()


if __name__ == '__main__':
    main()

2、判断请求是否是静态资源还是动态资源

 # 对接收的字节数据进行转换为字符数据
        request_data = recv_data.decode('utf-8')
        print("浏览器请求的数据:", request_data)
        request_array = request_data.split(' ', maxsplit=2)

        # 得到请求路径
        request_path = request_array[1]
        print("请求的路径是:", request_path)
        if request_path == "/":
            # 如果请求路径为根目录,自动设置为:/index.html
            request_path = "/index.html"
        # 判断是否为:.html 结尾
        if request_path.endswith(".html"):
            "动态资源请求"
           pass
        else:
            "静态资源请求"
            pass

3、如果静态资源怎么处理?
在这里插入图片描述

"静态资源请求"
            # 根据请求路径读取/static 目录中的文件数据,相应给客户端
            response_body = None  # 响应主体
            response_header = None  # 响应头的第一行
            response_first_line = None  # 响应头内容
            response_type = 'test/html'  # 默认响应类型
            try:
                # 读取 static目录中相对应的文件数据,rb模式是一种兼容模式,可以打开图片,也可以打开js
                with open('static'+request_path, 'rb') as f:
                    response_body = f.read()
                if request_path.endswith('.jpg'):
                    response_type = 'image/webp'

                response_first_line = 'HTTP/1.1 200 OK'
                response_header = 'Content-Length:' + str(len(response_body)) + '\r\n' + \
                                  'Content-Type: ' + response_type + '; charset=utf-8\r\n' + \
                                  'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                                  'Server: Flyme awei Server\r\n'

            # 浏览器读取的文件可能不存在
            except Exception as e:
                with open('static/404.html', 'rb') as f:
                    response_body = f.read()  # 响应的主体页面内容
                # 响应头
                response_first_line = 'HTTP/1.1 404 Not Found\r\n'
                response_header = 'Content-Length:'+str(len(response_body))+'\r\n' + \
                                  'Content-Type: text/html; charset=utf-8\r\n' + \
                                  'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                                  'Server: Flyme awei Server\r\n'
            # 最后都会执行的代码
            finally:
                # 组成响应数据发送给(客户端)浏览器
                response = (response_first_line + response_header + '\r\n').encode('utf-8') + response_body
                new_socket.send(response)
                # 关闭套接字
                new_socket.close()

在这里插入图片描述
静态资源请求验证:
在这里插入图片描述

4、如果动态资源又怎么处理

if request_path.endswith(".html"):
            "动态资源请求"
            # 动态资源的处理交给Web框架来处理,需要把请求参数交给Web框架,可能会有多个参数,采用字典结构
            params = {
                'request_path': request_path
            }
            # Web框架处理动态资源请求后,返回一个响应
            response = MyFramework.handle_request(params)
            new_socket.send(response)
            new_socket.close()

5、关闭Web服务器

new_socket.close()

Web服务器主体框架总代码展示:

# -*- coding: utf-8 -*-
# @File  : My_Web_Server.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/24 21:28


import sys
import time
from socket import *
import threading
import MyFramework


# 开发自己的Web服务器主类
class MyHttpWebServer(object):

    def __init__(self, port):
        # 创建 HTTP服务的 TCP套接字
        server_socket = socket(AF_INET, SOCK_STREAM)
        # 设置端口号互用,程序退出之后不需要等待,直接释放端口
        server_socket.setsockopt(SOL_SOCKET, SO_REUSEADDR, True)
        # 绑定 ip和 port
        server_socket.bind(('', port))
        # listen使套接字变为了被动连接
        server_socket.listen(128)
        self.server_socket = server_socket

    # 处理请求函数
    @staticmethod  # 静态方法
    def handle_browser_request(new_socket):
        # 接受客户端发来的数据
        recv_data = new_socket.recv(4096)
        # 如果没有数据,那么请求无效,关闭套接字,直接退出
        if len(recv_data) == 0:
            new_socket.close()
            return

        # 对接收的字节数据进行转换为字符数据
        request_data = recv_data.decode('utf-8')
        print("浏览器请求的数据:", request_data)
        request_array = request_data.split(' ', maxsplit=2)

        # 得到请求路径
        request_path = request_array[1]
        print("请求的路径是:", request_path)
        if request_path == "/":
            # 如果请求路径为根目录,自动设置为:/index.html
            request_path = "/index.html"
        # 判断是否为:.html 结尾
        if request_path.endswith(".html"):
            "动态资源请求"
            # 动态资源的处理交给Web框架来处理,需要把请求参数交给Web框架,可能会有多个参数,采用字典结构
            params = {
                'request_path': request_path
            }
            # Web框架处理动态资源请求后,返回一个响应
            response = MyFramework.handle_request(params)
            new_socket.send(response)
            new_socket.close()
        else:
            "静态资源请求"
            # 根据请求路径读取/static 目录中的文件数据,相应给客户端
            response_body = None  # 响应主体
            response_header = None  # 响应头的第一行
            response_first_line = None  # 响应头内容
            response_type = 'test/html'  # 默认响应类型
            try:
                # 读取 static目录中相对应的文件数据,rb模式是一种兼容模式,可以打开图片,也可以打开js
                with open('static'+request_path, 'rb') as f:
                    response_body = f.read()
                if request_path.endswith('.jpg'):
                    response_type = 'image/webp'

                response_first_line = 'HTTP/1.1 200 OK'
                response_header = 'Content-Length:' + str(len(response_body)) + '\r\n' + \
                                  'Content-Type: ' + response_type + '; charset=utf-8\r\n' + \
                                  'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                                  'Server: Flyme awei Server\r\n'

            # 浏览器读取的文件可能不存在
            except Exception as e:
                with open('static/404.html', 'rb') as f:
                    response_body = f.read()  # 响应的主体页面内容
                # 响应头
                response_first_line = 'HTTP/1.1 404 Not Found\r\n'
                response_header = 'Content-Length:'+str(len(response_body))+'\r\n' + \
                                  'Content-Type: text/html; charset=utf-8\r\n' + \
                                  'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                                  'Server: Flyme awei Server\r\n'
            # 最后都会执行的代码
            finally:
                # 组成响应数据发送给(客户端)浏览器
                response = (response_first_line + response_header + '\r\n').encode('utf-8') + response_body
                new_socket.send(response)
                # 关闭套接字
                new_socket.close()

    # 启动服务器,并接受客户端请求
    def start(self):
        # 循环并多线程来接收客户端请求
        while True:
            # accept等待客户端连接
            new_socket, ip_port = self.server_socket.accept()
            print("客户端ip和端口", ip_port)
            # 一个客户端的请求交给一个线程来处理
            sub_thread = threading.Thread(target=MyHttpWebServer.handle_browser_request, args=(new_socket, ))
            # 设置当前线程为守护线程
            sub_thread.setDaemon(True)
            sub_thread.start()  # 启动子线程


# Web 服务器程序的入口
def main():
    web_server = MyHttpWebServer(8080)
    web_server.start()


if __name__ == '__main__':
    main()

2.开发Web框架主体程序

1、根据请求路径,动态的响应对应的数据

# -*- coding: utf-8 -*-
# @File  : MyFramework.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/25 14:05

import time

# 自定义Web框架


# 处理动态资源请求的函数
def handle_request(parm):
    request_path = parm['request_path']

    if request_path == '/index.html':  # 当前请求路径有与之对应的动态响应,当前框架只开发了 index.html的功能
        response = index()
        return response
    else:
        # 没有动态资源的数据,返回404页面
        return page_not_found()


# 当前 index函数,专门处理index.html的请求
def index():
    # 需求,在页面中动态显示当前系统时间
    data = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime())
    response_body = data
    response_first_line = 'HTTP/1.1 200 OK\r\n'
    response_header = 'Content-Length:' + str(len(response_body)) + '\r\n' + \
                      'Content-Type: text/html; charset=utf-8\r\n' + \
                      'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                      'Server: Flyme awei Server\r\n'
    response = (response_first_line + response_header + '\r\n' + response_body).encode('utf-8')
    return response


def page_not_found():
    with open('static/404.html', 'rb') as f:
        response_body = f.read()  # 响应的主体页面内容
    # 响应头
    response_first_line = 'HTTP/1.1 404 Not Found\r\n'
    response_header = 'Content-Length:' + str(len(response_body)) + '\r\n' + \
                      'Content-Type: text/html; charset=utf-8\r\n' + \
                      'Date:' + time.strftime('%Y-%m-%d %H:%M:%S', time.localtime()) + '\r\n' + \
                      'Server: Flyme awei Server\r\n'

    response = (response_first_line + response_header + '\r\n').encode('utf-8') + response_body
    return response
    

2、如果请求路径,没有对应的响应数据也需要返回404页面
在这里插入图片描述

3.使用模板来展示响应内容

1、自己设计一个模板 index.html ,中有一些地方采用动态的数据来替代

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页 - 电影列表</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>

<body>
<div class="navbar navbar-inverse navbar-static-top ">
        <div class="container">
        <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                 </button>
                 <a href="#" class="navbar-brand">电影列表</a>
        </div>
        <div class="collapse navbar-collapse" id="mymenu">
                <ul class="nav navbar-nav">
                        <li class="active"><a href="">电影信息</a></li>
                        <li><a href="">个人中心</a></li>
                </ul>
        </div>
        </div>
</div>
<div class="container">

    <div class="container-fluid">

        <table class="table table-hover">
            <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>导演</th>
                    <th>上映时间</th>
                    <th>票房</th>
                    <th>电影时长</th>
                    <th>类型</th>
                    <th>备注</th>
                    <th>删除电影</th>
            </tr>
            {%datas%}
        </table>
    </div>
</div>
</body>
</html>

2、怎么替代,替代什么数据

 response_body = response_body.replace('{%datas%}', data)

在这里插入图片描述

4.开发框架的路由列表功能

1、以后开发新的动作资源的功能,只需要:
a、增加一个条件判断分支
b、增加一个专门处理的函数

2、路由: 就是请求的URL路径和处理函数直接的映射。

3、路由表

请求路径处理函数
/index.htmlindex函数
/user_info.htmluser_info函数
# 定义路由表
route_list = {
    ('/index.html', index),
    ('/user_info.html', user_info)
}


for path, func in route_list:
    if request_path == path:
        return func()
    else:
        # 没有动态资源的数据,返回404页面
        return page_not_found()
          

注意:用户的动态资源请求,通过遍历路由表找到对应的处理函数来完成的。

5.采用装饰器的方式添加路由

1、采用带参数的装饰器

# -*- coding: utf-8 -*-
# @File  : My_Web_Server.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/24 21:28


# 定义路由表
route_list = []
# route_list = {
# ('/index.html', index),
# ('/user_info.html', user_info)
# }


# 定义一个带参数的装饰器
def route(request_path):  # 参数就是URL请求
    def add_route(func):
        # 添加路由表
        route_list.append((request_path, func))

        @wraps(func)
        def invoke(*args, **kwargs):
            # 调用指定的处理函数,并返回结果
            return func()
        return invoke
    return add_route


# 处理动态资源请求的函数
def handle_request(parm):
    request_path = parm['request_path']

    # if request_path == '/index.html':  # 当前请求路径有与之对应的动态响应,当前框架只开发了 index.html的功能
    #     response = index()
    #     return response
    # elif request_path == '/user_info.html':  # 个人中心的功能
    #     return user_info()
    # else:
    #     # 没有动态资源的数据,返回404页面
    #     return page_not_found()
    for path, func in route_list:
        if request_path == path:
            return func()
        else:
            # 没有动态资源的数据,返回404页面
            return page_not_found()

2、在任何一个处理函数的基础上增加一个添加路由的功能

@route('/user_info.html')

小结:使用带参数的装饰器,可以把我们的路由自动的,添加到路由表中。

6.电影列表页面的开发案例

在这里插入图片描述

1、查询数据
my_web.py

# -*- coding: utf-8 -*-
# @File  : My_Web_Server.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/24 21:28


import socket
import sys
import threading
import time
import MyFramework


# 开发自己的Web服务器主类
class MyHttpWebServer(object):

    def __init__(self, port):
        # 创建HTTP服务器的套接字
        server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        # 设置端口号复用,程序退出之后不需要等待几分钟,直接释放端口
        server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
        server_socket.bind(('', port))
        server_socket.listen(128)
        self.server_socket = server_socket

    # 处理浏览器请求的函数
    @staticmethod
    def handle_browser_request(new_socket):
        # 接受客户端发送过来的数据
        recv_data = new_socket.recv(4096)
        # 如果没有收到数据,那么请求无效,关闭套接字,直接退出
        if len(recv_data) == 0:
            new_socket.close()
            return

        # 对接受的字节数据,转换成字符
        request_data = recv_data.decode('utf-8')
        print("浏览器请求的数据:", request_data)
        request_array = request_data.split(' ', maxsplit=2)
        # 得到请求路径
        request_path = request_array[1]
        print('请求路径是:', request_path)

        if request_path == '/':  # 如果请求路径为跟目录,自动设置为/index.html
            request_path = '/index.html'

        # 根据请求路径来判断是否是动态资源还是静态资源
        if request_path.endswith('.html'):
            '''动态资源的请求'''
            # 动态资源的处理交给Web框架来处理,需要把请求参数传给Web框架,可能会有多个参数,所有采用字典机构
            params = {
                'request_path': request_path,
            }
            # Web框架处理动态资源请求之后,返回一个响应
            response = MyFramework.handle_request(params)
            new_socket.send(response)
            new_socket.close()


        else:
            '''静态资源的请求'''
            response_body = None  # 响应主体
            response_header = None  # 响应头
            response_first_line = None  # 响应头的第一行
            # 其实就是:根据请求路径读取/static目录中静态的文件数据,响应给客户端
            try:
                # 读取static目录中对应的文件数据,rb模式:是一种兼容模式,可以打开图片,也可以打开js
                with open('static' + request_path, 'rb') as f:
                    response_body = f.read()
                if request_path.endswith('.jpg'):
                    response_type = 'image/webp'
                response_first_line = 'HTTP/1.1 200 OK'
                response_header = 'Server: Laoxiao_Server\r\n'

            except Exception as e:  # 浏览器想读取的文件可能不存在
                with open('static/404.html', 'rb') as f:
                    response_body = f.read()  # 响应的主体页面内容(字节)
                # 响应头 (字符数据)
                response_first_line = 'HTTP/1.1 404 Not Found\r\n'
                response_header = 'Server: Laoxiao_Server\r\n'
            finally:
                # 组成响应数据,发送给客户端(浏览器)
                response = (response_first_line + response_header + '\r\n').encode('utf-8') + response_body
                new_socket.send(response)
                new_socket.close()  # 关闭套接字

    # 启动服务器,并且接受客户端的请求
    def start(self):
        # 循环并且多线程来接受客户端的请求
        while True:
            new_socket, ip_port = self.server_socket.accept()
            print("客户端的ip和端口", ip_port)
            # 一个客户端请求交给一个线程来处理
            sub_thread = threading.Thread(target=MyHttpWebServer.handle_browser_request, args=(new_socket,))
            sub_thread.setDaemon(True)  # 设置当前线程为守护线程
            sub_thread.start()  # 子线程要启动


# web服务器程序的入口
def main():
    web_server = MyHttpWebServer(8080)
    web_server.start()


if __name__ == '__main__':
    main()

MyFramework.py

# -*- coding: utf-8 -*-
# @File  : My_Web_Server.py
# @author: Flyme awei 
# @email : 1071505897@qq.com
# @Time  : 2022/7/24 21:28


import time
from functools import wraps
import pymysql

# 定义路由表
route_list = []


# route_list = {
#     # ('/index.html',index),
#     # ('/userinfo.html',user_info)
# }

# 定义一个带参数装饰器
def route(request_path):  # 参数就是URL请求
    def add_route(func):
        # 添加路由到路由表
        route_list.append((request_path, func))

        @wraps(func)
        def invoke(*arg, **kwargs):
            # 调用我们指定的处理函数,并且返回结果
            return func()

        return invoke

    return add_route


# 处理动态资源请求的函数
def handle_request(params):
    request_path = params['request_path']

    for path, func in route_list:
        if request_path == path:
            return func()
    else:
        # 没有动态资源的数据,返回404页面
        return page_not_found()
    # if request_path =='/index.html': # 当前的请求路径有与之对应的动态响应,当前框架,我只开发了index.html的功能
    #     response = index()
    #     return response
    #
    # elif request_path =='/userinfo.html': # 个人中心的功能,user_info.html
    #     return user_info()
    # else:
    #     # 没有动态资源的数据,返回404页面
    #     return page_not_found()


# 当前user_info函数,专门处理userinfo.html的动态请求
@route('/userinfo.html')
def user_info():
    # 需求:在页面中动态显示当前系统时间
    date = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime())
    # response_body =data

    with open('template/user_info.html', 'r', encoding='utf-8') as f:
        response_body = f.read()

    response_body = response_body.replace('{%datas%}', date)

    response_first_line = 'HTTP/1.1 200 OK\r\n'
    response_header = 'Server: Laoxiao_Server\r\n'

    response = (response_first_line + response_header + '\r\n' + response_body).encode('utf-8')
    return response


# 当前index函数,专门处理index.html的请求
@route('/index.html')
def index():
    # 需求:从数据库中取得所有的电影数据,并且动态展示
    # date = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime())
    # response_body =data
    # 1、从MySQL中查询数据
    conn = pymysql.connect(host='localhost', port=3306, user='root', password='******', database='test', charset='utf8')
    cursor = conn.cursor()
    cursor.execute('select * from t_movies')
    result = cursor.fetchall()
    # print(result)

    datas = ""
    for row in result:
        datas += '''<tr>
                <td>%s</td>
                <td>%s</td>
                <td>%s</td>
                <td>%s</td>
                <td>%s 亿人民币</td>
                <td>%s</td>
                <td>%s</td>
                <td>%s</td>
                <td> <input type='button'  value='删除'/> </td>
                </tr>
                ''' % row
    print(datas)

    # 把查询的数据,转换成动态内容
    with open('template/index.html', 'r', encoding='utf-8') as f:
        response_body = f.read()

    response_body = response_body.replace('{%datas%}', datas)

    response_first_line = 'HTTP/1.1 200 OK\r\n'
    response_header = 'Server: Laoxiao_Server\r\n'

    response = (response_first_line + response_header + '\r\n' + response_body).encode('utf-8')
    return response


# 处理没有找到对应的动态资源
def page_not_found():
    with open('static/404.html', 'rb') as f:
        response_body = f.read()  # 响应的主体页面内容(字节)
    # 响应头 (字符数据)
    response_first_line = 'HTTP/1.1 404 Not Found\r\n'
    response_header = 'Server: Laoxiao_Server\r\n'
    response = (response_first_line + response_header + '\r\n').encode('utf-8') + response_body
    return response

2、根据查询的数据得到动态的内容
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409761.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Web项目(Vue)部署到阿里云服务器【超详细】

超详细Vue项目部署篇&#xff01;&#xff01;&#xff01; 小白的部署之路 前段时间白嫖了一年的阿里云服务器&#xff0c;想着手上有个项目&#xff0c;那就部署上去吧。找了很多教程&#xff0c;没有一篇是完整细致的&#xff0c;对于小白的我来说太难了&#xff0c;然后就…

最全面的SpringBoot教程(三)——SpringBoot Web开发

前言 本文为SpringBoot Web开发相关内容介绍&#xff0c;下边将对静态资源管理&#xff08;包括&#xff1a;静态资源访问&#xff0c;静态资源前缀&#xff0c;webjar&#xff0c;首页支持&#xff09;&#xff0c;请求参数处理&#xff08;包括&#xff1a;Rest风格&#xff…

【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

也许是全网最全的 Angular 新手入门指南

文章目录Angular概述Angular程序架构Angular优势angular/cli脚手架文件加载顺序项目目录结构Angular模块NgModule 装饰器内置模块自定义模块模块的tipsAngular组件Component 元数据数据绑定脏值检测父子组件通讯投影组件Angular指令内置属性型指令内置结构型指令指令事件样式绑…

若依框架(前后端分离)打war包部署到linux

一、前端部署 1.找到ruoyi-ui目录。 2.安装依赖。 npm install 3.执行以下操作&#xff0c;解决 npm 下载速度慢的问题。 npm install --registryhttps://registry.npmmirror.com 4.修改vue.config.js,若后端采用的是默认8080端口&#xff0c;则不用修改&#xff0c;默认就是…

2023最新最全vscode插件精选

文章简介 本文介绍最新、最实用、最强大的 vscode 精选扩展。好用的扩展&#xff0c;犹如神兵利器&#xff0c;帮助程序员在代码的世界中&#xff0c;所向披靡&#xff0c;战无不胜&#xff01; 作者介绍 随易出品&#xff0c;必属精品&#xff0c;只写有深度&#xff0c;有质…

vue 路由钩子

路由钩子分为三种 全局钩子&#xff1a; beforeEach、 afterEach、beforeResolve单个路由里面的钩子&#xff1a; beforeEnter组件路由&#xff1a;beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 它的三个参数&#xff1a; to: (Route路由对象) 即将要进入的目标…

【前端知识体系梳理(三)】Diff策略

​ 目录 &#x1f349;前言 &#x1f349;传统Diff算法 &#x1f349;React Diff &#x1f353;&#x1f353;&#x1f353;1、tree diff &#x1f353;&#x1f353;&#x1f353;2、component diff &#x1f353;&#x1f353;&#x1f353;3、element diff &#x1…

前端页面项目——博客系统

目录 1.实现博客列表页 1.1 实现导航栏 1.2 实现中间版心 1.3 实现个人信息 1.4 实现博客列表 2. 实现博客正文页 3. 实现博客登陆页 4. 实现博客编辑 4.1 实现编辑区 4.2 引入编辑器 展示 1&#xff09;登录页面 2&#xff09;博客列表页 3&#xff09;博客详情页 4&am…

【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…

PyQt5之进度条:QProgressBar

PyQt5之进度条&#xff1a;QProgressBar 在软件中&#xff0c;在处理特别冗长的任务时&#xff0c;如果没有相关的进度信息&#xff0c;这个等待的过程会比较考验用户的耐心&#xff0c;根据相关理论&#xff0c;进度条可以缓解用户在等待过程中的焦虑&#xff0c;所以&#x…

前端学习笔记(14)-Vue3组件传参

1.props&#xff08;父组件传递给子组件&#xff09;1.1 实现如果你没有使用 <script setup>&#xff0c;props 必须以 props 选项的方式声明&#xff0c;props 对象会作为 setup() 函数的第一个参数被传入&#xff1a;在子组件中&#xff1a;export default {props: {ti…

微信小程序头像昵称填写能力

1、基本介绍 微信小程序获取头像昵称的能力&#xff0c;最近又进行了一次调整&#xff0c;如果没有记错这是今年第三次调整了&#xff0c;每次调整每个开发者心中我相信都跟我一样&#xff0c;万马奔腾。。。今天写个demo体验下实际效果如何。 详细信息请见小程序用户头像昵称…

微信小程序实现PDF预览功能——pdf.js(含源码解析)

文章目录前言一、pdf.js 是什么&#xff1f;二、使用步骤1.下载库文件2.使用方式微信小程序端——使用 web-view 标签H5 端——使用 iframe 标签&#xff08;使用vue框架&#xff09;3.更改源码如何隐藏顶部工具栏如何让用户强制阅读一定时间如何获取pdf总页数如何获取pdf当前页…

【折腾电脑】Edge浏览器看B站视频卡顿最全解决办法合集

开头碎碎念&#xff1a;更新频率明显和疫情呈正相关&#xff0c;祝大家健健康康吃好喝好&#xff01; 使用Microsoft Edge浏览器观看B站视频&#xff0c;卡得无法忍受。 在网络上搜索相关问题&#xff0c;最早的一条是2016/04/17微软问题反馈的记录。任何原因的卡顿都是正常的&…

Vue样式穿透

Vue样式穿透 vue文件的style标签的scoped属性作用&#xff1a;PostCSS在元素标签上添加特殊属性值&#xff0c;在样式的选择器后面添加属性选择器&#xff0c;实现了组件样式的私有化&#xff0c;防止组件之间的样式污染&#xff08;比如相同类名的元素&#xff09;。 但在使…

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

文章目录一、内边距复合写法1、语法2、代码示例 - 设置 1 个值3、代码示例 - 设置 2 个值4、代码示例 - 设置 3 个值5、代码示例 - 设置 4 个值一、内边距复合写法 1、语法 盒子模型内边距 可以通过 padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-…

前端开发服务器中的 Proxy 代理跨域实现原理解读

各位朋友你们好&#xff0c;我是桃小瑞&#xff0c;微信公众 桃小瑞。在这给大家拜个晚年&#xff0c;祝各位朋友新年快乐。 前言 在前端的开发过程中&#xff0c;尤其是在浏览器环境下&#xff0c;跨域是个绕不开的话题&#xff0c;相信每个前端都会涉及到这个问题&#xf…

“write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletR

1. 相关技术 springboot 2.6.3mybatis-spring-boot-starter 2.2.2mybatis 3.5.10fastjson 1.2.83hutool-all 5.7.22shiro-spring 1.8.0 2. 报错信息 "write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletRequest, meth…

<router-view> can no longer be used directly inside <transition> or <keep-alive>.

百度翻译&#xff1a; &#xff1c;router view&#xff1e;不能直接在&#xff1c;transition&#xff1e;或&#xff1c;keep alive&#xff1e;中使用。 改用插槽道具&#xff1a; 运行环境&#xff1a; "vue": "^3.2.8", "vue-router": &quo…