Frontend Frameworks Mentioned in Python-100-Days: Vue.js, Bootstrap, and More

Question

Discover frontend frameworks from Python-100-Days including Vue.js, Bootstrap, and more. Learn essential web development tools for Pythonistas.

Accepted Answer

The Python-100-Days repository explicitly mentions five frontend technologies: Vue.js, Element UI, Bootstrap, jQuery, and AngularJS, with Vue.js serving as the primary progressive JavaScript framework for modern web development tutorials.

The Python-100-Days learning path by jackfrued is a comprehensive Chinese tutorial series designed to take beginners from Python basics to full-stack development. When covering web development modules, the curriculum introduces specific frontend frameworks mentioned in Python-100-Days to demonstrate how Python backends integrate with modern JavaScript UI libraries.

Complete List of Frontend Frameworks and Libraries

The repository references five distinct frontend technologies across its documentation files, ranging from modern progressive frameworks to legacy libraries.

Vue.js

Vue.js appears as the primary modern JavaScript framework recommended in the curriculum. According to README.md at line 318 and detailed in Day31-35/32-33.Web前端入门.md at line 375, Vue is described as a progressive framework for building interactive user interfaces without requiring a full build toolchain.

Element UI

Element UI is introduced in README.md at line 319 and documented at line 603 of the Web frontend guide. This component library builds upon Vue.js to provide ready-made UI widgets including buttons, tables, and forms for rapid interface development.

Bootstrap

Bootstrap appears in README.md at line 320 and receives detailed treatment at line 774 of the frontend introduction document. The repository presents Bootstrap as the standard responsive CSS framework for layout and styling in Django projects.

jQuery

jQuery is referenced extensively in Day31-35/32-33.Web前端入门.md at line 2252 and in Day46-60/48.静态资源和Ajax请求.md at line 95. The curriculum uses this classic JavaScript library for DOM manipulation and AJAX requests when demonstrating server communication.

AngularJS

AngularJS receives only a historical mention in Day91-100/95.使用Django开发商业项目.md at line 441. The repository lists it as an alternative MVC frontend framework without providing detailed implementation examples.

Key Implementation Files and Locations

Understanding where these frameworks appear helps navigate the 100-day curriculum effectively.

README.md — Central index listing Vue.js, Element UI, and Bootstrap in the project roadmap
Day31-35/32-33.Web前端入门.md — Detailed introductions and code snippets for Vue.js, Element UI, Bootstrap, and jQuery
Day46-60/48.静态资源和Ajax请求.md — Practical jQuery/Ajax integration patterns with Django backends
Day46-60/53.前后端分离开发入门.md — Vue.js page rendering without complex build configuration
Day91-100/95.使用Django开发商业项目.md — Architectural discussion mentioning AngularJS alongside Bootstrap for larger Django deployments

Practical Code Examples from the Repository

The Python-100-Days tutorials provide concrete implementation patterns for each framework.

Vue.js Data Binding

This example from the frontend separation guide demonstrates basic Vue integration:

<!-- src/templates/subjects.html -->
<div id="app">
  <h2>{{ title }}</h2>
  <ul>
    <li v-for="sub in subjects">{{ sub }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data: {
    title: '学习科目',
    subjects: ['Python', '数据分析', '机器学习']
  }
});
</script>

Element UI Component Usage

The Web frontend chapter shows how to integrate Element UI components with Vue:

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="elem-app">
  <el-button type="primary" @click="handle">点击我</el-button>
</div>

<script>
new Vue({
  el: '#elem-app',
  methods: {
    handle() { alert('Element 按钮被点击'); }
  }
});
</script>

Bootstrap Responsive Layout

The curriculum uses Bootstrap for grid layouts in Django templates:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h3>左侧内容</h3>
    </div>
    <div class="col-md-6">
      <h3>右侧内容</h3>
    </div>
  </div>
</div>

jQuery AJAX with Django

The static resources and Ajax chapter demonstrates server communication:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<button id="loadBtn">加载数据</button>
<ul id="dataList"></ul>

<script>
$('#loadBtn').on('click', function () {
  $.getJSON('/api/subjects/', function (data) {
    $('#dataList').empty();
    data.forEach(item => $('#dataList').append(`<li>${item.name}</li>`));
  });
});
</script>

AngularJS Historical Reference

The commercial Django development guide briefly shows AngularJS syntax:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<div ng-app ng-controller="DemoCtrl">
  <input ng-model="msg">
  <p>你输入了：{{msg}}</p>
</div>

<script>
function DemoCtrl($scope) {
  $scope.msg = '';
}
</script>

Summary

Vue.js is the primary modern framework recommended for frontend development in the Python-100-Days curriculum, introduced in the README and detailed in Day 31-35 materials.
Element UI provides pre-built Vue components for rapid interface construction without custom CSS.
Bootstrap serves as the standard responsive design framework for layout management in Django projects.
jQuery remains the library of choice for DOM manipulation and AJAX requests when connecting to Python backends.
AngularJS receives only a passing mention as a historical alternative MVC framework in the advanced commercial project section.
React and Svelte are not referenced anywhere in the repository's current documentation.

Frequently Asked Questions

Does Python-100-Days teach React or modern React hooks?

No, the repository does not mention React, React hooks, or Svelte anywhere in its documentation. The curriculum focuses on Vue.js as the primary modern JavaScript framework for frontend development, specifically using Vue 2 syntax with CDN-based integration rather than build tools.

The author recommends Vue.js paired with Element UI for beginners who want to build interactive interfaces quickly. According to Day31-35/32-33.Web前端入门.md, Vue is chosen because it can be added to a page via CDN without complex build configuration, making it accessible to Python developers who are new to JavaScript tooling.

How does the curriculum handle AJAX requests in Django projects?

The curriculum teaches jQuery for AJAX requests in Day46-60/48.静态资源和Ajax请求.md. The tutorials demonstrate using $.getJSON() and $.ajax() methods to communicate with Django REST endpoints, handling JSON data exchange between the Python backend and JavaScript frontend without page reloads.

Is AngularJS still relevant according to the Python-100-Days materials?

No, AngularJS is treated as a historical reference only. In Day91-100/95.使用Django开发商业项目.md at line 441, it is mentioned alongside other MVC frameworks for architectural context, but the repository provides no modern implementation guidance or recommendations to use AngularJS in new projects.