526互联

vue入门——？？？07days

发布时间 2024-01-12 15:21:04作者: 拆尼斯、帕丁顿

昨日回顾：

1 聊天室案例
    -不停向后端发送请求---》定时器---》生命周期的 created--》定时任务，发送ajax请求
    -v-for渲染
    -组件销毁，定时器销毁
    -按钮，点击发送消息
    -后端
    
    
# 2 扩展

# 登录--》注册
# 列出所有用户（筛选）---》点击关注请求---》
    -性别
    -年龄 ?gender=2&age_gt=18&age_lt=30  --自定义过滤器
    - 加好友申请---》好友申请表
    id   from_user  to_user  is_allow
    1      1           2        0    (0,1,2:拒绝)
    2      1           3        0
    3      99          2        0
# 另一个人登录进去---》看到你的申请---》点同意--》你们就可以聊天
    -id为2的用户---》列出所有加我好友的用户--》查询to_user等于当前用户id的from_user的id放到列表中
    -查用户表：id在 id__in [1,99]
    -User.objects.filter(id__in=[1,99])-->序列化返回给前端
    -同意：带着这个人的id，和你的id去好友申请表中改is_allow
# 进入聊天室:下拉查看所有好友
    -跟写所有申请好友接口一样，多了一个限定条件，is_allow=1的
    -from_user  contnet  to_user：用户id
    
# 定向聊天
    id   from_id   to_id   content
    1     1         2       你好
    2     1         2        为什么不理我
    3     2         1 
    
    
# 3 ref 属性
    -ref放在普通标签上---》在组件中通过this.$refs.名字 取到这个标签的dom对象（用的少）
    -ref放在组件上---》在组件中通过this.$refs.名字 取到这个 组件对象--》组件对象的属性，方法
    
# 4 动态组件
    component  不确定显示哪个组件---》:is='变量'---》变量等于哪个组件名字，就显示哪个组件
    
# 5 插槽：放在组件中得html---》替换到组件中某个位置[<slot></slot>]
# 6 具名插槽

# 7 vue项目创建
    -nodejs 环境：后端开发语言
    -node安装完：俩命令：node  npm
    -装了cnpm 加速模块的安装
    
    -安装vue环境：cnpm install -g @vue/cli
          -释放出一个命令  vue
        
    -通过vue命令创建项目
    -vue create 项目名  #一堆选择
        bable
        vue-router
        vuex
        2.x
        package.json
        
        
        
# 8 目录结构
    -重点：
        -src
            -components ：以后写组件，小组件
            -views    ：以后写组件，页面组件
            -App.vue  :跟组件
            -main.js  :项目入口
         -public
            -index.html 以后不要动
            
            
# 9 看了几个常用的文件
    -index.html
    -App.vue
    -main.js: 写了一堆js代码，
        实现了原来咱们new Vue 跟div绑定
        App.vue  跟 index.html 绑定
        
    -HelloWorld.vue 典型写法---》组件
        -<template></template>
        -<script></script>
        -<style></style>

今日内容

es6导入导出语法

做项目：肯定要写模块--》导入使用

# 默认导出和导入
在某个js中

 

# 命名导出和导入

默认导出和导入

#########导出语法###########
// export default name  // 只导出变量
// export default add   // 只导出函数

// export default {name,add}  // 导出对象

export default {
    name:"彭于晏",
    add: (a,b)=>{
        return a+b
    }
}

// #######导入语法##########
import lqz from './lqz/utils'  // 相对导入，相对于当前文件
// 绝对导入--》开始导入的路径  src路径，但是需要写个 @
import lqz from '@/lqz/utils'

命名导出导入

// ## 导出#### 可以导出多个
export const age = 99
export const add = (a, b) => a + b
export const showName = name => {
    console.log(name)
}

export const obj={
    name:'lqz',
    show(){
        alert('show')
    }
}


// ### 导入###
import {showName,obj} from '@/lqz/common.js'
以后可以使用showName  函数
以后可以使用obj  对象 ，又可以点  obj.xx

 如果包下有个 index.js 直接导到index.js上一次即可

vue-router简单使用

 单页面应用---》只要一个html--》要实现页面跳转的效果---》其实就是组件的跳转
# 组件跳转，需要借助于第三方：vue-router  已经装了


# 1 需要在App.vue 写个标签---以后不要再写任何其他东西了
    <template>
      <div id="app">
        <router-view>
        </router-view>
      </div>
    </template>
