第九单元 前后连调

前后端分离的跨域问题

1.后端

安装插件：pip install django-cors-headers   
修改配置信息：
1、注册
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework', # drf框架
    'corsheaders', # 跨域
    'myapp',    # 注册自定义应用
]
2、添加中间键
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware', # 添加跨域中间件
]
3、配置参数，允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True

2、前端

   使用axios之前需要安装----npm install axios --save
    mounted(){
        get("people/")
        .then((result) => {
          this.peoplelist = result.data
        }).catch((err) => {
          console.log(err)
        });
      }
# 获取后端配置路由的数据

vue数据处理

vue获取数据进行渲染删除

获取数据：
 mounted(){
        # 挂载
        Axios.get('http://127.0.0.1:8000/book/')
        .then((resp) => {
            this.list = resp.data
        }).catch((err) => {
            console.log(err)
        });
    }
 获取数据是通过get的resp传递数据
 
删除数据：
delBook(id){
         Axios.delete('http://127.0.0.1:8000/book/'+id+'/')
            .then(resp => {
                console.log(resp.data)
            }).catch((err) => {
                console.log(err)
            });
        }
 通过路由将需要删除的id传递到后端进行删除操作
 
 添加数据：
    btn(){
      // 2. 定义方法， 使用axios发送post请求，并携带参数
            Axios.post('http://127.0.0.1:8000/course/', {'cname': this.cname, 'stage': this.stage})
                .then(resp => {
          // 添加成功，输出响应数据
                console.log(resp.data)
        })
                .catch(err => {
          // 添加失败，输出错误信息
                console.log(err.response.data)
        })
        }
    
添加是post请求后边进行传参 将需要添加的数据传递到后端进行添加
    
  修改数据：
updateBook(){
        var data ={"title":this.data.title,"price":this.data.price}
Axios.put('http://127.0.0.1:8000/book/'+this.id+'/',data)
     .then(resp => {
          // 添加成功，输出响应数据
                console.log(resp.data)
        })
                .catch(err => {
          // 添加失败，输出错误信息
                console.log(err.response.data)
        })
        }
修改数据需要传递2个内容 1、通过路由将需要修改的id传递 2、将修改后的内容通过传参传递

如何实现前后端分离情况下的状态保持

localStorage.setItem('user', this.username) // 用户名存入localStorage，以做状态保持

let username = localStorage.getItem('user')  // 取出user信息，可以判断用户是否登录