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 对象。

css 复制代码
import http from '../util/http.js';

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

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

css 复制代码
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 包中导入了两个函数:createRoutercreateWebHashHistory

  • 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

css 复制代码
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中写

css 复制代码
// 导入 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中

css 复制代码
<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

css 复制代码
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.设置员工列表跳转页面

css 复制代码
<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>

最后运行结果展示

相关推荐
阿絮~5 分钟前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟5 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟7 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠8 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj8 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
大苏打seven9 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
Green1Leaves11 小时前
pytorch学习-9.多分类问题
人工智能·pytorch·学习
慕y27411 小时前
Java学习第十五部分——MyBatis
java·学习·mybatis
碣石潇湘无限路12 小时前
【AI篇】当Transformer模型开始学习《孙子兵法》
人工智能·学习