# 2 在 router---index.js---注册组件
    # 1 导入
    import LoginView from "@/views/LoginView";
    import IndexView from "@/views/IndexView";
    import AboutView from "@/views/AboutView";
    const routes = [
    # 2 注册路由
    {
        path: '/',
        name: 'home',
        component: IndexView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
    {
        path: '/about',
        name: 'about',
        component: AboutView
    },
]
    
# 3 以后再浏览器访问不同路径，就会显示不同组件（页面组件--->views中）

登录跳转案例

项目中使用axios  需要安装
    cnpm install axios -S
    在要用的位置[注意位置]，导入：import axios from 'axios'
    使用：
    axios.get().then()
    
    
    
#2 跨域问题--》按照步骤操作
    1、使用pip安装 pip3 install django-cors-headers
    2、添加到setting的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'
    )
    
    
# 3 前端 页面组件跳转
    this.$router.push('router/index.js/配置过的路径')

后端

models.py

from django.db import models

# Create your models here.
from django.contrib.auth.models import AbstractUser


class UserInfo(AbstractUser):
    gender = models.IntegerField(choices=((1, '男'), (2, '女'), (0, '未知')),null=True)
    age = models.IntegerField(null=True)
    phone = models.CharField(max_length=11,null=True)

serializer.py

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer


class LoginSerializer(TokenObtainPairSerializer):
    def validate(self, attrs):
        res = super().validate(attrs)
        user = self.user
        data = {'code': 100, 'msg': '登录成功', 'username': user.username, 'gender': user.get_gender_display()}
        data.update(res)
        return data

views.py

from django.shortcuts import render

# Create your views here.
import json
from rest_framework.views import APIView
from rest_framework.response import Response


class FilmView(APIView):
    def get(self, request):
        with open('./film.json', 'rt', encoding='utf-8') as f:
            res = json.load(f)
        return Response(res)

urls.py

from django.contrib import admin
from django.urls import path

from rest_framework_simplejwt.views import token_obtain_pair
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', token_obtain_pair),
    path('film/', views.FilmView.as_view()),
]

settings.py

AUTH_USER_MODEL = 'app01.userinfo'

SIMPLE_JWT = {
    "TOKEN_OBTAIN_SERIALIZER": "app01.serializer.LoginSerializer",
}

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'
)

REST_FRAMEWORK = {
    'EXCEPTION_HANDLER': 'app01.exceptions.common_exception_handler',
}

前端

router/ index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1 导入
import LoginView from "@/views/LoginView";
import IndexView from "@/views/IndexView";

Vue.use(VueRouter)

const routes = [
    // 2 注册路由
    {
        path: '/',
        name: 'home',
        component: IndexView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },

]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

LoginViews.vue

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

  </div>

</template>

<script>
import http from 'axios'

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      //发送ajax请求
      http.post('http://127.0.0.1:8000/login/', {
        username: this.username,
        password: this.password
      }).then(response => {
        if (response.data.code == 100) {
          // 跳转  vue-router支持的
          this.$router.push('/')
        } else {
          alert(response.data.msg)
        }
      })

    }
  }
}
</script>

<style scoped>

</style>

indexView.vue

<template>
  <div>
    <h1>首页</h1>


    <div v-for="film in filmList">
      <img :src="film.poster" alt="" height="200px" width="150px">
      <div>
        <h3>{{ film.name }}</h3>
        <p>主演：
          <span v-for="item in film.actors">
                {{ item.name }} &nbsp;&nbsp;
            </span>
        </p>
        <p>{{ film.nation }}|{{ film.runtime }}</p>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'


export default {

  name: "IndexView",
  data() {
    return {
      filmList: []
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/film/').then(res => {
      this.filmList = res.data.results
    })
  }

}
</script>

<style scoped>

</style>

SCOPED的使用

以后css样式，都写在vue组件的 <style> 标签中
    <style scoped>
        h1 {
          background-color: aqua;
        }
    </style>
    
    
#2 以后再 style标签上写 scoped 这个样式只在当前组件中生效
<style scoped>
h1 {
  background-color: aqua;
}
</style>

问题：

 在views.py  打开文件，写的路径,文件要放在项目根路径--》从项目运行的路径下开始找
class FilmView(APIView):
    def get(self, request):
        with open('./film.json', 'rt', encoding='utf-8') as f:
            res = json.load(f)
        return Response(res)
    
   
    
# 2 只要按照上面的处理跨域---》以后不需要再响应头中加了--》post，delete。。所有请求都没有跨域了


# 3 字典update

elementui使用

自己写样式---》copy别人的

# 使用第三方ui库
    -Element UI  2.x  3.x
    -Ant Design of Vue：web端
    -Vant UI  ：移动端ui
    
    
# elementui
    1 安装：cnpm i element-ui -S
    2 main.js中引入
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);