vue-cil组件的定义和使用、登录小案例

定义使用组件

定义组件

在 components 文件夹中创建Vue文件
在<template><\template>中写组件样式
在<script><script>中写导出语法
在导出语法中写组件的配置项vue

html 复制代码

<script>
export default {
    name:'myzujian', //组件名字
    data(){
        return {myname:"caimin"}
    }
}
</script>
<template>
<div>组件1{{myname}}</div>
</template>

<style></style>

使用组件

在使用组件的位置导入组件
在components中注册组件

html 复制代码

<template>
  <div class="home">
    <h1>我的组件</h1>
      <myzujian></myzujian>   //使用组件
  </div>
</template>

<script>
import myzujian from "@/components/myzujian.vue";  //导入组件
export default {
  name: 'HomeView',
  components: {
    myzujian   // 注册组件
  }
}
</script>

vue项目是如何执行起来的

入口 main.js 导入了vue和App.vue

用代码做了关联：index.html 的 id 为 app 的 div，以后，所有的代码，都写在App.vue中，按照vue的开发规范写
main.js 做的，所以它是入口

访问路由显示不同组件

使用路由 ：在App.vue中写一个标签<router-view/>

路由表情的配置就在router文件夹中的index文件中

配置路由

在index文件夹中通过在const routes添加对象实现

将组件导入index文件
在中添加对象

python 复制代码

{
    path: '/',    // 根路由，斜杆后面写路由
    name: 'xxx',  
    component: HomeView  // 注册组件 
},

其间组件中的通信和ref属性和之前一样

就可以实现通过访问不同的路由显示不同的组件

登录小案例

vue-cil中登录组件

html 复制代码

<script>
import axios from "axios";

export default {
    name: 'Login',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        handlelogin() {
            axios.post('http://127.0.0.1:8000/login', {
                username: this.username,
                password: this.password
            }).then(res => {
                if (res.data.code == 100) {
                    // 跳转到某个页面
                    console.log('登录成功')
                    this.$router.push(res.data.url)
                } else {
                    alert(res.data.msg)
                }
            })
        }
    }
}

</script>

<template>
    <div class="login">
        <h1>登录页面</h1>
        <p>用户名：<input type="text" v-model="username"></p>
        <p>密码：<input type="password" v-model="password"></p>
        <button @click="handlelogin">登录</button>
    </div>
</template>

<style></style>

django后端交互

python 复制代码

class LoginView(APIView):
    def post(self, request):
        if request.data.get('username') == 'cai1' and request.data.get('password') == '111':
            res = Response(data={'code': 100, 'msg': '成功', 'url': 'home'})
        else:
            res = Response(data={'code': 101, 'msg': '用户名密码错误'})
        res['Access-Control-Allow-Origin'] = '*'
        return res