【6.28】

展示全部数据的接口(API)

• drf框架

• 写视图(APIView)

• 序列化–json

• 确定请求方式–get

      def get(self,request):
          # 获取数据 模型类.objects.all() stus:就是获取到的全部数据
          stus = Student.objects.all()
          # json:能实现不同编程语言之间数据的交互和传递
          # 将模型层数据转换成json类型的数据---序列化
          # 进行序列化的语法 序列化器(数据)
          # 当获取的数据为查询集时 需要加many = True
          ser = StuSerializers(stus,many=True)
          # 响应 将获取到的数据响应出来
          return Response(ser.data)
  

• 写vue(和p3几乎一样)

添加数据的接口

1. 写视图(因为添加和展示全部数据都不需要通过id进行操作所以可以写在一个视图里)

2. 添加数据的步骤

    # 添加数据
       def post(self,request):
           # 1.获取数据 drf将请求的数据统一封装到request.data里
           request_data = request.data
           # 2.创建序列化对象 序列化器(数据)
           # 反序列化的操作需要使用data=来进行序列化
           ser = StuSerializers(data=request_data)
           # 3.验证 ser是否符合要求 如果有错误直接返回错误信息
           ser.is_valid(raise_exception=True)
           # 4.保存数据 调用save方法进行保存数据
           # 调用save方法时需要在序列化器中加create()方法
           ser.save()
           # 返回状态码201
           return Response(ser.data,status=201)
   

3. 调用save()方法需要在序列化器里写create()方法

   def create(self,data):
       # 添加数据 模型类.objects.create(数据)
       # {"name":"七七","age":18,"gender":"男","score":100}
       # 本来data是一个字段，但是我们需要以键=值的形式添加数据
       # 所以使用** ,是对字典进行拆包 以键 = 值的形式传入
       stu = Student.objects.create(**data)
       # 返回对象实例
       return stu
   

4. vue向添加的接口发起请求

5. 注意:

   • 在前后端联调的过程中，一定先保证django能实现对应的效果在写前端
   • 当前端控制台报500的错时，直接去django中找错
   • 404 路由错误
   • 405 请求方式错误
   • 400

Vue

• 创建项目 vue create 项目名
  1. 自定义选择创建带有路由的项目
• 启动项目 npm run serve