• Gin + Element + 云IDE 挑战一小时打造春联生成平台

    一、云空间创建

    1、点击官方链接即可开始创建工作空间

    2、查看已创建好的工作空间

    二、云IDE使用

    1、在 git 地址钱加入 ide 回车即可访问云IDE

    2、可以看到 云IDE 的界面跟本地的 VSCODE IDE 界面是相同的

    图-云IDE

    图-本地 IDE 

    3、云IDE 优点

    云端预制了常见的开发环境，无需下载安装，一键创建项目，灵活配置代码仓和云主机。同时支持在线安装 VSCode 插件来增强使用体验，支持从基础组件快速构建高阶组件，无需重新编写组件，提高研发效率。随时随地开发编码，拥有媲美本地IDE 的流畅编码体验。

    三、封装工具 

    1、该工具用于生成指定春联，指定：words  内容，horV 方向，font 字体

    2、原理是在图片上渲染字体像素

    Golang 使用 image 库将图片转字符_余衫马的博客-CSDN博客Golang 使用 image 库将图片转字符https://blog.csdn.net/weixin_47560078/article/details/127480457?spm=1001.2014.3001.55013、实现代码

    1. package util
    2.  
    3. import (
    4. 	"flag"
    5. 	"github.com/golang/freetype"
    6. 	"image"
    7. 	"image/color"
    8. 	"image/png"
    9. 	"io/ioutil"
    10. 	"log"
    11. 	. "mock/lib/font/config"
    12. 	"os"
    13. )
    14.  
    15. // charset 中文文字
    16. // horV - H-横排，V-竖排
    17. // out 输出文件名
    18. // font 字体
    19.  
    20. func Generator(charset []string, outPath string, horV string, textFont TextFont) {
    21.  
    22. 	// 打开背景图
    23. 	bgFile, err := os.OpenFile("../img/bg.png", os.O_RDONLY, 6)
    24. 	if err != nil {
    25. 		log.Fatal(err)
    26. 	}
    27.  
    28. 	defer bgFile.Close()
    29.  
    30. 	// 解码
    31. 	i, err := png.Decode(bgFile)
    32. 	if err != nil {
    33. 		log.Fatal(err)
    34. 	}
    35.  
    36. 	// 图片的宽度
    37. 	srcWidth := 640
    38. 	// 图片的高度
    39. 	srcHeight := 640
    40.  
    41. 	if horV == "H" {
    42. 		srcWidth = 640 * len(charset)
    43. 	}
    44.  
    45. 	if horV == "V" {
    46. 		srcHeight = 640 * len(charset)
    47. 	}
    48.  
    49. 	imgFile, _ := os.Create(outPath)
    50. 	defer imgFile.Close()
    51. 	img := image.NewRGBA(image.Rect(0, 0, srcWidth, srcHeight))
    52.  
    53. 	if horV == "H" {
    54. 		log.Println("横向生成，渲染背景...")
    55. 		// 根据字符长度创建背景
    56. 		for index := 0; index < len(charset); index++ {
    57. 			// 复制背景图
    58. 			for y := 0; y < srcHeight; y++ {
    59. 				for x := index * 640; x < srcWidth; x++ {
    60. 					if x < 640 {
    61. 						img.Set(x, y, i.At(x, y))
    62. 					} else {
    63. 						img.Set(x, y, i.At(x-index*640, y))
    64. 					}
    65. 				}
    66. 			}
    67. 		}
    68. 	}
    69.  
    70. 	if horV == "V" {
    71. 		log.Println("竖向生成，渲染背景...")
    72. 		// 根据字符长度创建背景
    73. 		for index := 0; index < len(charset); index++ {
    74. 			// 复制背景图
    75. 			for y := index * 640; y < srcHeight; y++ {
    76. 				for x := 0; x < srcWidth; x++ {
    77. 					if y < 640 {
    78. 						img.Set(x, y, i.At(x, y))
    79. 					} else {
    80. 						img.Set(x, y, i.At(x, y-index*640))
    81. 					}
    82. 				}
    83. 			}
    84. 		}
    85. 	}
    86.  
    87. 	// 读取字体数据
    88. 	fontFileName := "../lib/font/" + textFont.FontName
    89. 	fontBytes, err := ioutil.ReadFile(fontFileName)
    90. 	log.Printf("加载字体：%s...", textFont.FontName)
    91. 	if err != nil {
    92. 		log.Fatal(err)
    93. 	}
    94.  
    95. 	// 载入字体数据
    96. 	font, err := freetype.ParseFont(fontBytes)
    97. 	if err != nil {
    98. 		log.Println("载入字体失败!", err)
    99. 	}
    100. 	f := freetype.NewContext()
    101. 	// 设置分辨率
    102. 	f.SetDPI(100)
    103. 	// 设置字体
    104. 	f.SetFont(font)
    105. 	// 设置尺寸
    106. 	f.SetFontSize(textFont.FontSize)
    107. 	f.SetClip(img.Bounds())
    108. 	// 设置输出的图片
    109. 	f.SetDst(img)
    110. 	// 设置字体颜色(黑色)
    111. 	f.SetSrc(image.NewUniform(color.Black))
    112.  
    113. 	if horV == "H" {
    114. 		log.Println("开始绘制对联...")
    115. 		// 绘制字符
    116. 		for index := 0; index < len(charset); index++ {
    117. 			// 设置字体的位置
    118. 			pt := freetype.Pt(textFont.X+index*640, textFont.Y)
    119.  
    120. 			_, err = f.DrawString(charset[index], pt)
    121. 			if err != nil {
    122. 				log.Fatal(err)
    123. 			}
    124. 		}
    125. 	}
    126.  
    127. 	if horV == "V" {
    128. 		// 绘制字符
    129. 		for index := 0; index < len(charset); index++ {
    130. 			// 设置字体的位置
    131. 			pt := freetype.Pt(textFont.X, textFont.Y+index*640)
    132.  
    133. 			_, err = f.DrawString(charset[index], pt)
    134. 			if err != nil {
    135. 				log.Fatal(err)
    136. 			}
    137. 		}
    138. 	}
    139.  
    140. 	// 以png 格式写入文件作为输出
    141. 	err = png.Encode(imgFile, img)
    142. 	if err != nil {
    143. 		log.Fatal(err)
    144. 	}
    145. 	log.Println("Done.")
    146. }

    四、Template 引用 Element UI

    1、参考 Element 官方文档

    2、页面功能：用户在输入框填写文本，选择效果（方向，字体）后，点击 Run 按钮，返回用户预期效果图片

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
    7.     
    8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    9. head>
    10.  
    11. <body>
    12. <div id="app">
    13.     <div class="demo-image__lazy" style="margin-top:30px;">
    14.         <el-image src="../res/3f8b879b-fa29-4dda-8e08-1f82cbd2d895.png">el-image>
    15.     div>
    16.     <el-input placeholder="请输入内容" v-model="input" clearable>
    17.     el-input>
    18.     <el-radio v-model="horV" label="H">水平方向el-radio>
    19.     <el-radio v-model="horV" label="V">垂直方向el-radio>
    20.     <el-radio v-model="font" label="font1">字体1el-radio>
    21.     <el-radio v-model="font" label="font2">字体2el-radio>
    22.     <el-button style="margin-left: 10px;margin-top:30px;" size="small" type="success" @click="submitUpload"
    23.                v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中">Run
    24.     el-button>
    25.     <div class="demo-image__lazy" style="margin-top:30px;">
    26.         <el-image v-for="url in urls" :key="url" :src="url" lazy>el-image>
    27.     div>
    28. div>
    29. body>
    31. <script src="https://unpkg.com/vue@2/dist/vue.js">script>
    33. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    34. <script>
    35.     new Vue({
    36.         el: '#app',
    37.         data() {
    38.             return {
    39.                 horV: 'H',
    40.                 font: 'font1',
    41.                 input: '',
    42.                 urls: [],
    43.                 fullscreenLoading: false
    44.             };
    45.         },
    46.         methods: {
    47.             // 提交表单
    48.             submitUpload() {
    49.                 if (this.input.length > 0) {
    50.                     console.log(this.input, this.horV, this.font);
    51.                     let formdata = {
    52.                         words: this.input,
    53.                         horV: this.horV,
    54.                         font: this.font,
    55.                     };
    56.                     this.fullscreenLoading = true;
    57.                     var that = this;
    58.                     axios({
    59.                         url: '/api/GetImg',
    60.                         method: 'post',
    61.                         data: formdata,
    62.                         headers: {
    63.                             'Content-Type': 'application/x-www-form-urlencoded'
    64.                         }
    65.                     })
    66.                         .then(function (response) {
    67.                             console.log('success');
    68.                             console.log(response);
    69.                             that.urls = response.data.urls;
    70.                             that.fullscreenLoading = false;
    71.                         })
    72.                         .catch(function (error) {
    73.                             console.log('error');
    74.                             console.log(error);
    75.                         });
    76.                 }
    77.             }
    78.         }
    79.     })
    80. script>
    81.  
    82. html>

    五、定义控制器

    1、Index 用于返回定义好的 Index.tmpl 模板

    2、GetImg 用于响应页面请求

    1. package controller
    2.  
    3. import (
    4. 	"net/http"
    5.  
    6. 	"github.com/gin-gonic/gin"
    7.  
    8. 	"mock/lib/font/config"
    9. 	. "mock/util"
    10.  
    11. 	uuid "github.com/satori/go.uuid"
    12. )
    13.  
    14. // 首页
    15. func Index(c *gin.Context) {
    16. 	c.HTML(http.StatusOK, "index.tmpl", nil)
    17. }
    18.  
    19. // 参数 worlds,horV,font => 春联内容，方向，字体
    20. func GetImg(c *gin.Context) {
    21.  
    22. 	// ================== 参数处理
    23. 	words := c.PostForm("words")
    24. 	// 处理字符
    25. 	var charset []string
    26. 	if len(words) > 0 {
    27. 		for _, v := range words {
    28. 			charset = append(charset, string(v))
    29. 		}
    30. 	} else {
    31. 		charset = []string{"你", "好", "世", "界"}
    32. 	}
    33.  
    34. 	// 处理方向
    35. 	horV := c.PostForm("horV")
    36. 	if len(horV) > 0 {
    37. 		if horV != "H" && horV != "V" {
    38. 			horV = "H"
    39. 		}
    40. 	} else {
    41. 		horV = "H"
    42. 	}
    43.  
    44. 	// 输出路径
    45. 	outPath := "../res/" + uuid.NewV4().String() + ".png"
    46.  
    47. 	// 处理字体
    48. 	font := config.Font_1
    49. 	ft := c.PostForm("font")
    50. 	if len(ft) > 0 {
    51. 		if ft != "font1" && ft != "font2" {
    52. 			font = config.Font_1
    53. 		}
    54. 	} else {
    55. 		font = config.Font_1
    56. 	}
    57.  
    58. 	// 生成对联
    59. 	Generator(charset, outPath, horV, font)
    60.  
    61. 	// 返回数组
    62. 	urls := []string{outPath}
    63.  
    64. 	c.JSON(http.StatusOK, gin.H{
    65. 		"status": "success",
    66. 		"urls":   urls,
    67. 	})
    68. }

    六、跨域中间件

    1、如果不做跨域配置，axios 请求可能会被拦截

    1. package middleware
    2. import (
    3. 	"github.com/gin-contrib/cors"
    4. 	"github.com/gin-gonic/gin"
    5. 	"time"
    6. 	)
    7. 	
    8. 	// 跨域请求
    9. 	
    10. 	func Cors() gin.HandlerFunc {
    11. 		handlerFunc := cors.New(cors.Config{
    12. 			AllowMethods:     []string{"*"},
    13. 			AllowHeaders:     []string{"content-type", "token", "fileType", "size", "digest"}, //此处设置非默认之外的请求头(自定义请求头),否则会出现跨域问题
    14. 			AllowAllOrigins:  true,
    15. 			AllowCredentials: true,
    16. 			MaxAge:           24 * time.Hour,
    17. 			ExposeHeaders:    []string{"*"},
    18. 		})
    19. 		return handlerFunc
    20. 	}
    21. 	
    22. 	// gin 上下文配置 cors
    23. 	
    24. 	func CORSMiddleware() gin.HandlerFunc {
    25. 		return func(c *gin.Context) {
    26. 			c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
    27. 			c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
    28. 			c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
    29. 			c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, PUT, HEAD, OPTIONS")
    30. 	
    31. 			if c.Request.Method == "OPTIONS" {
    32. 				c.AbortWithStatus(204)
    33. 				return
    34. 			}
    35. 	
    36. 			c.Next()
    37. 		}
    38. 	}
    39. 	
    40. 	//nginx 跨域
    41. 	
    42. 	//server {
    43. 	//#以上省略
    44. 	//add_header 'Access-Control-Allow-Origin' '*';
    45. 	//add_header 'Access-Control-Allow-Headers' 'X-Pagination-Current-Page,Content-Type';
    46. 	//add_header 'Access-Control-Allow-Methods' 'PUT,GET,POST,HEAD,DELETE';
    47. 	//add_header 'Access-Control-Expose-Headers' 'X-Pagination-Current-Page,Content-Type';
    48. 	//#以下省略
    49. 	//}
    50. 	//Allow-Headers "Accept","Accept-Encoding","Host","Origin","Referer","User-Agent",

    七、定义路由

    1、放行静态路径和页面模板

    2、放行业务接口

    1. package router
    2.  
    3. import (
    4. 	. "mock/controller"
    5. 	"mock/middleware"
    6. 	"net/http"
    7.  
    8. 	"github.com/gin-gonic/gin"
    9. )
    10.  
    11. /*
    12. InitRouter 路由初始化
    13. */
    14. func InitRouter() *gin.Engine {
    15. 	router := gin.Default()
    16. 	// 加载 templates 文件夹下所有的 tmpl
    17. 	router.LoadHTMLGlob("../templates/*")
    18. 	router.StaticFS("/res", http.Dir("../res"))
    19. 	router.GET("/", Index)
    20. 	v1 := router.Group("/api")
    21. 	v1.Use(middleware.CORSMiddleware())
    22. 	{
    23. 		v1.Any("/GetImg", GetImg)
    24. 	}
    25. 	return router
    26. }

    八、main入口

    1、以 8080 端口启动服务，默认为 localhost

    1. package main
    2.  
    3. import (
    4. 	"mock/router"
    5. )
    6.  
    7. func main() {
    8.  
    9. 	r := router.InitRouter()
    10. 	r.Run(":8080")
    11.  
    12. }

    九、自动化脚本

    1、先执行 go build 生成可执行文件 cmd 后，编写自动执行脚本

    1. autoOpen: true
    2. apps:
    3.   - port: 8080
    4.     command: go env -w GOPROXY=https://goproxy.cn,direct & cd cmd && ./cmd
    5.     root: ./
    6.     name: demo
    7.     description: demo
    8.     autoOpen: true

    十、运行效果

    1、重新打开页面时，脚本自动执行，自动开启前后端

    十一、云IDE测评总结 

    1、编码流畅度：目前使用来说很流畅，偶尔会有字符输入延时，也有出现整个IDE卡死、没有提示语法的情况

    2、开发环境：云端自带的开发环境能满足大部分的需求，也可以自行安装插件，我使用的是Go环境也能自动识别，这点可以节省一大部分搭建环境的时间（下载-安装-配置），提高开发效率。

    3、灵活度：不局限与本地机器，只要有网络，随时随地都可以使用云IDE。

  • 相关阅读:
    软件定义汽车的关键—车载操作系统
    【算法题】2525. 根据规则将箱子分类
    eeglab加载显示脑电数据，eeglab简单操作
    Leetcode刷题详解——不同路径
    CSP漫画工作室clipstudiopaint最新版本2022功能介绍
    【Python】Flask上下文管理
    STC15W单片机防丢语音报警GPS北斗定位测距双机LORA无线手持可充电
    Dubbo(二)Dubbo和ZooKeeper的协同工作原理
    【模板语法+数据绑定+el与data的两种写法+MVVM模型】
    C#基础--对象和类型
  • 原文地址：https://blog.csdn.net/weixin_47560078/article/details/127712877