当前位置： 首页 > news >正文

做网站包括备案吗,建设工业网站首页,手机网页设计制作网站,上海美容网站建设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);