go+gin+vue入门

后端框架

1、安装go、goland
2、创建空项目
3、下载要用的包：命令行输入go get -u github.com/xxxx
4、安装mysql数据库，使用navicat创建数据库。
5、按照项目框架搭建目录、文件、代码：如router、model…
6、运行测试，go run main.go

前端框架

1、安装node.js、WebStorm
2、生成前端项目：后端项目同级目录cmd执行 npm create vite@latest
3、将项目导入开发工具Webstorm
4、安装依赖：webstorm命令行执行 npm install
5、运行测试：npm run dev
6、导入vue-router4：npm install vue-router@4
7、按照项目框架搭建目录、文件、代码：如router、views…

后端开发基本内容

初始化路由：创建router目录，目录下创建app.go文件

package routerimport "github.com/gin-gonic/gin"func App() *gin.Engine {r := gin.Default()return r
}

初始化数据库：创建model目录，目录下创建init.go文件

package modelimport ("gorm.io/driver/mysql""gorm.io/gorm"
)var DB *gorm.DBfunc Database() {dsn := `root:yeanhoo@tcp(127.0.0.1:3306)/analysis_sys?charset=utf8mb4&parseTime=True&loc=Local`db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{DisableForeignKeyConstraintWhenMigrating: true,})if err != nil {panic(err)}DB = db
}

项目根目录创建main.go文件

package mainimport ("analysis_sys/model""analysis_sys/router"
)func main() {//初始化gorm.dbmodel.Database()r := router.App()r.Run(":8081")
}

前端开发基本内容

src目录下创建router目录，目录下创建index.ts

//导入vue-router模块
//导入vue-router模块
import {createRouter,createWebHashHistory} from "vue-router"//定义路由
const routers = [{path:"/",name:"login",meta: {title:"应急响应单兵应用"},component: ()=> import("../views/Login.vue")}]//创建路由实例并传递router配置
const router = createRouter({history: createWebHashHistory(),routes:routers})export default router

main.ts中导入index.ts，进行路由的定义和注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')

src目录下创建views目录，目录下新建vue组件，Login.vue

<script setup lang="ts"></script><template>
<h1>登录页面</h1>
</template><style scoped></style>

修改src目录下app.vue，用于显示与当前路由匹配的视图组件。

<script setup lang="ts"></script><template>
<router-view></router-view>
</template><style scoped></style>