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- 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'
)
this. $router. push( 'router/index.js/配置过的路径' )
3.1 后端
3.1.1. models.py
from django. db import models
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 )
3.1.2 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
3.1.3 views.py
from django. shortcuts import render
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)
3.1.3 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( ) ) ,
]
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 :移动端ui
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) ;