徹底搞懂了！Python 實現頁面實時刷新

Web項目開發過程中，實現頁面局部刷新和實時數據更新是一項常見的需求。Ajax（Asynchronous JavaScript and XML）技術為此提供了完美的解決方案，它能在不重新加載整個頁面的情況下，通過JavaScript發送異步HTTP請求，獲取服務器端數據并更新頁面內容。本文將以Python Flask框架為例，介紹如何利用Ajax實現頁面的一步刷新，并附帶具體代碼示例。

Flask后端設置

首先，我們需要在Flask后端設置一個處理Ajax請求的路由和視圖函數，該函數返回需要更新的數據：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/get_updates', methods=['GET'])
def get_updates():
    # 假設此處是從數據庫或其它來源獲取最新數據
    latest_data = fetch_latest_data()
    
    return jsonify(latest_data)

前端HTML與JavaScript

在前端HTML中，我們需要一個元素來展示從服務器獲取的數據，并編寫JavaScript腳本來發起Ajax請求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function updateData() {
                $.ajax({
                    url: '/get_updates',
                    type: 'GET',
                    success: function(response) {
                        // 更新頁面元素
                        $('#data-display').html(response.some_field);
                    },
                    error: function(xhr, status, error) {
                        console.error('Failed to load data:', error);
                    }
                });
            }

            // 初始加載
            updateData();

            // 定時刷新（例如每5秒一次）
            setInterval(updateData, 5000);
        });
    </script>
</head>
<body>
    <div id="data-display"></div>
</body>
</html>

上述代碼中，我們使用了jQuery庫簡化Ajax請求的處理。$.ajax函數用于發送GET請求到’/get_updates’路由，當請求成功時，服務器返回的JSON數據會被用來更新頁面上指定的HTML元素。

實時刷新與事件驅動

在實際應用場景中，除了定期刷新數據外，還可以根據特定事件觸發Ajax請求，比如用戶點擊按鈕、滾動頁面等：

// 假設有一個按鈕，點擊時獲取更新
$('#refresh-btn').click(function() {
    updateData();
});

總結

通過整合Flask后端與前端Ajax技術，我們可以輕松實現Web頁面的實時刷新與局部更新，大大提升了用戶體驗和應用的響應速度。

關注我，手把手帶你快速入門Python Web編程！

頁編程之自動刷新。

各位同學好，今天我們來分享一下如何設置網頁自動刷新和延時跳轉。我們都知道，在瀏覽器中點擊刷新按鈕或者按下F5鍵可以刷新頁面，但在編程中有時需要自動刷新頁面，加載最新的數據，無需用戶參與。這就是我們今天要講的內容。

接下來讓我們來看看效果如何。

·首先，在頁面上添加了一個滾動字幕和一張GIF動畫，用于展示頁面的刷新狀態。

·現在可以看到，每隔3秒自動刷新一次，每當刷新時，字幕會回到初始位置，動畫也會重新播放。

·如果不明顯，可以看到鼠標指到的位置會不停地觸發刷新按鈕，效果已經很明顯了。

現在讓我們來看看實現代碼。自動刷新使用了meta標簽的http-equiv屬性，值為referesh，表示自動刷新。設置了content屬性，在內容中填寫秒數，即每隔多少秒自動刷新頁面。如果設置為3，則每隔3秒自動刷新頁面，非常簡單。

·延時跳轉的實現也很簡單。剛才已經將Content屬性設置為3，現在只需要指定要跳轉到的URL。它的寫法是在3后面加上一個英文分號，然后加上url等于要跳轉到的地址。在這里，我們跳轉到新浪首頁，例如視頻。這樣寫好后，回到瀏覽器保存，可以看到倒計時321，成功跳轉。在指定時間后，瀏覽器會自動跳轉，功能已經實現。

今天的分享就到這里，希望各位同學可以照著寫3遍，做到不看視頻也能寫出來。所有案例和相關文檔都可以向我索取。

我們下期再見，想學編程可以關注網頁編程、服務端編程、數據庫和算法方面的內容。

點贊支持一下。

外話：近來想把網站做下更新，從框架到內容的更新，但又不想放棄SEO的優勢，日常工作用到vue.js在SEO方面劣勢較多，果斷選擇了Nuxt.js，苦于國內文章抄襲的非常嚴重如某n 某書，最終在稀土找到一篇像樣的文章，以頭條為平臺記錄網站改版全過程。

