vue 项目新建+ go kratos 项目新建 说明
项目地址
https://gitee.com/vita__chaochao/vue-demo
https://gitee.com/vita__chaochao/kratos-demo
1. vue-cli创建前端项目
参考链接：https://blog.csdn.net/weixin_44882488/article/details/124220864
博客介绍的很详细，还介绍了创建出的项目每个目录的作用
yarn 安装: https://blog.csdn.net/LizequaNNN/article/details/122960124
官网: https://cli.vuejs.org/zh/guide/installation.html
下面是我的实践效果
1.1创建项目
相关环境的安装可看参考上面链接
项目目录介绍
1.2 安装element-ui
1.3配置element-ui按需导入
参考链接：
https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5
安装组件
配置文件
1.5配置图标
1.6启动
1.7配置axios用于后端请求
参考链接：
axios配置：https://blog.csdn.net/qq_43647821/article/details/123127824
跨域问题处理：https://blog.csdn.net/weixin_67585820/article/details/123526861
1.7.1安装axios
npm install axios –legacy-peer-deps
1.7.2配置
1.8调整布局
1.9左侧点test菜单，显示test页面中的内容
新建一个test view
新增一个route
页面查看
1.10我的项目在你本地怎么跑起来
1.进入到vuedemo目录，
2.执行yarn install –legacy-peer-deps 安装依赖
3.执行yarn serve启动
1. kratos创建go后端项目
2.1go 环境准备
brew install go
配置如下内容
gopath自己创建下如下两个目录
2.2gin和kratos的区别
gin框架类似于python的flask，自由度很高，但是很多非业务逻辑需要自己实现。
kratos框架类似于python的django，框架帮我们约束好每个目录的用途，很多非业务逻辑框架帮我们实现，我们只需要专心写业务代码就好了。
1.gin&kratos: 服务的启动和停止
gin
kratos
2.gin&kratos: http和grpc的结合
gin
同一个ListAppDept，grpc接口和http接口需要写两遍
kratos
2.3gin demo
gin官网地址为：https://gin-gonic.com/zh-cn/docs/quickstart/
2.4kratos demo
官网：https://go-kratos.dev/docs/
项目结构介绍：https://go-kratos.dev/docs/intro/layout
安装kratos
go install github.com/go-kratos/kratos/cmd/kratos/v2@latest
创建项目代码
下载依赖
IED上启动
访问测试
2.5kratos新增一个service，写我们自己的接口
2.5.1新增proto
kratos proto add api/server/server.proto
查看proto默认为我们生成的内容
修改为自己的接口
根据proto生成.go
kratos proto client api/server/server.proto
生成我们的入口程序
kratos proto server api/server/server.proto -t internal/service
在http中注册新的service
wire中注入下
删除wire_gen,重新生成
安装wire使用如下命令
执行 go get github.com/google/wire/cmd/wire 命令
执行 go install github.com/google/wire/cmd/wire@latest命令
2.5.2完善完整demo
controller入口处
biz业务逻辑处
data数据获取
逻辑写完了，可以生成代码了
重新启动，接口测试
3. 前端对接刚刚kratos中新增的接口
页面查看
