后端框架
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 router
import "github.com/gin-gonic/gin"
func App() *gin.Engine {
r := gin.Default()
return r
}
初始化数据库：创建model目录，目录下创建init.go文件
package model
import (
"gorm.io/driver/mysql"
"gorm.io/gorm"
)
var DB *gorm.DB
func 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 main
import (
"analysis_sys/model"
"analysis_sys/router"
)
func main() {
//初始化gorm.db
model.Database()
r := router.App()
r.Run(":8081")
}
前端开发基本内容
src目录下创建router目录，目录下创建index.ts
//导入vue-router模块
import {createRouter,createWebHashHistory} from "vue-router"
import Login from "../views/Login.vue";
//定义路由
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>
