DEV Community

SKY-HaYaTo
SKY-HaYaTo

Posted on

How to delete data using golang web framework Beego?

#go #beego #postgres #javascript

Introduction

Beego is one of golang web frameworks including Gin,Echo,Revel and Iris. One of them, Beego is full stack framework and suitable to version of golang.In addition, Beego recruts MVC model which is used as a large scale development project. We know representative of MVC frameworks are C# ASP.Net Core,Ruby onRails,Laravel and Spring Boot.These tools are also used large projects.
in this article,today, I introduce process that Deleting one recored from PostgreSQL using Beego, it is one of CRUD process.

Directory of Beego project

Directory of my project is as below.
You can see like MVCmodel.

MY-FIRST-BEEGO-PROJECT ├─ conf │ └─ app.conf ├─ controllers │ └─ default.go ├─ crypt │ └─ crypt.go ├─ models │ └─ todo.go ├─ routers │ └─ router.go └─ static ├─ css ├─ img ├─ js │ ├─ form.js │ ├─ login.js │ ├─ reload.min.js │ ├─ todoCreate.js │ ├─ todoCard.js │ └─ todoList.js ├─ lib │ └─ bootstrap │ ├─ css │ │ ├─ bootstrap-grid.min.css │ │ └─ bootstrap.min.css │ ├─ js │ │ ├─ bootstrap-bundle.min.js │ │ └─ bootstrap.min.js │ ├─ jquery │ │ └─ jquery.js │ └─ upload ├─ views │ ├─ mytodo │ │ ├─ addTodo.tpl │ │ └─ myList.tpl │ ├─ index.tpl │ ├─ subIndex.tpl │ └─ thirdIndex.tpl └─ main.go
Enter fullscreen mode Exit fullscreen mode

Make Frontend Pages

Now,I make delete page using .tpl which is Beego default templateengine.

views/mytodo/myTaskDelete.tpl

<!DOCTYPE html> <html> <title>Task Delete</title> <!--Common Library--> <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="/static/lib/jquery/jquery.js"></script> <!--Personal Files--> <script type="text/javascript" src="/static/js/taskDelete.js"></script> <body> <form enctype="multipart/form-data"> <div> <input type="hidden" id="registerId" name="registerId" value="" /> <input type="hidden" id="taskId" name="taskId" value="" /> </div> <div class="form-group mb-3"> <label>タスク名</label> <input type="text" id="myTask" name="myTask" class="form-control border border-dark" value="" required /> </div> <div class="form-group mb-3"> <label>タスク詳細</label> <textarea class="form-control" id="myTaskDescription" name="myTaskDescription" rows="3"></textarea> </div> <div class="form-group mb-3"> <label>優先度</label> <select id="myTaskPriority" name="myTaskPriority" class="form-select form-select-lg mb-3"> <option>--選択してください<small>Please select.</small>--</option> <option value="1">高<small>High</small></option> <option value="2">中<small>Middle</small></option> <option value="3">低<small>Small</small></option> </select> </div> <div class="form-group mb-2"> <button id="todoDelete" class="btn btn-primary" type="button"> 削除<small>Delete</small> </button> <button id="backToTopPage" class="btn btn-secondary" type="button"> 一覧に戻る<small>Back to TaskList</small> </button> </div> </form> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Finishing HTML files, then make functions like asynchronous using Javascript and jQuery.

static/js/taskDelete.js

