vue的笔记

一、构建的常用语句

  1. 使用 vite 构建前端工程
    • npm init vue@3.7.0
  2. 下载 sass 依赖,注意这是个 开发依赖
    • npm i sass -D
  3. 下载 axios 异步插件
    • npm i axios -S
  4. 下载 ElementPlus 图形界面组件
    • npm i element-plus -S
  5. 下载 ElementPlus 图标组件
    • npm i @element-plus/icons-vue -S
  6. 下载 ECharts 图表界面组件
    • npm i echarts -S
  7. 下载 md5 加密依赖 防止 密码明文传送
    • npm i ts-md5 -S
  8. 下载 pinia 插件,防止刷新重置仓库
    • npm i pinia-plugin-persist -S
  9. 下载 数字滚动插件
    • npm i vue3-count-to -S

二、各种请求格式

  1. get

    1. 直接拼接:http://localhost:8080/getstudent/17
    2. params拼接:http://localhost:8080/getstudent?id=17

  2. delete(delete跟get相似,一般只在请求上直接拼接,不会携带data)

    1. 直接拼接:http://localhost:8080/delstudent/17
    2. params拼接:http://localhost:8080/delstudent?id=17

  3. put

    1. 带Json格式的参数axios.put('/api/user', { name: '张三', age: 18 })

    2. 以表单格式发送(Content-Type:application/x-www-form-urlencoded):

    axios.put('/api/user', qs.stringify({ name: '张三', age: 18 }))

    1. 拼接同样可以,但不建议

  4. post

    1. 带Json格式的参数axios.post('/api/user', { name: '张三', age: 18 })

    2. 以表单格式发送(Content-Type:application/x-www-form-urlencoded):

    axios.post('/api/user', qs.stringify({ name: '张三', age: 18 }))

    1. 拼接同样可以,但不建议

代码实例:

request.ts:

import axios,{type AxiosInstance} from "axios";
import { ElMessage } from "element-plus";

const request:AxiosInstance = axios.create({
   /* http://db.etoak.com:9527 */
   baseURL:import.meta.env.VITE_APP_BASE_API,
   /* 超时时间 */
   timeout:5000,
})

request.interceptors.request.use(config=>{
   console.log('请求拦截器~~~~',config)
   return config
},error=>{
   return Promise.reject(error)
})

/* 设置响应拦截器 */
request.interceptors.response.use(Response=>{
   console.log('响应拦截器~~~~',Response)
   const {data} = Response
   if(data.code===200||data.flag){
       return Response
   }
   ElMessage.error(data.msg)
   return Promise.reject(data)
},error=>{
   const {message} = error
   if(message.indexOf('Network Error')!==-1){
       ElMessage.error('孩子,没联网')
   }else if(message.indexOf('参数')!==-1){
       ElMessage.error('参数不对')
   }
   return Promise.reject(error)
})
export default request

api/dao.ts:

import request from "@/utils/request";

const PATH = '/testUser/'

export const login = (username: string, password: string) =>
   request({
       url: `${PATH}login?username=${username}&password=${password}`,
       /* get不能发送json */
       method: 'get',
   })

export const reg = (pojo: RegUser) =>
   request({
       url: `${PATH}add`,
       /* post可以发送json */
       method: 'post',
       data: pojo,
   })

export const UpdateById = (newPojo: UpdateUser | UpdateRole) =>
   request({
       url: `${PATH}update`,
       method: 'put',
       data: newPojo,
   })

export const removeById = (id: string) =>
   request({
       url: `${PATH}delete/${id}`,
       /* url:`${PATH}delete?id=`, */
       method: 'delete',
   })

三、使用声明类文件让你的前端代码不爆红

​ 在我之前的一段较为紧张的学习时期，我们在写前端的时候，不去写声明文件，来定义一些属性的接口，就导致，我们在使用这些属性的时候，会让我们的代码爆红，虽然这并不影响代码的执行，这种情况也一度让我忘记了，怎么去定义这样的接口类。

- 这种文件在 TypeScript 里叫做类型声明文件，英文名是：Type Declaration File。

- 通常以 .d.ts 结尾。

- 作用：专门用来声明类型（接口、类型别名、全局变量等），不包含实际的实现代码。

declare interface Province{
   id:string,
   name:string
}
declare interface City{
   id:string,
   name:string
}
declare interface Area{
   id:string,
   name:string
}
declare interface CascadeUser{
   provinceId:string,
   cityId:string,
   areaId:string
}

四、关于Echarts图标绘制

这里选择直接贴代码

script:

import { onMounted, onUnmounted, ref, reactive } from 'vue';
import * as echarts from 'echarts'
import 'echarts/theme/vintage'

/* 获取页面 DOM */
let mychart = ref<HTMLDivElement | undefined>()

let chart:any   /* 注意这里如果使用 ref 会导致 tooltip 中的指示器失效! */

/* 此函数用来绘制图表 */
const initChart = () => {
   /* 设置初始化位置,也就是绘制在哪里 */
   chart = echarts.init(mychart.value,'vintage')
   /* 加载配置项 配置项中常见的配置项一定要明确其功能,由于配置项众多,不要求逐个记住,但是要
   懂得如何使用 官方 API 文档查阅 测试,注意只要配置项书写错误,则无报错机制,图表不显示 */
   chart.setOption({
   /*
   这里是图标各类数据
   */
   })
}
/* 页面真实 DOM 覆盖虚拟 DOM,全部渲染完毕开始绘制 ECharts 图表 */
onMounted(()=>{
   initChart() /* 绘制图表 */
})
/* 当组件销毁前重置 图表对象,防止切换过程中缓存误导 */
onUnmounted(()=>{
   if(!chart) return
   chart.dispose() /* ECharts 自带函数,强制销毁当前对象 */
   chart = null    /* 重置为 null */
})
/* 添加随着浏览器的拖动图表自适应 */
window.addEventListener("resize", function () {
   if( chart ) chart.resize()
   /* 如果存在多个则依次调用 */
   /* myChartA.resize();
   myChartB.resize(); */
})

template:

<div class="show">
   <div ref="mychart" class="mychart"></div>
</div>
posted @ 2025-07-14 20:29  下雨的Jim  阅读(16)  评论(0)    收藏  举报