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

系列文章目录

	JavaSE
基础知识、数据类型学习	万年历项目	代码逻辑训练习题
代码逻辑训练习题	方法、数组学习	图书管理系统项目
面向对象编程：封装、继承、多态学习	封装继承多态习题	常用类、包装类、异常处理机制学习
集合学习	IO流、多线程学习	仓库管理系统JavaSE项目
员工管理系统、多表查询、反射实现DBHelper学习	DML、DDL、数据库对象学习
	JavaWeb
网络编程、各种标签、CSS学习	ECMAScript、BOM学习	DOM、jQuery学习
Servlet、JSP、Cookie、Ajax学习	融资管理系统JavaWeb项目
	框架
MyBatis框架学习	逆向工程、Spring框架IOC、AOP学习	SpringMVC框架学习
SpringBoot框架学习	招聘网站框架项目	Vue介绍、窗体内操作、窗体间操作学习
Vue路由配置、网络请求访问框架项目、element组件介绍学习	标准管理系统Vue项目
	微服务
Linux安装、Nginx反向代理、负载均衡学习	Docker学习	Jenkins学习
Nexus学习	Spring Security学习	RabbitMQ学习
Redis学习	MongoDB学习	MongoDB学习
Nacos学习	Spring Session学习	Spring Gateway学习
JSR 303学习	OpenFeign学习	Hystrix学习

---

---

前言

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

---

一、路由配置

1. 路由配置介绍

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

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

2. 代码实现路由配置

本项目基于第二十四章 Vue介绍、窗体内操作、窗体间操作学习的项目进行开发

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>

我们使用qs来处理参数的类型转换和中文乱码

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组件介绍：介绍美观的前端组件

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