贵阳网站开发推荐,东莞微网站,中煤建设协会网站,湖南省工程建设信息官方网站第五篇利用vue实现了登录页面#xff0c;用go语言开发了服务端并最后在nginx上进行了部署。本篇将axios封装#xff0c;登录逻辑优化#xff0c;404页面实现。
目录
1.前端
1.1代码结构
1.2源码
2.服务端
2.1源码
3.运行效果
4.注意事项
4.1webpack.config.js和vue…第五篇利用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-routerVue.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.jsexport function login(data) {return service({method: post,url: /login,data})
}src/components/NotFound.vue
templatediv classnotfounddiv classbig页面不见了/divdiv首页瞧瞧点击router-link to/这里/router-link进入首页./div/div/templatescriptexport default {data() {return {};},};/scriptstyle langscss.notfound {width: 100%;height: 100%;position: absolute;background: #409EFF;background: url(../assets/404page.jpg) center no-repeat;}/style
src/components/Login.vue
templatediv classloginel-card classbox-carddiv slotheader classclearfixspan业务后台管理系统/span/divel-form label-width100px :modelform refform :rulesrulesel-form-item label用户名 propusernameel-input v-modelform.username/el-input/el-form-itemel-form-item label密码 proppasswordel-input typepassword v-modelform.password/el-input/el-form-itemel-form-itemel-button typeprimary clicklogin(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.jsexport 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)}})}}
}
/scriptstyle langscss.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/controllernet/httpgithub.com/gin-contrib/corsgithub.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/jsonfmtio/ioutilnet/httppath/filepathgithub.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是ajaxajax不止axiosaxios有的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))
