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> 
在网页（前端）中点击表单，会访问Java（后端）操作数据库，完成业务闭环。
