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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/410813.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openshift node NotReady kubelet http: TLS handshake error

文章目录 问题现象解决方法 问题现象 openshift 集群 node 节点 notready $ oc get node NAME STATUS ROLES AGE VERSION master1.ocp4.demo.com Ready control-plane,master 4d14h v1.29.76abe8a1 master2.ocp4…

什么是响应式?

表达式: 用于表达式进行插值,渲染到页面之中 语法: {{ 表达式 }} 案例 <template><h1>{{ arr[2] }}</h1><h1>{{ 9 5 }}</h1><h1>{{ "神奇" }}</h1> </template><script setup> import { ref } from vue; …

C++ | Leetcode C++题解之第375题猜数字大小II

题目&#xff1a; 题解&#xff1a; class Solution { public:int getMoneyAmount(int n) {vector<vector<int>> f(n1,vector<int>(n1));for (int i n - 1; i > 1; i--) {for (int j i 1; j < n; j) {f[i][j] j f[i][j - 1];for (int k i; k &l…

刚开始学习软件编程,如何克服编程学习中的挫折感?

编程学习之路往往充满挑战&#xff0c;即便是最优秀的程序员也会遇到挫折。克服挫折感的关键在于心态、方法和持续的学习。以下是一些通俗易懂的建议和案例&#xff0c;展示了如何在遇到编程难题时保持积极态度。 1. 接受挫折是成长的一部分 编程是一个不断学习和成长的过程。…

【Java设计模式】Bridge模式:在Java中解耦抽象与实现

文章目录 【Java设计模式】Bridge模式&#xff1a;在Java中解耦抽象与实现一、概述二、Bridge设计模式的别名三、Bridge设计模式的意图四、Bridge模式的详细解释及实际示例五、Java中Bridge模式的编程示例六、Bridge模式类图七、Java中何时使用Bridge模式八、Java中Bridge模式的…

【日记】今天实在太累了(436 字)

正文 今天的工作强度跟之前完全不是一个级别。能不能不要给我找这么多事做&#xff0c;我只想摸鱼摆烂。以后到下一个单位就说自己啥都不会好了&#xff0c;省得一天天全来找我。 忙碌程度上升了一个数量级&#xff0c;一天结束之后完全不想说话。 好想睡觉。 昨晚尝试完成年度…

【Python】Python 函数综合指南——从基础到高阶

文章目录 Python 函数综合指南1. 函数介绍1.1 什么是函数&#xff1f;1.2 定义函数示例&#xff1a;1.3 调用函数1.4 函数参数1.4.1 必需参数1.4.2 默认参数1.4.3 关键字参数1.4.4 可变长度参数 2. Python 内置函数2.1 字符串处理函数示例&#xff1a; 2.2 数学函数示例&#x…

大数据之数据湖Apache Hudi

一、Hudi框架概述 Apahe Hudi (Hadoop Upserts delete and Incrementals) 是Uber主导开发的开源数据湖框架&#xff0c;为了解决大数据生态系统中需要插入更新及增量消费原语的摄取管道和ETL管道的低效问题&#xff0c;该项目在2016年开始开发&#xff0c;并于2017年开源&#…

Memcached:单节点、集群案例;概念、工作原理

目录 案例前置知识点 Memcached 概念 部署场景 Memcached常用架构 流程 Memcached Memcached API 数据存储方式 数据过期方式 LRU Lazy Expiration Memcached缓存机制 Memcached路由算法 求余数hash算法 一致性hash算法 Memcached分布式 案例 单节点Memcach…

mysql数据库--表的操作

目录 1.创建表 2.查看表 3.修改表 对于表的重命名 更改某一列的属性 直接删除某一列 修改某一列的名称&#xff1a; 增加某一列 4.删除表 1.创建表 按照上次的那个创建表的操作&#xff0c;我们创建完成之后首先就是去把这个use一下&#xff0c;即进入到这个表里面去…

1+X 职业技能等级证书面向哪些人群介绍

