目录

前言

项目码云Gitea地址

其他文章

三、引入Axios并调用后端接口

1.安装Axios

package.json

2.全局配置

src/main.js

3.准备首页

src/components/Main.vue

4.修改路由配置文件

src/router/index.js

5.使用Axios

src/components/Login.vue

6.检验路由配置

访问http://localhost:5000/login

前言

        本人职场小白，公司让学习Vite和Vue3并搭建项目Demo，借这个机会自己尝试写写博客，主要目的是搭项目，所以原理性的知识没有过多阐述，写博客时也根据步骤复现了，对于新手直接跟着操作就可以把项目搭起来，少走了很多弯路，希望对大家有帮助。

        文中参考链接都有附上，参考时可以看看，如果有任何错误或意见也欢迎大家指点。

项目码云Gitea地址

Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus，开发后台管理系统demo。正在上传…重新上传取消​https://gitee.com/YG-CST/vite-demohttps://gitee.com/YG-CST/vite-demo

其他文章

Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程_YGいくこさん的博客-CSDN博客

Vite2+Vue3学习笔记（二）：引入Vue-Router_YGいくこさん的博客-CSDN博客

三、引入Axios并调用后端接口

官网：起步 | Axios Docs

1.安装Axios

npm i axios

• package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "element-plus": "^1.2.0-beta.3",
    "sass": "^1.43.5",
    "scss": "^0.2.4",
    "vue": "^3.2.16",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2.全局配置

• src/main.js

// 引入Axios
import axios from 'axios';
axios.defaults.baseURL = "https://XXX.com"; //后端接口域名

/**
 * 将axios挂载为app的全局自定义属性后，每个组件可以通过this直接访问到全局挂载的自定义属性
 * e.g. this.$http.get('/login');
 * ===================================
 * 如果使用组合式API【setup()语法】，由于vue3.0没有this，需要使用getCurrentInstance来获取上下文
 * e.g.
 * const { proxy } = getCurrentInstance()
   proxy.$http.get('/api/getNewsList')
   .then((response)=>{
       console.log(response)
   });
 */
app.config.globalProperties.$http = axios; // 关键语句

3.准备首页

• src/components/Main.vue

直接拷贝Element Plus 容器布局的例子：Container 布局容器 | Element Plus

修改el-container、el-menu样式，使表格撑满页面：

<el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']" style="height: 100%">
......

4.修改路由配置文件

• src/router/index.js

修改routes，动态import视图组件。

增加路由守卫，对用户访问地址进行拦截。

import { createRouter, createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [{
            path: '/login',
            component: () =>
                import ("../components/Login.vue")
        }, {
            path: "/",
            component: () =>
                import ("../components/Main.vue")
        }
    ]
});

// 路由守卫
router.beforeEach((to) => {
    // 根据token判断是否登录
    let token = localStorage.getItem('Token');
    // 有token但是访问的是登录页 => 强制去首页
    if (token && to.path === '/login')
        return "/";
    // 没有token但是访问的是首页 => 强制去登录页
    else if (!token && to.path !== '/login')
        return "/login";
});

export default router;

5.使用Axios

参考链接：怎样在vue3.x中全局配置axios？

• src/components/Login.vue

修改表单提交函数：

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      var data = {}; //接口参数，json格式
      this.$http
        .post("/api/login", data)
        .then((res) => {
          res = res.data;
          if (res.code === 200) {
            localStorage.setItem("Token", res.data.token); //将token保存到浏览器
            this.$message.success("Login successfully! Welcome!");
            this.$router.push("/"); //使用路由跳转到首页
          } else {
            alert(res.msg);
            this.$message.error("Oops, error submit.");
            //接口返回未登录状态码，清空浏览器token并跳转到登录页
            if (res.code === 401) {
              localStorage.removeItem("Token");
              this.$router.push("/login");
            }
          }
        });
    } else {
      this.$message.error("Oops, error submit.");
      return false;
    }
  });
},

Login.vue输入账号密码后登录，自动跳转至Main.vue。

6.检验路由配置

• 访问http://localhost:5000/login

强制回到首页Main.vue，成功。

• 清空 LocalStorage 的 token，访问http://localhost:5000/

强制回到登录页Login.vue，成功。