接下来的这一部分，是实现acapp端。将前端做出适应性修改，以能够适应acapp窗口。

因为这整个项目是一个前后端分离的项目，同样的一个后端可以有多个前端

实现acapp端，其实与实现上述的前端是类似的。
因为在前端项目完成后，打包说白了就是些css与js文件，在打包时可以设置是打包成多少个css与js文件。
任何一个能调用这两类文件的地方，都可以去运行代码(App,小程序，浏览器)

要想能够适应不同页面的不同窗口，就需要对前端进行重新的规划与布局。
另外在上线的时候，将应用打包成两个文件，在上线acapp端的时候，填下css与js地址与类名。

项目地址地址

实现

一.铺垫:

1.首先要先检查下vue版本

如果vue版本较低，会导致在开发中出现问题。
输入:vue-version查看vue版本
如果版本大于@vue/cli 5.0.8，那么就说明没有问题

2.重新配置nginx

(现在y总提供的nginx就是已经解决了跨域问题的nginx,因此不用再去修改。)

二.创建acapp端

如果之前创建的vue中有vue.config.js那么就不需要重新创建。
首先先安装插件(先安装，后面为了防止被污染去掉他)

vue-router;
vuex

安装依赖:

bootstap
properjs/core
vue3-ace-editor
jquery

2.配置vue.config.js

将讲义中的配置粘贴进来
默认将项目分成若干个文件，去分包处理。
配置内容在讲义。
通过这个配置，希望整个前端项目只打包成一个文件，因为配置作用是让打包的数量为1

接下来把web端的src放进acapp端文件夹.

3.首先先将整个项目打包成acapp

首先先点build然后运行

关于备案:国内要是想上线一个东西，网站基本上离死不远了
问题在于行政审批

在dist文件夹下如果有一个js文件与一个css文件，则说明打包成功。

接下来，就可以把这两个文件传递到云端。
由nginx配置可知，路径放在了

/kob/acapp/

将文件放进相应的文件夹:

