首页 > 其他分享 >Go编写一个小网站--复制粘贴--GiftsForYou

Go编写一个小网站--复制粘贴--GiftsForYou

时间：2023-04-09 19:13:47浏览次数：49  
标签：sizeForm err -- text fmt GiftsForYou 复制粘贴 json type

修修改改成为自己想要的

七米老师的 ：https://github.com/Q1mi/bubble

gifts_for_you

就是送的礼物的 记录
字段包括 时间、礼物、文字

先运行起来

1、创建数据库 配置连接数据的用户密码

CREATE DATABASE bubble DEFAULT CHARSET=utf8mb4;

conf/config.ini

port = 9000
release = false

[mysql]
user = root
password = root
host = 127.0.0.1
port = 3306
db = bubble

2、编译运行

go build
.\bubble.exe conf/config.ini
image

表自动就创建好了
image

3、访问

image
image

可以访问，说明环境没问题。改一下model成为咱要的字段就可以了。

阅读源代码

1、从main.go开始

package main

import (
	"fmt"
	"gifts_for_you/dao"  
	"gifts_for_you/models"
	"gifts_for_you/routers"
	"gifts_for_you/setting"
	"os"
)

func main() {
	if len(os.Args) < 2 {
		fmt.Println("Usage: ./gifts_for_you conf/config.ini")
		return
	}
	// 加载配置文件
	if err := setting.Init(os.Args[1]); err != nil {
		fmt.Printf("load config from file failed, err:%v\n", err)
		return
	}
	// 创建数据库
	// sql: CREATE DATABASE bubble;
	// 连接数据库
	err := dao.InitMySQL(setting.Conf.MySQLConfig)
	if err != nil {
		fmt.Printf("init mysql failed, err:%v\n", err)
		return
	}
	defer dao.Close() // 程序退出关闭数据库连接
	// 模型绑定
	dao.DB.AutoMigrate(&models.Todo{})
	// 注册路由
	r := routers.SetupRouter()
	if err := r.Run(fmt.Sprintf(":%d", setting.Conf.Port)); err != nil {
		fmt.Printf("server startup failed, err:%v\n", err)
	}
}

整个流程就是 执行启动需要一个ini配置文件（数据库的信息），然后会连接数据库，然后创建表。然后配置 url和函数的映射。

2、要修改前台。还是要用vue. 不然不好改。

image

https://github.com/Q1mi/bubble_frontend
先把前台运行起来。
image

image

连不上后台。报错
Proxy error: Could not proxy request /v1/todo from localhost:8080 to http://127.0.0.1:9000.

破案了，打开前台代码把后台的窗口关了。

image

现在好了。可以正常访问。
image

开始修改

model改成咱要用的字段。类名先不改。

type Todo struct {
	ID     int       `json:"id"`
	Title  string    `json:"title"`
	Status bool      `json:"status"`
	Type   string    `json:"type"`
	Text   string    `json:"text"`
	Date   time.Time `json:"date"`
	To     string    `json:"to"`
}

修改之后启动。表自动创建好了
image

修改前台 界面，基本的

image

bug1，除了原来的待办事项能输入，其他的都输入不了。

image

先用postman测试后端

image

时间不对。修改为 sql.NullTime
image

数据库的数据不太对。
image

form表单格式不对。应该是json。哈哈
image

image

查询

时间不对，还得改一下。
image

修改

image

删

image

日期格式

我只要想要 年月日，需要格式化啥的。咱简单点。搞成字符串。
image

image

至此 后端没啥问题了。

前端

1、从element ui 挑一个模板，表格类型，

image

mounted来获取数据

mounted() {
    this.axios
      .get("/v1/todo")
      .then(response => (this.tableData = response.data));
  },

2、添加礼物表单

image

bug:select value 为汉字不行。得用英文，简单点，改成 用户自己输入把。不选择了。
image

image

能正确显示，就这样吧
image

<template>
    <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
    <el-form-item label="送礼人">
      <el-input v-model="sizeForm.from"></el-input>
    </el-form-item>

    <el-form-item label="收礼人">
      <el-input v-model="sizeForm.to"></el-input>
    </el-form-item>

    <el-form-item label="送礼时间">
      <el-col :span="11">
        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="sizeForm.date" style="width: 100%;"></el-date-picker>
      </el-col>
    </el-form-item>
    
    <el-form-item label="礼物类型">
      <el-input v-model="sizeForm.type" placeholder="父亲节、母亲节、情人节等等"></el-input>
    </el-form-item>
    
    <el-form-item label="礼物">
      <el-input v-model="sizeForm.gift"></el-input>
    </el-form-item>

    <el-form-item label="留言">
    <el-input type="textarea" v-model="sizeForm.text"></el-input>
    </el-form-item>
    <el-form-item size="large">
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>
  
  <script>
    export default {
      data() {
        return {
          sizeForm: {
            from: this.from,
            to: this.to,
            date: this.date,
            type: this.type,
            gift: this.gift,
            text: this.text
          }
        };
      },
      methods: {
        onSubmit() {
        this.axios
          .post("/v1/todo", {
            from: this.sizeForm.from,
            to: this.sizeForm.to,
            date: this.sizeForm.date,
            type: this.sizeForm.type,
            gift: this.sizeForm.gift,
            text: this.sizeForm.text
          })
          .then(() => {
            this.$message({
              showClose: true,
              duration: 1500,
              message: "添加礼物成功",
              type: "success"
            });
          });
        }
      }
    };
  </script>