此文章建議在PC端查看，涉及到代碼部分，移動端查看確實不方便

Nuxt.js 概要

簡而言之，Nuxt.js是幫助Vue.js輕松完成服務端渲染工作的框架。Nuxt.js預設了服務端渲染所需要的各種配置，如異步數據，中間件，路由。它好比是 Angular Universal 之于 Angular， Next.js 之于 React。

如Nuxt.js文檔所說，通過對客戶端/服務端基礎架構的抽象，Nuxt.js 讓開發者專注于頁面的UI渲染。

靜態文件生成器

Nuxt.js的一個重要功能是，通過 generate 命令，生成靜態站點。類似于流行的靜態生成工具Jekyll。

Nuxt.js 內部依賴

除了Vue.js 2.0之外，Nuxt.js集成了如下模塊: Vue-Router, Vue-Meta 和 Vuex (僅在使用 Vuex 狀態樹配置項時引入)。這樣的好處在于，不需要手工配置依賴，不需要同時在客戶端和服務端配置相同的庫。 Nuxt.js在包含如上依賴的情況下，總大小仍然保持在 28kb min+gzip (如果使用了 Vuex 特性的話為 31kb)。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作（如打包、代碼分層、壓縮等等）。

工作原理

當你訪問一個基于Nuxt.js構建的頁面時，發生了的事情如下：

當用戶訪問應用程序, 如果store中定義了 nuxtServerInit action，Nuxt.js將調用它更新store。
接下來，將加載即將訪問頁面所依賴的任何中間件。Nuxt首先從nuxt.config.js這個文件中，加載全局依賴的中間件，之后檢測每個相應頁面對應的布局文件，最后，檢測布局文件下子組件依賴的中間件。以上是中間件的加載順序。
如果要訪問的路由是一個動態路由, 且有一個相應的 validate() 方法路由的validate 方法，將進行路由校驗。
之后, Nuxt.js 調用 asyncData() 和 fetch() 方法，在渲染頁面之前加載異步數據。asyncData() 方法用于異步獲取數據，并將fetch回來的數據，在服務端渲染到頁面。用fetch() 方法取回的將數據在渲染頁面之前填入store。
最后一步, 將所有數據渲染到頁面。

下圖闡述了 Nuxt.js 應用一個完整的服務器請求渲染的流程，摘自官網：

使用 Nuxt.js 創建一個靜態網站

下面讓我們動手創建一個基于Nuxt.js簡單的靜態博客。我們的發送的請求，返回 mock 的JSON數據。

完成下面的例子，你需要了解基礎的 vue.js 知識。如果你是個新手，你可以通過Jack Franklin的getting started guide了解 Vue.js 2.0。同時，我將使用ES6語法，你可以參考www.sitepoint.com/tag/es6/ 重溫ES6語法。

我們的 Demo 最終效果如下:

本文中代碼可參照 GitHub, demo 地址如下：https://github.com/sitepoint-editors/nuxt-ssr-blog/

基礎配置

開始使用 Nuxt.js 最簡單的方式就是使用 Nuxt.js 團隊自己開發的腳手架。我們可以使用 vue-cli 快速創建我們的項目 (ssr-blog)：

`vue init nuxt/starter ssr-blog`
# 提示： 如果你沒有安裝過vue-cli，請先通過npm install -g vue-cli 命令安裝vue-cli。

# 之后，我們將安裝項目的依賴
cd ssr-blog
npm install

# 現在我們啟動程序:
`npm run dev`

# 如果正確啟動, 你能訪問 http://localhost:3000 
# 展示的頁面是 Nuxt.js 模板的初始頁面
# 你也可以通過查看頁面源代碼，驗證頁面所展示的一切內容，都是服務端渲染好的。

下面，我們簡單配置下 nuxt.config.js，包含以下選項：

// ./nuxt.config.js

module.exports = {
  /*
   * Headers of the page
   */
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    // ...
    link: [
      // ...
      { 
        rel: 'stylesheet', 
        href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css' 
      }
    ]
  },
  // ...
}

在如上配置文件下，我們使用 titleTemplate 字段 title 變量指定文章題目，在渲染之前用title變量值替換掉%s這個占位，填充到titleTemplate 。

