java学习笔记 VSCode

2.管理员身份打开cmd,切换存文件的路径

2.输入下面命令创建文件

npm create vite@latest

将项目命名为easyb选择vue--->JavaScript 

3,用管理员身份打开VSCode,打开刚刚创建的easyb

4.下载包

npm install

npm install vue-router

  npm install axios

npm install element-plus --save

5.在src文件下创建文件夹

1>在api文件夹下创建新文件index.js

定义了一个名为 API 的模块，该模块封装了 HTTP GET 请求的功能

这行代码将 API 对象导出为模块的默认导出。这意味着其他文件可以通过 import API from './module.js' 的方式导入整个 API 对象。

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

2>在router下创建文件index.js

import {createRouter,createWebHashHistory} from  'vue-router'

const router=createRouter(
    {
    history:createWebHashHistory(),
    routes:[
        {path:'/easy',component:()=>import("../views/easy.vue"),
         children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]
        }
    ]
    }
);

export default router;

 Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用中的导航和视图组件

从 vue-router 包中导入了两个函数：createRouter 和 createWebHashHistory。

• createRouter: 用于创建一个 Vue Router 实例。
• createWebHashHistory: 用于创建一个使用浏览器 URL 的哈希部分 (#) 来记录路由状态的历史记录模式。

• 这段代码创建了一个 Vue Router 实例，并配置了路由规则。
  • history: 设置了使用的路由历史模式为哈希模式。哈希模式意味着路由的变化不会触发浏览器的重新加载，而是通过改变 URL 中的哈希部分来实现。
  • routes: 定义了路由规则。在这个例子中，只定义了一个路由规则：
    • path: '/easy': 指定了路由的路径。
    • component: () => import('../views/easy.vue'): 指定了当访问 /easy 路径时要加载的组件。这里使用了动态导入（import()），这样可以在运行时异步加载组件，有助于提高应用的初始加载速度。
    • children: 定义了子路由规则。在这个例子中，只有一个子路由：
      • path: '/stafflist': 指定了子路由的路径。
      • component: () => import('../views/stafflist.vue'): 指定了当访问 /stafflist 路径时要加载的组件。

3>在util下创建新文件http.js

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);
        });
}

发送 HTTP 请求的函数，该函数使用 Axios 库来发送请求，并在请求头中自动加入从 sessionStorage 中获取的 token 数据,同时，它还处理了请求的成功和失败情况.

6.在main.js中写

// 导入 Vue 的 createApp 函数，用于创建 Vue 应用实例
import { createApp } from 'vue';

// 导入根组件 App，它是应用的主要入口点
import App from './App.vue';

// 导入路由实例 router，这是使用 Vue Router 时创建的路由配置
import router from './router';

// 导入 Element Plus 组件库，它是一个基于 Vue 3 的组件库，提供了丰富的 UI 组件
import ElementPlus from 'element-plus';

// 导入 Element Plus 的 CSS 样式文件，这一步是为了让应用能够使用 Element Plus 提供的样式
import 'element-plus/dist/index.css';

// 创建 Vue 应用实例，并使用 router 和 ElementPlus 插件，最后将应用挂载到 DOM 中
createApp(App)
    .use(router) // 使用 Vue Router 实例
    .use(ElementPlus) // 使用 Element Plus 组件库
    .mount('#app'); // 将应用挂载到 HTML 中 id 为 'app' 的元素上

7.在App.vue中

<script setup>
// 组件的 JavaScript 逻辑写在这里
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
// 组件的样式写在这里
</style>

<router-view> 是 Vue Router 提供的一个组件，用于渲染当前活动的路由视图。当使用 Vue Router 时，每个 <router-view> 标签都会根据当前的路由来渲染对应的组件

用于显示页面结果

8.设置代理 vite.config.js

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/, ''),
      },
    }
  }
})

10.设置员工列表跳转页面

<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>
    <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="姓名" width="180" />
      <el-table-column prop="salary" label="薪资"/>
    </el-table>
  </template>

<style></style>

最后运行结果展示