技术交流群：932694278
储备知识：Python，HTML，CSS，JavaScript等计算机基础知识
web框架： 别人已经设定好的一个web网站模板，你学习它的规则，然后“填空”或“修改”成你自己需要的样子。
0 开始前的准备–环境检查及工具的下载
0-1环境的检查 —— python&pip
报不是内部命令的错误时，自己检查环境变量的配置，下面以python和pip为例
检查python是否安装成功，是否配置过环境变量，命令行运行如下命令
python -V
pip list
第一条出现一行python版本就算成功
第二条出现一堆包的名字就算成功
python不是内部命令解决方案https://zhuanlan.zhihu.com/p/263000046
其余问题自行百度，时刻牢记我们是面向百度编程小能手
0-2工具的下载
文中出现的所有工具，工具包都有
除专业版外，其余均可自行到官网下载
工具包地址（未更新）：
链接：https://pan.quark.cn/s/fb988374b279
提取码：p1Am
0-3文档的使用
使用文档的过程中不知道是代码还是命令时，如果是在博客中则是黑框右上角，如果是打开的Markdown文档则是点击后在右下角，如cmd则是在cmd中输入命令，如python则是Python代码，需要在对应的位置进行代码的修改。
第一部分：Python Web 框架——django
Django是高水准的Python编程语言驱动的一个开源模型．视图，控制器风格的Web应用程序框架，它起源于开源社区。使用这种架构，程序员可以方便、快捷地创建高品质、易维护、数据库驱动的应用程序。这也正是OpenStack的Horizon组件采用这种架构进行设计的主要原因。另外，在Django框架中，还包含许多功能强大的第三方插件，使得Django具有较强的可扩展性。
Django将MVC中的视图进一步分解为 Django视图 和 Django模板两个部分，分别决定 “展现哪些数据” 和 “如何展现”，使得Django的模板可以根据需要随时替换，而不仅仅限制于内置的模板。框架把控制层给封装了，无非与数据交互这层都是数据库表的读,写,删除,更新的操作。在写程序的时候，只要调用相应的方法就行了
https://zhuanlan.zhihu.com/p/27717315 简单理解什么是MVC
一、django及其附属工具安装
1- 安装django开发环境及其依赖（python3.7+django2.2）——————pip命令安装
windows使用命令行提示符，mac使用终端
# 安装django————————————django框架的核心模块
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django==2.2
# 安装pymysql———————————python来操作mysql数据库的模块
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pymysql
# 安装restframework markdown django-filter依赖:
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple djangorestframework markdown Django-filter
# 安装跨域支持
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple Django-cors-headers
版本最好保持一致，追求刺激可以自选版本
多个python版本注意修改环境变量
安装后续django依赖模块时，会自动更新到适合的版本，如果另后续出现问题可自行百度
2- 安装pycharm————也可以安装别的能看python代码的软件
安装pycharm方式二选一：工具包&官网
工具包对应文件：pycharm文件夹中的
pycharm-community-2019.3.exe
pycharm只是一个看代码的工具，专业版需要使用科技手段，有条件请支持正版，没条件社区版同样够用
建议安装notepad++用来看代码，工具包中文件名 npp.7.8.8.Installer.x64.exe
3-安装mysql数据库及其可视化工具
3-1 mysql服务的安装
https://dev.mysql.com/downloads/mysql/
下载并安装mysql5.7.31——工具包内有，注意版本保持一致
安装教程：https://blog.csdn.net/zixiao_love/article/details/100118585
注：在设置密码时一定要谨慎，不想找trouble，就直接123456
3-2 安装数据库客户端Navicat Premium 15，需科技手段
安装教程：https://cloud.tencent.com/developer/article/1804255
一定要注意在安装完软件本体后，不要打开软件，要打开注册机，然后再照着教程操作
注册完成后，在左上角找到帮助，选择帮助选项中的关于，看是否注册成功
3-3 检查pymysql——cmd黑窗口中操作
这是python来操作mysql数据库的
4- 开发接口测试 Postman————可选，教程中用的少，用来测试接口传输的数据
下载：https://www.postman.com/downloads/
到这里django需要的环境基本配置完成，我们可以测试一下是否完全成功
5-测试django是否合格
5-1 在某个你喜欢的盘你喜欢的位置创建一个英文目录（也就是创建一个文件夹名）叫Test，并在cmd中进入当前的路径，创建一个工程项目Test_django
django-admin startproject Test_django
这里进入当前目录可以选择直接在当前目录的 地址栏 输入 cmd ，然后回车即可打开当前目录的cmd
或者在常规打开命令行后使用 cd 完整路径 ，进入对应目录
5-2 更改时区和语言
在 Test_django的settings.py找到下面的两个变量，并修改对应值
打开方式推荐右键选择打开方式为notepad++，快
下面是两者任选一个，根据你的操作系统而定
# window系统
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
# mac系统
LANGUAGE_CODE = 'zh_Hans'
TIME_ZONE = 'Asia/Shanghai'
5-3 在命令行中，进入工程目录Test_django，启动WEB服务
# 是一行一行输入
# 一定要先进到文件夹里再输入、
# 提示找不到对应文件时检查目录
cd Test_django
python manage.py runserver
显示如下内容表示服务启动成功
....
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
5-4 浏览器测试
打开一个浏览器，在地址框里录入:http://127.0.0.1:8000/
可以打开一个python Django的网页说明配置成功
二、django工程开发流程
0 在合适的位置创建新文件夹django_stu,并使用pycharm打开此文件夹————如果设置虚拟环境，需要提前配置好虚拟环境的Python编译器
1 创建一个名为StudSys工程项目
在pycharm左下角Terminal工具 执行下面的指令：
django-admin startproject StudSys
【命令说明】创建的工程project，下面会自动创建一个与工程名相同的文件夹以及一个manage.py文件
文件目录结构介绍：
manage.py：用于管理项目的脚本文件，需要通过python命令执行，在cmd中执行如下格式命令python manage.py [子命令,如help等]可以通过
python manage.py help看下其它指令功能，一般情况下不应该编辑这个文件。与工程名相同的文件夹下：
settings.py：所有和项目相关的配置都是放在这个里面，很重要
urls.py：配置URL路由的文件。
wsgi.py：项目与WSGI协议兼容的web服务器入口，部署的时候需要用到的
2 创建一个APP，如SchoolApp
在Terminal工具（命令行）工具继续执行
cd StudSys
进入刚创建的工程目录内，执行：
python manage.py startapp SchoolApp
app是django项目的组成部分。
一个app代表项目中的一个模块，所有URL（统一资源定位符）请求的响应都是由app来处理。
比如豆瓣，里面有图书，电影，音乐，同城等许许多多的模块，
从django的角度来看，图书，电影这些模块就是app，
图书，电影这些app共同组成豆瓣这个项目。
因此django项目由许多app组成，一个app可以被用到其他项目，django也能拥有不同的appDjango 采用了 MVT 的软件设计模式，即模型（Model），视图（View）和模板（Template）
app文件夹里都有什么：
amdin.py: 该应用后台管理系统配置
tests.py: 自动化测试模块 在这里编写测试脚本
apps.py: 自动生成
models.py: 数据模块——-常用模块*
views.py: 视图模块 代码逻辑处理主要地点——-常用模块*
**3 添加新的==APP==**（激活应用）
在 StudSys的settings.py
找到 INSTALLED_APP 添加 app名称，即 'SchoolApp'
4 添加==rest framework==支持
在 StudSys的settings.py
找到 INSTALLED_APP 添加'rest_framework'
5 更改时区和语言
在 StudSys的settings.py覆盖掉下面的两个变量值
下面是两者任选一个，根据你的操作系统而定
# window系统
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
# mac系统
LANGUAGE_CODE = 'zh_Hans'
TIME_ZONE = 'Asia/Shanghai'
6 启动WEB服务
python manage.py runserver
显示如下内容表示服务启动成功
....
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
7 测试
打开一个浏览器，在地址框里录入:http://127.0.0.1:8000/
可以找开一个python Django的网页说明配置成功
8 开发APIVIEW 接口:第一个服务接口
打开新创建的app文件夹SchoolApp中的views.py文件，将以下代码粘贴
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
class firstAPIVIEW(APIView):
# 下面这两项可以让请求不用携带token值
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
return Response("hello world")
9 配置URL路由
打开工程文件夹下的 urls.py
1.导入 APP中的视图模块 ，注意导入模块是默认没有展开的，粘贴时不要错把导入模块覆盖了
from SchoolApp.views import *
2.配置路由，本次完全覆盖此列表，之后每次新加入都是添加新的列表项
urlpatterns = [
path('admin/', admin.site.urls),
path('first',firstAPIVIEW.as_view(),name="firstTest"),
]
【注】first就是一个别名，他可以帮我们找到firstAPIVIEW里面的函数
URL是Uniform Resource Locator的简写，统一资源定位符。
一个URL由以下几部分组成：
scheme://host:port/path/?query-string=xxx#anchor
scheme：代表的是访问的协议，一般为http或者https以及ftp等。
host：主机名，域名，比如www.baidu.com。
port：端口号。当你访问一个网站的时候，浏览器默认使用80端口。
path：查找路径。比如：www.jianshu.com/trending/now，后面的trending/now就是path。
query-string：查询字符串，比如：www.baidu.com/s?wd=python，后面的wd=python就是查询字符串。
anchor：锚点，后台一般不用管，前端用来做页面定位的。
注意：URL中的所有字符都是ASCII字符集，如果出现非ASCII字符，
比如中文，浏览器会进行编码再进行传输。
【注】这里，如果大家是手动创建的django项目，而不是使用专业版pycharm自动生成的项目，pycharm会不识别不同文件引用，因此会提示找不到SchoolApp文件夹，只需要在当前django项目最外层的文件夹上右键，选择Mark Directory as ——>Sources Root ，这样操作的目的就是让pycharm将当前大文件夹作为一个项目去使用
解释：虚拟环境原理，不同文件夹不会互相干扰
10 打开Postman 测试接口
如果没有安装可以使用浏览器测试
http://127.0.0.1:8000/first
如果得到helloworld输出证明已经测试通过
你的第一个网络服务接口 通过测试 可以继续
这里后续修改配置时，不要让django持续运行，停止运行后再修改
11 配置数据库 setting.py
==DATABASES==
默认为sqlite3，更改为mysql时，需注意版本，
如果为Django2.1版本以上，mysql版本必须为5.6以上
例：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'studdb', ##数据库名
'USER': 'root', ##登陆名
'PASSWORD': '123456', ##登陆密码
'HOST': '127.0.0.1', ##地址
'PORT': '3306', ##端口号
}
}
这里其实可以让django同时使用多个数据库，不过在数据迁移的时候需要指定要迁移到哪个库
具体操作大家可以自行百度，因为目前阶段我们涉及不到那么高深的知识，为了避免混淆，推荐大家直接覆盖掉默认的数据库即可
12 创建数据库记得启动 mysql服务
打开mysql客户端，创建相应的数据库( 名必须是上面配置中的名一致)，字符集选utf8mb4
这里大家需要区分数据库名和连接名
Navicat在连接mysql的时候起的名字叫连接名，大家可以把他当做是对数据线起名，是随意的
而在我们点开连接在msql中创建数据库时，那个数据库名才是Django需要的，因此大家起的名字要跟你在Django中声明的数据库名字一致
13 执行数据更新命令
执行数据库迁移
python manage.py makemigrations
python manage.py migrate
发现已经自动为我们创建了一些django的表
解释：
makemigrations表示Django会先把发生变化的数据列个清单，在这一步时，如果我们是刚创建的项目，还没有自建模型时，他会提示没有发生变化的数据，是正常现象。但是，因为Django自身在创建时有些数据模型就已经建好了，只是因为没有改变所以他没有算在变化的数据里
而第二步migrate，会把上述数据库没有的数据进行迁移，所以在建立之初第一次数据迁移时数据库会新增很多表。在后续我们创建自己的模型再迁移时，只会再增加我们自己的表
注：
如果在迁移的时候报了mysql版本问题，
或是报Did you install mysqlclient?错误
需要在与setting.py同目录的__init__.py中添加
import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb()
这里还可能会报AttributeError: ‘str‘ object has no attribute 'decode‘
到报错的位置将decode（）改为encode（）
14 在[app名称]/models.py中添加表的model
注意：每次添加新model后，执行13代码
- 添加model
from django.db import models
from datetime import datetime
class firstModel(models.Model):
name = models.CharField(max_length=20,
default='',
verbose_name="第一个数据模型")
class Meta:
verbose_name = '第一个模型'
verbose_name_plural = verbose_name
def __str__(self):
return self.name
- 再次- 执行3-8-13 更新代码
python manage.py makemigrations
python manage.py migrate
这里执行完后，可以检查一下看看是否已经自动为我们创建了表
15 再次-修改APIVIEW 接口
导入模型
from .models import firstModel
def get(self,request,format=None):
_data=firstModel.objects.all()
return Response(_data[0])
16 再次-打开Postman 测试接口
1)一般会得到空值的提示，list out of range，因为还没有向表里写数据
#方法1：在表里直接写数据———暂用更直接的方式
#方法2：通过admin.py添加数据（相对复杂，可后期自学）
https://blog.csdn.net/weixin_45819880/article/details/104037692
- 再测试：报未序列化错误
return Response(_data[0].name)
17 模型序列化
1)在app文件夹中创建一个serializers.py
from rest_framework import serializers
from .models import firstModel
class firstModelSerializer(serializers.ModelSerializer):
class Meta:
model=firstModel
fields="__all__"
2)打开views.py 引入序列化器
from .serializers import firstModelSerializer
......
def get(self,request,format=None):
_data=firstModel.objects.all()
_data_serializer=firstModelSerializer(_data,many=True)
return Response(_data_serializer.data)
正常是可以看到json格式的数据
三、小练习
创建studentsAPP
创建模型Student，包括name,sex,age,class_null,description等属性，表名为tb_student
创建视图StudentAPIView
在网页中能够看到json数据
参考答案：
创建一个新的app：students，并添加在主配置文件
python manage.py startapp students
创建模型Student
# 创建模型Student
class Student(models.Model):
name = models.CharField(max_length=100,verbose_name="姓名")
sex = models.BooleanField(default=1,verbose_name="性别")
age = models.IntegerField(verbose_name="年龄")
class_null = models.CharField(max_length=5,verbose_name="班级编号")
description = models.TextField(max_length=1000,verbose_name="个性签名")
class Meta:
db_table = "tb_student"
verbose_name = "学生"
verbose_name_plural = verbose_name
执行数据迁移
python manage.py makemigrations
python manage.py migrate
创建序列化器类
# 创建序列化器类
from rest_framework import serializers
from .models import firstModel
class StudentModelSerializer(serializers.ModelSerializer):
class Meta:
model = Student
fields = "__all__"
# model 指明该序列化器处理的数据字段从模型类BookInfo参考生成
# fields 指明该序列化器包含模型类中的哪些字段，'all’指明包含所有字段
创建视图StudentViewSet
# 创建视图StudentAPIView
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Student
from .serializers import StudentModelSerializer
# Create your views here.
class StudentAPIView(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
_data = Student.objects.all()
_data_serializer = StudentModelSerializer(_data, many=True)
return Response(_data_serializer.data)
定义路由
# 定义路由
from django.contrib import admin
from django.urls import path
from students.views import *
from SchoolApp.views import *
urlpatterns = [
path('admin/', admin.site.urls),
path('first',firstAPIVIEW.as_view(),name="firstTest"),
path('stu/',StudentAPIView.as_view(),name='student'),
]
第二部分：渐进式 JavaScript 框架——VUE
一、VUE及其附属工具安装
1-前置基础知识：Html标签知识、Css知识、javascript语法知识
2-Vue安装—前端工程
2-0 安装node.js
提醒：
1 安装时推荐不要安装到C盘 ，但要记住安装在哪
2 nodejs安装路径下，新建node_global和node_cache两个文件夹
3 设置缓存文件夹
npm config set cache "完整安装路径\node_cache"4 设置全局模块存放路径
npm config set prefix "完整安装路径\node_global"5 设置环境变量 使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
修改 系统变量 PATH，添加新的全局路径完整路径\node_global
新增 系统变量 NODE_PATH完整路径\node_modules
2-1安装淘宝镜像————注意命令行权限
npm install -g cnpm --registry=HTTPS://registry.npm.taobao.org
2-2 安装vue.js
mac:
cnpm install -global vue-cli
win:
cnpm install vue-cli -g
2-3安装Visual Studio Code
添加对vue支持的插件
Vetur、EsLint、Debugger for Chrome、
Auto Close Tag、Auto Rename Tag、JavaScript(ES6) code snippets、
Path Intellisense、HTML CSS Support、
Beautify、Bracket Pair Colorizer、open in browser
3-测试是否安装成功
【创建并进入测试目录Test_Vue中】
3-1在命令行创建前端测试工程项目—testapp
# 标准格式
# vue init webpack [项目名]
vue init webpack testapp
3-2安装router—新的版本可能会提供自动提示安装（一路猛回车即可）
cnpm i vue-router -D
3-3 进入[项目名]文件夹————!!
cd testapp
3-4 安装依赖
cnpm install
3-5 为项目安装网络请求axios
cnpm install axios --save
3-6运行项目
npm run dev
3-7 推荐使用Chrome浏览器
输入地址 ：http://localhost:8080
显示出Vue的界面证明配置成功–可以准备开发
二、Vue工程开发流程
0 在合适的位置创建新文件夹Vue_stu,并使用Vscode打开此文件夹
注：
这里（VSCODE）会有一些代码的书写提示错误（虽然没有影响程序运行，但是看起来很让人讨厌）
vsCode中使用ESLint自动格式化代码
1安装ESLint插件（如果之前没有安装的话）
2配置settings.json，设置启用eslint自动格式化
首选项 –>设置–》settings.json，将我提供的settings.json中的全部代码复制到这里并保存
然后你再修改你的代码后，当保存时，系统会自动使用eslint格式进行修正
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
} // 两个选择器中是否换行
}
1 初始化工程
1-1 在Vue_stu目录下创建一个名为studapp工程项目
vue init webpack studapp
1-2 进入[项目名]文件夹
cd studapp
1-3 安装依赖
cnpm install
1-4 为项目安装网络请求axios
cnpm install axios --save
1-5 测试
npm run dev
2 代码开发部分
2-1 简单理解目录
(1)文件结构简单介绍之src【其它的建议自行查阅官方文档】
(2)运行项目时会自动打开一个界面，是如何做到的?
main.js—>App.vue—>在App.vue 打几个字试试—>刷新页面
【夹在中间的界面是哪来的？】
打开 components（组件）的helloworld.vue 打几个字试试—刷新页面
发现helloworld里的东西是会替换到router-view 标签 router（路由）
(3)如何做到的的呢？
打开 router/index.js 发现这里面有一个routes的配置
要点：
1 导入需要配置的组件 import
2 添加配置项 path,name,component（组件）
这样组件就会自动替换 router-view 标签
(4)组件的代码文档结构
由 <template> <script> <style> 三部分组成
2-2 开发一个可以显示学校信息的页面
2-2-1 创建组件
components/school.vue 做出简单的修改
<template>
<div>school</div>
</template>
2-2-2 配置路由
(1)index.js 中
import School from '@/components/school'
(2)添加一个新routes
{
path: '/school',
name: 'School',
component: School
}
(3) 在index.js 的routes:上面平行添加
mode: 'history', //去掉url中的#
(4) 打开浏览器访问http://127.0.0.1:8080/school
可以显示出 shool字说明成功
2-2-3 与服务端交互
(1)访问数据
打开python服务器，测试之前接口[根据自己之前的路由名来测试]
http://127.0.0.1:8000/first 得到数据
保持服务端服务器打开状态打开前端工程，在school组件中编写获取服务端数据
<script>
import Axios from 'axios'
export default {
methods: {
loadSchool () {
var api = 'http://127.0.0.1:8000/first'
Axios.get(api)
.then((Response) => {
console.log(Response.data)
// this.schools = Response.data
})
.catch((error) => {
console.log(error)
})
}
},
mounted () {
this.loadSchool()
}
}
</script>
3)请求对接
报错：跨域问题
打开python服务端工程，添加跨域支持
打开settings.py
A. INSTALLED_APPS: ‘corsheaders’
B. MIDDLEWARE：’corsheaders.middleware.CorsMiddleware’,
必须第一项
注释掉 ‘django.middleware.csrf.CsrfViewMiddleware’,
C. CORS_ORIGIN_ALLOW_ALL = True #解决跨域问题
(2)解析数据
school.vue中
<script>
import Axios from 'axios'
export default {
data () {
return {
schools: []
}
},
methods: {
loadSchool () {
var api = 'http://127.0.0.1:8000/first'
Axios.get(api)
.then((Response) => {
console.log(Response.data)
this.schools = Response.data // 添加这个数据
})
.catch((error) => {
console.log(error)
})
}
},
mounted () {
this.loadSchool()
}
}
</script>
- 在template中
<template>
<div>
{{schools}}
</div>
</template>
测试：
打开浏览器访问http://127.0.0.1:8080/school
可以看到数据，但是不友好
schools[0] …其它数据的显示演示
3 让页面更美观
前端UI框架—ant-design-vue
cnpm install ant-design-vue@1.7.8 --save
见文档中的导入说明
3-1 配置新模块
在 main.js中导入下面模块
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue' //这里是新的
import 'ant-design-vue/dist/antd.css' //这里是新的
Vue.config.productionTip = false
Vue.use(Antd) //这里是新的
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
5-2 添加列表标签
5-2-1在school.vue template中
<template>
<div>
<div class="schoollist">
<a-table :columns="columns" :data-source="schools">
</a-table>
</div>
</div>
</template>
5-2-2在school.vue的script脚本
<script>
import Axios from 'axios'
const columns = [
{
title: '编号',
dataIndex: 'id',
key: 'id'
},
{
title: '所在学校',
dataIndex: 'name',
key: 'name'
}
]
export default {
data () {
return {
columns,
schools: []
}
},
methods: {
loadSchool () {
var api = 'http://127.0.0.1:8000/first'
Axios.get(api)
.then((Response) => {
console.log(Response.data)
this.schools = Response.data
})
.catch((error) => {
console.log(error)
})
}
},
mounted () {
this.loadSchool()
}
}
</script>
6 再次运行项目
npm run dev
