vue3简单使用
一、前置
js按需导入需要的函数
在导入js文件时如果用
<script src="./showMessage.js"></script>导入的化会导入js中全部的东西，造成了额外的开销。下面介绍按需导入的使用
① 可以在被导入的js文件的函数前加入export
在使用时
注意script的type要是module
如果嫌导入函数名字太长的话可以通过像python一样的as来指定别名
import {simpleMessage as sm} from "./showMessage.js"
② 如果需要在js中导入多个函数的话，可以采用批量导入的方法
调用方法和上面一样没有改变
③ 上面的方法在使用时需要写很多个函数名，十分麻烦，就可以在批量导入的时候加一个default关键词，这样就可以把js中需要的函数当成是一个包来使用
js代码
调用
二、ajox
Axios 对原生的Ajax进行了封装，简化书写，快速开发
1. 导入
这里关注在vue中如何使用axios
首先就是先得安装axios，这不步骤官方提供了
如果使用npm安装的话还需要导入
安装完会出现在node_modules文件下面
<script setup>
import axios from 'axios'
2. 基本使用
当然传入的参数也可以包含在axios的参数中（以json格式传入数据）
POST请求格式为
// 发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
});
以上的写法是直接向axios中进行配置，当然还有简单的写法。就是直接用axios.请求方式(url，其他配置)，别名方式调用
//别名的方式发送请求
axios.get('http://localhost:8080/article/getAll').then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
});
如果存在参数
其他的请求方式也是同理
请求方法的配置参数可以在源码中找到
含义参看axios官网
3. 默认配置
全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
经过以上的配置之后，所有的axios的请求baseURL都是https://api.example.com
创建时配置
axios.create(配置信息)
const instance1 = axios.create({baseURL:'https://api.example.com'});
instance1.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
究极偷懒写法
这里的baseURL实际上可以省略很多直接写成{baseURL:"/api"}也是可以的，因为框架会自动帮我们拼接上我们请求的baseurl（也就是vue运行的url）
const instance1 = axios.create({baseURL:"/api"});
instance1.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
上面说的是配置实际上是调用create创建了axios的对象，可以调用对象的对应请求方法发起请求
instance1.get('/article/getAll')
.then(result => {return result.data})
.catch(err => {console.log(err)})
在浏览器可以查看到具体的URL
4.拦截器使用
在每次axios响应后都需要写对应的then和catch方法进行处理，十分麻烦。
为了减少开发代码量，axios提供了拦截器来对请求进行处理。会在调用then和catch方法之前对结果进行处理
响应拦截器
使用方法
//创建axios实例
const instance1 = axios.create({baseURL:"/api"});
//配置拦截器 实例.interceptors.response.use(成功处理方法，失败处理方法)
instance1.interceptors.response.use(
result => {return result.data},
err => {console.log(err); return Promise.reject(err)}
)
使用响应拦截器处理响应结果
拦截器会在调用then和catch方法之前对结果进行处理
验证
可以看到控制台输出的是data的数据，而不是整个请求
当然在接收到正常返回值的响应，但是不符合我们要求的也可以把请求置为失败状态
请求拦截器
拦截器发送在请求发起之前，可以为请求配置统一的信息，如需要在请求头中加入taken的信息
5. axios等待数据获取问题
6. ⭐跨域问题
在axios中经常出现这个问题
原因：由于浏览器的同源策略限制，向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败
解决方案就是通过前端服务器代理转发我们的ajax请求
(1) 把baseURL换成极简的
(2) 添加代理配置
找到vue的配置文件vite.config.js
在defineConfig字段下配置如下信息
完整的配置文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { proxyRefs } from 'vue'
import path from 'node:path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
proxy:{
'/api':{
target:"http://localhost:8080",
changeOrigin: true,
rewrite:(path) => path.replace(/^\/api/,'')
}
}
}
})
三、 element组件库
Element Plus官网
使用这个库主要是要复制官网组件，修改模板，绑定事件
1. 安装
安装方式主要以官网介绍的为主
npm安装方式
npm install element-plus --save
2. 导入方法
这里是vue工程，导入element的方法和导入vue的方法差不多
3. 使用方法
导入包之后就可以去官网找自己需要的组件，复制代码到自己的项目里面进行修改和绑定事件了。
运行结果
可以看到网页结构就是官网的样子
但是，他文体默认的都是英文的，需要进行转换
问题
① 语言转换
没有配置时的分页条组件
配置中文，需要在main.js文件中引入语言包
效果
② 表单校验
表单的数据输入时需要进行校验，如两次密码输入要一直，数据长度字符限制等问题
校验上面的表单
a. 参照官网写校验规则
基础校验规则
自定义校验
自定义校验需要自己实现validator传入的函数
在校验规则中绑定
b. 校验规则的使用
① 首先得先在表单中指定用的的规则，并绑定校验数据
注意，在表单上一定要记得绑定 :model属性
② 在每个需要校验的项中添加prop属性指定校验规则
⭐坑（表单提交时的校验）
element提供的校验只是个提示校验，意思就是他只是给你个提示，但并不会约束到数据本身
比如上面的代码，我已经添加了校验准则
这里的请求里面并没有再出输入密码的数据。
解决
其实上面的操作只是对单个数据进行了校验，并没有对整个表单进行校验，这就会导致即使校验不通过还是能发起请求
这时就需要对表单提交的进行处理，并通过一个标志位来控制校验是否通过，通过则发起请求。
但是这种方法存在线程同步问题
这里索性直接就把校验函数和发起请求的写在一起，校验成功直接发送请求
引入相关东西
定义表单的ref和表单提交的校验函数
绑定表单提交按钮
到处完成了表单校验
总结
表单是校验一定要配合数据校验和表单校验一起使用，不然会出现明明数据格式都不符合还能发起请求的问题。
③ 文件上传
文件上传的标签是el-upload
需要属性为
action：必须要。调用的后台文件上传的路径（存在跨域问题）
name：上传的文件字段名，默认为file
headers：请求头的配置
on-success：上传成功后的回调函数
回调函数的内容实际上跟编写的代码有关，还和拦截器处理有关
④ 下拉菜单使用
点击后的处理函数
四、vue3
在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。
vue的入门使用比较简单，而且东西比较多，用到的时候去官网查看
vue3官网
官网提供了很好的教程
练习
vue3项目的工程创建
vue3创建需要使用到node.js(版本在16及其以上)，
解释
执行上面给出的3条绿色指令
然后访问上面给出的Local里的网站，如果出现下面的页面就成功了
生成项目的项目结构
vue3 的工程化开发
代码区介绍
从代码中可以看出，默认首页中的id为app的div挂载到vue上，由vue接管，vue传入的参数是根组件，这个根组件实际上就是网页的具体内容。
所以我们的代码主要是写在这个根组件上
每个vue文件可以分为三个部分
.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（.vue） 。
整理项目结构
- 删除components下面自动生成的内容
- 新建目录api(存方法)，utils（存服务工具），views（存vue页面）
- 静态文件放在assets文件夹下面
- 删除App.vue中自动生成的内容
问题
1. post请求参数格式
请求参数格式：x-www-form-urlencoded
export const userRegisterService = (registerData)=>{
return request.post('/user/register',registerData);
}
以上方法传的是json，要把格式变为x-www-form-urlencoded，可以利用UrlSearchParams对象
export const userRegisterService = (registerData)=>{
//借助于UrlSearchParams完成传递
const params = new URLSearchParams()
for(let key in registerData){
params.append(key,registerData[key]);
}
return request.post('/user/register',params);
}
2. 路由使用
路由在vue中主要是用来处理页面跳转的，哪个访问路径该显示那个组件
① 安装
npm install vue-router@4
② 创建路由
路由在工程里面需要放在src/router下面
③ 导入路由
需要在mian.js入口文件中引入路由
④ 在组件中调用路由
这样就可以实现根据路径跳转到不同的组件页面
= 使用路由实现登陆跳转到主页
登陆操作是在Login.vue组件中，要使用路由进行跳转，那么需要先获取路由，然后使用路由的push方法进行跳转
以上是在组件中使用路由
在js文件中导入路由的操作和组件中有所不同
3. 子路由
子路由就是相当于访问路径的拼接
① 引入
子路由的定义需要在父路由的映射规则下面的指定children属性来定义子路由，子路由的映射格式和父路由的格式是一样的，都是一个数组[ ]。里面定义path和component。[{path1:路径1, component: 组件1},{path1:路径2， component: 组件2}]
这样关系图就变为
子路由的使用方法和路由是一样的。
这里介绍一下如何在element的meau组件中点击对应菜单显示对应组件
首先要知道通过路由点击，实现跳转如何来展示组件，展示的地方是由于<router-view>标签位置决定的，我们通过路由改变的是<router-view>所在位置。
展示标签写好了就需要给meau绑定跳转了，绑定是通过el-menu-item标签的属性index实现的
当然要使用index需要先开启router
实现
4. pinia：Vue的专属状态管理库可以用于管理taken
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。
pinia官网
可以通过状态来实现全局变量的管理
① 安装
通过命令行npm install pinia即可安装pinia
② 引入
需要的入口文件main.js中引入pinia
③ 定义pinia状态
对于需要定义的状态，一般存储在src/stores文件夹下面，这里建立了src/stores/taken.js
定义完记得通过export导出给外部使用
import {defineStore} from "pinia";
import {ref} from "vue";
// 状态的命名一般是 useXXXStore
export const useTakenStore = defineStore('taken', ()=>{
// 定义taken数值
const taken = ref('');
// 设置taken的值
const setTaken = (newTaken) =>{
taken.value = newTaken;
}
// 移除taken
const removeTaken = () => {
taken.value = ''
}
return {taken, setTaken, removeTaken}
})
④ 状态的获取使用
使用状态来存储taken，在登陆成功的时候调用操作集合里面的函数来对数据进行操作
在需要使用到taken的地方需要取出taken，如获取文章分类列表时需要取出taken，放到请求头上
虽然在定义时，状态定义为了响应式的对象，但是在外边得到的状态数据不是响应式的，不需要用.value来获取值
这里取出taken放入请求头的操作，并不是只要这个操作需要，有很多地方都需要把taken放入请求头中，可以添加请求拦截器来实现这个操作，减少代码重复。
具体参看二、axios的拦截器部分
解决pinia持久化问题
pinia的状态是存储在内存的，当浏览器刷新页面，pinia存储的状态就没了，所以需要对pinia的状态进行持久化
a. 安装
npm install pinia-persistedstate-plugin
b. 导入
需要在入口文件main.js中导入插件，并让pinia对象使用这插件
c. 配置
在定义pinia对象时，设置persit属性，开启持久化（因为状态可能不只一个，所以需要设置persit属性来确定那些需要进行持久化）
扫一扫
2703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
