VUE和Element Plus

1.VUE

1.下载和配置环境

使用vue编程，我们需要使用到的编程软件是vs code，还需要使用node.js，这个的作用就类似于JDK，当我们都下载好之后，win+R键打开命令提示符，我们在这里可以查看版本，

npm -v

然后需要设置我们的镜像

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

我们也可以查看我们的镜像 

npm config get registry

如果能查到我们的镜像，就代表成功了 

然后在d盘建一个文件夹名字叫easyvue，我们在这个文件夹目录执行下面语句

npm create vite@latest

 在执行完毕之后我们需要输入我们的新项目的名称比如easyvueb

然后依次选择vue和javascript，虽然TypeScript也能选，但是尽量使用java的，在选择完毕之后我们就可以去vscode打开这个文件夹，然后我们需要去配置我们的路由，因为vue是单页面的，我们为了实现页面之间跳转，需要使用路由，告诉页面需要向那个网页跳转，我们需要先在中端输入以下语句下载路由

npm install vue-router

然后在src下面建立一个新的文件夹，再新建一个文件叫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文件中，这个文件是我们的node-modules里面的，是我们的配置文件，如果没有子路由，children包括后边的可以不写，子路由是在浏览器页面中，我们通过点击需要跳转到的页面，比如我们在一个页面中需要查看表格，就需要使用到我们的子路由。

在代码中路径部分意思是每当我们路径是访问easy的时候，就是要访问views下面的easy.vue文件。最后一行代码代表是要导出这个路由，这样才能被使用，要不然其他文件里面导入不进去。

然后我们就需要在main.js文件夹下面导入这个路由，然后使用这个路由

import router from './router'      //导入路由语句




createApp(App).mount('#app')     //原本的
   //使用之后：
 createApp(App).use(router).mount('#app')

然后我们再中端下载axios

npm install axios

这个可以帮助我们进行前后端数据交互，下载好了之后再src包下建一个新的文件夹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);
        });
}

这样我们就可以进行数据交互了。也可以开始写项目了，在src包下的view包下建一个文件easya.js，在里面我们需要用到我们的三大标签<script>,<template>,<style>在<template>标签中键写<h1>easy page</h1>,然后我们还需要在我们的app文件中将所有的都删除，只留下三大标签还是在<template>中间写上<router-view></router-view>，这是我们的视图占位符，这时候我们启动项目

npm run dev

就可以在我们的浏览器看见easy page，

2. 使用实例

VUE中有三大标签<script>,<template>,<style>，

（逻辑）<script>：里面是使用我们的javascript编写，一般包含属性，方法，生命周期，这里面用于处理数据逻辑，事件处理

（结构）<template>：模板是组件的可视化部分，定义了组件的 HTML 结构。使用 Vue 的模板语法来绑定数据、渲染列表、条件渲染等。可以包含 Vue 的指令、插值表达式、事件绑定等

（样式）<style>：样式定义了组件的外观和布局。可以使用 CSS、预处理器（如 SASS、Less）、CSS 框架（如 Bootstrap）等来编写样式。通常建议使用作用域样式，以确保样式只应用于当前组

1.

如果我们想实现每当我们点击按钮，我们的文本数字就增加1我们可以在<template>中间写

<button @click="changenum">按钮</button>

在<script>标签中写

const number=ref(12)
const changenum=function(){
    console.log("changenumber method")
    number.value=number.value+1;
}

就可以实现 

2.是否显示

<template>

<h1 v-text="number" v-if="shiwu"></h1>

<button @click="changeshiwu">是否显示</button>

<script>

const changeshiwu=function(){
    console.log("gaibian")
    shiwu.value=!shiwu.value;
}
const shiwu=ref(true);

 这样就可以实现，如果本来是显示出来的点击之后可以小时，否则反之

 3.获取数据

定义好了一个数组之后，获取数组里面的内容分别放在一个容器里面

<template>

<div v-for="(item,index) in arr" class="box">{{index}}:{{ item }}</div>

<style>

.box{
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
}

<script>

const arr=ref([12,34,56,78]);

4. 

 <template>

<button @click="getData">获取数据</button>

<script>

const staffData=ref({});

const getData=async()=>{
    staffData.value=await easyAPI.get("/api/getstaff")
    console.log(staffData.value);
}

 就可从数据库中获取数据，但是这里面路径要是http://localhost:8080/getstaff

从数据库获取到的数据打印到浏览器

 <template>

<el-button type="warning">Warning</el-button>
<table>
    <tr><td>id</td><td>code</td><td>name</td><td>salary</td></tr>
    <tr v-for="(item,index) in staffData"><td>{{ item.id }}</td><td>{{ item.code }}</td><td>{{ item.name }}</td><td>{{ item.salary }}</td></tr>
</table>

 <script>

onMounted(async function(){
    let result=await easyAPI.get("/api/getstaff");
    staffData.value=result.data;
    console.log(staffData.value);
});

路径也要和刚才那样

3.api动态代理

在src包下建一个api文件夹，在里面建一个index.js文件写下面代码

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

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

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

 这样之后，我们就可以和2.4一样写api就可以了，如果以后端口号改变了，只需要在这里面改一次就行，不需要到处更改