git remote add upstream <组织仓库名>git add git commit git push到自己的仓库pull requestgit pull upstream main，将仓库中的最新文件合并到本地目录https://www.cnblogs.com/thousfeet/p/7840932.html
https://www.cnblogs.com/eyunhua/p/13215936.html
下图所示页面是页面挂载时的场景，场景值为0；
所以当页面挂载前（onBeforeMount），和监听（watch）到场景切换为0的时候需要进行数据获取。
实现思路
要注意前端通过api传给后端的数据要和后端设置好的数据格式一致，eg后端要求传入json格式，前端需要加工好需要的json，然后让如请求体传给后端。
1 | # 获取数据 |
1 | //el-table展示数据，关键在于:data属性，prop属性 |
table中的每一行都有一个删除按钮，点击该按钮删除对应的一条数据
由于使用的是el-table，还需要使用插槽，才能将每一条记录的id传入。以下是使用方法的介绍
1 | 使用了 Vue 的插槽（slot）特性。插槽是 Vue 组件中的一个重要特性，它允许你在组件模板中定义可替换的内容。 |
1 | # views.py |
1 | // 使用了插槽 |
https://cn.vuejs.org/api/composition-api-lifecycle.html
https://element-plus.org/zh-CN/component/table.html
使用Element-Plus的组件upload https://element-plus.org/zh-CN/component/upload.html
upload中的逻辑
1 | <template> |
upload的父组件中有一个表单，也就是场景为1时的el-card
表单提交的逻辑：收集信息，将表单中的name、type、date、和三个upload组件的fileList收集起来，提交给后端。后端返回200表示提交成功后，清空表单数据，切换场景。
1 | <template> |
Django
定义两个models，也就是定义两个表，分别是uploadFile和AnomalyData
uploadFile用于保存上传的每个文件的url，AnomalyData用于保存每次提交后的表单数据。
1 | from django.db import models |
创建表单数据
1 | from django import forms |
上传文件后，返回文件再文件系统中的url和名称
提交表单数据后，将数据保存到AnomalyData表中
1 | from django.core.files.storage import FileSystemStorage |
定义上传文件和提交表单信息的url
1 | from django.contrib import admin |
安装 pip install django==2.2.28 此处指定了的版本，可以兼容环境中的其他库
项目目录组织如下：
/myproject
├── frontend 前端代码
└── backend 后端代码
在项目根目录下使用以下命令创建一个新的 Django 项目django-admin startproject backend
处理数据库迁移
python manage.py makemigrations 和 python manage.py migrate 是 Django 的命令行工具中的两个命令，用于处理数据库迁移。
1、python manage.py makemigrations：这个命令会检查你的 Django 项目中的所有模型，并创建迁移文件。这些迁移文件是 Django 用来跟踪你的模型和数据库模式之间的变化的方式。每当你修改了模型（例如，添加字段、删除字段、更改字段类型等），你都需要运行这个命令来创建一个新的迁移文件。
2、python manage.py migrate：这个命令会应用（执行）所有还未应用的迁移。这意味着它会执行迁移文件中的操作，将这些变化应用到数据库模式中。例如，如果你添加了一个新的字段，migrate 命令会在相应的表中添加一个新的列。
1 | import json |
1 | from django.contrib import admin |
python manage.py runserver
数据组织形式
在前端中我是用了res.data.username但是在后端中我没有使用Json格式返回数据，返回数据中也没有data字段，所以导致前端访问不到数据。
后端中的接口以login为例，必须以...\login\访问，而我前端访问的地址是login导致访问失败。解决办法是修改后端路由。
1 | from django.contrib import admin |
开发目标简介：
开发目标：
基本语法：L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue',{})
该方法的第一个参数定义了图层类型
首先使用该方法返回并接受图层
接着定义baseLayer对象，其中保存了图层名及其值也就是上述函数返回的图层
然后这是地图初始化需要的值mapValue，是一个对象，其中包括坐标系、中心点经纬度、缩放等级、图层类型、是否添加缩放空间等属性。
定义初始化函数，在挂载时调用。添加控件
1 | // map是在初始化函数外定义的响应式数据 |
完整的代码，此时还未实现动图组件互动
1 | <template> |
1 | <template> |
使用自定义事件emit，当地图发生缩放或者拖拽时，在附件中监听到该自定义事件。在父组件通知另外一个地图组件进行中心点和缩放等级的变化。
因此步骤如下
1 | //地图组件中代码 |
1 | //父组件中代码 |
1、在子组件的setup中定义的方法，在父组件中通过子组件实例（在父组件中的子组件标签中使用ref=’ziname’）ziname.的方法无法调用，必须在setup中暴露出该方法才行；暴露的方法也踩了坑，由于使用ts，一直提示不能使用return暴露函数。应该使用defineExpose({ setMapView })
2、地图总是加载左上角，因为组件的大小不是固定的px值，所以会发生变化，因此，需要在初始化完成后强制地图进行大小和位置计算。且在组件卸载后要清空地图的配置值。
3、将地图配置对象mapValue设置成响应式对象，对导致第一个被初始化的地图能加载出地图，而另外一个不能。因此放弃了响应式配置值实现互动的方法。
4、vue3中不能使用this，自定义方法，组件实例调用方法，均和vue2有差异
1 | const emit = defineEmits(['map-moved']) |
以为自己掌握了知识，实践中却有很多问题。学好底层逻辑有助于快速发现问题和解决问题
分别注册了两个组件，一个是login页面(src/views/login/index.vue)、另外一个是登陆后展示的layout页面(src/views/layout/index.vue)
1 | //引入createRouter和createWebHashHistory方法 |
在 Vue Router 中，router 和 route 是两个不同的概念。
router 是 Vue Router 的实例，它包含了一些方法和属性，如 push、> replace、go 等，用于控制路由的跳转和行为。你可以通过 this.$router 在 Vue 组件中访问到 router 实例。route 是当前激活的路由信息对象，它包含了当前路由的路径、参数、查询字符串等信息。你可以通过 this.$route 在 Vue 组件中访问到当前的 route 对象。router 和 route 的主要区别在于，router 是用于控制路由的跳转和行为的，而 route 是表示当前路由状态的信息对象。在大多数情况下，你可能需要使用 this.$router 来进行路由跳转，如 this.$router.push('/path')。而当你需要获取当前路由的信息，如路径、参数等，你可以使用 this.$route，如 this.$route.params.id。
1 | <template> |
1 | <template> |
1 | <style lang="scss" scoped> |
positon的值
static：这是元素的默认值。静态定位的元素不会受到 top、bottom、left、right 的影响。relative：元素按照正常的文档流进行定位，然后相对于它的正常位置进行偏移。偏移不会影响其他元素的位置。absolute：元素脱离正常的文档流，并相对于最近的已定位父元素（position 属性为 relative、absolute、fixed 或 sticky 的元素）进行定位。如果没有已定位的父元素，那么它会相对于 body 元素进行定位。fixed：元素脱离正常的文档流，并相对于浏览器窗口进行定位。即使页面滚动，它仍然会停留在同一的位置。sticky：元素在滚动范围内表现为 relative，而在滚动范围外表现为 fixed。也就是说，元素会“粘”在特定位置，然后随着页面滚动。使用mock模拟后端
pnpm i mockjs --save1 | //导入mock库 |
1 | import configureMockServer from './mock/user.ts'; |
新建仓库用来存放用户数据，发起登录请求等
安装piniapnpm i pinia
新建一个大仓库（src/store/index.ts）
1 | import {createPinia} from 'pinia' |
封装本地存储、获取和移除token的功能（src/utils/token）
1 | //封装本地存储和读取数据的方法 |
在main.ts中注册pinia
1 | import pinia from './store' |
创建用户仓库
1 | //存放用户数据的仓库 |
在（src/api/user/index.ts）中书写相关代码
1 | //导入二次封装的axios |
双向绑定
1 | <template> |
点击事件触发login
1 | <script setup lang="ts"> |
使用elementPlus规定好的关键字，实现进入规则校验
1 | <el-form class="login_form" :model="LoginForm" :rules="rules" ref="loginFormRef"> |
1 | //这点代码中定义的前两个对象用于rules对象中 |
登录成功后跳转到页面
1 | let $router = useRouter() |
安装命令: pnpm install element-plus @element-plus/icons-vue
1 | //在入口文件中main.ts中全局安装element-plus |
同样别忘了把icon图标都注册成全局组件，注册方式和svg图标全局化的方式一样
1 | import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
在开发项目时文件与文件关系很复杂，因此需要给src文件配置一个别名
安装：pnpm i --save-dev @types/path
1 | //在vite.config.ts中配置 |
1 | // tsconfig.json |
项目开发过程中，至少会经历 开发环境、测试环境和生产环境(即正式环境) 三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
项目根目录分别添加 开发、生产和测试环境的文件!
1 | .env.development |
文件内容
1 | # 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
1 | NODE_ENV = 'production' |
1 | # 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
配置运行命令：package.json
1 | "scripts": { |
通过import.meta.env获取环境变量
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,
安装依赖 pnpm install vite-plugin-svg-icons -D
在vite.config.ts中配置
1 | import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' |
main.ts入口文件中引入 import 'virtual:svg-icons-register'
步骤如下
1 | // src/components/SvgIcon.vue |
1 | // src/componebts/index.ts |
1 | // main.ts |
安装sass和sass-loader: pnpm install --save-dev sass sass-loader
接下来我们为项目添加一些全局的样式
在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss
1 | @import reset.scss |
但是你会发现在src/styles/index.scss全局样式文件中没有办法使用$变量.因此需要给项目中引入全局变量$.
在./src/style 中创建一个variable.scss文件！ 在这里可以写入一些全局可用的样式变量。
在vite.config.ts文件配置如下:
1 | export default defineConfig((config) => { |
安装：pnpm install axios
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在根目录下创建utils/request.ts
1 | import axios from "axios"; |
在src目录下创建api文件夹
1 | //示例 |
检测数组中所有元素是否满足制定条件，满足返回true，否则false
该方法依次检测数组中每个元素。如果有一个元素满足条件，则返回true，剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false
一真即真
⚠️注意：some()不对空数组进行检测、some()不改变原数组。
检测数组中所有元素是否符合指定条件，符合返回true，否则false
该方法根据指定条件检测数组中所有元素。如果监测到有一个元素不满足，则返回false，且剩余元素不会再次检测。如果所有条件都满足则返回true。
一假即假 ，而且只要有一个元素是假，其后面的元素将不再遍历
⚠️注意：every()不对空数组进行检测、every()不改变原数组。
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
forEach(): 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数。map是返回一个新数组，原数组不变，forEach 是不改变原数组（尽管回调函数 callbackFn 在被调用时可能会改变原数组）。
不支持 continue，用 return false 或 return true 代替。
不支持 break，用 try catch/every/some 代替。
1 | arr = [1,2,3,4,5,6] |
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
返回值是一个新数组，每个元素都是回调函数的结果。
1 | // 语法： |
和map类似，Array的filter也接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。
filter 接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：
1 | var arr = ['A', 'B', 'C']; |
