Vue3+Elementplus+Axios 入门教程详解

Vue3+Elementplus+Axios 入门教程详解

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

  1. vue3项目创建

  1.1 创建vue3项目，如：vuepro01

   备注：vue项目不会创建，请参考

  Vue3 安装与配置 详细教程_安装vue3-CSDN博客

  

  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 的基本内容

  import {createRouter, createWebHistory} from 'vue-router'
  //-异步加载组件
  import { defineAsyncComponent } from 'vue'
  //-路由规则
  const myRoutes = [
  ]
  //-创建路由对象
  const router = createRouter({
      history: createWebHistory(),
      routes: myRoutes
  })
  //-将路由暴露出去，其他文件才能访问
  export default router

  3.3 在 main.js 中导入 框架

  import { createApp } from 'vue'
  import App from './App.vue'
  //导入axios框架
  import Axios from 'axios'
  //导入bootstrap样式
  import 'bootstrap/dist/css/bootstrap.min.css'
  //导入ElementPlus框架
  import 'element-plus/dist/index.css'
  import ElementPlus from 'element-plus'
  //导入 router框架
  import Router from './router/index.js'
  const app = createApp(App)
  app.use(ElementPlus)
  app.use(Router)
  app.mount('#app')
  

  3.4 检测ElementPlus是否加载成功

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

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

  
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  
  
  

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

    
      Default
      Primary
      Success
      Info
      Warning
      Danger
    
    
      Plain
      Primary
      Success
      Info
      Warning
      Danger
    
    
      Round
      Primary
      Success
      Info
      Warning
      Danger
    
    
      
      
      
      
      
      
    
  
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  
  
  
  

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

  

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

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

    
  
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  
  
  
  

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

  	
  				
  		
  		
  				
  			
  			
  				
  					
  系统登录
  					
  					
  					    
  					
  					
  					    
  					
  					
  					    Login
  						Reset
  					
  					
  			
  		
  	
  
  
    import { ref  } from 'vue'
    //data
    let loginForm=ref({
      email:"super@a.com",
      pwd:"123123"
    });
    function toLogin(){
      alert('ok')
    }
  
  
  .h-60{
  	height: 60px;
  }
  .p-10{
  	padding: 10px;
  }
  

  4.3 创建Home.vue 组件

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

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

      
          我是首页面
      
  
  
  
  
  

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

  import {createRouter,createWebHistory} from 'vue-router'
  //- 异步加载组件
  import {defineAsyncComponent} from 'vue'
  //- 路由规则
  const myRouter = [
      {
          path: '/',
          redirect: '/login'
      },
      {
          path: '/login',
          name: "Login",
          component: defineAsyncComponent(()=>import('../components/Login.vue'))
      },
      {
          path: '/home',
          name: "Home",
          component: defineAsyncComponent(()=>import('../components/Home.vue'))
      }
  ]
  //- 创建路由对象
  const router = createRouter({
      history: createWebHistory(),
      routes: myRouter
  })
  //全局守卫  访问非Login界面时，验证是否已登录
  router.beforeEach((to,from,next)=>{
      //判断是否已登录 查sessionStorage中是否有isAuthenticated信息
      let isAuthenticated = sessionStorage.getItem("isAuthenticated")
      //判断路由的别名不是登录且未进行登录认证，就跳转去登录
      if(to.name!="Login"&&!isAuthenticated){
          next({name: "Login"})
      }else if(to.name=="Login"&&isAuthenticated){//已登录，不允许退回到登录页面
          next({name:"Home"})
      }else{
          next()
      }
  })
  //-将路由暴露出去，其他文件才能访问
  export default router

  4.4 启动项目，访问项目

  

  

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

  5.1 Login.vue 发起网络请求

  	
  				
  		
  		
  				
  			
  			
  				
  					
  系统登录
  					
  					
  					    
  					
  					
  					    
  					
  					
  					    Login
  						Reset
  					
  					
  			
  		
  	
  
  
    import { ref  } from 'vue'
    import axios from 'axios'
    import {useRouter} from 'vue-router'
    //-路由对象
    const router = useRouter()
    //data
    let loginForm=ref({
      adminCode:"",
      password:""
    });
    function toLogin(){
  	let url="http://localhost:8080/nep/admins/getAdminsByCode";
  		//post()请求部分	
  	axios.post(url,{
  		adminCode:loginForm.value.adminCode,
  		password:loginForm.value.password	
  	})//服务响应后，调用的函数  response 响应对象
  	  .then(function (response) {
  		  //response.data 响应正文
  	    console.log(response.data);
  		//判断服务器响应状态 200成功  422失败
  		if(response.status==200){
  			//1、记录登录状态  sessionStorage 
  			//存储在浏览器的缓存中，超时或浏览器关闭 数据丢失
  			//存：sessionStorage.setItem("自定义键",值)
  			//取： sessionStorage.getItem("自定义键")
  			//sessionStorage.setItem("user_token",response.data.access_token)
  			sessionStorage.setItem("isAuthenticated",true)	
  			//登录成功到首页
  			router.push("/home")
  		}
  	  })//请求异常处理
  	  .catch(function (error) {
  	    console.log(error);
  	  });
    }
    function toReset(){
  	loginForm.value.adminCode = ""
  	loginForm.value.password = ""
    }
  
  
  .h-60{
  	height: 60px;
  }
  .p-10{
  	padding: 10px;
  }
  

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

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