配置git环境与项目创建

概览

使用前后端分离的方式 完成本项目

前端使用vue3完成 后端使用springboot完成

• 项目框架（按页面）

• 项目框架（按架构）

拓展知识点：

    关于前后端分离的更多内容：<a href="/vault/2-Learning/05-%E9%A1%B9%E7%9B%AE/04-SpringBoot%E6%A1%86%E6%9E%B6%E8%AF%BE/02-%E9%85%8D%E7%BD%AEgit%E7%8E%AF%E5%A2%83%E4%B8%8E%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA/02-%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BBor%E4%B8%8D%E5%88%86%E7%A6%BB%EF%BC%9F">前后端分离or不分离？</a>

    架构知识点扫盲：<a href="/vault/2-Learning/05-%E9%A1%B9%E7%9B%AE/04-SpringBoot%E6%A1%86%E6%9E%B6%E8%AF%BE/02-%E9%85%8D%E7%BD%AEgit%E7%8E%AF%E5%A2%83%E4%B8%8E%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA/01-%E5%85%B3%E4%BA%8E%E6%9E%B6%E6%9E%84">关于架构</a>

• 技术栈：

技术	说明
SpringBoot	容器+MVC框架
mysql	关系型数据库
JWT	登录支持
SpringSecurity	验证和授权框架
Redis	缓存数据库
Lombok	简化对象封装工具
MyBatisPlus	ORM框架
MicroService（SpringCloud）	微服务

• 项目（游戏）设计逻辑：

环境配置与项目创建

主文件夹与仓库连接

创建项目文件夹 /kob

创建仓库 git init

创建readme文件 vim readme.md

git.acwing中创建远程仓库

本地仓库添加用户配置 （不用全局）

C:\code\java\kob>git config  user.name "wei zhou"

C:\code\java\kob>git config  user.email "zv041118@163.com"

编辑User目录下.ssh/config

Host git.acwing.com
    User git
    HostName git.acwing.com
    IdentityFile C:/Users/zv041/.ssh/wei_01.pem
    IdentitiesOnly yes

配置.gitignore 忽略无关项目的中间文件再推送 C:\code\java\kob.gitignore

# 编译输出文件
*.class
*.jar
*.war
*.ear

# Maven 和 Gradle 的构建目录
/build/
/target/

# 忽略 IntelliJ IDEA 文件
/.idea/
/*.iml

# 忽略 VS Code 工作区文件
.vscode/

# 忽略 Eclipse 的项目文件
.project
.classpath
.settings/

# 忽略 MacOS 系统生成的文件
.DS_Store

# 忽略 Windows 系统生成的文件
Thumbs.db
ehthumbs.db
desktop.ini

# 忽略日志文件
*.log

# 忽略临时文件
*.tmp
*.swp

# 忽略 Java 的缓存目录
*.class
*.jar

# 忽略环境配置文件
*.env

# 忽略 Gradle 的缓存文件
.gradle/
/build/

# 忽略 Maven 的输出文件
/target/

# 忽略 IntelliJ IDEA 文件
.idea/
*.iws
*.iml

# 忽略 NetBeans 文件
/nbproject/private/
/build/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

# 忽略 JRebel 重载缓存
.rebel/

# 忽略 JetBrains IDE 编译生成文件
/out/

# 忽略构建脚本生成的二进制文件
*.exe
*.dll
*.so
*.out

# 忽略其他不需要提交的临时文件
*.pid
*.pid.lock

连接远程仓库并推送

git remote add origin git@git.acwing.com:Zwww/kob.git
git status
git add .
git status
git commit -m "readme commit"

git push -u origin master

创建后端项目

环境

nmd 创建的时候用的22 结果换个电脑22说版本过高 傻逼环境

显示在8080端口运行了 （文件标红是因为未被git收录 没关系）

浏览器打开localhost:8080 出现以下界面即为成功

backend创建

前面提到 在springboot的后端主要是用来实现一个函数的 一个链接对应一个函数 负责给用户返回一个页面

那么这个函数应该写在哪 ——新开软件包controller 用于存放所有的后端函数

我们的页面设计有四大类 pk、对局记录、排行榜、用户中心

一个板块对应一个软件包 每个板块的页面应该在对应的包里面

以pk模块为例

示例：

前后端不分离写法

要想将函数变成链接函数的话 加上注解：@Controller

指定页面的父级目录：@RequestMapping("/pk/")

创建测试html

指定返回的页面

让pk/index/返回 刚刚建立的 templates/pk/index.html 页面

编辑 com/zwnsyw/backend/controller/pk/IndexController.java

package com.zwnsyw.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/pk/")
public class IndexController {

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

访问http://localhost:8080/pk/index/ 即可查看

另外关于图片的索引： 直接放在resources下 static下新建image文件夹 然后用/image/ 进行索引

所以其实就是 pk模块 就访问http://localhost:8080/pk 之后pk模块下的所有页面 什么主页 对战信息 就一一对应在http://localhost:8080/pk/index/、http://localhost:8080/pk/message/

然后其他模块也以此类推

如果是前后端不分离的话 以这种逻辑就可以直接编写代码了

前后端分离写法

前后端分离的话 返回的就不是一个页面 而是一些信息 注解也由@Controller变为@RestController

package com.zwnsyw.backend.controller.pk;

import org.springframework.web.bind.annotation.RestController;

@RestController
public class BotinfoController {

}

就这样成功返回一个字符串

同理也可以返回链表、字典等等数据信息

package com.zwnsyw.backend.controller.pk;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/pk/")
public class BotinfoController {

    @RequestMapping("getbotinfo/")
    public List<Map<String, String>> getBotInfo(){
        List<Map<String,String>> list=new LinkedList<>();
        Map<String,String> bot1=new HashMap<>();
        bot1.put("name","tiger");
        bot1.put("rating","1500");

        Map<String,String> bot2=new HashMap<>();
        bot2.put("name","apple");
        bot2.put("rating","1200");

        list.add(bot1);
        list.add(bot2);

        return list;
    }
}

修改端口

在application.properties加上server.port=3000

创建前端项目

环境

设置镜像地址,安装vue （前提先下好node,js）

node,js直接官网安装 Win+R输入cmd, 输入node -v确认安装上了

设置镜像地址，安装vue

npm config set registry https://registry.npmmirror.com #设置镜像地址
npm install -g cnpm
cnpm install -g @vue/cli
vue -V #检查vue版本，确认安装上了注意是大写V
vue ui #如果上面显示版本号了就可以启动了

web创建

点击创建 找到之前创建的kob项目文件夹 在此新建项目

添加插件

安装依赖 jquery、bootstrap

配置完如下：

运行

得到一个地址： http://localhost:8080/

得到以下界面即成功

acapp创建

左上角 项目管理器 同理再创建一个项目 acapp

这里插件只要装 vue-x 路由不用装

依赖也不需要装

直接serve 运行

至此项目文件夹构建完成

搭建项目骨架

web

开启web服务

进入web服务给出的http://localhost:8080/#/

发现报错 打开vscode

修改本行

删除不必要的代码

web\src\router\index.js 修改为 （删除两个hash）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这样以来浏览器中的网址就可以删除/#了

删除

web\src\views\AboutView.vue

web\src\views\HomeView.vue

web\src\components\HelloWorld.vue

修改web\src\App.vue 为 （删除css和