当前位置： 首页 > article >正文

Vue路由配置、网络请求访问框架项目、element组件介绍学习

article 2024/9/18 21:50:38

系列文章目录

第一章 基础知识、数据类型学习
第二章 万年历项目
第三章 代码逻辑训练习题
第四章 方法、数组学习
第五章 图书管理系统项目
第六章 面向对象编程：封装、继承、多态学习
第七章 封装继承多态习题
第八章 常用类、包装类、异常处理机制学习
第九章 集合学习
第十章 IO流、多线程学习
第十一章 仓库管理系统项目
第十二章 员工管理系统、多表查询、反射实现DBHelper学习
第十三章 DML、DDL、数据库对象学习
第十四章 网络编程、各种标签、CSS学习
第十五章 ECMAScript、BOM学习
第十六章 DOM、jQuery学习
第十七章 servlet、jsp、Cookie、Ajax学习
第十八章 融资管理系统项目
第十九章 MyBatis框架学习
第二十章 逆向工程、Spring框架IOC、AOP学习
第二十一章 SpringMVC框架学习
第二十二章 SpringBoot框架学习
第二十三章 招聘网站项目
第二十四章 Vue介绍、窗体内操作、窗体间操作学习
第二十五章 Vue路由配置、网络请求访问框架项目、element组件介绍学习

文章目录

  • 系列文章目录
  • 前言
  • 一、路由配置
    • 1. 路由配置介绍
    • 2. 代码实现路由配置
      • 2.1 安装Vue Router
      • 2.2 配置main.js文件
      • 2.3 配置App.vue文件
      • 2.4 实现效果
  • 二、网络请求访问框架项目
    • 1. 网络请求介绍
    • 2. 代码实现网络请求
      • 2.1 安装Axios
      • 2.2 编写UserLogin.vue文件
      • 2.3 编写UserShow.vue文件
      • 2.4 配置main.js文件
      • 2.5 配置vue.config.js文件
      • 2.6 启动框架项目
      • 2.7 实现效果
  • 三、element组件推荐
  • 四、全部代码网盘链接
  • 总结

前言

本文会讲述：
路由配置；
网络请求访问框架项目；
element组件介绍。
全部代码连接会放在文档尾！
吾乃星球之霸主，宇宙之帝王！！！

一、路由配置

1. 路由配置介绍

Vue路由配置是使用Vue Router插件来定义和管理前端路由的过程。它允许你在单页应用中实现不同视图和组件之间的导航。
路由配置其实是一个引出网络请求部分的垫脚石，实现了页面间跳转的功能。

有人可能问：在上文第二十四章 Vue介绍、窗体内操作、窗体间操作学习中不是实现了跳转吗？我们可以在App页面中看到我们在HelloWorld文件中写的代码，这不就已经实现跳转了吗？
其实两者是不同的，之前我们需要在App页面调用HelloWorld文件，两者之间是父子关系；但今天路由配置能实现同级之间的跳转。

2. 代码实现路由配置

本项目基于[第二十四章 Vue介绍、窗体内操作、窗体间操作学习](https://blog.csdn.net/howwickhappy/article/details/142197245)的项目进行开发

2.1 安装Vue Router

首先我们要在项目中安装Vue Router
在项目目录中打开cmd，执行：npm install --save vue-router@3，用于在项目中安装Vue Router版本为3。
在项目中打开cmd，可以使用在项目文件夹地址栏清空输入cmd来便捷打开
在这里插入图片描述
出现add 1 package in **s即为成功！

2.2 配置main.js文件

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
// 1、引入VueRouter和相关组件
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import Demo from './components/Demo.vue'
import Nav from './components/Nav.vue'
import AxiosGet from './components/AxiosGet.vue'
import UserLogin from './components/UserLogin.vue'
import UserShow from './components/UserShow.vue'
Vue.config.productionTip = false
// 2、使用VueRouter插件
Vue.use(VueRouter)
// 3、创建VueRouter实例并配置路由规则
const router = new VueRouter({
  mode:"history",
  routes:[{
    path:"/hello",
    component: HelloWorld
  },{
    path:"/demo",
    component: Demo
  },{
    path:"/ag",
    component: AxiosGet
  },{
    path:"/ul",
    component: UserLogin
  },{
    path:"/us",
    component: UserShow
  },{
    path:"/",
    component: Nav
  }]
})
new Vue({
  // 4、将VueRouter实例注入到Vue实例中
  router,
  render: h => h(App),
}).$mount('#app')

在main.js中需要进行四个操作：
1、import VueRouter组件
2、使用VueRouter插件
3、创建VueRouter实例router并配置路由规则为history
4、将router注入到Vue实例中

2.3 配置App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

我们需要加入router-view子标签，它会根据当前页面的路由路径，自动匹配对应的路由规则，并渲染匹配到的组件。这样可以根据不同的路由路径展示不同的页面内容。

2.4 实现效果

在这里插入图片描述
我们可以通过我们配置的别名访问组件

二、网络请求访问框架项目

1. 网络请求介绍

Vue本身并没有提供网络请求功能，但是可以使用第三方库或内置的方法来进行网络请求，本文中使用Axios库来实现。
Axios是一个基于Promise的HTTP客户端库，用于浏览器和Node.js环境中发送HTTP请求。它提供了简洁的API，使得发送请求、处理响应和进行错误处理变得非常容易。

2. 代码实现网络请求

2.1 安装Axios

首先我们要在项目中安装Axios
在项目目录中打开cmd，执行：npm install axios --save。

我们可以使用get和post两种请求方式，使用post方法可以防止乱码，所以本文中使用post请求方法

2.2 编写UserLogin.vue文件

<template>
    <div>
        <form><!--后面是正确输入-->
            用户名iwen@qq.com：<input type="text" v-model="uname" /><br />
            密码iwen123：<input type="text" v-model="upwd" /><br />
            验证码crfvw：<input type="text" v-model="yzm" /><br />
            <input type="button" value="登录" @click="ckLogin" />
        </form>
    </div>
</template>
<script>
import axios from 'axios'; // 网络请求资源对象
import qs from "qs"; // 处理参数的类型转换和中文乱码
export default {
    name: "UserLogin",
    data() {
        return {
            uname: "",
            upwd: "",
            yzm: ""
        }
    },
    methods: {
        ckLogin() {
            // 发送post请求
            axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
                user_id: this.uname,
                password: this.upwd,
                verification_code: this.yzm
            }))
                .then(mess => {
                    if (mess.data.success) {
                        console.log("登录成功");
                        console.log(mess);
                        this.$router.push({ path: "/us" });
                    } else {
                        console.log("登录失败");
                        console.log(mess);
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        }
    }
}
</script>
<style></style>

2.3 编写UserShow.vue文件

<template>
    <div>
        <h1>我是UserShow组件</h1>
        <table>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>创建时间</td>
                <td>等级</td>
                <td>创建者</td>
                <td>工单内容</td>
            </tr>
            <tr v-for="(e, i) in objs" :key="i">
                <td>{{ e.id }}</td>
                <td>{{ e.pname }}</td>
                <td>{{ e.createdate }}</td>
                <td>{{ e.orderlevel }}</td>
                <td>{{ e.excutor }}</td>
                <td>{{ e.description }}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: "UserShow",
    data() {
        return {
            objs: Array
        }
    },
    mounted() {
        // 组件数据渲染后，发送post请求，获得显示数据
        // axios.post("http://iwenwiki.com/api/blueberrypai/getIndexInteresting.php")
        axios.post("/api/workorder/findAll")
            .then(mess => {
                console.log(mess);
                this.objs = mess.data.result;
            })
            .catch(err => {
                console.log("发送过程中出现了异常" + err);
            })
    }
}
</script>
<style></style>

