golang入门项目——Gin框架简易博客系统1.0
文章目录
-
- 开发前的准备
- 需求分析
- 项目截图
- 代码
开发前的准备
需要集成markdown编辑器
下载地址
需求分析
1.能够实现用户的注册与登录
2.能够编写并保存博客
3.能够对保存的博客进行展示
项目截图
代码
main.go
package main
import "blog/router"
func main() {
router.Start()
}
controller.go
package controller
import (
"blog/dao"
"blog/model"
"fmt"
"github.com/gin-gonic/gin"
)
func Register(c *gin.Context) {
username := c.PostForm("username")
password := c.PostForm("password")
user := model.User{
Username: username,
Password: password,
}
dao.Mgr.Register(&user)
c.Redirect(301, "/")
}
func Index(c *gin.Context) {
c.HTML(200, "index.html", nil)
}
func GoRegister(c *gin.Context) {
c.HTML(200, "register.html", nil)
}
func Login(c *gin.Context) {
username := c.PostForm("username")
password := c.PostForm("password")
fmt.Println(username)
u := dao.Mgr.Login(username)
if u.Username == "" {
c.HTML(200, "login.html", "用户名不存在")
} else {
if u.Password != password {
c.HTML(200, "login.html", "密码错误")
} else {
c.Redirect(301, "/")
}
}
}
func GoLogin(c *gin.Context) {
c.HTML(200, "login.html", nil)
}
//操作博客
//博客列表
func GetPostIndex(c *gin.Context) {
posts := dao.Mgr.GetAllPost()
c.HTML(200, "postIndex.html", posts)
}
func AddPost(c *gin.Context) {
title := c.PostForm("title")
tag := c.PostForm("tag")
content := c.PostForm("content")
post := model.Post{
Title: title,
Tag: tag,
Content: content,
}
dao.Mgr.AddPost(&post)
c.Redirect(302, "/post_index")
}
//跳转到添加博客
func GoAddPost(c *gin.Context) {
c.HTML(200, "post.html", nil)
}
dao.go
package dao
import (
"blog/model"
"fmt"
_ "github.com/go-sql-driver/mysql"
"github.com/jmoiron/sqlx"
"log"
)
type Manager interface {
Register(user *model.User)
Login(username string) model.User
AddPost(post *model.Post)
GetAllPost() []model.Post
getPost(topic string) []model.Post
}
type manager struct {
db *sqlx.DB
}
var (
Mgr Manager
)
func init() {
dsn := "root:******@tcp(127.0.0.1:3306)/blog_db"
conn, err := sqlx.Open("mysql", dsn)
if err != nil {
log.Fatal("open database failed,err:", err)
return
}
Mgr = &manager{
db: conn,
}
}
func (m *manager) Register(user *model.User) {
sqlStr := "insert into user(Username,Password) values(?,?)"
_, err := m.db.Exec(sqlStr, user.Username, user.Password)
if err != nil {
fmt.Println("add user failed,err:", err)
return
}
}
func (m *manager) Login(username string) model.User {
var user []model.User
err := m.db.Select(&user, "select Username,Password from user where username=?", username)
if err != nil {
fmt.Println("query username failed,err:", err)
}
return user[0]
}
func (m *manager) AddPost(post *model.Post) {
_, err := m.db.Exec("insert into blog(Title,Content,Tag) values (?,?,?)", post.Title, post.Content, post.Tag)
if err != nil {
fmt.Println("insert into blog failed,err:", err)
return
}
}
func (m *manager) GetAllPost() []model.Post {
var posts = make([]model.Post, 10)
m.db.Select(&posts, "select * from blog")
return posts
}
func (m *manager) getPost(title string) []model.Post {
var posts []model.Post
m.db.Select(&posts, "select * from blog where Topic = ?", title)
return posts
}
model.go
package model
type User struct {
Username string `db:"Username"`
Password string `db:"Password"`
}
type Post struct {
Title string `db:"Title"`
Content string `db:"Content"`
Tag string `db:"Tag"`
}
header.html
{{define "header"}}
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a class="navbar-brand" href="#">zyj的博客a>
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap">use>
svg>
a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="/" class="nav-link px-2 text-secondary">首页a>li>
<li><a href="/post" class="nav-link px-2 text-white">博客a>li>
ul>
<div class="text-end">
<a type="button" href="/login" class="btn btn-outline-light me-2">登录a>
<a type="button" href="/register" class="btn btn-warning">注册a>
div>
div>
div>
header>
{{end}}
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/editor/css/editormd.min.css">
<script src="/assets/js/bootstrap.min.js">script>
<title>Titletitle>
head>
<body>
<div class="container">
{{template "header"}}
<div id="test-editor">
<textarea style="display:none;">### 关于 Editor.md
textarea>
div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="/assets/editor/editormd.min.js">script>
<script type="text/javascript">
$(function() {
var editor = editormd("test-editor", {
width : "100%",
height : "640",
path : "assets/editor/lib/"
});
});
script>
div>
body>
html>
post.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width",initial-scale="1.0">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/editor/css/editormd.css">
<script src="/assets/js/bootstrap.min.js">script>
<title>添加博客title>
head>
<body>
<div class="container">
{{template "header"}}
<form action="/post" method="post">
<div class="row">
<div class="col-md-8">
<div id="test-editor">
<textarea style="display: none;" name="context">textarea>
div>
div>
<div class="col-md-4 mt-3">
<label for="title" class="form-label">请输入标题label>
<input type="text" name="title" class="form-control" id="title"><br>
<label for="tag" class="form-label">请输入标签label>
<input type="text" name="tag" class="form-control" id="tag"><br>
<button for="submit" class="btn btn-primary">添加button>
div>
div>
form>
div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="/assets/editor/editormd.min.js">script>
<script type="text/javascript">
$(function() {
var editor = editormd("test-editor", {
width : "100%",
height : "640",
path : "assets/editor/lib/"
});
});
script>
body>
html>
postIndex.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<title>博客列表title>
head>
<body>
<div class="container">
{{template "header"}}
<div class="row mt-3">
{{range $post:=. -}}
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">分类strong>
<h3 class="mb-0">{{$post.Title}}h3>
<div class="mb-1 text-muted">Nov 12div>
<p class="card-text mb-auto">{{$post.Content}}p>
<a href="#" class="stretched-link">阅读更多...a>
div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholdertitle><rect width="100%" height="100%" fill="#55595c">rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">博客封面text>svg>
div>
div>
div>
{{- end}}
div>
div>
body>
html>
register.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<script src="/assets/js/bootstrap.min.js">script>
<title>注册title>
head>
<body>
<div class="container">
{{template "header"}}
<form method="post" action="/register">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">用户名称label>
<input type="text" name="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">用户密码label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
div>
<div class="mb-3">
<label for="exampleInputPassword2" class="form-label">确认密码label>
<input type="password" name="password2" class="form-control" id="exampleInputPassword2">
div>
<button type="submit" class="btn btn-primary">注册button>
form>
div>
body>
html>