$(document).ready(function(){ //Get userId from session storage. const userId = sessionStorage.getItem("userId"); //let inputValueuserId = document.getElementById("userId"); //inputValueuserId.value = userId; //Click "BackToList" Button and it's process $('#backToTopPage').on('click',function(){ location.replace(`/sub?userid=${userId}`); }); /** * Get from URL query Param. */ //Get string query from URL param const queryString = window.location.search; //Create URL SearchParams object and analize it's sentences. const param = new URLSearchParams(queryString); //Get targetParam from variant data of param. document.getElementById("taskId").value = param.get("taskId"); //Input targetDat in variant value "taskId" const taskId = param.get("taskId"); $.ajax({ url:`/controllers/selectDeleteTodo?taskid=${taskId}`, method:"Get", success:function(response){ console.log(response); const registerId = document.getElementById("registerId"); registerId.value = response[0].Register.Id; const taskId = document.getElementById("taskId"); taskId.value = response[0].TaskId; const taskName = document.getElementById("myTask"); taskName.value = response[0].TaskName; const taskDescription = document.getElementById("myTaskDescription"); taskDescription.value = response[0].TaskDescription; const taskPriority = document.getElementById("myTaskPriority"); if(response[0].TaskPriority === "1"){ taskPriority.options[1].selected = true; } if(response[0].TaskPriority === "2"){ taskPriority.options[2].selected = true; } if(taskPriority.options[3].selected = true){ taskPriority.options[3].selected = true; } }, error:function(response){ console.log(response); } }); //The process which delete button is clicked. $('#todoDelete').on('click',function(e){ e.preventDefault(); //Get taskId const targetTaskId = document.getElementById('taskId').value; $.ajax({ url:`/controllers/taskDestroy?taskid=${targetTaskId}`, method:'DELETE', pcocessData:false, contentType:false, success:function(response){ console.log(response); }, error:function(response){ console.log(response); } }); }); });
Enter fullscreen mode Exit fullscreen mode

Make Backend Page

Completing frontend files, finally,I make server side.

Firstly,I make routing.
routers/router.go

package routers import ( "my-first-beego-project/controllers" "github.com/astaxie/beego" ) func init() { beego.Router("/", &controllers.MainController{}) //追加 beego.Router("/sub", &controllers.SubController{}) //beego.Router("/sub", &controllers.SubController{}) beego.Router("/:id", &controllers.ThirdController{}) beego.Router("/controllers/user", &controllers.UserController{}) beego.Router("/login", &controllers.LoginController{}) beego.Router("/controllers/login", &controllers.LoginController{}) beego.Router("/mytodo/addTodo", &controllers.TodoCreateController{}) beego.Router("/controllers/todoAdd", &controllers.TodoAddController{}) // GetTasksアクションのためのルーティング追加 beego.Router("/controllers/sub/getTasks", &controllers.SubController{}, "get:GetTasks") beego.Router("/mytodo/myTodoEdit", &controllers.TodoEditController{}) beego.Router("/controllers/selectEditTodo", &controllers.TodoEditController{}, "get:GetTargetEditTask") beego.Router("/controllers/updateTask", &controllers.TodoUpdateController{}) beego.Router("/mytodo/myTodoDelete", &controllers.TodoDeleteController{}) beego.Router("/controllers/selectDeleteTodo", &controllers.TodoDestroyController{}, "get:GetTargetTask") beego.Router("/controllers/taskDestroy", &controllers.TargetTodoDeleteController{}) }
Enter fullscreen mode Exit fullscreen mode

Then, make controllers
controllers/default.go

type TargetTodoDeleteController struct { beego.Controller } func (c *TargetTodoDeleteController) Delete() { taskId, err := c.GetInt("taskid") if err != nil { fmt.Println("TaskId is not accepted", err) c.Data["json"] = map[string]string{ "status": "Fail", "message": "TaskId is not accepted.", } c.ServeJSON() return } //Debug fmt.Println("Accepted TargeDeletetTaskId is ", taskId) //Generate Instance of Orm o := orm.NewOrm() var deleteTask models.Task //Initialize Register Task deleteTask.Register = &models.Register{} //Begin Transaction tx, err := o.Begin() _, err = tx.Delete(&models.Task{TaskId: int64(taskId)}) if err != nil { tx.Rollback() fmt.Println("Error Exception was happened.") c.Data["json"] = map[string]string{ "status": "Fail", "message": "Delete process was failed.", } c.ServeJSON() return } err = tx.Commit() if err != nil { fmt.Println("Transaction Commit was failed.") c.Data["json"] = map[string]string{ "status": "fail", "message": "Transaction Commit was failed.", } c.ServeJSON() return } c.Ctx.ResponseWriter.WriteHeader(200) c.Ctx.WriteString("Task delete was success") }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)