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

  • 从壹开始前后端开发【.Net6+Vue3】(二)前端创建已关闭评论
  • 98 次浏览
  • A+
所属分类:.NET技术
摘要

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


项目名称: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了解的不是很足够,在响应拦截这块遇到了一些困难,最终通过查阅资料并进行了解决。