当前位置: 首页 > news >正文

kob配置git环境与项目创建

配置git环境

1.安装Git Bash

如果是使用Linux和mac可以跳过第一步操作,如果使用windows需要安装Git Bash:Git Bash传送门安装过程中所有配置按照默认即可;

2.配置Git环境

2.0 创建秘钥:使用命令:“ssh-keygen”生成秘钥,然后进入秘钥所在目录cd .ssh ;查看当前目录下有哪些文件,其中在这里插入图片描述其中id_rsa是私钥,id_rsa.pub是公钥,使用cat命令查看公钥内容,将其复制到你的github/gitee仓库中的ssh秘钥中即可完成秘钥的设置;注意:私钥不要给别人查看,一旦被别人查看过,要重新生成秘钥

2.1 初始化git仓库
在你创建的项目的文件夹中右键选择git bash;输入命令:git init,即可完成初始化;此时你会发现多了一个.git文件夹;

在这里插入图片描述
如果看不到这个文件夹,可以选择点击上方的“查看”按钮,然后勾选“显示隐藏文件”;

2.2 创建一个readme.md文件
在git bash中输入命令:vim readme.md,然后进入命令行模式,输入"wq"保存文件并退出;此时会发现当前文件夹下出现了readme.md文件在这里插入图片描述

2.3 将readme.md加入到Git仓库中;首先输入命令“git status”(查看当前文件夹下有多少个文件没有被收录到git仓库里边)在这里插入图片描述显示有readme.md(标红文件)没有被收录到git仓库中,输入命令:“git add .”(表示将当前所有未收录到git仓库中的所有文件都收录到仓库中);此时会发现如下已收录至git仓库中;在这里插入图片描述

2,4保存当前版本:“git commit -m “创建项目”

2.5 与云端仓库同步:打开GitHub/Gitee/GitlLab(Acwing的一个托管代码的平台,功能与Github/Gitee类似;
创建一个项目,注意不要勾选让它自动给你进行初始化配置,然后按照他给出的git的提示进行操作;中间的一部分如果已经生成过就不需要再额外生成;最后上传仓库内容:命令: git remote add origin git@git.acwing.com:Morissa/kingofbot.git;然后输入命令: git push -u origin master(将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了)。

至此,git环境已经基本配置完毕,接下来的操作就是在本地进行了;

3.项目创建

创建一个项目,点击Spring Initializr然后按照如图所示进行创建即可在这里插入图片描述
点击“下一步”;
然后依赖项选择Spring Web ;模板引擎选择“Thymeleaf";然后点击下一步;此时项目创建完毕;

4.创建后端

4.1 添加pk模块
每个模块的链接都应该在某一个对应的目录下,转换为链接,在添加软件包之后再在indexController类中添加@Controller 然后"tab"会自
在这里插入图片描述动生成import ,

4.2 添加父目录链接和html文件

@RequestMapping("/pk/") //@RequestMappint("目录")就是你需要实现的目录要记得加上这句;

添加目录之后,比如想要用函数返回一个页面,那么,需要先创建一个页面,这个页面应该放在resource目录下边,比如要创建的有关pk模块的链接要放在resource目录下的pk子目录下,在/resource/templates下新建pk目录,然后在这个目录下创建index.html文件
在这里插入图片描述为了方便测试,在html文件中添加代码

<h1>hell world<h1>

然后在在这里插入图片描述下添加代码

@RequestMapping("index/")
    public String index(){
        return "/pk/index.html";
    }

然后运行代码,运行成功之后,在浏览器中输如==“http://localhost:8080/pk/index/”==,刷新之后会呈现如下效果:
在这里插入图片描述

这一步链接的含义是,访问这个链接后,会寻找这个链接所在的目录:在这里插入图片描述先寻找"/pk/"然后寻找
index/找到一个函数返回这个链接的内容就是这个"index.html"的页面;

4.3 添加图片
添加图片的一般步骤:
1.在resource文件夹下的static下的新建目录image(static下通常为css,js,和image);在这里插入图片描述然后将你复制的图片粘贴到static.image下;
在html文件中添加如下代码:

<div style="text-align: center">//设置图片的位置居中
    <img src="/image/img.png",alt="">//设置图片的路径,路径src从static后一级目录开始写起
</div>

然后重新运行即可;网页刷新后的效果:
在这里插入图片描述

4.4 加入到git仓库中,
4.4.1 在kob项目目录下打开git bash;
4.4.2 git status 查看当前目录下有哪些未添加的文件;
4.4.3 git add . 将当前目录下的所有文件添加到git仓库中;
4.4.4 git commit -m “创建后端” 保存当前版本;
4.4.5 git push 将更新后的内容推送至云端;

5.创建前端

5.1 创建前端需要安装nodejs

5.2 在创建前端项目,点击创建,然后切换文件夹到你的项目的所在文件夹,点击创建
在这里插入图片描述点击创建项目,然后起名,不要勾选“初始化git仓库”

在这里插入图片描述

选择vue3
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

建立完项目之后,在vscode中”打开文件夹”;
然后在vue 中点击任务,然后运行,然后输出,点击第一个链接,8080端口
在这里插入图片描述
在这里插入图片描述
会有如上图页面;会发现多了“#/”,将如图文件中的createWebHashHistory中的hash去掉;
在这里插入图片描述
保存后,会发现在这里插入图片描述
地址中的"#/"已经被去掉了;

删除无用文件,比如在这里插入图片描述在这里插入图片描述以及app.vue中的选中区域
在这里插入图片描述
在这里插入图片描述
测试一下:
在这里插入图片描述

相关文章:

  • moment.js根据时间戳计算与当前时间相差多少天
  • VS2017编译gsf/surf/mbio —E0020 未定义标识符 “F_OK“
  • 【完美解决】Github action报错remote: Write access to repository not granted.
  • vulnhub之PRIME (2021): 2
  • 【C++修炼之路】C++入门(下)
  • 【Android Studio】【Flutter】Android Studio下Flutter环境搭建记录
  • Vue3 中使用组合式API替换mixins,达到代码复用并解决隐患
  • 规则引擎-drools-3.3-drl文件构成-rule部分-条件Condition
  • 企业怎么能上百度百科词条,创建百科方法
  • 3-1多线程-线程池
  • Linux-远程管理命令
  • mysql:数据库调优策略,sql调优
  • HighCharts结构及详细配置(中文对比)
  • 面试之 Python 框架 Flask、Django、DRF
  • 2023年FOF/MOM基金研究报告
  • 在CentOS-6.9配置apache服务(1)---基于个人主页的身份验证
  • End-to-End Entity Resolution for Big Data: A Survey Matching部分学习笔记
  • 自动驾驶感知——红外传感器
  • stream操作常用API 示例详解
  • IB EE 学习干货,从选学科/课题/写稿/对稿/交稿几个方面入手分享
  • 电加热油锅炉工作原理_电加热导油
  • 大型电蒸汽锅炉_工业电阻炉
  • 燃气蒸汽锅炉的分类_大连生物质蒸汽锅炉
  • 天津市维修锅炉_锅炉汽化处理方法
  • 蒸汽汽锅炉厂家_延安锅炉厂家
  • 山西热水锅炉厂家_酒店热水 锅炉
  • 蒸汽锅炉生产厂家_燃油蒸汽发生器
  • 燃煤锅炉烧热水_张家口 淘汰取缔燃煤锅炉
  • 生物质锅炉_炉
  • 锅炉天然气_天燃气热风炉