為什麼前端用ext.js呢，因為主要學習目的是做後臺管理類專案，目前此類專案都是單頁面應用，比較流行的是VUE.JS，這東西我折騰了4天，愣是環境都沒配置好，因為它需要npm各種支援庫什麼的，總是報錯。

後來才開始研究ext.js，因為我們公司有個做java的，對這東西有點熟悉，而且用它做過專案，所以，當我有問題的時候就能問下，當然，在整個開發過程中，我也踩了n多坑，滿眼淚啊。ext感覺不錯，不用學H5,CSS哈哈，只要js即可

使用beego和ext.js自動建立新專案，然後把ext.js建立的專案目錄拷貝到beego建立的專案目錄的static目錄下

此時，通過

http://127.0.0.1:8080/static/ext/index.html

可以正常開啟以下頁面

至此，開發環境準備完畢，開始進入開發階段。

先在此處新建 Userlist.js檔案，該檔案用來定義列表佈局

檔案具體內容如下

Ext.define('ext.view.user.UserList', {
    extend: 'Ext.grid.Panel',
xtype: 'userlist',
//應用自定義樣式 sass/src/panel/Panel.scss
ui : 'highlight',
frame : 'true',
requires: [
        'ext.store.User'
],
title: '使用者管理',
store: {
        type
 
: 'user'
},
columns: [
        { text: '姓名',  dataIndex: 'Id' },
{ text: '郵箱', dataIndex: 'Name', flex: 1 },
{ text: '電話', dataIndex: 'Phone', flex: 1 }
    ],
listeners: {
        select: 'onItemSelected'
}
});

這裡要注意的是，列名必須和後端定義的一致，其中

ext.store.User

就是我們馬上要建立的檔案。在如下位置建立檔案

該檔案負責和後端溝通，請求並接收資料，檔案內容如下

Ext.define('ext.store.User', {
    extend: 'Ext.data.Store',
storeId:'userStore',
alias: 'store.user',
autoLoad:true,
//pageSize : 10,
fields: [
        'Id','Name','Phone'
],
proxy: {
        type: 'ajax',
url : 'http://127.0.0.1:8080/user',
actionMethods : {
            read: 'POST' // Store設定請求的方法，與Ajax請求有區別
},
reader: {
            type: 'json',
rootProperty: 'data'// 資料(不配置的話無法接收資料)，返回的key為data
            //totalProperty : 'total'// 記錄數(不配置的話無法翻頁)，返回的key為totalRecord
}
    }
})

然後，修改main.js檔案，使包含

'ext.view.user.UserList',

並且修改

