• 从壹开始前后端开发【.Net6+Vue3】(二)前端创建


    项目名称:KeepGoing(继续前进)

    介绍

    工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长
    将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架
    在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享

    项目地址

    前端框架创建

    上文介绍到这次将使用到Vue3作为前端使用的技术,也将和大家一起学习并使用这项技术,首先我们将从头开始创建一个Vue3空项目
    具体的操作步骤就不在介绍了,网上一搜就有很多的文章,下面附上自己在使用过程中参照的文章 Vue3 项目创建

    这次将实现两个功能:用户登录,获取用户信息

    1.用户登录

    1.1需要完成的任务

    开发一个用户登录页面,并调用后台登录接口获取到token,并存储到浏览器缓存中

    1.2实现步骤

    1.2.1实现登录页面

    这一功能的工作大致流程:
    在根目录下创建一个Login.Vue页面,页面很简单,两个输入框,一个按钮,点击按钮对输入数据进行校验,校验通过后调用登录接口,登录成功保存token到缓存中
    后台接口登录成功后将用户Id,用户名称构建到授权中去
    下面是Login.Vue源码

    <template>
        <div class='bj'>
        <el-form :model="form" label-width="120px"  :rules="rules"   ref="ruleFormRef">
            <el-form-item label="用户名" prop="userAccount">
              <el-input v-model="form.userAccount" />
            el-form-item>
            <el-form-item label="用户密码"  prop="password">
                <el-input v-model="form.password" type="password" />
              el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit(ruleFormRef)" :loading="isSending">登录el-button>
              el-form-item>
            el-form>
        div>
    template>
    
    <script lang="ts">
    import { reactive, defineComponent, ref } from "vue";
    import { FormInstance, FormRules, ElMessage } from "element-plus";
    import axiosInstande from "./utils/Axios/Axios";
    import { setItem } from "./utils/storage";
    import md5 from "js-md5";
    import router from "@/router";
    
    interface RuleForm {
      userAccount: string;
      password: string;
    }
    
    export default defineComponent({
      setup() {
        const form = reactive({
          userAccount: "",
          password: "",
        });
        const ruleFormRef = ref<FormInstance>();
    
        const isSending = ref(false);
        const rules = reactive<FormRules<RuleForm>>({
          userAccount: [
            {
              required: true,
              message: "请输入用户名",
              trigger: "blur",
            },
          ],
          password: [
            {
              required: true,
              message: "请输入用户密码",
              trigger: "blur",
            },
          ],
        });
        const submit = async (formEl: FormInstance | undefined) => {
          if (!formEl) return;
          formEl.validate(async (valid: any) => {
            if (valid) {
              isSending.value = true;
              const postFrom = Object.assign({}, form);
              postFrom.password = md5(postFrom.password);
              await axiosInstande.post("/User/Token", postFrom).then((data) => {
                if (data.status == 200) {
                  ElMessage.success("登录成功");
                  setItem("token", data.data);
                  setTimeout(() => {
                    router.push("/UserInfo");
                  }, 500);
                }
              });
            } else {
              return false;
            }
          });
        };
        return { form, submit, rules, ruleFormRef, isSending };
      },
    });
    

    在登录页面引用了element-plus,axios 需要先通过npm先将包下载下来
    然后进行了简单的一些封装
    route组件,把Login.vue添加到了路由中

    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    import Home from '../Login.vue'
    import UserInfo from '../views/UserInfo.vue'
    
    const routes: Array<RouteRecordRaw> = [
        { path: '/', name: 'Login', component: Home },
        { path: '/UserInfo', name: 'UserInfo', component: UserInfo }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    export default router
    

    Axios组件,增加了请求拦截器和响应拦截器,请求拦截器统一添加登录后存储的token在请求头中,响应拦截器处理不同的响应状态码的结果

    import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
    import { ElMessage } from "element-plus";
    import router from "@/router";
    import config from "@/config";
    import store from "@/store";
    
    const axiosInatance = axios.create({
        baseURL: config.Host, // 基础路径
      });
    
    // 请求拦截器
    const requestInterceptor = axiosInatance.interceptors.request.use(
     // 请求发起都会经过这里
     function (config:any) {
        const { user } = store.state; // 解构得到拦截数据里 user数据
        if (user) {
          // 如果user数据和user.token为真,为有效得
          config.headers.Authorization = `Bearer ${user}`; // 返回一个拼接好得有效的token值
        }
        // config 本次请求的配置对象
        return config;
      },
      function (err) {
        // 请求出错(还没发出去)会经过这里
        return Promise.reject(err);
      }
    );
    
    // 响应拦截器
    const responseInterceptor = axiosInatance.interceptors.response.use(
      (response: AxiosResponse): AxiosResponse => {
        // 2xx 范围内的状态码都会触发该函数。对响数据成功时调用。
        return response;
      },
      (err) =>  {
        if (err && err.response) {
            switch (err.response.status) {
              case 400:
                err.message = JSON.stringify(err.response.data.errors);
                break;
              case 401:
                err.message = "未授权,请登录";
               window.sessionStorage.removeItem("token");
                setTimeout(() => {
                    router.push("/");
                }, 500);
                break;
              case 403:
                err.message = "权限不足,拒绝访问";
                break;
              case 404:
                err.message = `请求地址不存在: ${err.response.config.url}`;
                break;
              case 408:
                err.message = "请求超时";
                break;
              case 500:
                err.message = "服务器内部错误";
                break;
              case 501:
                err.message = "服务未实现";
                break;
              case 502:
                err.message = "网关错误";
                break;
              case 503:
                err.message = "服务不可用";
                break;
              case 504:
                err.message = "网关超时";
                break;
              case 505:
                err.message = "HTTP版本不受支持";
                break;
              case 568:
                // todo
                err.message = err.response.data.errors;
                break;
              default:
                err.message = { ...err.response.data.errors };
            }
          }
          if (err.code === "ECONNABORTED" && err.message.indexOf("timeout") !== -1) {
            err.message = "请求超时,请重试";
          }
          ElMessage.error(err.message);
          return err;
      }
    );
    
    export default axiosInatance;
    

    1.2.2获取登录后的用户信息

    登录成功后页面跳转到UserInfo.Vue页面,通过调取接口获取到用户信息,从而返回到页面进行展示
    UserInfo.vue页面代码

    <template>
      <div class="about">
        <h1>登陆账号:{{userInfo.userAccount}}h1>
        <h1>用户名:{{userInfo.userName}}h1>
        <h1>联系账号:{{userInfo.contactNumber}}h1>
      div>
    template>
    <script lang="ts">
    import { reactive, defineComponent, ref,nextTick  } from "vue";
    import axiosInstande from "@/utils/Axios/Axios";
    export default defineComponent({
        created() {
           this.getUser();
        },
        setup() {
            let userInfo = ref({
                userAccount: "",
                userName: "",
                contactNumber: "",
                UserType: 0
            });
            const getUser = async () => {
                const data = await axiosInstande.get("/User/UserInfo");
                if (data.status == 200) {
                    userInfo.value = data.data;
                }
            };
            return { getUser,userInfo };
        }
    })
    script>
    

    总结:
    主要实现了用户登录以及获取用户信息这两个功能,前端使用到了路由、请求响应,拦截。实现的功能比较简单,但由于对Vue了解的不是很足够,在响应拦截这块遇到了一些困难,最终通过查阅资料并进行了解决。

  • 相关阅读:
    7年阿里测试经验之谈 —— 用UI自动化测试实现元素定位
    华为云云耀云服务器L实例评测|华为云上试用主机安全产品Elkeid
    【考研英语词汇训练营】Day 16 —— bankrupt,remain,regulate,construct,reflect
    我可能永远也没办法成为全栈工程师了,看看你还差多少?
    Bootstrap主页面搭建(十四)
    什么是密码管理,密码管理的重要性
    Liunx系统下载安装Nginx下载安装
    海上生明月,天涯共此时 ------#征文|程序员过中秋的一百种方式#
    Java基于SpringBoot的高校招生管理系统,附源码,教程
    Linux内存地址映射-8086分段分页与缺页异常
  • 原文地址:https://www.cnblogs.com/wuyongfu/p/17677114.html