日前&#xff0c;“大数据应用开发&#xff08;Python&#xff09;”职业技能等级证书已开放面向社会人员招生。 什么是1X职业技能等级证书&#xff1f; “1” 学历证书&#xff0c;代表专业&#xff0c;即学历、毕业 “X” 若干职业技能等级证书&#xff0c;是根据…

Linux远程管理—SSH协议

SSH协议是远程连接的安全性协议&#xff0c;该协议可以有效防止远程管理过程中的信息泄漏&#xff0c;是西安传输数据加密&#xff0c;能够防止DNS和IP欺骗&#xff0c;传输数据压缩&#xff0c;加快传输速度。 安全验证方法有口令验证和密钥验证两种实现手段&#xff0c;该协…

微信H5下载文件、微信浏览器无法下载文件解决方案

手机端的微信访问网页的时候&#xff0c;是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件&#xff0c;Android端在下载这些格式的文件时&#xff0c;可以唤起 ‘即将离开微信&#xff0c;在浏览器打开’ 提示 所以&#xff0c;根据手机微…

redis面试(二十四)Semaphore锁实现

Semaphore也是redis分布式锁支持的一种&#xff0c;同步组件 之前给大家的讲解的锁&#xff0c;基本上都是同时间只能一个客户端获取这个锁&#xff0c;然后做一些事情&#xff0c;处理完了以后释放锁 Semaphore&#xff0c;信号量&#xff0c;他作为一个锁机制&#xff0c;可以…

java-Mybatis框架02

1.#{} 和${}区别 #{} 是占位符&#xff0c;是采用编译方式向sql中传值&#xff0c;可以防止sql注入&#xff0c;如果往sql中传值&#xff0c;使用#{}${} 是将内容直接拼接到sql语句中&#xff0c;一般不用于向sql中传值&#xff0c;一般用于向sql中动态传递列名。区别&#xff…

OpenCV绘图函数(6)绘制椭圆函数ellipse()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 画出一个简单的或粗的椭圆弧或者填充一个椭圆扇形。 函数 cv::ellipse 使用更多的参数可以画出椭圆轮廓、填充的椭圆、椭圆弧或填充的椭圆扇形。…

ISO 26262中的失效率计算:SN 29500-3 Expected values for discrete semiconductors

目录 概要 1 基准条件下的失效率 2 失效率转换 2.1 失效率预测模型 2.2 电压应力系数 2.2.1 电压应力系数计算模型 2.2.2 电压应力系数计算 2.3 温度应力系数 2.3.1 温度应力系数计算模型 2.3.2 温度应力系数计算 2.4 漂移灵敏度系数 3 任务剖面应力系数 4 早期失…

【STM32】时钟体系

一、时钟体系 为什么需要时钟&#xff1f; 时钟可以为系统提供精确的定时&#xff0c;比如时间显示&#xff0c;定时器&#xff0c;pwm… 为芯片各功能模块提供工作势能,使能各组管脚工作&#xff0c;如果不使能&#xff0c;管脚无法工作 同步数据传输 给单片机提供一个时…

【使用 Python 进行截图的两种方法】

在 Python 中&#xff0c;可以使用 pyautogui 和 Pillow 进行截图 使用 pyautogui 进行截图时&#xff0c;其提供了方便的函数。例如&#xff0c;使用 pyautogui.screenshot() 函数可以获取整个屏幕的截图&#xff0c;该函数返回一个包含屏幕截图的图像对象。如果不想截取整个…

齐护【百度AI对话】编程系统文心一言大语音模型对话ESP32图形化Mixly编程Scratch编程Arduino

齐护【百度AI对话】编程系统 一、前言 ​ 在这个日新月异的时代&#xff0c;AI的触角已延伸至互联网、金融、医疗、教育等每一个角落&#xff0c;其影响力不容忽视。从日常中的智能推荐到医疗前沿的精准诊断&#xff0c;从定制化教育到智能化的投资策略&#xff0c;AI正以前所…