vue+elementui+beego笔记 beego搭建api服务VUE打包好的文件部署让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文件中（解决跨领域问题）

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

2.连接mysql

 1 // init 初始化
 2 func init() {
 3     //启用Session
 4     beego.BConfig.WebConfig.Session.SessionOn = true
 5     InitDatabase()
 6 }
 7 
 8 // InitDatabase 初始化数据连接
 9 func InitDatabase() {
10     //读取配置文件，设置数据库参数
11     //数据库类别
12     dbType := beego.AppConfig.String("db_type")
13     //连接名称
14     dbAlias := beego.AppConfig.String("db_alias")
15     //数据库名称
16     dbName := beego.AppConfig.String("db_name")
17     //数据库连接用户名
18     dbUser := beego.AppConfig.String("db_user")
19     //数据库连接用户名
20     dbPwd := beego.AppConfig.String("db_pwd")
21     //数据库IP（域名）
22     dbHost := beego.AppConfig.String("db_host")
23     //数据库端口
24     dbPort := beego.AppConfig.String("db_port")
25 
26     dbCharset := beego.AppConfig.String("db_charset")
27     
28     orm.RegisterDataBase(dbAlias, dbType, dbUser+":"+dbPwd+"@tcp("+dbHost+":"+dbPort+")/"+dbName+"?charset="+dbCharset, 30)
29 
30     //如果是开发模式，则显示命令信息
31     isDev := (beego.AppConfig.String("runmode") == "dev")
32     //自动建表
33     orm.RunSyncdb("default", false, isDev)
34     if isDev {
35         orm.Debug = isDev
36     }
37 }

使用时需要注意:

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

3.beego与vue传数据

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

 1           let loginParams = {
 2             username: _this.loginForm.phoneNumber,
 3             password: _this.loginForm.password
 4           }
 5           console.log(loginParams)
 6           login(loginParams)
 7             .then(res => {
 8               _this.loading = false
 9               console.log(res)
10               // eslint-disable-next-line
11               if (parseInt(res.code) == 0) {
12                 console.log(res.code)
13                 let user = { ..._this.loginForm, ...res.data }
14                 sessionStorage.setItem('user', JSON.stringify(user))
15 
16                 _this.$router.push({ name: 'index', component: Home })//登陆成功，转向下一个网页
17               } else {
18                 _this.$message({
19                   showClose: true,
20                   message: res.msg,
21                   type: 'error'
22                 })
23               }
24             })
25             .catch(error => {
26               _this.loading = false
27               _this.$message({
28                 showClose: true,
29                 message: '用户名,密码错误',
30                 type: 'error'
31               })

其中login

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

其中post

 1 export function post (url, params) {
 2   axios.defaults.headers.post['Content-Type'] = 'application/json'
 3   return new Promise((resolve, reject) => {
 4     axios
 5       .post(url, JSON.stringify(params))
 6       .then(res => {
 7         resolve(res.data)
 8       })
 9       .catch(err => {
10         reject(err.data)
11       })
12   })
13 }

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

 1 func (this *UserController) Login() {
 2     var ob models.User
 3     json.Unmarshal(this.Ctx.Input.RequestBody, &ob)
 4     var isLogin bool = queryLoginValid(ob.Username, ob.Password)
 5     result := make(map[string]interface{})
 6     if isLogin {
 7         this.SetSession("isLogin", true)
 8         result["code"] = 0
 9         result["msg"] = "success"
10         result["data"] = "登录成功"
11 
12     } else {
13         result["code"] = 1
14         result["msg"] = "fail"
15         result["data"] = "登录失败，请重新登录"
16     }
17     this.Data["json"] = result
18     this.ServeJSON()
19 }