devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3+Elementplus+Axios 入门教程详解_使用element-plus帮助构建视图,使用axios完成前后端的数据传输

作者：Cpp五条 | 2024-02-14 22:24:18

赞

踩

使用element-plus帮助构建视图,使用axios完成前后端的数据传输

Vue3+Elementplus+Axios 入门教程详解

  • vue3项目创建
  • 安装第三方框架
  • vue整合第三方框架
  • 创建登录组件
  • vue整合axios

1. vue3项目创建

1.1 创建vue3项目，如：vuepro01

 备注：vue项目不会创建，请参考CSDNicon-default.png?t=N7T8https://mp.csdn.net/mp_blog/creation/editor/134034891

1.2. 测试项目是否正常启动：

1.2.1 进入项目根目录

   cd vuepro01

1.2.2 执行 npm run serve

1.2.3 访问路径即可

2. 安装第三方框架

2.1 第三方框架

    2.1.1 element-plus  解决界面UI问题（基于vue3的UI框架）

    2.1.2 bootstrap   引用基础样式

    2.1.3 axios  异步ajax进行数据交互(用于向后台发送请求)

    2.1.4 vue-router  路由框架  （可以帮助我们管理应用程序中的路由，从而使用户能够访问应用程序的各个部分）

 2.2 在vuepro01 项目中安装

 2.2.1 进入 vuepro01 根目录，执行如下命令

 npm install  element-plus  

 npm install  bootstrap

  npm install  axios  

  npm install   vue-router

   2.2.1 执行如下：

2.2.3 检查是否安装成功，执行：npm ls 

3. vue整合第三方框架

3.1 VSCode 打开 vue项目

3.2 创建router路由的设置文件

3.2.1 在src下创建router目录，在router目录下创建index.js文件

3.2.2 index.js 的基本内容

  1. import {createRouter, createWebHistory} from 'vue-router'
  2. //-异步加载组件
  3. import { defineAsyncComponent } from 'vue'
  4.  
  5. //-路由规则
  6. const myRoutes = [
  7.  
  8. ]
  9. //-创建路由对象
  10. const router = createRouter({
  11.     history: createWebHistory(),
  12.     routes: myRoutes
  13. })
  14.  
  15. //-将路由暴露出去，其他文件才能访问
  16. export default router

3.3 在 main.js 中导入 框架

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. //导入axios框架
  4. import Axios from 'axios'
  5. //导入bootstrap样式
  6. import 'bootstrap/dist/css/bootstrap.min.css'
  7. //导入ElementPlus框架
  8. import 'element-plus/dist/index.css'
  9. import ElementPlus from 'element-plus'
  10. //导入 router框架
  11. import Router from './router/index.js'
  12.  
  13. const app = createApp(App)
  14. app.use(ElementPlus)
  15. app.use(Router)
  16. app.mount('#app')
  17.

3.4 检测ElementPlus是否加载成功

