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 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模块
//导入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>
相关推荐
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
清风细雨_林木木6 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ6 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了7 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
神仙别闹8 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
是发财不是旺财9 小时前
跟着deepseek学golang--认识golang
开发语言·后端·golang
我的golang之路果然有问题9 小时前
快速上手GO的net/http包,个人学习笔记
笔记·后端·学习·http·golang·go·net
HuaHua的世界10 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元11 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js