前后端数据接口对接练习

Posted 2020-12-22 python-368

练习要求：

要求：
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