昨日回顾:
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>
今日内容
做项目:肯定要写模块--》导入使用
# 默认导出和导入
在某个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
单页面应用---》只要一个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 }} </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);