第十九天（2024.8.7）Vue Element-plus

1.Vue

1.创建vue文件

1.创建一个文件夹来存储vue文件

我在D盘下创建了一个EasyVue文件夹来存储vue文件

2.在控制台中输入

如果在控制台中按下面步骤成功不了的话，尝试：1.用管理员身份运行控制台 2.关闭防火墙

3.打开编码工具（Visual Studio Code）

此时已经在EasyVue中创建了名为easyvueb的vue文件，我们使用VS打开即可。打开VS后，先使用‘ctrl’+‘~’符打开vs控制台指令，然后依次输入下面三段指令

1.npm install vue-router 下载router

2.npm install axios 下载异步处理

3.npm install element-plus --save 下载element-plus

下载指令结束后就可以开启项目，开启项目的指令为：npm run dev。关闭项目的指令为：‘ctrl’+‘c’

2.vue的构成

左侧src文件夹下的api文件夹、router文件夹、util文件夹是我们单独创建的，每个文件夹下的文件都有独特的作用，下面我将以下面的例子演示

1.在main.js文件下写入：

use(router).use(ElementPlus)为下载完后的router和element-plus配置，需要写入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')

2.APP.vue文件

注意：vue文件中一定要写三个标签<script> <template> <style>

<script setup>
</script><template><router-view></router-view>
</template><style scoped>
</style>

3.router文件夹下的文件

router在vue中称之为路由，负责不同vue文件之间的跳转。创建的index.js文件中，import导入两个函数，然后export传出一个对象 router，在vue文件中通过router对象的设置为true，在toute中写入要跳转的vue文件地址，实现vue文件的跳转

4. util文件夹下的文件

异步处理要导入的代码如下

import axios from 'axios';export default function (options) {//配置每次发送请求都从sessionStorage中获取名字叫token的数据,//添加到请求头部的Authorization属性中//Object.assign用于合并对象的数据options.headers = Object.assign({ Authorization: sessionStorage.getItem('token') },options.headers || {});//axios()   返回一个promise对象，用于异步请求//options是一个对象，其中包含了许多用于配置请求的参数，//例如请求的url、请求方法（GET、POST等）、请求头等return axios(options).then(({ status, data, statusText }) => {//该函数在请求成功并返回数据时被调用//status：HTTP状态码，例如200表示请求成功。//data：服务器返回的数据。// statusText：HTTP状态文本，例如"OK"表示请求成功。console.log(data);if (status == 200) {return data;} else {throw new Error(statusText);}}).catch(e=>{return Promise.reject(e);//return Promise.reject(e.message);});
}

5.api文件夹下的文件

创建的index.js文件里创建了API对象，可以跳转网址，最后export传出了一个对象API

6. 配置vite.config.js文件

可以理解成对访问地址的前段部分起别名为api，未来代码中用到地址时可以利用别名代替（简化了代码）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{// 配置vite冷启动项目自动使用浏览器访问首页open:true,proxy: {  '/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}}  
})

3.vue的主体

vue实际为前端编写的一种形式，但是vue不同于其他前端格式，vue只能有一个HTML文件，在这个HTML文件中，可以注入vue文件。vue的主体为项目中的.vue文件，是因为vue的特殊：我们可以将vue文件看作一个ppt，是一页一页在放映的，前一页是一个vue文件，后一页是另一个vue文件，不同vue文件是通过占位符<router-view></router-view>来占位的。

4.vue和Java交互

在需要和Java交互的vue文件中，在<script>标签下写入：

在这个实例下，要在Java中利用staff地址指令来执行SQL语句，达到对数据库的操作，这里要查询一张表，对表中数据存储要使用数组，所以定义了一个常量tableData数组，然后还引入了onMounted方法，用来跳转地址访问，执行SQL语句

<script setup>import {ref,onMounted} from "vue";import easyapi from '../api'//定义绑定数据const tableData=ref([]);//挂载页面时查询数据onMounted(async function (){let result=await easyapi.get("/api/staff");tableData.value=result.data;});
</script>
<template><h1> <el-table:data="tableData"style="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="code" label="编号" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="salary" label="薪资" /></el-table>
</h1>
</template>
<style></style>