golang+beego+ext.js+mysql学习第一课

为什么前端用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:%s@tcp(%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个文件，也许等以后熟悉了，就会习惯了吧。