Vue系列第六篇：axios封装，登录逻辑优化，404页面实现，Go语言跨域处理

chatgpt/2023/9/24 1:20:06

第五篇利用vue实现了登录页面，用go语言开发了服务端并最后在nginx上进行了部署。本篇将axios封装，登录逻辑优化，404页面实现。

目录

1.前端

1.1代码结构

1.2源码

2.服务端

2.1源码

3.运行效果

4.注意事项

4.1webpack.config.js和vue.config.js的区别

4.2 npm run  dev 与 npm run  build

4.3ajax、Promise、axios总结

4.4Go语言处理跨域处理

1.前端

1.1代码结构

1.2源码

src/service.js

import axios from "axios";
import { getToken } from "@/utils/dealtoken.js"
import { Promise } from 'core-js'
import { Message } from "element-ui";// axios二次封装const service = axios.create({// baseURL还可以使用代理baseURL: 'http://127.0.0.1:8181', timeout: 3000
})// 请求拦截器
service.interceptors.request.use((config) => {//对请求做一些额外处理config.headers['token'] = getToken('token')config.headers['username'] = getToken('username')return config
}, (error) => {return Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use((response) => {//对响应做一些处理let {status, msg} = response.dataif (status != 200) {Message({message: msg || 'error', type: 'warning'})}console.log(response, status, msg)return response
}, (error) => {return Promise.reject(error)
})export default service

src/main.js


import Vue from 'vue'
import App from './App'
import 'font-awesome/css/font-awesome.min.css'
//import axios from 'axios'
import router from './router'
import service from './service'// 挂载到原型就可以全局使用
//Vue.prototype.axios = axios
Vue.prototype.service = service
//Vue.config.productionTip = falseimport ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)new Vue({router,render: h => h(App)
}).$mount('#myapp')

router/index.js

import Vue from 'vue'
import Home from '@/components/Home'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/login', component: () => import('@/components/Login') },{ path: '/login', name: 'Login', component: () => import('@/components/Login') },{ path: '/home', component: Home },{ path: '*', name: 'NotFound',  component: () => import('@/components/NotFound') }
]export default new VueRouter({mode: 'history',routes: routes
})

src/api/api.js

//业务服务调用接口封装import service from '../service.js'export function login(data) {return service({method: 'post',url: '/login',data})
}

src/components/NotFound.vue

