龙华网站建设推广外包,谷歌优化软件,鞍山市做网站公司,外包公司劳动合同1 es6导入导出语法
# 做项目#xff1a;肯定要写模块--》导入使用# 默认导出和导入
在某个js中 # 命名导出和导入1.1 默认导出和导入
// #########导出语法###########
// export default name // 只导出变量
// export default add // 只导出函数// export default {nam…1 es6导入导出语法
# 做项目肯定要写模块--》导入使用# 默认导出和导入
在某个js中 # 命名导出和导入1.1 默认导出和导入
// #########导出语法###########
// export default name // 只导出变量
// export default add // 只导出函数// export default {name,add} // 导出对象export default {name:彭于晏,add: (a,b){return ab}
}// #######导入语法##########
import lqz from ./lqz/utils // 相对导入相对于当前文件
// 绝对导入--》开始导入的路径 src路径但是需要写个
import lqz from /lqz/utils1.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.xx1.3 如果包下有个 index.js 直接导到index.js上一次即可
2 vue-router简单使用
# 单页面应用---》只要一个html--》要实现页面跳转的效果---》其实就是组件的跳转
# 组件跳转需要借助于第三方vue-router 已经装了# 1 需要在App.vue 写个标签---以后不要再写任何其他东西了templatediv idapprouter-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中3 登录跳转案例
#1 项目中使用axios 需要安装cnpm install axios -S在要用的位置[注意位置]导入import axios from axios使用axios.get().then()#2 跨域问题--》按照步骤操作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)# 3 前端 页面组件跳转this.$router.push(router/index.js/配置过的路径)3.1 后端
3.1.1. models.py
from django.db import models# Create your models here.
from django.contrib.auth.models import AbstractUserclass UserInfo(AbstractUser):gender models.IntegerField(choices((1, 男), (2, 女), (0, 未知)),nullTrue)age models.IntegerField(nullTrue)phone models.CharField(max_length11,nullTrue)
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 data3.1.3 views.py
from django.shortcuts import render# Create your views here.
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, encodingutf-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.userinfoSIMPLE_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// 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
3.2.1 LoginView.vue
templatedivh1登录/h1p用户名input typetext v-modelusername/pp密码input typepassword v-modelpassword/ppbutton clickhandleSubmit登录/button/p/div/templatescript
import http from axiosexport 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)}})}}
}
/scriptstyle scoped/style3.2.3 IndexView.vue
templatedivh1首页/h1div v-forfilm in filmListimg :srcfilm.poster alt height200px width150pxdivh3{{ film.name }}/h3p主演span v-foritem in film.actors{{ item.name }} nbsp;nbsp;/span/pp{{ film.nation }}|{{ film.runtime }}/p/div/div/div
/templatescript
import axios from axiosexport default {name: IndexView,data() {return {filmList: []}},created() {axios.get(http://127.0.0.1:8000/film/).then(res {this.filmList res.data.results})}}
/scriptstyle scoped/style4 scoped的使用
#1 以后css样式都写在vue组件的 style 标签中style scopedh1 {background-color: aqua;}/style#2 以后再 style标签上写 scoped 这个样式只在当前组件中生效
style scoped
h1 {background-color: aqua;
}
/style5 同学问题
# 1 在views.py 打开文件写的路径,文件要放在项目根路径--》从项目运行的路径下开始找
class FilmView(APIView):def get(self, request):with open(./film.json, rt, encodingutf-8) as f:res json.load(f)return Response(res)# 2 只要按照上面的处理跨域---》以后不需要再响应头中加了--》postdelete。。所有请求都没有跨域了# 3 字典update
4 elementui使用
# 自己写样式---》copy别人的# 使用第三方ui库-Element UI 2.x 3.x-Ant Design of Vueweb端-Vant UI 移动端ui# elementui1 安装cnpm i element-ui -S2 main.js中引入import ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
