[2024-07-16](UPDATE): 上传页面完成

This commit is contained in:
june 2024-07-16 20:32:22 +08:00
parent 534466b40b
commit 65a1d849b6
19 changed files with 272 additions and 107 deletions

View File

@ -16,7 +16,7 @@ full_bin = "./tmp/main picgo ./deploy/picgo-dev.yml"
include_dir = []
include_ext = ["go", "html", "js", "css", "yml"]
include_file = []
kill_delay = "0s"
kill_delay = "1s"
log = "build-errors.log"
poll = false
poll_interval = 0
@ -39,7 +39,7 @@ main_only = false
time = false
[misc]
clean_on_exit = false
clean_on_exit = true
[proxy]
app_port = 0

View File

@ -5,17 +5,41 @@ import (
"net/http"
)
func TemplateHandler(w http.ResponseWriter, data any, filenames ...string) {
// 解析模板文件
tmpl, err := template.ParseFiles(filenames...)
// noRender 是一个自定义模板函数,忽略不渲染传入的内容
func noRender(s string) template.HTML {
return template.HTML(s)
}
func TemplateHandler(w http.ResponseWriter, data any, name string, filenames ...string) {
// 创建一个新的基础模板,并将自定义函数注册到模板中
baseTmpl := template.New("base").Funcs(template.FuncMap{
"noRender": noRender,
})
// 添加一个简单的内容以确保基础模板不是空的
_, err := baseTmpl.Parse(`{{define "base"}}{{end}}`)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
Logger.Errorf("Error creating base template: %v", err)
http.Error(w, "Error executing template", http.StatusInternalServerError)
}
// 渲染模板并写入响应
err = tmpl.Execute(w, data)
// 解析布局模板及其子模板
_, err = baseTmpl.ParseFiles(filenames...)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
Logger.Errorf("Error parsing templates: %v", err)
http.Error(w, "Error executing template", http.StatusInternalServerError)
}
// 加载所有模板文件
tmpl, err := baseTmpl.Clone()
if err != nil {
Logger.Errorf("error cloning base template: %v", err)
http.Error(w, "Error executing template", http.StatusInternalServerError)
}
err = tmpl.ExecuteTemplate(w, name, data)
if err != nil {
Logger.Errorf("Error executing template: %v", err)
http.Error(w, "Error executing template", http.StatusInternalServerError)
}
}

31
handler/domain.go Normal file
View File

@ -0,0 +1,31 @@
package handler
import (
"github.com/gorilla/csrf"
"net/http"
"picgo/corelib"
"picgo/data"
"picgo/model"
)
func DomainHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
var (
err error
user model.SysUser
)
username := r.Context().Value("username").(string)
if user, err = data.SysUserGetCacheByUsername(username); err != nil {
http.Error(w, "IndexHandler SysUserGetCacheByUsername Error", http.StatusInternalServerError)
return
}
tmpData := map[string]interface{}{
csrf.TemplateTag: csrf.TemplateField(r),
}
tmpData["Title"] = "域名管理"
tmpData["Active"] = r.URL.Path
tmpData["IsSuper"] = user.IsSuper
w.Header().Add("X-CSRF-Token", csrf.Token(r))
corelib.TemplateHandler(w, tmpData, "layout.html", "view/layout.html", "view/domain.html")
}
}

View File

@ -4,25 +4,28 @@ import (
"github.com/gorilla/csrf"
"net/http"
"picgo/corelib"
"picgo/data"
"picgo/model"
)
func IndexHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
var (
err error
user model.SysUser
)
username := r.Context().Value("username").(string)
if user, err = data.SysUserGetCacheByUsername(username); err != nil {
http.Error(w, "IndexHandler SysUserGetCacheByUsername Error", http.StatusInternalServerError)
return
}
tmpData := map[string]interface{}{
csrf.TemplateTag: csrf.TemplateField(r),
}
tmpData["Title"] = "Dashboard"
tmpData["Active"] = r.URL.Path
//data := struct {
// Title string
// Active string
// //csrfField string
//}{
// Title: "Dashboard",
// Active: r.URL.Path,
// //csrfField: string(csrf.TemplateField(r)),
//}
tmpData["IsSuper"] = user.IsSuper
w.Header().Add("X-CSRF-Token", csrf.Token(r))
corelib.TemplateHandler(w, tmpData, "view/layout.html", "view/index.html")
corelib.TemplateHandler(w, tmpData, "layout.html", "view/layout.html", "view/index.html")
}
}

View File

