第十九天（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>

 

在网页（前端）中点击表单，会访问Java（后端）操作数据库，完成业务闭环。