Day1_vue集成elementUI主体布局

news2024/12/23 23:06:15

本次，将从0开始带你手撸一套SpringBoot+Vue后台管理系统

从前端到后端，手把手搭建，方便学习从0学会基础实战！！！

目录

软件版本

 前端开发环境安装：

 vue-cli安装 :

 npm设置淘宝镜像加速:

创建vue项目:

运行vue项目:

安装创建项目详解：

VUE集成ElementUI

安装ElementUI：

main.js中  引入element：

Container 布局容器

设置导航栏

左边导航栏的布局：

导航栏颜色：

导航栏阴影效果：

导航栏的折叠与展开

 导航栏项目名称+logo：

可参考element-ui官方文档：Element - The world's most popular Vue UI framework

软件版本

  • jdk 1.8
  • mysql5.7+
  • node14.16.0
  • navicat
  • idea2021.3

 以上软件版本皆可免费下载：

下载地址：https://www.jianguoyun.com/p/Dc5ht0AQ4_2rCRirw-kD

 前端开发环境安装：

 vue-cli安装 :

npm install -g @vue/cli

 npm设置淘宝镜像加速:

​npm config set registry https://registry.npm.taobao.org​

创建vue项目:

 vue create vue

或者vue ui 在浏览器中 选择【vue项目管理器】进行创建

运行vue项目:

cd vue
npm run serve

安装创建项目详解：

以上安装搭建步骤参考之前的博客内容，在此不过多介绍： 

Vue开发环境安装_安装vue环境_Siobhan. 明鑫的博客-CSDN博客

VS code创建Vue项目 方法1：create+项目_Siobhan. 明鑫的博客-CSDN博客

VUE集成ElementUI

安装ElementUI：

npm i element-ui -S

package.json

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.6",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js中  引入element：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Container 布局容器

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css';
Vue.config.productionTip = false
​
// Vue.use(ElementUI,{size:"small"});
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

home.vue

<template>
  <div style="height: 100%">
    <el-container style="height: 100%;">
​
      <el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%; overflow: hidden;">
        <el-menu :default-openeds="['1', '3']" style="height: 100%;">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
​
      <el-container>
​
        <el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc;line-height: 60px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
​
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
​
      </el-container>
    </el-container>
  </div>
</template>
​
<script>
// @ is an alias to /src
​
export default {
  name: 'HomeView',
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item)
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
​
<style>
  #app{
    height: 100%;
  }
</style>

global .css -------在assets中创建全局global样式

html,body,div{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}

----------main.js中引用: import './assets/global.css';

效果图：

设置导航栏

背景颜色
background-color="rgb(48,65,86)"
文字颜色
text-color = "rgb(255,255,255)"
左边导航栏参差不齐时
style="overflow-x: hidden"
文字选中变色
active-text-color="#ffd04b"

 global.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*  "*" 所有标签都生效 ；
box-sizing:border-box：盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整 忽略边框 */

home.vue

左边导航栏的布局：

导航栏颜色：

<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
         background-color="rgb(48,65,86)"
         text-color = "rgb(255,255,255)"
         active-text-color="#ffd04b"
         :collapse-transition="false"
         :collapse="isCollapse"
>

导航栏阴影效果：

box-shadow: 2px 0 6px rgb(0 21 41 / 35%);

导航栏的折叠与展开

collapse属性：它的作用是是否水平折叠收起菜单（仅在mode为vertical时可用），是一个Boolean类型，默认值为false

  • 在导航菜单头部，可以设置一个按钮，通过点击控制左侧菜单的显示与隐藏，代码如下：

        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>

  • 在data中定义一个数据isCollapse，是一个变量，控制它的值实现切换，默认为false，代码如下：isCollapse: false,

    collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,

  • 在 el-menu 中，可以动态绑定 collapse的值，代码如下

:collapse="isCollapse"

  • 在method中，定义一个之前按钮绑定点击事件的方法，在这个方法当中，控制isCollapse的值，进行取反操作，这样就实现了菜单的折叠与展开，代码如下：

