Bina aplikasi web satu halaman menggunakan Flask dan AngularJS-Tutorial Python-php.cn

Bina aplikasi web satu halaman menggunakan Flask dan AngularJS

PHPz

Lepaskan： 2023-06-17 08:49:21

asal

1271 orang telah melayarinya

Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS.

Flask ialah rangka kerja web Python ringan yang falsafah terasnya ialah kesederhanaan dan keanggunan. Flask tidak memaksa anda untuk menyusun aplikasi anda mengikut corak tertentu, tetapi memberikan fleksibiliti dan kebebasan yang mencukupi untuk mengatur kod anda mengikut pilihan anda sendiri. AngularJS ialah rangka kerja JavaScript yang berkuasa yang matlamat terasnya adalah untuk menjadikan pembangunan web lebih mudah dan menyeronokkan. AngularJS menyediakan banyak ciri dan alatan yang berguna, seperti pengikatan data, suntikan pergantungan, enjin templat dan banyak lagi. Menggabungkan Flask dan AngularJS, anda boleh membina SPA yang cekap, elegan dan mudah diselenggara.

Mari kita lihat cara membina SPA mudah menggunakan Flask dan AngularJS. Pertama, kita perlu memasang Flask dan AngularJS. Sebelum memasang Flask, sila pastikan anda telah memasang Python dan alat pengurusan pakej pip. Gunakan arahan berikut untuk memasang Flask:

pip install flask

Salin selepas log masuk

Sebelum memasang AngularJS, sila buat folder bernama "statik" dalam direktori projek anda untuk menyimpan fail JavaScript dan CSS anda. Gunakan arahan berikut untuk memasang AngularJS:

npm install angular

Salin selepas log masuk

Selepas pemasangan selesai, anda perlu memperkenalkan fail AngularJS JS dalam fail HTML dan mencipta arahan ng-app, yang digunakan untuk memulakan AngularJS. Dalam arahan ini, kami juga boleh menetapkan beberapa konfigurasi dan pilihan global, seperti mendayakan mod HTML5 dan tetapan penghalaan. Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>My SPA</title>
  </head>
  <body>
    <h1>My SPA</h1>
    <p>Welcome to my SPA</p>

    <script src="static/angular/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      // some global settings
      app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
      }]);
    </script>
  </body>
</html>

Salin selepas log masuk

Dalam kod sampel ini, kami mentakrifkan modul AngularJS bernama "myApp" dan memulakannya dalam arahan ng-app. Kami juga mentakrifkan perkhidmatan yang dipanggil "$locationProvider", yang digunakan untuk menetapkan mod HTML5 dan menetapkannya sebagai pilihan global.

Seterusnya, kami perlu menentukan beberapa pengawal dan templat AngularJS untuk mengurus SPA kami. Pengawal dan templat berinteraksi melalui pengikatan data. Dalam contoh ini, kami akan menentukan pengawal yang dipanggil "MainCtrl" yang mengendalikan paparan halaman utama kami. Kod sampel adalah seperti berikut:

<script>
  app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.message = 'Welcome to my SPA';
  }]);
</script>

<div ng-controller="MainCtrl">
  <h1>My SPA</h1>
  <p>{{message}}</p>
</div>

Salin selepas log masuk

Dalam kod sampel ini, kami mentakrifkan pengawal bernama "MainCtrl" dan menetapkan sifat bernama "message" yang nilainya ialah "Selamat Datang ke SPA saya". Kami memperuntukkan pengawal ini kepada elemen div HTML melalui arahan pengawal-ng, dan kemudian menggunakan kurungan berganda "{{}}" dalam elemen ini untuk memaparkan nilai "mesej". Ini ialah mekanisme pengikatan data AngularJS, yang boleh menyegerakkan data secara automatik dalam pengawal ke templat HTML.

Akhir sekali, kita perlu menentukan beberapa fungsi penghalaan dan lihat dalam Flask untuk membalas permintaan penyemak imbas. Dalam contoh ini, kami akan mentakrifkan laluan bernama "indeks", yang digunakan untuk membalas permintaan penyemak imbas untuk laluan "/" dan memberikan paparan halaman utama kami. Kod sampel adalah seperti berikut:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

Salin selepas log masuk

Dalam kod sampel ini, kami mentakrifkan laluan bernama "indeks", yang akan dicetuskan apabila penyemak imbas meminta laluan "/". Dalam fungsi pemprosesan penghalaan, kami menggunakan fungsi render_template Flask untuk memaparkan templat bernama "index.html", yang akan dipaparkan kepada pengguna sebagai paparan halaman utama kami.

Kini, kami telah selesai membina aplikasi SPA yang mudah. Dengan membina SPA menggunakan Flask dan AngularJS, kami boleh mendapatkan pengalaman pengguna yang lebih baik dan prestasi yang lebih tinggi. Pada masa yang sama, model ini juga menjadikan struktur kod laman web lebih jelas dan mudah diselenggara. Mari kita ringkaskan perkara utama dalam artikel ini:

Flask ialah rangka kerja web Python ringan yang menyediakan fleksibiliti dan kebebasan yang mencukupi untuk mengikut pilihan anda sendiri untuk menyusun kod anda.
AngularJS ialah rangka kerja JavaScript yang berkuasa yang matlamat terasnya adalah untuk menjadikan pembangunan web lebih mudah dan menyeronokkan.
Menggabungkan Flask dan AngularJS, anda boleh membina SPA yang cekap, elegan dan mudah diselenggara.
Apabila membina SPA, kami perlu menentukan pengawal dan templat, dan menggunakan mekanisme pengikatan data untuk berinteraksi pada masa yang sama, kami juga perlu mentakrifkan fungsi penghalaan dan lihat dalam Flask untuk membalas permintaan penyemak imbas.

Akhir sekali, saya harap artikel ini dapat membantu anda lebih memahami dan menguasai penggunaan Flask dan AngularJS. Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan mesej di ruangan komen.

Atas ialah kandungan terperinci Bina aplikasi web satu halaman menggunakan Flask dan AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!