<template><div class="notfound"><div class="big">页面不见了！</div><div>首页瞧瞧，点击<router-link to="/">这里</router-link>进入首页.</div></div></template><script>export default {data() {return {};},};</script><style lang='scss'>.notfound {width: 100%;height: 100%;position: absolute;background: #409EFF;background: url('../assets/404page.jpg') center no-repeat;}</style>

src/components/Login.vue

<template><div class="login"><el-card class="box-card"><div slot="header" class="clearfix"><span>业务后台管理系统</span></div><el-form label-width="100px" :model="form" ref="form" :rules='rules'><el-form-item label="用户名" prop='username'><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop='password'><el-input type='password' v-model="form.password"></el-input></el-form-item><el-form-item><el-button type='primary' @click="login('form')">登录</el-button></el-form-item></el-form></el-card></div>
</template>/*
原生AJAX和Axios在使用上存在一定的区别。Axios可以支持多种方式，包括浏览器环境、node环境，而AJAX则只能在浏览器环境中使用。
Axios还支持多种请求方式,包括GET、POST、PUT、DELETE等；而AJAX只能支持GET和POST方式发送请求。此外，Axios还可以拦截请求和响应。
*/<script>//登录验证的封装
import {login} from '@/api/api.js'
import {nameRule, passRule} from '../utils/validate.js'
import {setToken} from '@/utils/dealtoken.js'export default {data () {return {form: {username: "",password: ""},rules: {username: [{validator: nameRule, required: true, trigger: "blur"}],password: [{validator: passRule, required: true, trigger: "blur"}]}}},methods: {login(form) {this.$refs[form].validate((valid) => {if (valid) {console.log(this.form)login(this.form).then(res => {if (res.data.status === 200) {setToken('token', res.data.token)setToken('username', res.data.Name)this.$message({message: res.data.msg, type: 'success'})this.$router.push('/home')}})} else {console.error(this.form)}})}}
}
</script><style lang='scss'>.login {width: 100%;height: 100%;position: absolute;//background: #409EFF;background: url('../assets/logo.png') center no-repeat;.el-card {background: #65768557;}.box-card {width: 450px;margin: 200px auto;color: #fff;.el-form .el-form-item_label {color: #fff;}.el-card_header {font-size: 34px;}.el-button {width: 100%;}}}
</style>

2.服务端

2.1源码

server.go

package mainimport ("main/controller""net/http""github.com/gin-contrib/cors""github.com/gin-gonic/gin"
)/*
// 错误： server.go:4:2: package main/controller is not in GOROOT (/home/tiger/go/go/src/main/controller)
go mod init main//错误： server.go:7:2: no required module provides package github.com/gin-gonic/gin; to add it:
go get github.com/gin-gonic/gin//处理跨域框架
go get github.com/gin-contrib/cors
*//*
当客户端（尤其是基于 Web 的客户端）想要访问 API 时，服务器会决定允许哪些客户端发送请求。这是通过使用称为 CORS 来完成的，它代表跨源资源共享。
跨域资源共享 （CORS） 是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源。
*/func CrosHandler() gin.HandlerFunc {return func(context *gin.Context) {context.Writer.Header().Set("Access-Control-Allow-Origin", "*")context.Header("Access-Control-Allow-Origin", "*") // 设置允许访问所有域context.Header("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE,UPDATE")context.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma,token,openid,opentoken")context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")context.Header("Access-Control-Max-Age", "172800")context.Header("Access-Control-Allow-Credentials", "true")context.Set("content-type", "application/json") //设置返回格式是json//处理请求context.Next()}
}// http://127.0.0.1:8181/ping
// http://127.0.0.1:8181/index
func main() {r := gin.Default()// 设置全局跨域访问//r.Use(CrosHandler())//cors处理跨域corsConfig := cors.DefaultConfig()corsConfig.AllowCredentials = truecorsConfig.AllowHeaders = []string{"content-type", "Origin", "token", "username"}corsConfig.AllowOrigins = []string{"http://localhost:8080"}r.Use(cors.New(corsConfig))//r.Use(cors.Default())// 返回一个json数据r.GET("/ping", func(c *gin.Context) {c.JSON(200, gin.H{"message": "pong","num":     888,})})// 返回一个html页面r.LoadHTMLGlob("templates/*")r.GET("/index", func(c *gin.Context) {c.HTML(http.StatusOK, "index.html", nil)})r.POST("/login", controller.LoginPost)r.POST("/formlogin", controller.FormLoginPost)r.POST("/upload", controller.UploadFile)//r.Run()  // <===> r.Run(":8080")  监听并在 0.0.0.0:8080 上启动服务r.Run(":8181")
}

controller/login.go

package controllerimport ("encoding/json""fmt""io/ioutil""net/http""path/filepath""github.com/gin-gonic/gin"
)// post  http://127.0.0.1:8181/login
// axios.post 和 post json处理
func LoginPost(ctx *gin.Context) {version := ctx.DefaultQuery("version", "V1.0.0.1")//前端使用axios直接传递form时,axios会默认使用json,必须使用下面方式获取json数据,解析后再使用data, _ := ioutil.ReadAll(ctx.Request.Body)type UserInfo struct {Username stringPassword string}var u UserInfoerr := json.Unmarshal(data, &u)if err != nil {fmt.Println(err)}username := u.Usernamepassword := u.Passwordfmt.Println("login info:: ", version, username, password)if username == "123456" && password == "1234abcdE@" {ctx.JSON(http.StatusOK, gin.H{"status":   200,"Name":     username,"Password": password,"msg":      "登录成功","token":    "abcd1234ABCD",})} else {ctx.JSON(http.StatusOK, gin.H{"status":   -1,"Name":     username,"Password": password,"msg":      "用户名或密码错误",})}
}// http://127.0.0.1:8181/formlogin
// form表单提交处理 application/x-www-form-urlencoded 或者 application/form-data
func FormLoginPost(ctx *gin.Context) {username := ctx.PostForm("username")password := ctx.PostForm("password")fmt.Println("FormLoginPost :: ", username, password)if username == "123456" && password == "1234abcdE@" {ctx.JSON(http.StatusOK, gin.H{"status":   200,"Name":     username,"Password": password,"msg":      "登录成功","token":    "abcd1234ABCD",})} else {ctx.JSON(http.StatusOK, gin.H{"status":   -1,"Name":     username,"Password": password,"msg":      "用户名或密码错误",})}
}// form表单提交文件上传处理 multipart/form-data
func UploadFile(ctx *gin.Context) {file, _ := ctx.FormFile("uploadfile")fmt.Println(file.Filename)file_path := "upload/" + filepath.Base(file.Filename)fmt.Println(file_path)ctx.SaveUploadedFile(file, file_path)ctx.String(http.StatusOK, "上传成功")
}

3.运行效果

4.注意事项

4.1webpack.config.js和vue.config.js的区别

webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都是可以创建这个文件使用的,Vue /react项目都可以。
vue.config.js是Vue项目的配置文件,通过这个文件配置Vue项目中常用的功能,简化了配置工作,也可以直接写一些关于webpack的配置,当然如果需要更加专业的配置,这两个文件在Vue的项目中也是可以共存的。

用 vue-cli-service serve 启动就会用 vue.config.js；
用 webpack-dev-server 启动就会用 wepback.config.js（默认）。

vue.config.js 是 Vue CLI 3.x 中一个重要的配置文件，用于对项目进行全局的配置。这个文件不存在，需要手动创建，与 package.json 文件同级。通过 vue.config.js 文件的配置，我们可以实现很多高级功能，例如 Webpack 的各项配置、跨域代理、目录别名等等。

4.2 npm run  dev 与 npm run  build

当在控制台执行npm run  dev 与 npm run  build时，其实npm是读取package.json中scripts进行真正的程序执行

4.3ajax、Promise、axios总结

promise是一种异步机制的解决方案。axios是一个基于promise方案封装的网络请求库，它是基于XHR进行二次封装。
axios可以说是XHR的一个子集，而XHR又是ajax的一个子集
axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一定有。

4.4Go语言处理跨域处理


corsConfig := cors.DefaultConfig()
corsConfig.AllowCredentials = true
corsConfig.AllowHeaders = []string{"content-type", "Origin", "token", "username"}
corsConfig.AllowOrigins = []string{"http://localhost:8080"}r.Use(cors.New(corsConfig))

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.exyb.cn/news/show-5313827.html

如若内容造成侵权/违法违规/事实不符，请联系郑州代理记账网进行投诉反馈，一经查实，立即删除！

相关文章

超详细的74HC595应用指南（以stm32控制点阵屏为例子）

超详细的74HC595应用指南（以stm32控制点阵屏为例子）

74HC595是一款常用的串行输入/并行输出&#xff08;Serial-in/Parallel-out&#xff09;移位寄存器芯片&#xff0c;在数字电子领域有着广泛的应用。它具有简单的接口和高效的扩展能力&#xff0c;成为了许多电子爱好者和工程师们的首选之一。本文将深入介绍74HC595芯片的功能、…
阅读更多...
从零开始学python（十三）爬虫工程师自动化和抓包

从零开始学python（十三）爬虫工程师自动化和抓包

前言 回顾之前讲述了python语法编程 必修入门基础和网络编程&#xff0c;多线程/多进程/协程等方面的内容&#xff0c;后续讲到了数据库编程篇MySQL&#xff0c;Redis&#xff0c;MongoDB篇&#xff0c;和机器学习&#xff0c;全栈开发&#xff0c;数据分析&#xff0c;爬虫数…
阅读更多...
React-使用mobx

React-使用mobx

React 中使用 mobx 配置开发环境 安装mobx和中间件工具 mobx-react-lite 只能函数组件中使用 yarn add mobx mobx-react-lite初始化 mobx 定义数据状态 state在构造器中实现数据响应式处理 makeAutoObservble定义修改数据的函数 action实例化 store 并导出 import { compute…
阅读更多...
day18-二叉树统一迭代写法

day18-二叉树统一迭代写法

二叉树统一迭代写法 思路 前面说了&#xff0c;前序/后序和中序不能统一的原因是因为&#xff0c;访问和处理的时机不同&#xff0c;如果要做到同时处理&#xff0c;我们可以在要处理的结点后放一个空指针作为标记。如下 前序代码&#xff1a; class Solution { public:vec…
阅读更多...
OpenVDB Volume Render OverView

OpenVDB Volume Render OverView

OpenVDB & Volume Render OverView OpenVDB OpenVDB is an open source C library comprising a novel hierarchical data structure and a large suite of tools for the efficient storage and manipulation of sparse volumetric data discretized on three-dimensio
阅读更多...
【黑马头条之redis实现延迟任务】

【黑马头条之redis实现延迟任务】

本笔记内容为黑马头条项目的延迟任务精准发布文章部分 目录 一、实现思路 二、延迟任务服务实现 1、搭建heima-leadnews-schedule模块 2、数据库准备 3、安装redis 4、项目集成redis 5、添加任务 6、取消任务 7、消费任务 8、未来数据定时刷新 1.reids key值匹配 …
阅读更多...
golang使用泛型实现mapreduce操作

golang使用泛型实现mapreduce操作

1.使用面向对象的方式写 package streamimport ("fmt""log""reflect""sort""strconv""strings" )type Stream[T any] struct {data []TkeyBy stringsortByNum stringsortByStr []string }func FromElem…
阅读更多...
UE C++ 知识补充

UE C++ 知识补充

反射 描述运行时得到类型的功能&#xff0c;通过类型信息反过来创建对象&#xff0c;读取修改属性&#xff0c;调用方法的功能行为 反射用于在是在程序运行时动态加载类以及获取类的信息&#xff0c;反射数据描述了类在运行时的内容这些数据所存储的信息包括类的名称、类中的数…
阅读更多...
推荐文章

Copyright @ 2022~2023