vue项目的解析、登录小案例-526互联

vue的执行流程

1. 为什么浏览器中访问某个地址，会显示某个页面组件

vue-router第三方插件支持的：

　　访问：/（根路径）---》显示HomeView.vue

　　访问：/about ---》显示AboutView.vue

根组件：App.vue

　　App.vue中的template中的div会被替换到index.html中的div中渲染

　　根组件中加了router-view撑满了整个div，router-view :负责切换组件页面，从而实现了访问不同路径，显示不同的页面组件

- 1. 根组件：App.vue，必须是：

- 2. 在router中定义了routes常量：因为配置了路由，所以访问哪个路径就能够显示哪个组件页面

- 3. 直接写页面组件就行，在src的views文件夹下写

2. 在页面组件中使用小组件

- 1. 写一个小组件：Child.vue

- 2.在父组件中，导入组件

　　@ 代指src路径

　　import Child from "@/components/Child";

-3 父组件中，注册组件
　　components: {
　　　　Child
　　}

-4 父组件中使用组件
<Child :msg="msg" @myevent="handleEvent"></Child>

-5 自定义属性，自定义事件，插槽，跟之前一模一样

结果：

登录小案例

1. 登录页面：LoginView.vue

2. 访问：/login ---》显示这个页面组件

3. 在LoginView.vue写 html，js，axios

　　-安装 axios

　　-cnpm install -S axios (S：是把安装的axios放到package.json中

4 写ajax，向后端发送请求，给按钮绑定点击事件

5. 写一个登录接口，处理好跨域问题，处理跨域如下：

解决后端跨域问题

1. 安装django的一个第三方模块：

　　- pip install django-cors-headers（只解决django的跨域问题）

2. 注册app

　　- INSTALLED_APPS = (　　　　

　　　　'corsheaders',
　　　　)

3配置中间件：

MIDDLEWARE = [　'corsheaders.middleware.CorsMiddleware',　]

4. 配置文件中加入：setting下面添加下面的配置

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = (
　　'DELETE',
　　'GET',
　　'OPTIONS',
　　'PATCH',
　　'POST',
　　'PUT',
　　'VIEW',
)

CORS_ALLOW_HEADERS = (
　　'XMLHttpRequest',
　　'X_FILENAME',
　　'accept-encoding',
　　'authorization',
　　'content-type',
　　'dnt',
　　'origin',
　　'user-agent',
　　'x-csrftoken',
　　'x-requested-with',
　　'Pragma',
　　'token'
)

前端：LoginView.vue:

<template>
<div>
  <p>用户名：<input type="text" v-model="name"></p>
  <p>密码：<input type="password" v-model="password"></p>
  <button @click="handleClick">登录</button>
</div>
</template>

<script>
//安装的依赖直接导入即可
import axios from 'axios'
export default {
  name: "LoginView",
  data(){
    return{
      name:'',
      password:'',
    }
  },
  methods:{
    handleClick(){
      console.log(this.name,this.password)
      axios.post('http://127.0.0.1:8000/login/',{name:this.name,password:this.password}).then(res=>{
        console.log(res.data)
        if (res.data.code==100){
          // 跳转到百度
          location.href='http://www.baidu.com'
        }else{

        }alert(res.data.msg)
      })
    }
  }
}
</script>

<style scoped>

</style>