先後端數據接口對接練習

練習要求：

要求：
1. 能實現前端增刪查改省份信息的功能 

​       其中查詢數據的時候，顯示爲案例中的表格格式。

​      注意,在drf中能夠經過自定義請求頭,實現cors,解決axios跨域問題。
2.實現點擊gdp表頭信息,可以進行倒敘排序.


| 省份編號 (id) | 省份 (name) | 佔地面積 （area） | 人口 （population/億） | 國民生產總值 （gdp/萬億） |
| ------------- | ----------- | ----------------- | ---------------------- | ------------------------- |
| 1             | 廣東        | 17.98             | 1.12                   | 9.73                      |
| 2             | 江蘇        | 10.26             | 0.80                   | 9.26                      |
| 3             | 山東        | 15.7              | 1.00                   | 7.65                      |
| 4             | 浙江        | 10.18             | 0.57                   | 5.62                      |
| 5             | 河南        | 16.7              | 0.96                   | 4.8                       |
| 6             | 四川        | 48.5              | 0.83                   | 4.07                      |
| 7             | 湖北        | 18.59             | 0.59                   | 3.94                      |
| 8             | 湖南        | 21.18             | 0.69                   | 3.64                      |
| 9             | 河北        | 19                | 0.75                   | 3.6                       |
| 10            | 福建        | 12.14             | 0.39                   | 3.58        

              |

1.1搭建項目(ubuntu):

終端操做（搭建前端項目）:

cd ./Desktop      //進入桌面
moluo@ubuntu:~/Desktop$ mkvirtualenv homework      //建立虛擬環境
(homework) moluo@ubuntu:~/Desktop$ mkdir homework      //在桌面建立目錄
(homework) moluo@ubuntu:~/Desktop$ cd homework/      //進入桌面
(homework) moluo@ubuntu:~/Desktop/homework$ vue init webpack view      //建立前端項目
? Project name view
? Project description A Vue.js project
? Author Jerry
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (reco
mmended) npm....................            //建立ok
// 搭建完後端在進前端run起來
(homework) moluo@ubuntu:~/Desktop/homework$ cd view
(homework) moluo@ubuntu:~/Desktop/homework/view$ npm run dev

終端操做（搭建後端項目）:

Ctrl+Shift+T      //另起終端窗口搭建後端項目
moluo@ubuntu:~/Desktop/homework$ workon homework
(homework) moluo@ubuntu:~/Desktop/homework$ pip install django -i https://pipy.douban.com/simple
      //下載django
(homework) moluo@ubuntu:~/Desktop/homework$ cd view
(homework) moluo@ubuntu:~/Desktop/homework/view$ npm run dev   
.................        
 DONE  Compiled successfully in 2699ms

這個色

Ctrl+Shift+T      //另起終端窗口搭建後端項目
moluo@ubuntu:~/Desktop/homework$ workon homework
(homework) moluo@ubuntu:~/Desktop/homework$ pip install django -i https://pipy.douban.com/simple
      //下載django
(homework) moluo@ubuntu:~/Desktop/homework$ cd view
(homework) moluo@ubuntu:~/Desktop/homework/view$ npm run dev   
.................        
 DONE  Compiled successfully in 2699ms

這個色

Ctrl+Shift+T      //另起終端窗口搭建後端項目
moluo@ubuntu:~/Desktop/homework$ workon homework
(homework) moluo@ubuntu:~/Desktop/homework$ pip install django -i https://pipy.douban.com/simple
      //下載django
(homework) moluo@ubuntu:~/Desktop/homework$ cd view
(homework) moluo@ubuntu:~/Desktop/homework/view$ npm run dev   
.................        
 DONE  Compiled successfully in 2699ms

變個色

Ctrl+Shift+T      //另起終端窗口搭建後端項目
moluo@ubuntu:~/Desktop/homework$ workon homework
(homework) moluo@ubuntu:~/Desktop/homework$ pip install django -i https://pipy.douban.com/simple
      //下載django
(homework) moluo@ubuntu:~/Desktop/homework$ cd view
(homework) moluo@ubuntu:~/Desktop/homework/view$ npm run dev   
.................        
 DONE  Compiled successfully in 2699ms