git/wechat

Fork 0

mirror of https://github.com/silenceper/wechat.git synced 2026-02-04 12:52:27 +08:00

Files

silenceper 76fde58ad9 add cloudbase

2020-03-17 19:01:51 +08:00

7.2 KiB

Raw Blame History

起步：项目搭建

目标

通过完成一个留言板应用来熟悉云开发中go sdk中的使用，主要分为以下三个内容

如何利用云开发中的数据库进行留言内容的保存
使用云函数进行文本内容的过滤
使用云开发存储能力进行附件的保存

环境介绍

Golang 1.13

项目中使用Golang 1.13版本进行开发，并且使用go module 进行依赖管理

编辑器：Goland

代码编辑工具

热编译工具：Gowatch

Go 程序热编译工具，提升开发效率
官网地址： https://github.com/silenceper/gowatch
快速安装：

go get -u github.com/silenceper/gowatch

web开发框架-Gin

一个web开发框架，方便快速构建一个web应用
官网： https://github.com/gin-gonic/gin

Wechat SDK For Go

使用Golang对微信公众号，小程序，云开发等API进行封装，使得Go项目中可以方便上手
官网： https://github.com/silenceper/wechat/
文档：https://pkg.go.dev/github.com/silenceper/wechat/tcb?tab=doc

云开发

集成数据库，存储，云函数等功能的平台
使用文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/
在开始开发前，请注册一个小程序获取 app_id , app_secret参数，并开启云开发功能。

初始化项目

本项目中使用go module进行依赖管理

在工作目录创建一个项目guestbook，并使用go mod init github.com/go-demo/guestbook进行初始化，后面接的是import path。

mkdir guestbook
cd guestbook
go mod init github.com/go-demo/guestbook

编写main.go文件

使用goland编辑器中打开这个项目，并创建一个main.go文件，内容如下：

package main

import "github.com/gin-gonic/gin"

func main() {
	r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
		})
	})
	r.Run() // listen and serve on 0.0.0.0:8080
}

编译并运行

我们可以在Goland编辑器中Terminal面板中进入项目目录，使用gowatch命令对该项目进行热编译，看到图片中的log输出表示已经启动成功：

gowatch会监听项目中文件的变化，当进行变化后，对项目进行build 和run，这样我们就可以在一边修改代码一边对项目进行编译及时发现错误，是不是效率提升了呢 :>

（初次build会通过go module自动下载依赖，请注意开启go module功能）

我们通过访问127.0.0.1:8080/ping就可以看到页面上输出{"message":"pong"}说明服务启动成功。

渲染留言页面

我们可以先规划我们的UI是怎么样子？

包含两部分：

留言框：包含留言内容，附件上传，用户名，提交按钮
内容展示：展示留言内容，附件以及留言者和留言日期

界面展示如下：

创建模板文件

对应的html代码如下，我们保存在项目中的template/index.html文件中：

<!doctype html>
<html>
<head>
    <title>留言板</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="container-md">
<h3>留言板</h3>
<div>
    <form action="/feedback" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <textarea class="form-control" name="content" id="content" cols="50" rows="5"></textarea>
        </div>
        <div class="form-group">
            <label for="file">附件</label>
            <input type="file" class="form-control-file" name="file" id="">
        </div>
        <div class="form-group">
            <label for="username">名字</label>
            <input type="text" name="username" class="form-control"></div>
        <div class="form-group"><input type="submit" value="提交" class="btn btn-primary"></div>
    </form>
    <h2>内容</h2>
    <div class="list-group list-group-flush">
            <div class="list-group-item">
                <div><span><b>silenceper 在 2020-01-21 12:33:45 说：</b></span></div>
                <div><p>留言板内容</p></div>
            </div>
    </div>
    <div>
        <span>第1页</span>
    </div>
</div>
</body>
</html>

这里引入了bootstrap样式文件，不需要自己写太多前端样式了，出来的UI也不会太难看。

通过gin渲染模板

我们想要通过访问127.0.0.1:8080直接访问到这个留言页面，main.go中代码如下：

package main

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()

	//包含html模板
	r.LoadHTMLGlob("./template/*")
	//渲染留言页面,GET请求，通过根路径可以直接访问
    //当路径匹配成功后，进入index访问进行处理
	r.GET("/",index)


	r.Run() // listen and serve on 0.0.0.0:8080
}

//渲染留言板首页
func index(c *gin.Context) {
    //返回200，并渲染index.html页面
	c.HTML(http.StatusOK,"index.html",gin.H{
		"title":"留言板",
	})
}

其中r.LoadHTMLGlob("./template/*") 指定了html模板的位置，这样在使用进行c.HTML进行渲染的时候就知道到哪个位置进行查找了。

c.HTML说明：

第一个参数：http状态码
第二个参数：需要渲染的模板
第三个参数：需要传递的值（gin.H其实是一个map[string]interface{}的别名）

这里c.HTML渲染了index.html，并以200状态码输出，第三个参数gin.H，传入key:value ,就可以在index.html页面中使用go-template语法进行值的替换，语法格式：

{{.title}}

这里可以查阅gin文档：如何进行html渲染

代码地址

本文中所有代码都上传在 https://github.com/go-demo/guestbook

7.2 KiB Raw Blame History Unescape Escape