@ -17,7 +17,7 @@ func LoginHandler(w http.ResponseWriter, r *http.Request) {
tmpData := map[string]interface{}{
csrf.TemplateTag: csrf.TemplateField(r),
}
corelib.TemplateHandler(w, tmpData, "view/login.html")
corelib.TemplateHandler(w, tmpData, "login.html", "view/login.html")
case http.MethodPost:
loginService(w, r)
default:

32
handler/picture.go Normal file
View File

@ -0,0 +1,32 @@
package handler
import (
"github.com/gorilla/csrf"
"net/http"
"picgo/corelib"
"picgo/data"
"picgo/model"
)
func PictureHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
var (
err error
user model.SysUser
)
username := r.Context().Value("username").(string)
if user, err = data.SysUserGetCacheByUsername(username); err != nil {
http.Error(w, "IndexHandler SysUserGetCacheByUsername Error", http.StatusInternalServerError)
return
}
tmpData := map[string]interface{}{
csrf.TemplateTag: csrf.TemplateField(r),
}
tmpData["Title"] = "图片管理"
tmpData["Active"] = r.URL.Path
tmpData["IsSuper"] = user.IsSuper
w.Header().Add("X-CSRF-Token", csrf.Token(r))
corelib.TemplateHandler(w, tmpData, "layout.html", "view/layout.html", "view/picture.html")
}
}

View File

@ -1,19 +0,0 @@
package handler
import (
"net/http"
"picgo/corelib"
)
func ProfileHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
data := struct {
Title string
Active string
}{
Title: "Admin Dashboard",
Active: r.URL.Path,
}
corelib.TemplateHandler(w, data, "view/layout.html", "view/profile.html")
}
}

View File

@ -1,19 +0,0 @@
package handler
import (
"net/http"
"picgo/corelib"
)
func SettingsHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
data := struct {
Title string
Active string
}{
Title: "Admin Dashboard",
Active: r.URL.Path,
}
corelib.TemplateHandler(w, data, "view/layout.html", "view/settings.html")
}
}

32
handler/user.go Normal file
View File

@ -0,0 +1,32 @@
package handler
import (
"github.com/gorilla/csrf"
"net/http"
"picgo/corelib"
"picgo/data"
"picgo/model"
)
func UserHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
var (
err error
user model.SysUser
)
username := r.Context().Value("username").(string)
if user, err = data.SysUserGetCacheByUsername(username); err != nil {
http.Error(w, "IndexHandler SysUserGetCacheByUsername Error", http.StatusInternalServerError)
return
}
tmpData := map[string]interface{}{
csrf.TemplateTag: csrf.TemplateField(r),
}
tmpData["Title"] = "用户管理"
tmpData["Active"] = r.URL.Path
tmpData["IsSuper"] = user.IsSuper
w.Header().Add("X-CSRF-Token", csrf.Token(r))
corelib.TemplateHandler(w, tmpData, "layout.html", "view/layout.html", "view/user.html")
}
}

View File

@ -1,10 +1,12 @@
package middleware
import (
"context"
"net/http"
"picgo/configs"
"picgo/corelib"
"picgo/data"
"picgo/model"
"strings"
)
@ -22,14 +24,14 @@ func LoginMiddleware(next http.Handler) http.Handler {
return
}
var (
//user model.SysUser
err error
user model.SysUser
err error
)
if _, err = data.SysUserSelectByUsername(username); err != nil {
if user, err = data.SysUserSelectByUsername(username); err != nil {
http.Redirect(w, r, "/login", http.StatusFound)
return
}
next.ServeHTTP(w, r)
ctx := context.WithValue(r.Context(), "username", user.Username)
next.ServeHTTP(w, r.WithContext(ctx))
})
}

View File

@ -24,18 +24,17 @@ func InitRouter() *mux.Router {
)
// 创建新的路由器
r := mux.NewRouter()
// 处理静态文件
//staticDir := "static"
// 不需要鉴权路由
r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", handler.StaticHandler()))
r.HandleFunc("/login", handler.LoginHandler)
r.HandleFunc("/captcha", handler.CaptchaHandler)
r.HandleFunc("/settings", handler.SettingsHandler)
r.HandleFunc("/profile", handler.ProfileHandler)
r.HandleFunc("/api/v1/upload", handler.UploadFileHandler)
// 路由鉴权
r.Handle("/", middleware.LoginMiddleware(http.HandlerFunc(handler.IndexHandler))).Methods(http.MethodGet)
// 应用 CORS 中间件
r.HandleFunc("/login", handler.LoginHandler).Methods(http.MethodGet, http.MethodPost) // 登录
r.HandleFunc("/captcha", handler.CaptchaHandler).Methods(http.MethodGet) // 验证码接口
// 需要鉴权路由
r.Handle("/", middleware.LoginMiddleware(http.HandlerFunc(handler.IndexHandler))).Methods(http.MethodGet) // 后台首页
r.Handle("/domain", middleware.LoginMiddleware(http.HandlerFunc(handler.DomainHandler))).Methods(http.MethodGet) // 域名管理
r.Handle("/user", middleware.LoginMiddleware(http.HandlerFunc(handler.UserHandler))).Methods(http.MethodGet) // 用户管理
r.Handle("/picture", middleware.LoginMiddleware(http.HandlerFunc(handler.PictureHandler))).Methods(http.MethodGet) // 图片管理
r.Handle("/api/v1/upload", middleware.LoginMiddleware(http.HandlerFunc(handler.UploadFileHandler))).Methods(http.MethodPost) // 图片上传接口
// 应用 CORS CSRF 中间件
http.Handle("/", middleware.CorsMiddleware(CSRF(r)))
return r

