springboot框架课学习笔记--第三讲（上）创建菜单与游戏界面--拓展前端知识 Vue与JavaScript

这节课主要讲前端

什么是组件？组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可
组件化与模块化有什么区别？组件化和模块化的不同：
- 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
- 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

这节课需要实现几个页面？
- PK 页面
- Record 记录页面
- Ranklist 排行榜页面
- UserBots 页面
- 404 页面
页面的文件一般放到哪里？ Views 文件夹下面

\(JavaScript\) 常见错误？如果声明了一个变量却没有对其赋值，那么这个变量的类型就是 undefined。

Vue 的两个核心功能是什么？

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

什么是单页面应用？ https://developer.mozilla.org/en-US/docs/Glossary/SPA

SPA（单页应用程序）是一种 Web 应用程序实现，它仅加载单个 Web 文档，然后在要显示不同内容时通过 JavaScript API（如 XMLHttpRequest 和 Fetch）更新该单个文档的正文内容。
因此，这允许用户使用网站而无需从服务器加载整个新页面，这可以带来性能提升和更动态的体验，但有一些权衡缺点，例如 SEO、维护状态、实现导航和进行有意义的性能监控所需的更多努力。

router-link https://router.vuejs.org/zh/guide/

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

总结一下，通过 y 总学习到的两个响应式 API 。ref(), computed()。参考文档 https://cn.vuejs.org/api/reactivity-core.html

响应式 API ：核心

ref()
- 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
computed()
- 接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

复习 \(JavaScript\) , 什么是匿名函数？参考文档：https://zhuanlan.zhihu.com/p/366240343

没有名字的函数。普通的函数去掉函数名，然后在外面加上括号即可。
如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！

(function (){
    //此时会输出web-chubby
    console.log("web-chubby");
})()

复习 \(JavaScript\) , 什么是回调函数？参考文档 : https://zhuanlan.zhihu.com/p/113069353
回调函数的概念 : A 函数作为 B 函数的参数。在 B 函数完成执行后，A 开始执行。
需要明白两个重点

函数可以作为一个参数在传递到另一个函数中。
JS是异步编程语言。

JS 的遍历方式差异？

for (let x of arr) // of 遍历的是值
for (let x in arr) // in 遍历的是下标
什么是箭头函数？
JS 的匿名函数。绑定外层的 this 。

const g = [];
// 自己的笔误， this.walls 。导致数组为空
for (let r = 0; r < this.walls; r++) {
    g[r] = [];
    for (let c = 0; c < this.cols; c++) {
        g[r][c] = false;
        console.log(g[r][c]);
    }
}

JS 如何深度复制一个对象呢？

使用 JSON。 const copy_g = JSON.parse(JSON.stringify(g));

分界线。上面的内容是二刷更新，整理，总结。

本节课任务，实现游戏界面，页面导航栏
先写前端在写后端。从上往下，减少代码重构
导航栏专门拿出来，做组件
前端的框架，模仿一遍
格式：组件名称需要有两个大写字母
bootstrap 实现美工功能
记得导入 bootstrap 依赖，使样式发生变化
需要五个页面对战，对局列表，排行版，我的bots，不合法页面
../ 返回上级目录
写好页面添加到重定向router中

该怎么添加组件呢？使用component层实现，记得在App.vue中导入
router-view 自动根据网址变化变化规则在router中定义
container-fluid 组件靠左一些备注 container是一个自定义大小的容器
router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

自己的憨憨错误，在app.vue删掉router view
前后端不分离单页面的应用
记录router-link标签的使用 router-link :to="{name:'要重定向的标签名字'}"
card组件将一片区域框起来
**user bot 多一层目录记得../ **

active 设置选中高亮。首先取得页面使用 useroute。实时计算的函数 computed
**希望使用表达式属性前用冒号 :class v-bind: **
**游戏环境构建首先创造基类 AcGameObject **
**js中 of遍历的是值 in 遍历下标 for let obj of XXX **
小结：知识点很多，无论怎么样，都要花很长的时间去学习，去理解。无论是边看边敲代码，还是看一部份，敲一部分代码，都要耐心去理解
现在，自己的原则是，抓取自己需要的，理解框架流程。让自己可以简单持久
这节课的任务实现两个对象地图和墙
js的引用 import 。如果是default，不需要加括号
**设计地图，script设置变量，挂载 template **
创建地图 canvas。在pk页面上，设计不同的页面
MDN 搜索自己需要的html，js前置知识，如canvas
思路梳理 pk页面vue调用 playground。playground包含gameMap和其他。gameMap有vue与js，vue调用js

<template>
    <!-- 建立关联 -->
    <div ref="parent" class="gamemap">
        <canvas ref="canvas">
            <h1>xianyv map route </h1>
        </canvas>
    </div>
</template>

<script>
// 引入GameMap js 。构造 template 与 js的联系。引用需要vue的属性 ref
// 挂载后的入口 onmounted
import {ref,onMounted} from 'vue';
import {GameMap} from "@/assets/scripts/GameMap.js";
export default {
    setup(){
        let parent= ref( null );
        let canvas= ref( null );
        // 当挂载后需要完成的操作
        onMounted(()=>{
            // new一个对象  传参数
            new GameMap(canvas.value.getContext('2d'),parent.value)
        
        });

        return {
            parent,
            canvas
        }
    }
}
</script>

<style scoped>
    div.gamemap{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

map.js 问题所在。换成别人的就没问题。玄学问题，this.cols显示Nan

import { AcGameObject } from "./AcGameObject";
// 类名定义错误。晕。是GameMap
export class Game extends AcGameObject{
    // 引入画布  画布的父元素  控制画布的大小
    constructor(ctx,parent){
        // 先执行基类的构造函数
        super();

        this.ctx=ctx;
        this.parent=parent;
        this.L=0;

        this.rows=13;
        this.clos=13;
    }
    
    start(){

    }

    update_size(){
        // 辅助函数  更新边长
        this.L=Math.min(this.parent.clientWidth/this.cols,this.parent.clientHeight/this.rows)
        console.log("xianyv test map " )
        // 求画布的长宽  小正方形的长度乘以列数 行数
        this.ctx.canvas.width=this.L*this.cols;
        this.ctx.canvas.height=this.L*this.rows;
    }

    update(){
        this.update_size();
        this.render();
    }
    // 渲染  把每一帧画到地图上去
    render(){
        this.ctx.fillStyle='green';
        this.ctx.fillRect=(0,0,this.ctx.canvas.width,this.ctx.canvas.height)
    }
}

注意canvas 的坐标系
import {AcGameObject} from "@/assets/scripts/AcGameObject"
https://www.cnblogs.com/lyls/p/7852350.html import加不加大括号的区别

最后总结，多敲多练，抄一遍差不多就能理解大致的思路流程，就能学会了。关闭vue ctrl c

posted @ 2022-12-29 21:17 安半愚阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

安半愚

springboot框架课学习笔记--第三讲（上） 创建菜单与游戏界面--拓展前端知识 Vue与JavaScript

什么是单页面应用？ https://developer.mozilla.org/en-US/docs/Glossary/SPA

router-link https://router.vuejs.org/zh/guide/

响应式 API ： 核心

公告

springboot框架课学习笔记--第三讲（上）创建菜单与游戏界面--拓展前端知识 Vue与JavaScript

响应式 API ：核心