Djaongo添加展示项目搭建

1. 实现流程

1.1 项目准备

# 1. 创建项目
# 2. 创建APP
# 3. 修改配置信息
# 3.1 注册APP
# 3.2 指定模板目录
# 3.3 本地化设置

2.2 跨域

Vue服务的域名和 django服务域名不一样，浏览器中存在 同源策略，也就是 说浏览器默认只支持访问同一域名的其他资源

vue访问Django服务器，需要进行跨域

解决跨域：

  1. 前端解决
  2. Django解决 

1. 安装第三方

在terminal中进行第三方安装

pip install django-cors-headers
进行查看是否安装成功：pip list

2. 注册/安装APP

--- settings.py ---
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',  # DRF 框架
    'corsheaders', # 跨域APP
    'user' # 自己创建的APP
]

3. 中间件

在settings.py中找到 middlware进行内容添加

-- settings.py---
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 添加跨域中间件
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', # 把此行代码进行注释
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

4. 在settings.py中添加一行设置

# 允许所有源访问，实现跨域
CORS_ORIGIN_ALLOW_ALL = True

2.3 功能

学生类，实现学生数据添加，学生数据展示

0. 创建app，注册app
1. 构建学生类 model
2. 数据添加：
		- 数据添加页面   vue页面
		- 实现数据添加 
			- Django 提供接口 
				- url:
				- 视图

1. 数据添加

1.1 Django工作

1. 创建app，注册app

创建app： python manage.py startapp app名字
注册app： settings.py  INSTALLED_APPS=[,app名字]

2. model类

当前app的models.py中，构建model

# 学生model
class Student(models.Model):
    name = models.CharField(max_length=30)
    age = models.IntegerField()
    sex = models.CharField(max_length=10)
    score = models.IntegerField()

    class Meta:
        db_table = 't_student1'

    def __str__(self):
        return self.name

注意： 迁移两步走

3. view视图

class StudentView(View):
    # post请求
    def post(self,request):
        # 1.接收数据 名字 年龄
        name = request.POST.get('name')
        age = request.POST.get('age')
        sex = request.POST.get('sex')
        score = request.POST.get('score')
        # 2. 校验数据
        if not all([name,age,sex,score]):
            return HttpResponse('缺少参数')
        # 3. 添加数据
        # 4. 返回响应
        try:
            Student.objects.create(name=name, age=age, sex=sex, score=score)
            return HttpResponse('添加成功')
        except:
            return HttpResponse('添加失败')

4. 配置路由

1. 主路由
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
   ...
    path('studentapp/', include('studentapp.urls')),
]

2. 子路由
from django.urls import path
from studentapp.views import StudentView
urlpatterns = [
    path('stu/',StudentView.as_view()),
]

url： http://127.0.0.1:8000/studentapp/stu/

5. 使用postman进行测试

选择post请求方式

需要携带参数：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ds1Gc9TG-1617627931231)(/Users/houqiuna/JiYun/2009A/笔记/day04/postman使用.png)]

1.2 vue工作

1. 全局配置

npm install axios --save

--- main.js ---
1. 导入
import axios from 'axios'
2. 注入到当前vue实例
Vue.prototype.$axios = axios
3. 配置基本请求url
axios.defaults.baseURL = 'http://127.0.0.1:8002/'

2. 添加数据组件

<template>
<div>
  名字： <input type="text" v-model="name"><br>
  年龄： <input type="text" v-model="age"><br>
  性别： <input type="text" v-model="sex"><br>
  分数： <input type="text" v-model="score"><br>
  <button @click="add_stu">添加学生</button>
</div>
</template>

<script>
export default {
  name: "AddStudent",
  data(){
    return {
      name: '',
      age: '',
      sex: '',
      score: ''
    }
  },
  methods: {
    //点击按钮，数据添加，发送请求url
    add_stu(){
      console.log(this.name);
      this.$axios.post('studentapp/stu/',{
        name: this.name,
        age: this.age,
        sex:this.sex,
        score: this.score
      }).then(response =>{
        console.log(response.data);
      })
    }
  }
}
</script>

<style scoped>

</style>

** 注意：后端进行接收：request.body.decode() **

class StudentView(View):
    # post请求
    def post(self,request):
        # 1.接收数据 名字 年龄
        rst = request.body
        print(rst)
        name = '小猫猫'
        age = 18
        sex = '男'
        score = 90
        # 2. 校验数据
        if not all([name,age,sex,score]):
            return HttpResponse('缺少参数')
        # 3. 添加数据
        # 4. 返回响应
        try:
            Student.objects.create(name=name, age=age, sex=sex, score=score)
            return HttpResponse('添加成功')
        except:
            return HttpResponse('添加失败')

2. 数据展示

学生信息全部展示到页面

1. Django工作

1. 视图

class StudentView(View):
    # 查询所有 get请求
    def get(self, request):
        # 1. 查询所有数据
        stus = Student.objects.all()  # 查询集 多个学生

        # [{id:1,name:lilei,age:18,score:,}]
        stu_list = []
        for stu in stus:
            stu_list.append({'id': stu.id, 'name': stu.name, "age": stu.age, 'sex': stu.sex, 'score': stu.score})
        # 2. 返回给前端 json数据
        return JsonResponse({'datas': stu_list})

postman测试

2. 路由

1. 主路由
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
   ...
    path('studentapp/', include('studentapp.urls')),
]

2. 子路由
from django.urls import path
from studentapp.views import StudentView
urlpatterns = [
    path('stu/',StudentView.as_view()),
]

url： http://127.0.0.1:8000/studentapp/stu/

2. vue工作

构建一个show.vue组件

<template>
  <div>
    <h2>展示数据</h2>
    {{ stus }}
    <table>
      <tr v-for="stu in stus">
        <td>{{ stu.id }}</td>
        <td>{{ stu.name }}</td>
        <td>{{ stu.age }}</td>
        <td>{{ stu.sex }}</td>
        <td>{{ stu.score }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "ShowStudent",
  data() {
    return {
      stus: []
    }
  },
  mounted() {
    this.show_stus()
  },
  methods: {
    show_stus() {
      //发送请求，请求学生数据
      this.$axios.get('studentapp/stu/')
        .then(response => {
          console.log(response.data.datas);
          this.stus = response.data.datas
        })
    }
  }
}
</script>
<style scoped>
</style>

3. 总结

• 数据添加 django+vue
• 数据展示 django+vue