3.4.1 打开ElementPlus官网，找到组件，将任意组件复制到App.vue中，检测其是否显示即可

        3.4.1.1 首先将App.vue中不相关的内容删除掉，只剩下vue组件框架的基本内容

  1. <template>
  2.  
  3. </template>
  4. <script>
  5.  
  6. export default {
  7.   name: 'App',
  8.   components: {
  9.     
  10.   }
  11. }
  12. </script>
  13.  
  14. <style>
  15.  
  16. </style>

        3.4.1.2 例如：复制 按钮组件的代码

  1. <template>
  2.   <el-row class="mb-4">
  3.     <el-button>Default</el-button>
  4.     <el-button type="primary">Primary</el-button>
  5.     <el-button type="success">Success</el-button>
  6.     <el-button type="info">Info</el-button>
  7.     <el-button type="warning">Warning</el-button>
  8.     <el-button type="danger">Danger</el-button>
  9.   </el-row>
  10.  
  11.   <el-row class="mb-4">
  12.     <el-button plain>Plain</el-button>
  13.     <el-button type="primary" plain>Primary</el-button>
  14.     <el-button type="success" plain>Success</el-button>
  15.     <el-button type="info" plain>Info</el-button>
  16.     <el-button type="warning" plain>Warning</el-button>
  17.     <el-button type="danger" plain>Danger</el-button>
  18.   </el-row>
  19.  
  20.   <el-row class="mb-4">
  21.     <el-button round>Round</el-button>
  22.     <el-button type="primary" round>Primary</el-button>
  23.     <el-button type="success" round>Success</el-button>
  24.     <el-button type="info" round>Info</el-button>
  25.     <el-button type="warning" round>Warning</el-button>
  26.     <el-button type="danger" round>Danger</el-button>
  27.   </el-row>
  28.  
  29.   <el-row>
  30.     <el-button :icon="Search" circle />
  31.     <el-button type="primary" :icon="Edit" circle />
  32.     <el-button type="success" :icon="Check" circle />
  33.     <el-button type="info" :icon="Message" circle />
  34.     <el-button type="warning" :icon="Star" circle />
  35.     <el-button type="danger" :icon="Delete" circle />
  36.   </el-row>
  37. </template>
  38. <script>
  39.  
  40. export default {
  41.   name: 'App',
  42.   components: {
  43.     
  44.   }
  45. }
  46. </script>
  47.  
  48. <style>
  49.  
  50. </style>

  3.4.1.3 启动项目，访问链接，出现如下页面即可

  4. 创建登录组件：Login.vue

  4.1 修改App.vue文件，添加router-view组件

  1. <template>
  2.   <router-view></router-view>
  3. </template>
  4. <script>
  5.  
  6. export default {
  7.   name: 'App',
  8.   components: {
  9.     
  10.   }
  11. }
  12. </script>
  13.  
  14. <style>
  15.  
  16. </style>

  4.2 访问ElementPlus官网，找到 Form表单组件，在Login.vue页面进行使用

  1. <template>
  2. 	<div class="container">
  3. 		<el-row class="h-60">		
  4. 		</el-row>
  5. 		<el-row>
  6. 			<el-col :span="8">	
  7. 			</el-col>
  8. 			<el-col :span="8" class="bg-primary-subtle p-10">
  9. 				<el-form :model="loginForm" 
  10. 				  class="login-container" label-position="left"
  11. 				 label-width="80px" v-loading="loading"  status-icon>
  12. 					<h4 class="text-center">系统登录</h4>
  13. 					<div style="margin: 20px" />
  14. 					<el-form-item label="邮箱" prop="email">
  15. 					    <el-input v-model="loginForm.email" placeholder="邮箱"></el-input>
  16. 					</el-form-item>
  17. 					<el-form-item label="密码" prop="password">
  18. 					    <el-input  type="password" v-model="loginForm.pwd" placeholder="密码"></el-input>
  19. 					</el-form-item>
  20. 					<el-form-item class="text-center">
  21. 					    <el-button type="primary" class="m-l-20" @click.native.prevent="toLogin()">Login</el-button>
  22. 						<el-button type="Reset" class="m-l-20" >Reset</el-button>
  23. 					</el-form-item>
  24. 				</el-form>	
  25. 			</el-col>
  26. 		</el-row>
  27. 	</div>
  28. </template>
  29. <script setup>
  30.   import { ref  } from 'vue'
  31.   //data
  32.   let loginForm=ref({
  33.     email:"super@a.com",
  34.     pwd:"123123"
  35.   });
  36.   function toLogin(){
  37.     alert('ok')
  38.   }
  39. </script>
  40. <style>
  41. .h-60{
  42. 	height: 60px;
  43. }
  44. .p-10{
  45. 	padding: 10px;
  46. }
  47. </style>

4.3 创建Home.vue 组件

4.3.1 在src/components 目录下创建 Home.vue

4.3.2 Home.vue 组件内容（简单添加几个文字即可，例如：我是首页面）

  1. <template>
  2.     <div>
  3.         我是首页面
  4.     </div>
  5. </template>
  6. <script setup>
  7.  
  8. </script>
  9. <style>
  10.  
  11. </style>

