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
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>
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);
}
});
});
});
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{})
}
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")
}
Top comments (0)