【vue讲解:es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用】
1 es6导入导出语法
# 做项目:肯定要写模块--》导入使用# 默认导出和导入
在某个js中 # 命名导出和导入
1.1 默认导出和导入
// #########导出语法###########
// 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'
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简单使用
# 单页面应用---》只要一个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中)

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, '未知')),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# 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', 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'// 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
<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>
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的使用
#1 以后css样式,都写在vue组件的 <style> 标签中<style scoped>h1 {background-color: aqua;}</style>#2 以后再 style标签上写 scoped 这个样式只在当前组件中生效
<style scoped>
h1 {background-color: aqua;
}
</style>
5 同学问题
# 1 在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
4 elementui使用
# 自己写样式---》copy别人的# 使用第三方ui库-Element UI 2.x 3.x-Ant Design of Vue:web端-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);
相关文章:
【vue讲解:es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用】
1 es6导入导出语法 # 做项目:肯定要写模块--》导入使用# 默认导出和导入 在某个js中 # 命名导出和导入1.1 默认导出和导入 // #########导出语法########### // export default name // 只导出变量 // export default add // 只导出函数// export default {nam…...
#beego的orm一直引入失败#
在导入beego的orm的时候,一直导入失败,orm显示红色,表示导入失败 解决办法: 1:升级go,由1.7升级到1.8 2:执行以下命令 go clean go get github.com/astaxie/beego/orm go mod tidy go mod vendor 3:测试在vendor中可以看到…...
Vue插值:双大括号标签、v-text、v-html、v-bind 指令
创建应用程序实例后,需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后,数据和视图会相互关联,当数据发生变化时,视图会自动进行更新。这样就无须手动获取 DOM 的值,使代码更加简洁&…...
实验五之用Processing绘画
1.案例代码如下: import generativedesign.*; import processing.pdf.*; import java.util.Calendar; Tablet tablet; boolean recordPDF false; float x 0, y 0; float stepSize 5.0; PFont font; String letters "Sie hren nicht die folgenden Gesnge…...
Apache CloudStack Official Document 翻译节选(七)
关于 Apache CloudStack 的 最佳实践 (一) Best Practices 部署Apache CloudStack是极具挑战性的,在整个部署过程中需要你做出形形色色的技术性选择。Apache CloudStack的配置条目是相当灵活的,这是因为在组合和配置具体条目时有…...
动态创建 Delphi 按钮的完整指南:基于配置文件的 `TGridPanel` 实现
在 Delphi 开发中,我们经常需要根据不同的配置动态生成 UI 元素。本文将带你通过一个完整的示例,演示如何根据配置文件动态创建按钮,并将它们排列在一个 TGridPanel 中。每个按钮的标题、链接、颜色和大小都将从配置文件中读取。 “C:\myApp\…...
【设计模式】工厂模式和抽象工厂模式
工厂模式 function User(role, pages) {this.role role;this.pages pages; }// new User(admin, [home, user, setting]); // new User(user, [home, user]); // new User(guest, [home]);function UserFactory(role) {switch (role) {case admin:return new User(role, [ho…...
【xilinx】Versal Adaptive SoC DDRMC - NoC QoS 选项卡未出现
在 2024.1 之前的 Vivado 版本中,用户在使用 NoC 验证块设计时可以访问 NoC 对象窗口和 QoS 选项卡。 Vivado 2024.1 中存在一个已知问题,即 NoC 对象窗口和 QoS 选项卡不出现。 要显示 NoC 对象窗口和 QoS 选项卡,请保存块设计,…...
融合创新:EasyCVR视频汇聚平台云计算技术与AI技术共筑雪亮工程智能防线
随着信息技术的飞速发展,视频云计算技术作为云计算领域的一个重要分支,正逐步在公共安全、社会治理等领域展现出其独特的优势。特别是在雪亮工程这一群众性治安防控工程中,视频云计算技术更是发挥了不可替代的作用。本文将从视频云计算技术的…...
keepalived的技术原理及其在负载均衡场景中的应用
keepalived的技术原理及其在负载均衡场景中的应用 深入探讨Keepalived及其在负载均衡场景中的应用1. **Keepalived概述**2. **Keepalived的技术原理**2.1 **VRRP协议**2.2 **健康检查机制**2.3 **脚本管理** 3. **Keepalived与LVS的结合应用**3.1 **LVS优缺点** 4. **Nginx与HA…...
树的重心 by江河湖海
引入 重心是什么? 想象你有一个由线悬挂的秋千,秋千的两端坐着两个人,如果这两个人坐在秋千的重心上,秋千就会保持平衡。在树的结构中,重心就是那个让所有节点到它那里的“距离”(可以理解为线的长度)总和最小的点。 重心为什么最多只有两个? 假设树的重心有两个,…...
MySQL存储过程深入指南
MySQL存储过程深入指南 存储过程是MySQL中一个强大的功能,能够显著提升数据库操作的效率和灵活性。本文将全面介绍存储过程的概念、语法、使用方法及最佳实践,帮助读者熟练掌握存储过程的使用。 1. 什么是存储过程? 存储过程(Stored Procedure)是预先编译并存储在数据库…...
牛客算法小题
目录 牛客.求和编辑 牛客.abb 牛客.合并k个有序链表 牛客.滑雪(暴力->递归->记忆化搜索) 牛客.旋转字符串 牛客.求和 我没想到是dfs,另外我的dfs能力确实也不强,另外难度大的是他的那个输出 import java.util.Scanne…...
小米SU7销量超特斯拉,新车明年上半年发布
小米 SU7,一款国内新能源车品牌纯血新势力旗下首款轿车,上市短短 4 个月卖出超 4 万台,月均销量过万。 该说不说,这放在整个新能源汽车工业史上也足以称得上是一件小刀喇拍屁股,让人开了眼的事儿。 就在本月初&#x…...
基于Java语言的光伏监控系统+光伏发电预测+光伏项目+光伏运维+光伏储能项目
基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 介绍 基于Java语言的光伏监控系统光伏发电系统光伏软件系统光伏监控系统源码光伏发电系统源码 基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 安装教程...
unity json 处理
1. c#对象 -> json public class Item {public int id;public int num;public Item(int id, int num){this.id id;this.num num;} } public class PlayerInfo {public string name;public int atk;public int def;public float moveSpeed;public double roundSpeed;publi…...
如何使用DataGear零编码快速制作MQTT物联网实时数据看板
DataGear是一个开源免费的数据可视化分析平台,企业版在开源版基础上开发,新增了诸多企业级特性,包括:MySQL及更多部署数据库支持、MQTT/WebSocket/Redis/MongoDB数据集、OAuth2.0/CAS/JWT/LDAP统一登录支持、前后端敏感信息加密传…...
Mysql查询日志
Mysql查询日志 Mysql查询日志默认是关闭状态的。 mysql> show variables like %general_log%; --------------------------------------- | Variable_name | Value | --------------------------------------- | general_log | OFF …...
Airtest 的使用
Airtest 介绍 Airtest Project 是网易游戏推出的一款自动化测试框架,其项目由以下几个部分构成 Airtest : 一个跨平台的,基于图像识别的 UI 自动化测试框架,适用于游戏和 App , 支持 Windows, Android 和 iOS 平台,…...
Android更改包名和签名
一、更改包名 1、包名——鼠标右键——Refactor——Rename 修改自己想更改的包名和选择更改范围后点击Refactor就可以了 2.手动修改app的build.gradle文件中的applicationId(改成和我们之前修改的包名相同) 3.修改AndroidManifest.xml文件中的packag…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