同時，我也使用了 CSS 框架, Bulma, 預設一些樣式。通過 link 配置項。

提示： Nuxt.js使用 vue-meta 更新我們的 html headers 信息。所以，我們可以看看 meta 具體的配置項，優化頁面 html 信息。

現在，我們可以通過幾個步驟，完成博客的頁面和功能。

使用 Layouts

首先，我們將為我們所有的頁面定義一個通用的基本布局。我們通過修改 layouts/default.vue 文件，更新 main Nuxt.js layout：

<!-- ./layouts/default.vue -->

<template>
  <div>
    <!-- navigation -->
    <nav class="nav has-shadow">
      <div class="container">
        <div class="nav-left">
          <nuxt-link to="/" class="nav-item">
            Awesome JS SSR Blog!
          </nuxt-link>
          <nuxt-link active-class="is-active" to="/" class="nav-item is-tab" exact>Home</nuxt-link>
          <nuxt-link active-class="is-active" to="/about" class="nav-item is-tab" exact>About</nuxt-link>
        </div>
      </div>
    </nav>
    <!-- /navigation -->

    <!-- displays the page component -->
    <nuxt/>

  </div>
</template>

在我們通用的布局里，我們僅僅對頁面添加導航欄，我們通過 component進一步完成具體頁面模塊的定制。你可以查看components-nuxt-link 進一步了解。

在創建布局時component非常重要，它決定具體頁面展示的元素。

當然，component也可以做更多事情，比如定義通用組件和錯誤頁面，但是我們的博客很簡單，不需要這些功能。強烈建議閱讀 Nuxt.js documentation on views ，你可以通過這篇文章了解更多 Nuxt.js 特性。

簡單的頁面和路由

Nuxt.js 頁面是以單文件組件形式組織目錄結構。 Nuxt.js 自動找到目錄下每個 .vue 文件，并添加到頁面中。

創建博客主頁

我們可以通過修改 index.vue 文件修改主頁，通過 Nuxt.js 創建的文件如下：

<!-- ./pages/index.vue -->
<template>
  <div>
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the JavaScript SSR Blog.
          </h1>
          <h2 class="subtitle">
            Hope you find something you like.
          </h2>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    head: {
      title: 'Home'
    }
  }
</script>

如前所述，在渲染之前，題目將自動填充至文件。

我們現在可以刷新頁面，看看主頁的變化。

創建 About 頁面

Nuxt.js 還有一個優秀的特性，監聽文件夾下文件的更改，所以，在文件更改時，不需要重啟應用更新。

來，我們添加一個簡單的 about.vue 頁面：

<!-- ./pages/about.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">About this website.</h2>
      <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
      <br>
      <h4 class="title is-4">What we hope to achieve:</h4>
      <ul>
        <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
        <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
        <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
        <li>Ut non enim metus.</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About'
  }
}
</script>

現在我們訪問 http://localhost:3000/about 看看about頁面，無需重啟，非常方便。

在主頁展示文章列表

我們的首頁在沒有內容的時候展示如上, 所以下一步，我們要在 index.vue 上添加博客列表這個組件。

首先，我們需要把 JSON 格式的文章保存在服務根目錄下。文件可以從這里下載，或者你可以復制下面的 JSON 到根目錄文件夾 posts.json 下:

[
    {
        "id": 4,
        "title": "Building universal JS apps with Nuxt.js",
        "summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "08:00 - 07/06/2017"
    },
    {
        "id": 3,
        "title": "Great SSR Use cases",
        "summary": "See simple and rich server rendered JavaScript apps.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "17:00 - 06/06/2017"
    },
    {
        "id": 2,
        "title": "SSR in Vue.js",
        "summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "13:00 - 06/06/2017"
    },
    {
        "id": 1,
        "title": "Introduction to SSR",
        "summary": "Learn about SSR in JavaScript and how it can be super cool.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "John Doe",
        "published": "11:00 - 06/06/2017"
    }
]

提示：理想情況下，我們應該從通過 API 獲取文章數據。

components 存放在 components 文件夾下，我們可以創建如下組件：

