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

这篇具有很好参考价值的文章主要介绍了从壹开始前后端开发【.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了解的不是很足够,在响应拦截这块遇到了一些困难,最终通过查阅资料并进行了解决。文章来源地址https://www.toymoban.com/news/detail-693755.html

到了这里,关于从壹开始前后端开发【.Net6+Vue3】(二)前端创建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(51)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]

    需求分析 效果图 思路分析 使用Vue3+ElementPlus 完成。 代码实现 修改ssm_vuesrcApp.vue 成如下形式, 会删除部分用不上的代码,增加 修改ssm_vuesrcviewsHomeView.vue , 删除ssm_vuesrccomponentsHelloWorld.vue 创建ssm_vuesrccomponentsHeader.vue 修改ssm_vuesrcApp.vue , 引入Header 组件 创建全局的global

    2024年02月13日
    浏览(44)
  • .NET6创建Windows服务

    之前的文章已经写过了创建Windows服务。 C#创建Windows服务_c# 创建windows服务_故里2130的博客-CSDN博客  不过之前使用的是.NET Framework创建的Windows服务。现在已经2023年了,其中vs2022有新的方法去创建Windows服务,本次使用.NET6创建Windows服务。 1.选择如图所示,其中vs2022这样的,vs

    2024年02月10日
    浏览(34)
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目

    1、Node获取地址 https://nodejs.org/en/download 一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用 node -v/npm -v命令验证是否下载成功 2、设置Node的配置内容 (1)在安装目录下新建两个文件夹命名为node_cache,和node_global: 其中 node_cache 是作为 缓

    2024年02月06日
    浏览(58)
  • .NET6入门:2.使用模板创建.NET Core Web

                    在目前B/S盛行的时代,本文将通过创建一个.NET Core Web模板的方式来带领大家进入.NET6开发的大门。         1.1 打开Visual Studio(不同版本VS可能创建新项目所在位置不同),单击创建新项目。         1.2 选择C#语言和Web平台,在下面的项目中选中ASP.NET Core Web应

    2024年02月12日
    浏览(48)
  • .Net6使用WebSocket与前端进行通信

    1. 创建类WebSocketTest: 2. 在program.cs中进行绑定 3. 使用websocket在线工具模拟请求:

    2024年02月03日
    浏览(49)
  • 「网页开发|前端开发|Vue」07 前后端分离:如何在Vue中请求外部数据

    本文主要介绍两种在Vue中访问外部API获取数据的方式,通过让Vue通过项目外部的接口来获取数据,而不是直接由项目本身进行数据库交互,可以实现前端代码和后端代码的分离,让两个部分的代码编写更独立高效。 「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的

    2024年02月09日
    浏览(45)
  • 从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier

    项目git地址, 欢迎修改提交,不足地方还请补充批评指正! 项目git地址 ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具,其目标是使代码更加一致并避免错误。 ESLint 是完全插件化的。每条规则都是一个插件,你可以在运行时添加更多。你还可以添

    2024年04月09日
    浏览(77)
  • node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

    大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染。 技术选型 前端:vite+vue3+antd 后端:node koa 数据库:mysql koa是一个现代的Node.js框架,可以用来构建Web应用程序。 Node.js的mime库 Node.js的mime库是用于根据文件扩展名获取对应的MIME类型

    2024年02月19日
    浏览(54)
  • Linux系统上创建.NET6项目(通过命令行(CTL)方式)

    平时大家创建项目基本上都是借助开发工具创建,比如visual studio,visual studio code,今天我们在Linux系统上,通过命令行的形式创建.NET6项目。 第一个直接安装 如图所示,即.NET环境安装成功。 我们以webapi为例,演示创建项目的过程。 认识dotnet相关命令 经常会用到的命令。 认

    2024年02月03日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包