4.4 路由文件的配置：（项目先启动登录页面）

  1. import {createRouter,createWebHistory} from 'vue-router'
  2. //- 异步加载组件
  3. import {defineAsyncComponent} from 'vue'
  4. //- 路由规则
  5. const myRouter = [
  6.     {
  7.         path: '/',
  8.         redirect: '/login'
  9.     },
  10.     {
  11.         path: '/login',
  12.         name: "Login",
  13.         component: defineAsyncComponent(()=>import('../components/Login.vue'))
  14.     },
  15.     {
  16.         path: '/home',
  17.         name: "Home",
  18.         component: defineAsyncComponent(()=>import('../components/Home.vue'))
  19.     }
  20. ]
  21. //- 创建路由对象
  22. const router = createRouter({
  23.     history: createWebHistory(),
  24.     routes: myRouter
  25. })
  26. //全局守卫  访问非Login界面时，验证是否已登录
  27. router.beforeEach((to,from,next)=>{
  28.     //判断是否已登录 查sessionStorage中是否有isAuthenticated信息
  29.     let isAuthenticated = sessionStorage.getItem("isAuthenticated")
  30.     //判断路由的别名不是登录且未进行登录认证，就跳转去登录
  31.     if(to.name!="Login"&&!isAuthenticated){
  32.         next({name: "Login"})
  33.     }else if(to.name=="Login"&&isAuthenticated){//已登录，不允许退回到登录页面
  34.         next({name:"Home"})
  35.     }else{
  36.         next()
  37.     }
  38. })
  39. //-将路由暴露出去，其他文件才能访问
  40. export default router

4.4 启动项目，访问项目

5. vue 整合 axios 发起网络请求

5.1 Login.vue 发起网络请求

  1. <template>
  2. 	<div class="container">
  3. 		<el-row class="h-60">		
  4. 		</el-row>
  5. 		<el-row>
  6. 			<el-col :span="8">	
  7. 			</el-col>
  8. 			<el-col :span="8" class="bg-primary-subtle p-10">
  9. 				<el-form :model="loginForm" 
  10. 				  class="login-container" label-position="left"
  11. 				 label-width="80px" v-loading="loading"  status-icon>
  12. 					<h4 class="text-center">系统登录</h4>
  13. 					
  14. 					<el-form-item label="用户编号">
  15. 					    <el-input v-model="loginForm.adminCode" placeholder="用户编号"></el-input>
  16. 					</el-form-item>
  17. 					<el-form-item label="密码">
  18. 					    <el-input  type="password" v-model="loginForm.password" placeholder="密码"></el-input>
  19. 					</el-form-item>
  20. 					<el-form-item class="text-center">
  21. 					    <el-button type="primary" class="m-l-20" @click.native.prevent="toLogin()">Login</el-button>
  22. 						<el-button type="Reset" class="m-l-20" @click.native.prevent="toReset()">Reset</el-button>
  23. 					</el-form-item>
  24. 				</el-form>	
  25. 			</el-col>
  26. 		</el-row>
  27. 	</div>
  28. </template>
  29. <script setup>
  30.   import { ref  } from 'vue'
  31.   import axios from 'axios'
  32.   import {useRouter} from 'vue-router'
  33.   //-路由对象
  34.   const router = useRouter()
  35.   //data
  36.   let loginForm=ref({
  37.     adminCode:"",
  38.     password:""
  39.   });
  40.   function toLogin(){
  41. 	let url="http://localhost:8080/nep/admins/getAdminsByCode";
  42. 		//post()请求部分	
  43. 	axios.post(url,{
  44. 		adminCode:loginForm.value.adminCode,
  45. 		password:loginForm.value.password	
  46. 	})//服务响应后，调用的函数  response 响应对象
  47. 	  .then(function (response) {
  48. 		  //response.data 响应正文
  49. 	    console.log(response.data);
  50. 		//判断服务器响应状态 200成功  422失败
  51. 		if(response.status==200){
  52. 			//1、记录登录状态  sessionStorage 
  53. 			//存储在浏览器的缓存中，超时或浏览器关闭 数据丢失
  54. 			//存：sessionStorage.setItem("自定义键",值)
  55. 			//取： sessionStorage.getItem("自定义键")
  56. 			//sessionStorage.setItem("user_token",response.data.access_token)
  57. 			sessionStorage.setItem("isAuthenticated",true)	
  58. 			//登录成功到首页
  59. 			router.push("/home")
  60. 		}
  61. 	  })//请求异常处理
  62. 	  .catch(function (error) {
  63. 	    console.log(error);
  64. 	  });
  65.   }
  66.   function toReset(){
  67. 	loginForm.value.adminCode = ""
  68. 	loginForm.value.password = ""
  69.   }
  70. </script>
  71. <style>
  72. .h-60{
  73. 	height: 60px;
  74. }
  75. .p-10{
  76. 	padding: 10px;
  77. }
  78. </style>

 5.2 启动vue项目，通过vue访问后台接口，进行测试，结果跳转到Home页面，则配置成功，如果出现其他错误提示，请检查以上步骤哪里配置错误，及时调整。

到此，整个过程整理完毕！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/82156
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号