scp js/*.js springboot:kob/acapp/

同理将css文件传过去。然后给文件重命名为app.js与app.css

如果想给在已经上了域名的网站中访问app.js的方法为:
在链接的路径后面添加/acapp/app.js即可
打开app.js,如果看到里面是一堆代码，则说明配置成功。
这样就可以将css地址与js地址填到对应的地方上去。
填写的表单样式如下所示:

其中的主类名需要自己去设置:
大体的方法为:在app.js中，有一串很长的代码，是一个匿名函数，将匿名函数挂载到#app上。
主类名的形式就是将这个文件封装成一个类，然后返回一个类名。

3.1 生成主类名:

首先先将这一堆代码变成一个函数。
然后传过去appid为myappid
然后将常量#app替换成appid，并且删掉函数执行。
在删除后，引入讲义中的Game类

解析:export出去主类名，传入id,调用函数，将整个app挂载到appid上面去
完成后，将前端再次传到云端，再重复整个过程。

3.1.1写一个脚本，简化执行流程。

因为整个修改的过程需要不断的删除云端js与css文件，然后再把新的js与css文件传进去。
因此可以写一个脚本，用脚本去执行这个操作。
首先，在本地的服务器的acapp文件夹里，创建文件rename.sh
这个文件的主要作用就是将文件删除，并且将传过来的文件重命名

rm app.js app.csss
mv *.js app.js
mv *.css app.css

然后给这个脚本添加上可执行权限

chmod +x rename.sh

在本地的acapp文件夹里，再创建一个文件。uoload.sh这个文件主要是负责上传 文件到服务器
以及能够执行云端脚本

scp dist/js/*.js springboot:kob/acapp/
scp dist/css/*.css springboot:kob/acapp/

ssh springboot 'cd kob/acapp &&./rename.sh'

然后赋予可执行权限
在本地的终端中执行这个文件:

sh uoload.sh

这样的话，而米处要更改代码的时候，就可以先去执行脚本。。

完成了之后就可以去准备保存了。
主类名就是刚刚上传的那个主类名，Game
选择头像然后提交安装再打开应用。

此时的acapp，页面背景的格局都发生了改变，改变的原因就是传过来的文件里自带了样式:bootstrap与acwing的样式是冲突发发，因此需要删掉第三方依赖，自己重写一遍。

注意:自己写的样式是不带scoped，scoped的作用是不去影响别的样式。因此去掉了scoped可能会对别的组件产生影响，

三.修改前端，使其自适应acapp

因为在acapp里，如果切换页面，那么链接也会发生变化，按理说，需要的是在切换页面的时候，acapp不能跳转变化的链接。因此除了换掉vue自带的bootstrap，vue自带的router也应该换掉。

在调试阶段，选择采用一个默认静态的token数据来先进行登陆操作。以切换跳过登录是否有用户的判断。

本地网页的登录的token在哪能够查找到:
当打开控制台，选择应用，存储大项的第一个项中的第一个小项，即可看到token,如下图所示:

1.前期工作

首先先修改下App.vue里game-body与game-window的大小
因为项目是跑在一个框里的，
因此可以给整个项目画一个框。

<div>

并且设定其宽度与高占满。项目的界面在这个大框里面的小框里，就像下图这样:

整个游戏要占满整个内部框，设定宽高都为100%。写法如下

2.正式改造

首先要先把router去掉
但是去掉router有一个问题,他会影响url，但是url是不能修改的。
因此解决方法就是手写一个router

2.1手写router

整个项目一个有的页面为:Menu,pk,record,record-content,ranklist,user-bot这几个页面。
首先，这每一个页面都是一个组件，用一个全局变量，并通过判断，以控制当前页面应该显示哪一个组件，
登录注册，因为后续采用的是第三方授权登录，因此不需要这两个组件。router路由与报错error删掉,NavBar因为后面会换成一个菜单页，因此也要删掉。

在store中定义2全局变量:router.js
其中的变量:router_name表示当前应该在哪个页面下，默认的页面为菜单页面。
定义更新的方法:updateRouter(state,router_name)

接下来，创建组件MenuView.vue,然后在App.vue中，将所有的组件都import进去。
然后引入到App.vue

通过v-if来判断控制router页面的切换。写法如下:

注:改成:v-else-if之后，就不要每个都判断一遍，加快了速度

2.2 实现菜单页面

定义一个类名为menu的<div>
菜单中有很多项，每项叫menu-item一共4项，分别是对战，对战列表，排行榜，我的Bot
整个菜单要展示在整个屏幕的正中间的位置。
实现这样的布局，可以选择用flex
水平居中样式:justify-content:center
竖直居中样式:align-items:center

把宽度与高度设置成100%，然后设置下其他的类样式。比如菜单内容的样式:
具体实现如下所示:

当点击某个按钮，要实现能够跳转到对应的事件

2.2.1 实现跳转页面

修改页面，修改全局变量，全局变量位于store里面。需要把store引入进来。
接下来需要定义四种行为
clcik_pk_handler调整pk页面的Router的名字
click_record_handler调整record页面的Router的名字
click_ranklist_handler调整ranklist页面的Router的名字
click_user_bot_handler调整我的Bot页面的Router的名字。
代码如下:

将函数返回，最后在组件里，绑定@click点击操作。

接下来，就需要给每一个被跳转的页面，添加一个返回按钮，因为四个界面都需要一个返回按钮。
因此要需要一个公共组件来呈现。

目前有一个废弃的公共组件:ContentField

2.2.2 改造contentfield

首先设置content-field的宽高都设置成100%
然后将所有的页面都用content-field括起来。
接下来就可以添加一个返回按钮。
返回按钮的位置可以在任意的地方，不做硬性的要求。
设置按钮的样式之后，并且添加鼠标悬浮的形状

接下来，给这个按钮添加行为click_go_back_handler
使其能够点击之后，就能够跳转到菜单页面,并且将行为绑定到组件上。

接下来，就是对单一的组件进行处理。

3.改造pk页面

对于pk页面来说 ，重点改造的应该是matching匹配。

关于MatchGround的修改，只涉及样式，不涉及功能。

首先先用一个大的<div>名为matchground-field,把整个结构给括起来

在括起来之后，整个的匹配框就被放在了左上角
需要调整样式把他放到中间去

选用flex布局，写法如下:

div.matchground-field
   display:flex;
   jsutify-content:center;
   align-items:center;
   width:100%;
   height:100%

由于bootstrap会污染其他的样式与页面，因此需要把bootstrap从根源删掉，以及与bootstrap相关的属性也需要删掉

3.1 将页面恢复到bootstrap之前的样式

对决双方的信息，以及select框要均匀的分布在这一行上。
均匀分布也可以采用flex布局。
定义<div>的class类为matchground-head
因为是水平均匀分布而不是居中，因此可以设计为:

justify-content:space-around

要注意:类user-photo与user-username其实应该是一个整体，因此也应该用<div>括起来，以方便flex布局

因为前端要跑在acapp里，因此需要将头像、字体等做适应性修改。
中间区域下拉框过小，也需要适当的放大以及添加圆角处理。

此时在调试的时候的显示并不是100%全窗口显示

因为body具有一个margin
因此可以先把margin先强行关掉。

修改完上面的选择框之后，接下来就可以修改下面的button来做适应性改造
定义类为start-match-button，修改按钮的颜色大小，以及点击的悬浮操作。
写法如下:

在写一段时间之后，尝试打包进行调试。

打包完成后，进入dist文件夹，再执行一开始打包上云的操作

注：在运行前，每次都一定要记得清缓存，ctrl+shift+r清除缓存，每次更新代码也需要清除缓存再打开网页、

在运行时，发现acapp里的显示没有呈现100%全面显示

解决的方法是：
将div.widow组件去掉，把scoped加上
(每次想要在acapp下运行的时候，就需要执行上面的操作)

----------

对于一个成熟且面向大众的应用，如何每次更新版本后给用户能够强制的清除缓存
解决方法就是，每次都把路径换一下，这样浏览器就一定没有缓存
修改的方式是:在云服务器每次上云的时候，给文件名中加一个后缀，每次更新版本后，修改css与js地址，这样就能够保证用户每次用的都是最新版本

3.2 调整:为了能够适应acapp,对匹配界面进行重新的布局

(在进行改动的之前，为了方便调试，把div.window与scoped加上与去掉)
主要的改动在于matchground的div组件，改为flex布局，设置布局方向为竖直方向。环绕方式改为space-around
把按钮组件去掉:padding
将玩家的信息设置成space-around环绕方式。
然后删掉div.window加上scoped
重新打包重新上传查看效果

问题描述

由于chrome插件的原因，可能打开的时候，页面会一直卡在白色页面
出现这样的问题：主要是scale属性的问题。导致加载缓慢，可以将scale属性修改成下面的写法:transform:scale(1,2)