vue的笔记
一、构建的常用语句[*]使用 vite 构建前端工程
[*]npm init vue@3.7.0
[*]下载 sass 依赖,注意这是个 开发依赖
[*]npm i sass -D
[*]下载 axios 异步插件
[*]npm i axios -S
[*]下载 ElementPlus 图形界面组件
[*]npm i element-plus -S
[*]下载 ElementPlus 图标组件
[*]npm i @element-plus/icons-vue -S
[*]下载 ECharts 图表界面组件
[*]npm i echarts -S
[*]下载 md5 加密依赖 防止 密码明文传送
[*]npm i ts-md5 -S
[*]下载 pinia 插件,防止刷新重置仓库
[*]npm i pinia-plugin-persist -S
[*]下载 数字滚动插件
[*]npm i vue3-count-to -S
二、各种请求格式
[*]get
[*]直接拼接:http://localhost:8080/getstudent/17
[*]params拼接:http://localhost:8080/getstudent?id=17
[*]delete(delete跟get相似,一般只在请求上直接拼接,不会携带data)
[*]直接拼接:http://localhost:8080/delstudent/17
[*]params拼接:http://localhost:8080/delstudent?id=17
[*]put
[*]带Json格式的参数axios.put('/api/user', { name: '张三', age: 18 })
[*]以表单格式发送(Content-Type:application/x-www-form-urlencoded):
axios.put('/api/user', qs.stringify({ name: '张三', age: 18 }))
[*]拼接同样可以,但不建议
[*]post
[*]带Json格式的参数axios.post('/api/user', { name: '张三', age: 18 })
[*]以表单格式发送(Content-Type:application/x-www-form-urlencoded):
axios.post('/api/user', qs.stringify({ name: '张三', age: 18 }))
[*]拼接同样可以,但不建议
代码实例:
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 requestapi/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:
来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
页:
[1]