<!-- ./components/Posts.vue -->
<template>
  <section class="main-content">
    <div class="container">
      <h1 class="title has-text-centered">
        Recent Posts.
      </h1>
      <div class="columns is-multiline">
        <div class="column is-half" v-for="post in posts">
          <div class="card">
           <header class="card-header">
            <p class="card-header-title">
              {{ post.title }}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              {{ post.summary }}
              <br>
              <small>
                by <strong>{{ post.author}}</strong> 
                \\ {{ post.published }}
              </small>
            </div>
          </div>
          <footer class="card-footer">
            <nuxt-link :to="`/post/${post.id}`" 
              class="card-footer-item">
              Read More
            </nuxt-link>
          </footer>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

<script>
  import posts from '~/posts.json'

  export default {
    name: 'posts',
    data () {
      return { posts }
    }
  }
</script>

我們引入 JSON 文件充當異步數據，通過 v-for 指令循環列表，取出我們需要的屬性填充進組件模板展示。

提示： ~ 符號是 / 的別名。你可以查看這篇文檔了解更具體的用法。

下面，我們添加 component 到主頁：

<!-- ./pages/index.vue -->
<template>
<div>
    <!-- ... -->
    <posts />
</div>
</template>

<script>
import Posts from '~components/Posts.vue'

export default {
  components: {
    Posts
  },
  // ...
}
</script>

添加動態路由

現在，我們為文章頁配置動態路由，我們以 /post/1 為例：

為此，我們添加 post 文件夾到 pages 目錄下，如下：

pages
└── post
    └── _id
        └── index.vue

我們的程序生成相應的動態路由：

router: {
  routes: [
    // ...
    {
      name: 'post-id',
      path: '/post/:id',
      component: 'pages/post/_id/index.vue'
    }
  ]
}

更新單一發布文件：

<!-- ./pages/post/_id/index.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">{{ post.title }}</h2>
      <div v-html="post.content"></div>
      <br>
      <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4>
    </div>
  </div>
</template>

<script>
  // import posts saved JSON data
  import posts from '~/posts.json'

  export default {
    validate ({ params }) {
      return /^\d+$/.test(params.id)
    },
    asyncData ({ params }, callback) {
      let post = posts.find(post => post.id === parseInt(params.id))
      if (post) {
        callback(null, { post })
      } else {
        callback({ statusCode: 404, message: 'Post not found' })
      }
    },
    head () {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.post.summary
          }
        ]
      }
    }
  }
</script>

Nuxt.js通過添加通用方法，簡化開發流程。看看我們應該如何在單文件應用中使用它。

路由校驗可以通過路由校驗方法 validate 校驗路由。如果我們的驗證路由參數驗證數字，如果驗證失敗，將自動跳轉到404頁面。如果它返回“false”,Nuxt。js將自動加載404錯誤頁面。想看更多，請查看Nuxt官網。
asyncData 方法用于 fetch 數據，并在服務端渲染頁面，返回給瀏覽器。它可以通過多種方式返回數據。我們可以通過多種方式返回數據。在本文中的例子里，我們使用回調函數返回頁面。我們使用一個回調函數來返回相同的帖子“id”屬性“id”參數的路線。
正如我們之前看到的,我們使用head 的方法來設置頁面 header 。這時，我們改變頁面你的 title ，添加頁面信息到具體頁面。

現在我們可以再次訪問我們的博客看到所有路線和頁面正常工作，并查看頁面源代碼生成的HTML。我們有一個服務器端JavaScript應用程序呈現功能。

生成靜態文件

接下來，我們要生成程序的 HTML 靜態文件。

我們需要對 Nuxt.js 做一個小修改，Nuxt.js 默認忽略動態路由。為了生成動態路由文件，我們需要修改 ./nuxt.config.js

我們使用回調函數，返回以后包含動態路由的列表：

// ./nuxt.config.js

module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json')
      let routes = posts.map(post => `/post/${post.id}`)
      callback(null, routes)
    }
  }
}

如果你想查看全部關于 generate 的配置，可以參照這篇文檔。

運行如下命令，生成全部頁面：

`npm run generate`

Nuxt 將所有生成的頁面放到 dist 文件夾下。

使用 Nginx 部署

最后一步，可以使用 Nginx 進行部署，nginx的安裝過程此文不再贅述。

結論

generate 命令來生成我們頁面的靜態文件，假如，我們需要回復。

下一期講，改版中的踩坑問題。

在線咨詢

上一篇：從Web前端零基礎到全棧架構，潭州教育助力學員掌握職業技能
下一篇：輕松添加！批量處理HTML文本，快速添加所需內容！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商