vue+elementui+beego笔记

vue建立新项目：https://www.cnblogs.com/wx1993/p/6136892.html

beego建立新项目：beego搭建api服务

 vue添加elementui：https://blog.csdn.net/chen_vae/article/details/83543552

beego项目解决跨域 (beego做后台，vue做前端)

VUE打包好的文件部署让beego实现静态文件访问，如何用根目录来访问静态文件？

 

前后端数据交互：

Beego中前后端数据是如何实现交互的，Get|Struct|JSON / Request Body

beego post请求获取request body参数

Go的json解析：Marshal与Unmarshal

 

1. 下段代码放到main.go文件中（解决跨领域问题）

func init() {
  // 这段代码放在router.go文件的init()的开头
  beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
    AllowOrigins: []string{"http://" + beego.AppConfig.String("front_end_domain") + ":" + beego.AppConfig.String("front_end_port")},
    AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
    AllowHeaders: []string{"Origin", "Authorization", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
    ExposeHeaders: []string{"Content-Length", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
    AllowCredentials: true,
  }))
}

2.连接mysql

// init 初始化
func init() {
    //启用Session
    beego.BConfig.WebConfig.Session.SessionOn = true
    InitDatabase()
}

// InitDatabase 初始化数据连接
func InitDatabase() {
    //读取配置文件，设置数据库参数
    //数据库类别
    dbType := beego.AppConfig.String("db_type")
    //连接名称
    dbAlias := beego.AppConfig.String("db_alias")
    //数据库名称
    dbName := beego.AppConfig.String("db_name")
    //数据库连接用户名
    dbUser := beego.AppConfig.String("db_user")
    //数据库连接用户名
    dbPwd := beego.AppConfig.String("db_pwd")
    //数据库IP（域名）
    dbHost := beego.AppConfig.String("db_host")
    //数据库端口
    dbPort := beego.AppConfig.String("db_port")

    dbCharset := beego.AppConfig.String("db_charset")
    
    orm.RegisterDataBase(dbAlias, dbType, dbUser+":"+dbPwd+"@tcp("+dbHost+":"+dbPort+")/"+dbName+"?charset="+dbCharset, 30)

    //如果是开发模式，则显示命令信息
    isDev := (beego.AppConfig.String("runmode") == "dev")
    //自动建表
    orm.RunSyncdb("default", false, isDev)
    if isDev {
        orm.Debug = isDev
    }
}

使用时需要注意:

orm.Debug = true
o := orm.NewOrm()
3 o.Using("default") // 默认使用 default
query := o.QueryTable(tablename)

3.beego与vue传数据

vue向beego发起请求，并得到beego中的结果（res）

          let loginParams = {
            username: _this.loginForm.phoneNumber,
            password: _this.loginForm.password
          }
          console.log(loginParams)
          login(loginParams)
            .then(res => {
              _this.loading = false
              console.log(res)
              // eslint-disable-next-line
              if (parseInt(res.code) == 0) {
                console.log(res.code)
                let user = { ..._this.loginForm, ...res.data }
                sessionStorage.setItem('user', JSON.stringify(user))

                _this.$router.push({ name: 'index', component: Home })//登陆成功，转向下一个网页
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'error'
                })
              }
            })
            .catch(error => {
              _this.loading = false
              _this.$message({
                showClose: true,
                message: '用户名,密码错误',
                type: 'error'
              })

其中login

export const login = params => post(domain + ':' + port + '/login', params)

其中post

export function post (url, params) {
  axios.defaults.headers.post['Content-Type'] = 'application/json'
  return new Promise((resolve, reject) => {
    axios
      .post(url, JSON.stringify(params))
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

beego接收vue请求，并将结果发送给vue

func (this *UserController) Login() {
    var ob models.User
    json.Unmarshal(this.Ctx.Input.RequestBody, &ob)
    var isLogin bool = queryLoginValid(ob.Username, ob.Password)
    result := make(map[string]interface{})
    if isLogin {
        this.SetSession("isLogin", true)
        result["code"] = 0
        result["msg"] = "success"
        result["data"] = "登录成功"

    } else {
        result["code"] = 1
        result["msg"] = "fail"
        result["data"] = "登录失败，请重新登录"
    }
    this.Data["json"] = result
    this.ServeJSON()
}