diff --git "a/Day21-30/Web\345\211\215\347\253\257\346\246\202\350\277\260.md" "b/Day21-30/Web\345\211\215\347\253\257\346\246\202\350\277\260.md"
index a54712195eaed2b3c4de1bb0b2e0244e8f8ece29..8fee31bc0615479cb4a6f307842c8f8d76567ab4 100644
--- "a/Day21-30/Web\345\211\215\347\253\257\346\246\202\350\277\260.md"
+++ "b/Day21-30/Web\345\211\215\347\253\257\346\246\202\350\277\260.md"
@@ -391,7 +391,239 @@
   - 加载内容
   - 提交表单
 
-### 使用Bootstrap
+### 前端框架
+
+#### 渐进式框架 - [Vue.js](<https://cn.vuejs.org/>)
+
+##### 快速上手
+
+1. 引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。
+
+   ```HTML
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   ```
+
+2. 数据绑定（声明式渲染 ）。
+
+   ```HTML
+   <div id="app">
+   	<h1>{{ product }}库存信息</h1>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			product: 'iPhone X'
+   		}
+   	});
+   </script>
+   ```
+
+3. 条件与循环。
+
+   ```HTML
+   <div id="app">
+   	<h1>库存信息</h1>
+       <hr>
+   	<ul>
+   		<li v-for="product in products">
+   			{{ product.name }} - {{ product.quantity }}
+   			<span v-if="product.quantity === 0">
+   				已经售罄
+   			</span>
+   		</li>
+   	</ul>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			products: [
+   				{"id": 1, "name": "iPhone X", "quantity": 20},
+   				{"id": 2, "name": "华为 Mate20", "quantity": 0},
+   				{"id": 3, "name": "小米 Mix3", "quantity": 50}
+   			]
+   		}
+   	});
+   </script>
+   ```
+
+4. 计算属性。
+
+   ```HTML
+   <div id="app">
+   	<h1>库存信息</h1>
+   	<hr>
+   	<ul>
+   		<li v-for="product in products">
+   			{{ product.name }} - {{ product.quantity }}
+   			<span v-if="product.quantity === 0">
+   				已经售罄
+   			</span>
+   		</li>
+   	</ul>
+   	<h2>库存总量：{{ totalQuantity }}台</h2>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			products: [
+   				{"id": 1, "name": "iPhone X", "quantity": 20},
+   				{"id": 2, "name": "华为 Mate20", "quantity": 0},
+   				{"id": 3, "name": "小米 Mix3", "quantity": 50}
+   			]
+   		},
+   		computed: {
+   			totalQuantity() {
+   				return this.products.reduce((sum, product) => {
+   					return sum + product.quantity
+   				}, 0);
+   			}
+   		}
+   	});
+   </script>
+   ```
+
+5. 处理事件。
+
+   ```HTML
+   <div id="app">
+   	<h1>库存信息</h1>
+   	<hr>
+   	<ul>
+   		<li v-for="product in products">
+   			{{ product.name }} - {{ product.quantity }}
+   			<span v-if="product.quantity === 0">
+   				已经售罄
+   			</span>
+   			<button @click="product.quantity += 1">
+   				增加库存
+   			</button>
+   		</li>
+   	</ul>
+   	<h2>库存总量：{{ totalQuantity }}台</h2>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			products: [
+   				{"id": 1, "name": "iPhone X", "quantity": 20},
+   				{"id": 2, "name": "华为 Mate20", "quantity": 0},
+   				{"id": 3, "name": "小米 Mix3", "quantity": 50}
+   			]
+   		},
+   		computed: {
+   			totalQuantity() {
+   				return this.products.reduce((sum, product) => {
+   					return sum + product.quantity
+   				}, 0);
+   			}
+   		}
+   	});
+   </script>
+   ```
+
+6. 用户输入。
+
+   ```HTML
+   <div id="app">
+   	<h1>库存信息</h1>
+   	<hr>
+   	<ul>
+   		<li v-for="product in products">
+   			{{ product.name }} - 
+   			<input type="number" v-model.number="product.quantity" min="0">
+   			<span v-if="product.quantity === 0">
+   				已经售罄
+   			</span>
+   			<button @click="product.quantity += 1">
+   				增加库存
+   			</button>
+   		</li>
+   	</ul>
+   	<h2>库存总量：{{ totalQuantity }}台</h2>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			products: [
+   				{"id": 1, "name": "iPhone X", "quantity": 20},
+   				{"id": 2, "name": "华为 Mate20", "quantity": 0},
+   				{"id": 3, "name": "小米 Mix3", "quantity": 50}
+   			]
+   		},
+   		computed: {
+   			totalQuantity() {
+   				return this.products.reduce((sum, product) => {
+   					return sum + product.quantity
+   				}, 0);
+   			}
+   		}
+   	});
+   </script>
+   ```
+
+7. 通过网络加载JSON数据。
+
+   ```HTML
+   <div id="app">
+   	<h2>库存信息</h2>
+   	<ul>
+   		<li v-for="product in products">
+   			{{ product.name }} - {{ product.quantity }}
+   			<span v-if="product.quantity === 0">
+   				已经售罄
+   			</span>
+   		</li>
+   	</ul>
+   </div>
+   
+   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   <script>
+   	const app = new Vue({
+   		el: '#app',
+   		data: {
+   			products: []
+   		}，
+   		created() {
+   			fetch('https://jackfrued.top/api/products')
+   				.then(response => response.json())
+   				.then(json => {
+   					this.products = json
+   				});
+   		}
+   	});
+   </script>
+   ```
+
+##### 使用脚手架 - vue-cli
+
+Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli，通过工具可以省去手工配置开发环境、测试环境和运行环境的步骤，让开发者只需要关注要解决的问题。
+
+1. 安装脚手架。
+2. 创建项目。
+3. 安装依赖包。
+4. 运行项目。
+
+
+#### UI框架 - [Element](<http://element-cn.eleme.io/#/zh-CN>)
+
+
+
+#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
 
 #### 特点
 