this.isCollapse = !this.isCollapse

 完整方法如下：即在Home.vue后添加methods

methods: {
  collapse() { // 点击收缩按钮触发  取反，默认为false
    this.isCollapse = !this.isCollapse
    if(this.isCollapse) {  // 收缩/折叠
      this.sideWidth = 64
      this.collapseBtnClass = 'el-icon-s-unfold'
      this.logoTextShow = false // 不显示系统名字
    } else{  // 展开
      this.sideWidth = 200
      this.collapseBtnClass = 'el-icon-s-fold'
      this.logoTextShow = true // 显示系统名字
    }
  }
}

  • 菜单的折叠与展开Element中默认是有动画的，不方便显示，我们可以选择关闭，在Menu Attribute中，有一个collapse-transition 属性。它的作用是是否开启折叠动画，是一个 boolean 类型，默认值为true，我们把它设置为false，就可以关闭折叠动画了，代码如下：

    :collapse-transition="false"

  • 在左侧菜单的展开与折叠中，会发现一个问题，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度，代码如下：

     <el-aside :width="sideWidth + 'px'">

    return中返回：sideWidth: 200,

    即：侧边栏搜索还是能看到菜单文字的问题

 

这个问题是element样式问题，在Aside.vue里面加上下面的css即可解决：

/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {
  visibility: hidden;
}

 导航栏项目名称+logo：

<div style="height: 60px; line-height: 60px; text-align: center">
  <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
  <b style="color: whitesmoke" v-show="logoTextShow">课题管理系统</b>
</div>

同样在折叠导航栏时，项目名称会出现文字重叠，需要设置logoTextShow方法来进行设置。

logoTextShow: true,  // 默认为true，显示logo后的项目名称

Home.vue完整代码：

<template>
  <el-container style="min-height: 100vh;">
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="rgb(48,65,86)"
               text-color = "rgb(255,255,255)"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
          <b style="color: whitesmoke" v-show="logoTextShow">课题管理系统</b>
        </div>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>

      <el-header style=" font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>

        <el-dropdown style="width: 70px; cursor: pointer">
          <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-main>
        <el-table :data="tableData" >
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>

      </el-main>

    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item),
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,  // 默认为true，显示logo后的项目名称
    }
  },
  methods: {
    collapse() { // 点击收缩按钮触发  取反，默认为false
      this.isCollapse = !this.isCollapse
      if(this.isCollapse) {  // 收缩/折叠
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false // 不显示系统名字
      } else{  // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true // 显示系统名字
      }
    }
  }
}
</script>

效果图：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/455508.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue2+vue3——1~35

vue2+vue3——1~35

vue2vue3 尚硅谷vue2vue2 课程简介【02:24】vue2 Vue简介【17:59】vue2 Vue官网使用指南【14:07】vue2 搭建Vue开发环境【13:54】vue2 Hello小案例【22:25】了解&#xff1a; 不常用常用&#xff1a;id 更常用 简单class 差值总结vue 实例vue 模板 &#xff1a; 先 取 &#xf…
阅读更多...
【香橙派+DHT11】香橙派（全志H616）+ DHT11温湿度传感器的驱动教程

【香橙派+DHT11】香橙派（全志H616）+ DHT11温湿度传感器的驱动教程

目录 一、前言产品概述特点数据传送逻辑DHT11通信时序 二、代码GPIO初始化起始信号读取数据整体代码执行结果 一、前言 最近写DHT11的代码到香橙派&#xff08;全志H616&#xff09;上&#xff0c;发现网上案例基本上都是树莓派DHT11的居多&#xff0c;香橙派的少&#xff0c;…
阅读更多...
Linux进程通信：无名管道

Linux进程通信：无名管道

进程通信目的&#xff1a; &#xff08;1&#xff09;数据传输&#xff1a;进程间数据传输&#xff1b; &#xff08;2&#xff09;通知事件&#xff1a;一个进程向另一个或一组进程发送消息&#xff0c;通知某个事件的发生&#xff08;如子进程终止时需通知父进程&#xff0…
阅读更多...
使用Lim测试平台快速完成批量造数