2.4 配置main.js文件

直接沿用上一个main.js文件即可

2.5 配置vue.config.js文件

将文件中内容清空，换成如下内容

module.exports = { 
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888', // 实际的服务器位置
        ws: true, // workorder/findAll
        pathRewrite: { // 代指SpringBoot项目的根目录
          '^/api': ''
        },
        changeOrigin: true   //允许跨域
      }
    }
  }
}

2.6 启动框架项目

启动任意已有框架项目即可，
需要返回的数据是如下JSON格式
代码中需要在UserShow.vue文件中更改显示的列名
在这里插入图片描述

2.7 实现效果

全部代码见篇尾vue-240914
在这里插入图片描述
在这里插入图片描述

三、element组件推荐

网站快速成型工具element
网址：https://element.eleme.cn/#/zh-CN/
里面有很多成型的好看的前端页面设计
请看使用element实现的页面：
全部代码请见篇尾vue-240915
在这里插入图片描述
在这里插入图片描述

四、全部代码网盘链接

通过网盘分享的文件：vue-240914
链接: https://pan.baidu.com/s/1gymbzlV9AK-XK9VAL0fnfQ?pwd=quim 提取码: quim
通过网盘分享的文件：vue-240915
链接: https://pan.baidu.com/s/13yM1hH_i4PgC9-C_xksJcQ?pwd=aydt 提取码: aydt

总结

本文讲述了：
路由配置：实现页面跳转；
网络请求访问框架项目：实现网络请求；
element组件介绍：介绍美观的前端组件

我睡觉的时候世界真实时间会静止，所以你们都看不到我睡觉，哼！


http://www.kler.cn/news/307279.html

相关文章：

  • 数据库连接池与Druid【后端 16】
  • STM32 HAL freertos零基础（十）软件定时器
  • Renesas R7FA8D1BH (Cortex®-M85)控制ISLS29035
  • Unity-Transform类-父子关系
  • 五、（JS）window中的定时器
  • PhotoZoom Pro / Classic 9.0.2激活版安装激活图文教程
  • 栈与队列（c语言实现）
  • GAMES101(2~3作业）
  • 【系统架构设计师】单例模式（Singleton Pattern）
  • PCIe进阶之TL：Common Packet Header Fields TLPs with Data Payloads Rules
  • MYSQL数据库基础篇——MYSQL的安装与使用
  • Go中如何找到哪里依赖了某个module,如何找到所有module的最大GoVersion
  • 【UE5 C++课程系列笔记】02——创建C++类的三种方式
  • 如何快速整理生成python项目依赖的库，提升自动化部署效率
  • jdk相关介绍
  • 【Linux下的cpp】编译调试（gcc、g++、gdb）
  • 工程师 - ACPI和ACPICA的区别
  • [Redis] Redis中的Hash类型和List类型
  • 29 线性表 · 队列
  • 【人工智能】Transformers之Pipeline（十八）：文本生成（text-generation）
  • C语言实现贪吃蛇小游戏
  • 【技术科普】揭秘图像处理：从零开始的计算机视觉之旅！
  • 海量数据查找最大K个值：数据结构与算法的选择
  • 【Node.js】初识微服务
  • CANopen协议的理解
  • 不用禁用 iptables 来解决 UFW 和 Docker 的安全问题
  • 智汇创想pytest接口自动化测试框架
  • 通俗地类比计算机视觉中各种层或操作的作用
  • 自动曝光算法
  • IDEA 常用插件推荐，美观又实用！