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>最后运行结果展示