使用Lim测试平台快速完成批量造数

一、前言 在我们平时的测试过程中&#xff0c;经常遇到需要造大量数据的情况&#xff0c;比如&#xff1a;测试分页功能&#xff0c;性能压测、数据准备等。 这时我们可以通过写脚本或jmeter这类的工具来实现&#xff0c;但这些方式在团队协作的时候并不友好&#xff0c;当别人…
阅读更多...
MySQL 函数和运算符

MySQL 函数和运算符

文章目录 一、MySQL 函数二、MySQL 运算符总结 一、MySQL 函数 MySQL 有很多内置的函数&#xff0c;以下列出了这些函数的说明。 二、MySQL 运算符 算术运算符 比较运算符 逻辑运算符 位运算符算术运算符 MySQL 支持的算术运算符包括: 除法运算和模运算中&#xf…
阅读更多...
（2）elasticsearch环境搭建(win10)

（2）elasticsearch环境搭建(win10)

安装jdk 版本选择&#xff1a;最好是java 8、java11或者java14 jdk兼容性&#xff1a;https://www.elastic.co/cn/support/matrix#matrix_jvm 操作系统兼容性&#xff1a;https://www.elastic.co/cn/support/matrix 自身兼容性&#xff1a;https://www.elastic.co/cn/suppo…
阅读更多...
Linux下版本控制器(SVN) -服务器端环境搭建步骤

Linux下版本控制器(SVN) -服务器端环境搭建步骤

文章目录 进阶知识-Linux下版本控制器(SVN)4、服务器端环境搭建步骤4.1 安装服务器端程序4.2 验证是否安装成功4.3 创建并配置版本库4.4 配置 SVN对应的服务4.5 启动 SVN服务 本人其他相关文章链接 进阶知识-Linux下版本控制器(SVN) 4、服务器端环境搭建步骤 4.1 安装服务器端…
阅读更多...
AD7356_SPI驱动程序设计_5MSPS_Verilog

AD7356_SPI驱动程序设计_5MSPS_Verilog

好久没动手了&#xff0c;使用Verilog编写一个AD7356的SPI驱动程序。 AD7356是一个双通道、12位、低功耗的ADC。最高采样速率可达5MSPS&#xff0c;全功率输入带宽为110MHz。AD7356的引脚图如下。 SPI的时序图如下&#xff0c;为了使单通道的采样速率达到最高的5MSPS&#xff…
阅读更多...
mac m1的docker nacos2.0.3访问宿主机器的mysql

mac m1的docker nacos2.0.3访问宿主机器的mysql

一、环境介绍&#xff1a; 我的mac系统&#xff1a;m1芯片 macOs Ventura 13.1 我的docker版本&#xff1a;v20.10.8 本机msyql&#xff1a;8.0.25 端口&#xff1a;3306。 mysql版本查询脚本&#xff1a;select version() from dual; 二、准备安装nacos2.0.3 m1版本的镜像 …
阅读更多...
Vue+Echarts 项目演练（中）后台数据接口的创建

Vue+Echarts 项目演练（中）后台数据接口的创建

全局引用Echarts与axios 后台接口创建express路由 api接口数据创建 全局引用Echarts与axios vue3.0的挂载方式&#xff1a;使用Provide/Inject依赖注入&#xff0c;将替代vue2中在原型链上挂载一些属性在app.vue中使用provider来给后代们提供数据 <script> import { p…
阅读更多...
组态王与FX3U之间无线通讯（485BD口）

组态王与FX3U之间无线通讯（485BD口）

设备与设备之间互相通信&#xff0c;需要一座桥梁把二者连接起来&#xff0c;那就是传输通路与通信协议。 传输通路由传输介质与传输接口组成&#xff0c;传输介质可分为有线和无线传输介质两大类。传输接口即通信模块。传输接口常见的有三种RS-232、RS-485和RS-422通信模块。…
阅读更多...
干货|英国专利申请

干货|英国专利申请