<template>
  
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="送礼人"
      prop="from">
    </el-table-column>
    <el-table-column
      label="接收者"
      prop="to">
    </el-table-column>
    <el-table-column
      label="送礼时间"
      prop="date">
    </el-table-column>
    <el-table-column
      label="礼物类型"
      prop="type">
    </el-table-column>
    <el-table-column
      label="礼物"
      prop="gift">
    </el-table-column>
    <el-table-column
      label="留言"
      prop="text">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          "id": 1,
          "title": "title1",
          "status": false,
          "type": "父亲节",
          "text": "happy Day",
          "date": "2023-04-09",
          "from": "lzl",
          "to": "mother",
          "gift": "围巾"
        }],
        search: ''
      }
    },
    mounted() {
    this.axios
      .get("/v1/todo")
      .then(response => (this.tableData = response.data));
    },
    methods: {
      handleEdit() {
       
      },
      handleDelete() {
        
      }
    },
  }
</script>

礼物后期有时间改成上传图片的。

标签：sizeForm,err,--,text,fmt,GiftsForYou,复制粘贴,json,type
From： https://www.cnblogs.com/clllll/p/17299913.html

相关文章

  • ELK日志分析系统
    一、ELK日志分析系统简介1、日志服务器的优缺点优点：提高安全性集中存放日志缺点：对日志的分析困难2、ELK日志简化分析的管理工具，由Elasticsearch(ES)、Logstash、Kibana三个开源工具组成，官方网站:https://www.elastic.co/productsES(nosql非关数据库)：存储功能和索引......
  • C# WinForm操作配置文件AppSettings获取、增加、删除、修改
    在C#WinForm开发中，如果想要修改AppSettings中的值，发现用下面这个代码并没有成功。ConfigurationManager.AppSettings.Set(key,value);//修改值，但是没有成功下面提供可以用的获取、增加、删除、修改appSettings的方法。publicclassWinConfigHelper{///<summary>......
  • GNOME多显示屏壁纸设置
    1起因笔者的设备是笔记本自带的显示屏+外接显示屏，但是GNOME默认好像不能支持多显示屏的壁纸设置：默认的Appearance中的壁纸设置会让两个显示屏都设置成同样的壁纸。2hydrapaper查了一下资料发现需要使用hydrapaper这个工具，直接使用命令行安装即可。安装完成后直接打开左侧......
  • Rust入门, 猜字游戏!
    userand::Rng;//随机数usestd::cmp::Ordering;//枚举对比cmpusestd::io;//io输入输出获取fnmain(){println!("这是一个猜字游戏!");//rand::thread_rng()是获取一个本地线程作为随机数函数使用,gen_range()是获取一个范围内的随机数生成letr......
  • SPECCPU2006的学习与使用
    SPECCPU2006的学习与使用摘要这个周末问题不是很多,陪孩子写作业时顺便研究了下SPEC2006虽然比较落后了.但是总比没有要强一些.其实集团有资源,但是联系不到人,只能自己学习和研究了.找了很多华为博客上面的知识点.但是依旧有很多问题想着先总结这,希望有时间慢慢完......
  • Rust语言 , string(&str) 和 String 区别
    在Rust中，string表示字符串切片类型（&str），可以用于引用字符串数据。而String则是字符串类型，是一种可变的字符串，可以创建、修改和销毁。具体来说，string是Rust的核心语言类型之一，它是一个不可变的字符串切片类型，通常用于引用已有的字符串数据。由于字符串切片是不可变的，因此不......
  • Rust 关键词
    在Rust中，以下是所有的关键词列表，以及它们的作用和用途：as：类型转换关键字，用于将一个类型转换为另一个类型。async：异步函数关键字，用于定义异步函数。await：等待异步结果关键字，用于等待异步函数的执行结果。break：循环控制关键字，用于跳出当前的循环语句。const：常量声明关键字......
  • Mac版 下载安装FFmpeg（转）
    转自：Mac版下载安装FFmpeg法一，直接使用brew安装ffmpegbrewinstallffmpeg如果发现下载太慢，可以参考macOS】homebrew安装和解决brew安装速度慢的问题加快下载速度。方式二：官网下载安装（1）进入官网DownloadFFmpeg选择“mac”，点击下面的“macOS-64-bit”进入下载页面（2)......
  • 【Voyage】GDOI 2023 旅游记 || ECHO.
    \(\color{#FFFFFF}{那是什么样的旅途呢}\)\(\color{#FFFFFF}{真的会害怕很多东西呢。想想害怕的其实不止这样一件事，便产生了“其实都一样没关系的，都应该踏过去的”这样的想法}\)\(\color{#FFFFFF}{——3月29日}\)注：这个真的是旅游记。作个人纪念。会配上一些图片完整相册等......
  • 23:二维数组回形遍历
    描述给定一个row行col列的整数数组array，要求从array[0][0]元素开始，按回形从外向内顺时针顺序遍历整个数组。如图所示：输入输入的第一行上有两个整数，依次为row和col。余下有row行，每行包含col个整数，构成一个二维整数数组。（注：输入的row和col保证0<row<100,0<col<100）输......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99