springboot 框架课学习笔记：第二讲--配置git环境与项目创建

前言：介绍这门课的学习方法，项目驱动。通过做项目来实现我们要学习的方法。

项目架构

King Of Bots

  • PK
    • 匹配界面 （微服务）
    • 实况直播 (WebSocket) http连接与WebSocket连接有什么区别？
    • 真人PK 播放互动界面
  • 对战列表
    • 录像回放
  • 排行榜
    • Bot 列表
  • 用户中心
    • 注册
    • 登录
    • 我的 Bot
    • Bot 的对战记录

  • 接下来介绍一下 git ，git 有什么功能？

    • 存档。可以保存历史版本。
    • 多人开发，同步代码。

  • 该怎么初始化 git ？ git init

  • git status 什么意思？ 查看有多少文件没有被收录到仓库里面

  • git add . 什么意思？ 表示将所有没有被收录的文件收录到仓库里

  • 如何保存当前版本？ git commit -m "创建项目"

  • 如何配置新建项目？ (粘贴快捷键 shift + insert)

    • git config user.name "your name"
    • git config user.email "your email"
    • 推送现有文件夹
      • git remote add origin git@git.acwing.com:anbanyv/kob_2.0.git
      • git push -u origin master 第一次执行会提醒一些信息。键入 yes 即可。如果提示需要输入密码，说明没有将生成的秘钥传入AcGit

  • 如果有两台电脑，如何同步这两台电脑？git clone 链接地址

  • 什么是 MVC 模式？ 后端函数可视作 C (controller) ，返回用户信息的控制器。V (view) 视图，html 页面。M (Model) 数据库。
  • 什么是controller注解？
    • @Controller : 加在类上面的注解，使得类里面的每个方法都返回一个视图页面。
    • @RestController ：从Spring 4.0以后产生的，用来将json/xml数据发送到前台页面，而不是返回视图页面。
      它相当于@Controller和@ResponseBody。
  • static 目录一般存放哪些文件？ css,js,image
  • 前端如何取得后端数据？ 通过$.ajax
  • 如何解决跨域问题？ 后端添加 corsConfig ，告诉服务器，这个端口可以被其他域名访问。
  • vue 项目报错 Cannot read property 'version' of undefined ？ 解决方法如下
    • 删除当前项目的node_modules，然后重新npm install下载依赖包
      • 如果还是有问题 控制台卸载eslint ： npm uninstall eslint --save
      • 再去package.json文件里删除"@vue/cli-plugin-eslint": "~4.5.0"
  • vue语法：export是什么，import是什么？
    • export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。
    • import就是在一个模块中加载另一个含有export接口的模块， import就是导入。

客户端--用户的角度，client
服务器端--server
实现三个模块。

  • 后端 backend。使用spring boot实现。对接mysql，redis，硬盘，微服务
  • 前端 web。
  • 前端 acapp。
    客户端发出请求url。服务器端回应请求
    前后端不分离
    连接请求--函数调用
    thymeleaf--前后端不分离

使用idea踩坑--创建springboot项目，注意选择Java 8，插件版本要3.0以下


staic 目录存放css，js文件

前后端不分离 向后端访问一个链接，后端进行解析链接。
前后端分离，后端不返回html页面，而是返回数据
RequestMapping 注解，形成层次，定位需要的页面

前端 使用vs code。关键是学习怎么去用，怎么去模仿

如何安装js与vue
打开vue ui后，创建web项目，安装插件，安装依赖
vue创建新项目，把git初始化删除，默认vue3
**vue文件构成template,script,style **
**
将后端的结果取出来 访问后端链接 用.ajax
解决跨域问题 告诉后端资源允许其他域访问

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

**进行赋值操作 记得是复制value属性 bot_name.value=resp.name; **

<template>
  <div>
    hello xianyv
    <!-- script 函数return的结果在这里调用 -->
    <div>Bot昵称: {{ bot_name }}</div>
    <div>Bot战力: {{ bot_rating }}</div>
  </div>
</template>

<script>
import $ from "jquery"
// import vueConfig from "vue.config";
// import 一个 ref 从vue。用作定义变量
import { ref } from 'vue';
    export default{
      name:"app",
      // setup 函数入口
      setup:() =>{
        let bot_name=ref("");
        let bot_rating=ref("");
        $.ajax({
          // 地址
          url:"http://localhost:3000/pk/getbotinfo/",
          // 请求类型
          type:"get",
          // 成功返回resp，后台查看resp
          success: resp=> {
              console.log(resp+"hello xianyv");
              bot_name.value=resp.name;
              bot_rating.value=resp.rating;
          }
        });
        return {
          bot_name,
          bot_rating
        }
      }
    }
</script>

background-image: url("@/assets/bg.png"); @ 表示根目录
后端 存放函数的地方
setup 组件的入口，主函数
项目骨架包含两个vue项目 acapp与web。web安装router插件，vuex插件，两个依赖：bootstrap，jquery
acapp安装vuex插件
vuex插件 相当于多个组件，维护一个数据
build 打包文件。serve 调试环境
view文件夹写页面。router 写路由。components 存储组件

posted @ 2022-12-27 22:21  安半愚  阅读(139)  评论(0)    收藏  举报