45
view/domain.html Normal file
View File

@ -0,0 +1,45 @@
{{define "style"}}
{{end}}
{{define "content"}}
<div class="alert alert-primary form-inline" role="alert">
<button type="button" id="add-domain" class="btn btn-primary" data-toggle="modal"
data-target="#DomainModal"><i
class="bi bi-plus-lg"></i> 添加域名
</button>
<div class="input-group mr-3" style="position: absolute; right: 0">
<input type="text" id="search-input" class="form-control" placeholder="域名" aria-label="域名" aria-describedby="searc-btn">
<div class="input-group-append">
<button class="btn btn-primary" id="search-btn" type="button"><i class="bi bi-search"></i> 搜索
</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr class="table-primary">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
{{end}}
{{define "script"}}
{{end}}

View File

@ -9,7 +9,7 @@
<div class="card-body" style="border-style:dashed; border-color:#98bf21; display: block">
<input type="file" class="form-control-file" id="upload-input-file" style="display:none;">
<div id="upload-btn-click">
<div style="height: 100px"></div>
<div style="height: 80px"></div>
<div class="ant-upload-drag-container">
<p class="ant-upload-drag-icon"><img src="/static/img/add.svg"></p>
<p class="ant-upload-text" style="font-size: 14px; margin: 0;">拖拽文件到此区域或<span
@ -17,33 +17,44 @@
<p class="ant-upload-hint" style="font-size: 12px; margin: 4px 0 0;">
只支持上传图片文件最大支持2M上传后支持复制url</p>
</div>
<div style="height: 100px"></div>
<div style="height: 80px"></div>
</div>
</div>
<div class="card-footer text-muted" style="background-color: #fcf8e3">
<div id="preview"></div>
<div class="card" style="width: 18rem;">
<img src="https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg" class="card-img-top" alt="">
<div class="card-body">
<p>https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg</p>
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
<div class="container">
<div class="row" id="preview">
<div class="col-sm">
<div class="card" style="width: 14rem;">
<img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
<div class="card-body">
<p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 14rem;">
<img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
<div class="card-body">
<p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
{{define "script"}}
{{/*
<script id="tpl-image" type="text/html">
{{noRender `<script id="tpl-image" type="text/html">
<div class="card" style="width: 18rem;">
<img src="{{ url }}" class="card-img-top" alt="...">
<div class="card-body">
<button type="button" class="btn btn-primary">点击复制按钮</button>
</div>
</div>
</script> */}}
</script>`}}
<script src="/static/js/index.js"></script>
{{end}}

View File

@ -9,7 +9,7 @@
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- <script src="/static/js/feather-icons.js"></script>-->
<!-- <script src="/static/js/feather-icons.js"></script>-->
<script src="/static/js/sweetalert.min.js"></script>
<script src="/static/js/common.js"></script>
{{template "style" .}}
@ -20,33 +20,44 @@
<div class="container" style="padding-left: 0; padding-right: 0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">后台管理</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pl-5" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/user">用户管理</a>
<li class="nav-item">
<a class="nav-link {{if eq .Active "/"}}active{{end}}" href="/">图片上传</a>
</li>
{{ if .IsSuper }}
<li class="nav-item">
<a class="nav-link {{if eq .Active "/user"}}active{{end}}" href="/user">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/domain">域名管理</a>
<a class="nav-link {{if eq .Active "/domain"}}active{{end}}" href="/domain">域名管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/picture">图片管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/upload">图片上传</a>
<a class="nav-link {{if eq .Active "/picture"}}active{{end}}" href="/picture">图片管理</a>
</li>
{{ end }}
</ul>
</div>
</nav>
</div>
</div>
<div class="container">
<div class="container" style="padding: 20px">
{{ .csrfField }}
{{template "content" .}}
</div>
<script>
$(function () {
let pathname = window.location.pathname
let links = $("nav-link");
for (let i = 0; i < links.length; i++) {
}
})
</script>
{{template "script" .}}
</body>
</html>

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>

10
view/picture.html Normal file
View File

@ -0,0 +1,10 @@
{{define "style"}}
{{end}}
{{define "content"}}
<h1 class="h2">Picture</h1>
<p>Picture page content goes here.</p>
{{end}}
{{define "script"}}
{{end}}

View File

@ -1,4 +0,0 @@
{{define "content"}}
<h1 class="h2">Profile</h1>
<p>Profile page content goes here.</p>
{{end}}

View File

@ -1,4 +0,0 @@
{{define "content"}}
<h1 class="h2">Settings</h1>
<p>Settings page content goes here.</p>
{{end}}

10
view/user.html Normal file
View File

@ -0,0 +1,10 @@
{{define "style"}}
{{end}}
{{define "content"}}
<h1 class="h2">User</h1>
<p>User page content goes here.</p>
{{end}}
{{define "script"}}
{{end}}