items: [{
    title: '首頁',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
        xtype: 'mainlist'
}]
}, {
    title: '使用者管理',
iconCls: 'fa-user',
items: [{
        xtype: 'userlist'
}]
}, {

就是為了讓使用者管理這部分，對應我們剛才定義的userlist介面佈局

至此，前段ext.js部分處理完成，下面開始處理後端beego部分內容

先修改app.conf檔案，設定資料庫連線相關資訊

mysqluser = "root"
mysqlpass = "123456"
mysqlurls = "127.0.0.1"
mysqldb = "blog"
mysqlport = "3306"

然後修改 route.go檔案，增加路由請求處理，

beego.Router("/user", &controllers.UserController{})

這裡的地址，要和前端USER.JS裡的對應。

然後增加控制層檔案，controllers下新增user.go檔案，內容如下

package controllers
import (
       "github.com/astaxie/beego"
."quickstart/models"
       "fmt"
)
type UserController struct {
       beego.Controller
}

func (this *UserController) Post() {
       page, _ := this.GetInt("page")
       limit,_ := this.GetInt("limit")
       status,_ := this.GetInt("status")
       srt := this.GetString("status")
       println("page",page)
       println("limit",limit)
       println("status",status)
       println("status",srt)
       _, _, alb := ListUser()

       fmt.Println("alb",alb)

       this.Data["json"] = map[string]interface{}{"data": alb}
       this.ServeJSON()
}

對了這裡有個問題，我的編輯器介面中GetInet等函式名都是紅色，但是編譯的時候不報錯，我用的是gogland，就是下面這樣

誰知道這是什麼情況，告訴我下。

這個檔案就是為了取出引數，然後利用ListUser來查詢資料，返回值是alb

但是返回給前端ext的時候，還必須再次封裝，前面加data，因為前端接收資料是這樣

reader: {
    type: 'json',
rootProperty: 'data'// 資料(不配置的話無法接收資料)，返回的key為data
    //totalProperty : 'total'// 記錄數(不配置的話無法翻頁)，返回的key為totalRecord
}

如果不封裝，前端就接收不到，我測試了多種封裝辦法，最後才發現這樣是正確的，一個大坑被踩平。

在這裡，我還發現個不理解的問題，beego的controllers層，似乎最後只能用

this.ServeJSON()

this.TplName = "album.tpl"

等兩種方式返回資料給前端，好像不用用 return XXXX 這種方式返回資料。

然後在 model目錄裡建立 user.go檔案，內容如下

package models

import (
       //"strconv"
       //"time"
"github.com/astaxie/beego/orm"
_ "github.com/go-sql-driver/mysql"
       "fmt"
)

type Usertest struct {
       Id       int
Name    string
Phone  string
}

func (this *Usertest) TableName() string {
       return "testuser"
}

func init() {
       orm.RegisterModel(new(Usertest))
}

func ListUser() (num int64, err error, alb []Usertest) {
       o := orm.NewOrm()
       var maps []orm.Params
       o.Raw("select id,name,phone from testuser").Values(&maps)
       fmt.Println(maps)

       qs := o.QueryTable("testuser")
       cond := orm.NewCondition()
       qs = qs.SetCond(cond)

       var albums []Usertest
       num, err1 := qs.Limit(100, 0).All(&albums)
       return num, err1, albums
}

這個檔案用來從資料庫查詢並返回資料，這裡有個坑

qs := o.QueryTable("testuser")

這個表名，必須和

func (this *Usertest) TableName() string {
       return "testuser"
}

這裡相同才行，否則一直提示找不到表。

然後還需要2個數據庫初始化的檔案，先在專案下，建立initial資料夾，然後建立init.go，內容如下

package initial

func init() {
       InitSql()
}

然後建立 sql.go

package initial

import (
       "fmt"
       "github.com/astaxie/beego"
       "github.com/astaxie/beego/orm"
_ "github.com/go-sql-driver/mysql"
)

func InitSql() {
       //資料庫連線初始化
user := beego.AppConfig.String("mysqluser")
       passwd := beego.AppConfig.String("mysqlpass")
       host := beego.AppConfig.String("mysqlurls")
       port, err := beego.AppConfig.Int("mysqlport")
       dbname := beego.AppConfig.String("mysqldb")
       if nil != err {
              port = 3306
}
       orm.Debug = true
orm.RegisterDriver("mysql", orm.DRMySQL)
       //orm.RegisterDataBase("default", "mysql", "root:@/blog?charset=utf8", 30)
orm.RegisterDataBase("default", "mysql", fmt.Sprintf("%s:%[email protected](%s:%d)/%s?charset=utf8", user, passwd, host, port, dbname))

}

這裡就是連線資料庫了

然後修改main.go

使包含資料庫初始化連線

_"quickstart/initial"

下面就是建立資料庫了，建一個blog的庫，增加以下表

CREATE TABLE `testuser` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) DEFAULT NULL,
  `phone` varchar(30) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

現在終於完成了，看看效果吧

我這樣從c/s結構轉b/s結構的開發人員，感覺這個b/s結構的層次好複雜，前端就需要3層，後端同樣是3層，完成一個功能，至少要修改6個檔案，也許等以後熟悉了，就會習慣了吧。