代码拉取完成,页面将自动刷新
同步操作将从 goflyfox/gfstudy 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
登录简单来说就是客户端输入账号密码,服务端进行账号密码验证,通过可访问系统,不通过停留在登录页面不能访问系统;登录看似简单的流程,但是实际还是有许多知识点是值得我们学习的;
下面我们来简单介绍一下设计相关的线框图,流程图和时序图;这里我使用的visio,大家也可以使用亿图,在线ProcessOn。
基本流程图主要就是开始结束,流程处理,判断判断,数据,文档等;
UML时序图主要是对象,请求,响应,自关联,循环,可选;
:.
│ go.mod
│ go.sum
│ main.go
│
├─config
│ config.toml
│
└─template
index.html
user_index.html
module gf-login11
go 1.14
require github.com/gogf/gf v1.12.1
package main
import (
"github.com/gogf/gf/frame/g"
"github.com/gogf/gf/net/ghttp"
)
func main() {
s := g.Server()
// 常规注册
group := s.Group("/")
// 登录页面
group.GET("/", func(r *ghttp.Request) {
r.Response.WriteTpl("index.html", g.Map{
"title": "登录页面",
})
})
// 登录接口
group.POST("/login", func(r *ghttp.Request) {
username := r.GetString("username")
password := r.GetString("password")
//dbUsername := "admin"
//dbPassword := "123456"
dbUsername := g.Config().GetString("username")
dbPassword := g.Config().GetString("password")
if username == dbUsername && password == dbPassword {
r.Response.WriteJson(g.Map{
"code": 0,
"msg": "登录成功",
})
r.Exit()
}
r.Response.WriteJson(g.Map{
"code": -1,
"msg": "登录失败",
})
})
// 列表页面
group.GET("/user/index", func(r *ghttp.Request) {
r.Response.WriteTpl("user_index.html", g.Map{
"title": "列表页面",
"dataList": g.List{
g.Map{
"date": "2020-04-01",
"name": "朱元璋",
"address": "江苏110号",
},
g.Map{
"date": "2020-04-02",
"name": "徐达",
"address": "江苏111号",
},
g.Map{
"date": "2020-04-03",
"name": "李善长",
"address": "江苏112号",
},
}})
})
// 登出接口
group.POST("/logout", func(r *ghttp.Request) {
r.Response.WriteJson(g.Map{
"code": 0,
"msg": "登出成功",
})
})
s.Run()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-row {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<span>${ .title }</span>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="6">
<el-input v-model="username" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="6">
<el-input placeholder="请输入密码" v-model="password" show-password></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<el-button @click="login">登录</el-button>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
visible: false,
username: '',
password: ''
}
},
methods: {
login: function () {
axios.post('/login', { // 还可以直接把参数拼接在url后边
username: this.username,
password: this.password
}).then(function (res) {
console.log(res.data)
if (res.data.code == 0) {
alert(res.data.msg)
window.location.href = "/user/index"
} else {
alert("失败:" + res.data.msg)
}
}).catch(function (error) {
console.log(error);
});
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-row {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<span>${ .title }</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="6" style="text-align: center">
<el-button @click="logout">登出</el-button>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script>
${/*
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
*/}
var listData = new Array();
var data;
${range $index, $elem := .dataList}
data = {};
${range $key, $value := $elem}
data['${$key}'] = '${$value}'
${end}
listData.push(data)
${end}
var vm = new Vue({
el: '#app',
data: {
visible: false,
tableData: listData
},
methods: {
logout: function () {
axios.post('/logout', {}).then(function (res) {
console.log(res.data)
if (res.data.code == 0) {
alert(res.data.msg)
window.location.href = "/"
} else {
alert("失败:" + res.data.msg)
}
}).catch(function (error) {
console.log(error);
});
}
},
mounted: function () {
}
})
</script>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。