经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
从壹开始前后端开发【.Net6+Vue3】(二)前端创建
来源:cnblogs  作者:小吴的成长之路  时间:2023/9/6 10:55:03  对本文有异议

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

介绍

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

项目地址

前端框架创建

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

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

1.用户登录

1.1需要完成的任务

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

1.2实现步骤

1.2.1实现登录页面

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

  1. <template>
  2. <div class='bj'>
  3. <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
  4. <el-form-item label="用户名" prop="userAccount">
  5. <el-input v-model="form.userAccount" />
  6. </el-form-item>
  7. <el-form-item label="用户密码" prop="password">
  8. <el-input v-model="form.password" type="password" />
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" @click="submit(ruleFormRef)" :loading="isSending">登录</el-button>
  12. </el-form-item>
  13. </el-form>
  14. </div>
  15. </template>
  16. <script lang="ts">
  17. import { reactive, defineComponent, ref } from "vue";
  18. import { FormInstance, FormRules, ElMessage } from "element-plus";
  19. import axiosInstande from "./utils/Axios/Axios";
  20. import { setItem } from "./utils/storage";
  21. import md5 from "js-md5";
  22. import router from "@/router";
  23. interface RuleForm {
  24. userAccount: string;
  25. password: string;
  26. }
  27. export default defineComponent({
  28. setup() {
  29. const form = reactive({
  30. userAccount: "",
  31. password: "",
  32. });
  33. const ruleFormRef = ref<FormInstance>();
  34. const isSending = ref(false);
  35. const rules = reactive<FormRules<RuleForm>>({
  36. userAccount: [
  37. {
  38. required: true,
  39. message: "请输入用户名",
  40. trigger: "blur",
  41. },
  42. ],
  43. password: [
  44. {
  45. required: true,
  46. message: "请输入用户密码",
  47. trigger: "blur",
  48. },
  49. ],
  50. });
  51. const submit = async (formEl: FormInstance | undefined) => {
  52. if (!formEl) return;
  53. formEl.validate(async (valid: any) => {
  54. if (valid) {
  55. isSending.value = true;
  56. const postFrom = Object.assign({}, form);
  57. postFrom.password = md5(postFrom.password);
  58. await axiosInstande.post("/User/Token", postFrom).then((data) => {
  59. if (data.status == 200) {
  60. ElMessage.success("登录成功");
  61. setItem("token", data.data);
  62. setTimeout(() => {
  63. router.push("/UserInfo");
  64. }, 500);
  65. }
  66. });
  67. } else {
  68. return false;
  69. }
  70. });
  71. };
  72. return { form, submit, rules, ruleFormRef, isSending };
  73. },
  74. });

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

  1. import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
  2. import Home from '../Login.vue'
  3. import UserInfo from '../views/UserInfo.vue'
  4. const routes: Array<RouteRecordRaw> = [
  5. { path: '/', name: 'Login', component: Home },
  6. { path: '/UserInfo', name: 'UserInfo', component: UserInfo }
  7. ]
  8. const router = createRouter({
  9. history: createWebHistory(process.env.BASE_URL),
  10. routes
  11. })
  12. export default router

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

  1. import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
  2. import { ElMessage } from "element-plus";
  3. import router from "@/router";
  4. import config from "@/config";
  5. import store from "@/store";
  6. const axiosInatance = axios.create({
  7. baseURL: config.Host, // 基础路径
  8. });
  9. // 请求拦截器
  10. const requestInterceptor = axiosInatance.interceptors.request.use(
  11. // 请求发起都会经过这里
  12. function (config:any) {
  13. const { user } = store.state; // 解构得到拦截数据里 user数据
  14. if (user) {
  15. // 如果user数据和user.token为真,为有效得
  16. config.headers.Authorization = `Bearer ${user}`; // 返回一个拼接好得有效的token值
  17. }
  18. // config 本次请求的配置对象
  19. return config;
  20. },
  21. function (err) {
  22. // 请求出错(还没发出去)会经过这里
  23. return Promise.reject(err);
  24. }
  25. );
  26. // 响应拦截器
  27. const responseInterceptor = axiosInatance.interceptors.response.use(
  28. (response: AxiosResponse): AxiosResponse => {
  29. // 2xx 范围内的状态码都会触发该函数。对响数据成功时调用。
  30. return response;
  31. },
  32. (err) => {
  33. if (err && err.response) {
  34. switch (err.response.status) {
  35. case 400:
  36. err.message = JSON.stringify(err.response.data.errors);
  37. break;
  38. case 401:
  39. err.message = "未授权,请登录";
  40. window.sessionStorage.removeItem("token");
  41. setTimeout(() => {
  42. router.push("/");
  43. }, 500);
  44. break;
  45. case 403:
  46. err.message = "权限不足,拒绝访问";
  47. break;
  48. case 404:
  49. err.message = `请求地址不存在: ${err.response.config.url}`;
  50. break;
  51. case 408:
  52. err.message = "请求超时";
  53. break;
  54. case 500:
  55. err.message = "服务器内部错误";
  56. break;
  57. case 501:
  58. err.message = "服务未实现";
  59. break;
  60. case 502:
  61. err.message = "网关错误";
  62. break;
  63. case 503:
  64. err.message = "服务不可用";
  65. break;
  66. case 504:
  67. err.message = "网关超时";
  68. break;
  69. case 505:
  70. err.message = "HTTP版本不受支持";
  71. break;
  72. case 568:
  73. // todo
  74. err.message = err.response.data.errors;
  75. break;
  76. default:
  77. err.message = { ...err.response.data.errors };
  78. }
  79. }
  80. if (err.code === "ECONNABORTED" && err.message.indexOf("timeout") !== -1) {
  81. err.message = "请求超时,请重试";
  82. }
  83. ElMessage.error(err.message);
  84. return err;
  85. }
  86. );
  87. export default axiosInatance;

1.2.2获取登录后的用户信息

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

  1. <template>
  2. <div class="about">
  3. <h1>登陆账号:{{userInfo.userAccount}}</h1>
  4. <h1>用户名:{{userInfo.userName}}</h1>
  5. <h1>联系账号:{{userInfo.contactNumber}}</h1>
  6. </div>
  7. </template>
  8. <script lang="ts">
  9. import { reactive, defineComponent, ref,nextTick } from "vue";
  10. import axiosInstande from "@/utils/Axios/Axios";
  11. export default defineComponent({
  12. created() {
  13. this.getUser();
  14. },
  15. setup() {
  16. let userInfo = ref({
  17. userAccount: "",
  18. userName: "",
  19. contactNumber: "",
  20. UserType: 0
  21. });
  22. const getUser = async () => {
  23. const data = await axiosInstande.get("/User/UserInfo");
  24. if (data.status == 200) {
  25. userInfo.value = data.data;
  26. }
  27. };
  28. return { getUser,userInfo };
  29. }
  30. })
  31. </script>

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

原文链接:https://www.cnblogs.com/wuyongfu/p/17677114.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号