diff --git a/Day21-30/code/vue.demo.html b/Day21-30/code/vue.demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..fc09e800264c25f6f06fab0e664e4b0f5b2182d1
--- /dev/null
+++ b/Day21-30/code/vue.demo.html
@@ -0,0 +1,40 @@
+<link rel="stylesheet" type="text/css" href="bulma.css">
+
+<div id="app">
+	<h1>库存信息</h1>
+	<hr>
+	<ul>
+		<li v-for="product in products">
+			{{ product.name }} - 
+			<input type="number" v-model.number="product.quantity" min="0">
+			<span v-if="product.quantity === 0">
+				已经售罄
+			</span>
+			<button @click="product.quantity += 1">
+				增加库存
+			</button>
+		</li>
+	</ul>
+	<h2>库存总量：{{ totalQuantity }}台</h2>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script>
+	const app = new Vue({
+		el: '#app',
+		data: {
+			products: [
+				{"id": 1, "name": "iPhone X", "quantity": 20},
+				{"id": 2, "name": "华为 Mate20", "quantity": 0},
+				{"id": 3, "name": "小米 Mix3", "quantity": 50}
+			]
+		},
+		computed: {
+			totalQuantity() {
+				return this.products.reduce((sum, product) => {
+					return sum + product.quantity
+				}, 0);
+			}
+		}
+	});
+</script>
\ No newline at end of file
diff --git a/Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf b/Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..6f43df52c49d98ae09897e2762b16159083b1134
Binary files /dev/null and b/Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf differ
diff --git a/Day21-30/docs/Why Vue.mp4 b/Day21-30/docs/Why Vue.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..76b7f4852f3080e2d4ad8d1487a1d330ea582088
Binary files /dev/null and b/Day21-30/docs/Why Vue.mp4 differ
diff --git a/Day21-30/docs/Why you should use Bulma.mp4 b/Day21-30/docs/Why you should use Bulma.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..1112d021ac3de237a531448406644772820d39b9
Binary files /dev/null and b/Day21-30/docs/Why you should use Bulma.mp4 differ
diff --git "a/Day91-100/Django\347\237\245\350\257\206\347\202\271\346\246\202\350\277\260.md" "b/Day91-100/Django\347\237\245\350\257\206\347\202\271\346\246\202\350\277\260.md"
index a6492171de0aad102326f50cd956b6d0963a43dc..4ae84e5fef4a917c88dab236ae0e914d515866b4 100644
--- "a/Day91-100/Django\347\237\245\350\257\206\347\202\271\346\246\202\350\277\260.md"
+++ "b/Day91-100/Django\347\237\245\350\257\206\347\202\271\346\246\202\350\277\260.md"
@@ -1748,6 +1748,7 @@ MIDDLEWARE = [
     'corsheaders.middleware.CorsMiddleware',
 ]
 
+CORS_ORIGIN_ALLOW_ALL = True
 # 配置跨域白名单
 # CORS_ORIGIN_WHITELIST = ('www.abc.com', 'www.baidu.com')
 # CORS_ORIGIN_REGEX_WHITELIST = ('...', )