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