英国是世界上公认的一个实施现代专利制度的国家。英国1624年颁布的《垄断法案》被认为是世界上一部具有现代意义的专利法&#xff0c;并成为现代专利保护制度系的起点。英国现行的专利法于1977年颁布&#xff0c;并于1978年生效。英国的专利制度在保护发明创造&#xff0c;促进…
阅读更多...
21.Java网络通信

21.Java网络通信

目录 1. Java基本介绍 2. JDK下载安装及其环境配置 3. 一个简单的java程序 4. Eclipse基本使用、数据类型、运算符 5. 控制语句&#xff08;if、switch、for、while、foreach&#xff09; 6. Java数组 7. Java字符串对象(String|StringBuffer|StringBuilder|StringJoiner…
阅读更多...
Asp.NET CORE实验室信息管理系统源码，支持LIS独立部署，Docker部署

Asp.NET CORE实验室信息管理系统源码，支持LIS独立部署，Docker部署

技术架构&#xff1a;Asp.NET CORE 3.1 MVC SQLserver Redis等 基于B/S架构的实验室管理系统源码&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问。全套系统采用云部署模式&#xff0c;部署一套可支持多家医院检验科…
阅读更多...
Java ---Object根类

Java ---Object根类

(一&#xff09;定义 官方说法&#xff1a; 在Java中&#xff0c; Object 类是所有类的父类&#xff0c;即Java 的所有类都继承了 Object&#xff0c;子类可以使用 Object 的所有方法。 注意&#xff1a; Object类型的变量与除Object以外的任意引用数据类型的对象都多态引用 所…
阅读更多...
youdiancms 9.5.0 版本 SQL注入（vulfocus复现）

youdiancms 9.5.0 版本 SQL注入（vulfocus复现）

启动服务 从上述信息&#xff0c;可以看到&#xff0c;web服务的80端口被映射到62461端口&#xff0c;并且该服务对外开启了3306端口并映射到20130 端口。并且给了数据库的相关信息。 配置web数据库 登陆后台&#xff0c;后台如下&#xff1a; 探测注入点 上述提到注入点是M…
阅读更多...
OpenGL教程之 纹理练习

OpenGL教程之 纹理练习

网址 LearnOpenGL 练习一 修改片段着色器&#xff0c;仅让笑脸图案朝另一个方向看。  解析&#xff1a;朝向另一个方向很简单&#xff0c;即让上文中的图片进行左右对称变换即可&#xff0c;即将片段着色器中笑脸的纹理坐标从textCord转换为vec2( 1 - textCord.x, text.y …
阅读更多...
【淘宝】商品列表页数据采集+商品销量数据采集代码

【淘宝】商品列表页数据采集+商品销量数据采集代码

采集场景 在淘宝首页&#xff08;https://s.taobao.com/&#xff09;输入关键词搜索&#xff0c;采集搜索后得到的商品列表页数据。示例中关键词为【耐克】&#xff0c;可根据需求进行更换&#xff0c;同时支持自动批量输入多个关键词。 采集字段 采集字段包括关键字文本值…
阅读更多...
Nginx和tomcat反向代理（动静分离）

Nginx和tomcat反向代理（动静分离）

正向代理&#xff1a; 当用户想访问某一网址时&#xff0c;用户先访问代理服务器&#xff0c;然后由代理服务器向目标网址发送请求最终将数据返回代理服务器&#xff0c;最后代理服务器将数据返回给用户这一过程我们称之为正向代理。 反向代理&#xff1a;基本流程是与正向代理…
阅读更多...
【react全家桶学习】如何创建一个react组件（超详）

【react全家桶学习】如何创建一个react组件（超详）

前提是你安装了react脚手架&#xff0c;不会的看这里&#xff0c;然后再进行创建哦~ 【react全家桶学习】初始化react脚手架及项目结构讲解_suohs Blog的博客-CSDN博客 目录 问题1&#xff1a;如何创建一个简单的hello组件&#xff1f; 问题2&#xff0c;如果组件特别多怎么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023