1 es6导入导出语法
在某个js中
1.1 默认导出和导入
export default {name:"彭于晏",add: (a,b)=>{return a+b}
}
import lqz from './lqz/utils'
import lqz from '@/lqz/utils'
1.2 命名导出导入
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
1.3 如果包下有个 index.js 直接导到index.js上一次即可
2 vue-router简单使用
<template><div id="app"><router-view></router-view></div></template>
import LoginView from "@/views/LoginView";import IndexView from "@/views/IndexView";import AboutView from "@/views/AboutView";const routes = [{path: '/',name: 'home',component: IndexView},{path: '/login',name: 'login',component: LoginView},{path: '/about',name: 'about',component: AboutView},
]
3 登录跳转案例
cnpm install axios -S在要用的位置[注意位置],导入:import axios from 'axios'使用:axios.get().then()1、使用pip安装 pip3 install django-cors-headers2、添加到setting的app中INSTALLED_APPS = (...'corsheaders',...)3、添加中间件MIDDLEWARE = [ ...'corsheaders.middleware.CorsMiddleware',...]4、setting下面添加下面的配置CORS_ORIGIN_ALLOW_ALL = TrueCORS_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')this.$router.push('router/index.js/配置过的路径')
3.1 后端
3.1.1. models.py
from django.db import models
from django.contrib.auth.models import AbstractUserclass UserInfo(AbstractUser):gender = models.IntegerField(choices=((1, '男'), (2, '女'), (0, '未知')),null=True)age = models.IntegerField(null=True)phone = models.CharField(max_length=11,null=True)
3.1.2 serializer.py
from rest_framework_simplejwt.serializers import TokenObtainPairSerializerclass LoginSerializer(TokenObtainPairSerializer):def validate(self, attrs):res = super().validate(attrs)user = self.userdata = {'code': 100, 'msg': '登录成功', 'username': user.username, 'gender': user.get_gender_display()}data.update(res)return data
3.1.3 views.py
from django.shortcuts import render
import json
from rest_framework.views import APIView
from rest_framework.response import Responseclass FilmView(APIView):def get(self, request):with open('./film.json', 'rt', encoding='utf-8') as f:res = json.load(f)return Response(res)
3.1.3 urls.py
from django.contrib import admin
from django.urls import pathfrom rest_framework_simplejwt.views import token_obtain_pair
from app01 import viewsurlpatterns = [path('admin/', admin.site.urls),path('login/', token_obtain_pair),path('film/', views.FilmView.as_view()),
]
3.1.4 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',
}
3.2 前端
3.2.1 router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from "@/views/LoginView";
import IndexView from "@/views/IndexView";Vue.use(VueRouter)const routes = [{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
3.2.1 LoginView.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() {http.post('http://127.0.0.1:8000/login/', {username: this.username,password: this.password}).then(response => {if (response.data.code == 100) {this.$router.push('/')} else {alert(response.data.msg)}})}}
}
</script><style scoped></style>
3.2.3 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>
4 scoped的使用
<style scoped>h1 {background-color: aqua;}</style>
<style scoped>
h1 {background-color: aqua;
}
</style>
5 同学问题
class FilmView(APIView):def get(self, request):with open('./film.json', 'rt', encoding='utf-8') as f:res = json.load(f)return Response(res)
4 elementui使用
-Element UI 2.x 3.x-Ant Design of Vue:web端-Vant UI :移动端ui1 安装:cnpm i element-ui -S2 main.js中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);