fastadmin+uni-app开发记录

许久不写代码，发现很多基础都已经忘得差不多了，感觉复习一下。写不出文档，就先把技术给练一下吧。由于我没有系统地学习过php，所以很多都是网上找的零碎的知识，可能会有错，还望指正！

1. fastadmin采用的是MVC模式，所以要写控制器。而我没有搞清楚路径中的含义，导致报错。
   http://192.168.1.175/HealthManager/public/index.php/mobile/test/test
   因为我的localhost定位在www文件夹，所以在登陆操作的时候会出现加载不出样式的情况，根据控制台network显示，是因为地址找不到。
   而后面访问控制器中的方法，则是因为我复制粘贴，忘记了该类的名字了，导致找不到控制器。
   

   image.png

2. 如何从服务器端获取数据并渲染？
   一开始我在服务器端使用data)
   的方法，但是app端接收到的数据却是html而不是json。
   后来我直接在服务器端返回json编码后的数据，再传回app，然后在app端用for循环赋值。
   虽然比以前麻烦一点，但是还是可以实现的。问题是为何这里服务器没有传回json值？过去我用mui框架开发的时候是可以的。
   

   image.png

image.png

3. 遇到了数据中含有html标签，而渲染的时候被当作字符串的问题。
   解决方法：https://blog.csdn.net/gossiphhh/article/details/78316553
   代码：

<view class="title" v-html="item">
        {{item}}                    
</view>

ps：

如果item里面没有html标签，则无法解析，且也无法正常渲染，因为渲染节点里面必须是string或array

注意：

在和v-for使用时，一定不要把v-html和v-for写在一个view里面，否则会让非html标签内容无法显示。应该写在有html标签的最小view里面。也就是不要影响别的view里的内容。

<view class="selection-item row" v-for="(i,nindex) in item.selection" :key="nindex">
                        <view class="" v-html="i">//这样写才不会影响到input的正常显示
                            {{i}}
                        </view>
                        <view class="" v-if="homePosts[index]['selection'][0]=='生日'">
                            <input type="text" value="" placeholder="input"/>
                        </view>
                        
                    </view>

4. php数组相关
   1）建立一个数组：

$a=[];
$a=['name'=>'Homura','age'=>'500']
这种是有键名的定义方式，这个可以用于json格式的数组创建。

<?php
$array = array("foo", "bar", "hallo", "world");
var_dump($array);
?>
array(4) {
 [0]=>
 string(3) "foo"
 [1]=>
 string(3) "bar"
 [2]=>
 string(5) "hallo"
 [3]=>
 string(5) "world"
}
这是一维数组的定义方式，无需键名

给数组添加一个元素，可以用

array_push(array_name,value)
or
array_name[]=value;

二维数组中某个元素的使用：

array_name[index]['key']
for example:
$waifu=[{'name'=>'Homura','age'=>'500'},
{'name'=>'Hikari','age'=>'501'}]
i want to get Homura
waifu[0]['name']=Homura

5. 如果我数据库中的一条数据漏掉了了，那么之后该怎么补上？
   我想到的是在数据库中把要插入的位置后面的数据的id都先+1，然后空出这个位置，进行update操作。但是这样一来不就需要直接对数据库进行操作了吗。那么后台管理的好处不久体现不出来了吗？这是否意味着我应该增加一个在某一行后插入的功能呢？就像网页版的数据库管理工具一样
6. var/let
   区别暂时不讨论，只说一下注意点。
   这两个应该都是定义变量。我试图用变量来替代麻烦的数组元素定位。

 let isActive=that.homePosts[index]['isActive']

结果我在后面修改数组元素的时候直接用变量名来代替了

isActive=!isActive

我以为这样子数组元素也会改变，但是实际上它们的地址是不同的。所以要简化也只能这么书写：

that.homePosts[index]['isActive']=!isActive

7. git使用问题记录
   终于到git了，这个工具必须要学会使用啊！
   1） 在本地初始化一个repository
   在需要建立git仓库的文件夹右键点击gui bash here，进入git 命令行

   
   image.png
   

   我一直都犯了错。我总是喜欢在一个项目的外部进行初始化，为的是想add的时候直接写项目名称更加方便。但是实际上这样子做会把别的项目也给上传到远程库。实际上，一个项目就应该是单独的一个git库。而添加多个修改的文件，只需要用git add -A .指令就可以了。唉。

2）初始化一个Git仓库，使用git init命令。

image.png

3）添加文件到Git仓库，分两步：

使用命令git add <file>，注意，可反复多次使用，添加多个文件；

image.png

我直接把外部整个文件夹都add入库了

使用命令git commit -m <message>，完成。

image.png

4）在码云上创建一个repository，勾选建立readme文档（这是一个坑）

image.png

5）关联本地和远程的repository

$git remote add origin git@gitee.com:uesugieriislf/HealthManager.git

这里的origin是远程库的别名，可以自己取一个，默认为origin

image.png

6. 可以用git remote -v来查看远程库情况

   
   image.png

7）这里是一个错误记录

image.png

我想把本地库push到远程库，但是报错了，提示远程库和本地库内容不一致，要我先从远程库pull后再push
于是我使用pull

image.png

于是再修改

image.png

终于到了关键处了，
提示无法合并不相关的历史
于是百度
解决Git无法合并不相关的历史
解决方法：
git pull origin master --allow-unrelated-histories

image.png

允许合并，这时git转入insert模式，要我写明合并理由。由于本人没有系统学过linux，因此不太了解如何退出编辑模式，故继续百度
git 如何退出编辑模式
按esc，再输入；wq，即可保存退出

于是我们pull成功了，就可以push了

image.png

8）分支管理和多人协作
合并分支：git merge <分支名>
默认采用fast forward 模式
如果想看历史记录，最好禁用，则加上参数：--no-ff
git merge dev --no-ff
git stash在切换分支时可能会经常用到

9）git add 多个文件
git add 所有文件

git add -A=git add all file
git add -A .=git add all file edited

git add xx命令可以将xx文件添加到暂存区，如果有很多改动可以通过 git add -A .来一次添加所有改变的文件。

注意 -A 选项后面还有一个句点。 git add -A表示添加所有内容， git add . 表示添加新文件和编辑过的文件不包括删除的文件; git add -u 表示添加编辑或者删除的文件，不包括新添加的文件
10）忽略一些文件
https://www.jianshu.com/p/74bd0ceb6182
在git提交时，总有一些临时文件等是我们不想提交的，这时就可以定义gitignore规则来忽略它们
https://www.liaoxuefeng.com/wiki/896043488029600/900004590234208
事实上，最新的win10已经可以直接新建一个.gitignore就行了，不用再另存为了

11）如果现在的代码出了问题，想清空远程库和本地库，该如何操作？
本地：删除.git文件
远程：在码云中的仓库管理里面清空仓库
然后重新建库上传。记得要写忽略规则
12） 如何用github和别人进行协同开发？
如何用github和别人进行协同开发？

8.uni-app引入icon font图标
1）在iconfont网站下好文件，然后解压到想要放的文件夹中(比如static/css)
也可以不做什么修改，顶多删去了一些不用的文件，保留了所有字体文件，然后一起放在文件夹里，当然这种写法显然不太好。占空间不说，每次更新都要下载一遍，不方便。所以还是推荐使用网络引用方式。具体看链接
2）注意，在main.js 中写：
import "./static/css/iconfont.css"，否则无法生效

9.uni-app图片
1）图片名字不能有中文，也不能有空格
2）背景图片有限制，不能超过40KB，超过就要用服务器地址或者base64
https://ask.dcloud.net.cn/question/61878

10.css画三角形
11.多级返回

onUnload() {
            uni.navigateBack({
                delta: 2//1是返回，2是返回两层，以此类推
            });
        }

12. ThinkPHP5引用百度AI菜品识别
    之前看官方文档卡了好久，结果问朋友才发现其实可以很简单，我还不敢相信。说起来，我到现在也不知道为何不用获取TOKEN，明明网上找的例子都写了呀
    1.）在百度AI网页下载好PHP的SDK
    https://ai.baidu.com/sdk#vis
    2）解压，重命名，放入extend路径
    image.png
    3）在需要用的php文件里添加namespace和use，否则无法引入class文件

注意，只需要添加命名空间和use，千万不要删除原有的代码，否则会造成依赖关系出错

菜品识别类库
百度AI基类 image.png
4）参考文档（https://ai.baidu.com/docs#/ImageClassify-PHP-SDK/top）
在自己的控制器中写代码

<?php

namespace app\mobile\controller;
use AI\AipImageClassify;
use think\console\command\Lists;
use think\Controller;
use think\Db;
use think\Loader;
use app\mobile\model\Item as ItemModel;
const APP_ID = '你的APP_ID';
const API_KEY = '你的API_KEY';
const SECRET_KEY = '你的SECRET_KEY';

class Pic extends Controller
{
    public function index()
    {//判断是否是post请求
      if (request()->isPost()){
          $imagePath=input('imagePath');
//接受请求参数
          $client = new AipImageClassify(APP_ID, API_KEY, SECRET_KEY);
          $image = file_get_contents($imagePath);

// 调用菜品识别
          $client->dishDetect($image);

// 如果有可选参数
          $options = array();
          $options["top_num"] = 3;
          $options["filter_threshold"] = "0.7";
          $options["baike_num"] = 5;

// 带参数调用菜品识别
          $data=$client->dishDetect($image, $options);
          dump($data['result'][0]);
      }
    }
}

13.uni-app中请求API的注意事项

uni.request({
                        url: _self.apiServer+'pic/index',
                        method: 'POST',
                        data: {
                            imagePath:_self.staticServer+JSON.parse(uploadFileRes)
                        },
                        success: res => {
                            console.log(res.data);
                        },
                        fail: () => {},
                        complete: () => {}
                    });

1)url必须是字符串，这里定义的_self.apiServer是在main.js里面定义好的全局使用的服务器地址

main.js

2)这里的uploadFileRes = uploadFileRes.data;
是从服务器端接收到的数据，再次上传给服务器需要经过json.parse转换为JavaScript对象后才可以使用。因为要把拼接出一个图片的网络地址，所以用到了字符串的拼接。如果不把json数据解析成出来，就无法拼接

安装fastadmin

在开发过程中遇到了无法修复的bug，只好重新安装过。于是记录下安装过程，方便以后参考
1)安装文档https://doc.fastadmin.net/docs/install.html
输入网址
http://www.yoursite.com/install.php

image.png
填写对应的数据库名称，这里最关键了，因为我是重新安装，所以之前的代码还是可以复用的。
2)对数据库进行修改后一定要重新生成CRUD才生效，并且要采用强制覆盖模式
3）在application的config.php里面找到'login_captcha'即可设置登陆验证码的开关
4)新安装好后记得要打开调试，这个只在开发阶段打开，部署时要关掉，以免影响性能。开发时不打开往往就会看到一个“你无法访问当前页面”的网页，没有帮助，还会让人迷惑。所以必须记得
5)数据库里面在设计的时候最好都默认为空，否则很容易报错。
6）插入的时候可以采用两种方式，一种是直接用Db的insert（）方法，还有一种是调用model，用save（）。
7）在服务器端写dump（）或者echo，就相当于return了

登陆功能的实现

这是一个坑，一时半会儿可能不会填

我突然意识到，合作难得不是使用git这样的工具，而是两个人的思路不一样。我们的代码几乎是不同风格的，最好就不要一起做一个模块，否则就要改。而且，我们没有对数据库有一致的认识，导致前端界面与数据库不匹配，这下又得改了。不难，但是很烦！我们的交流也太少了。嗯，内心十分烦躁。
我觉得数据库的地位相当重要。首先应该确认数据库的设计，然后再与前端页面对应起来。我们的设计图上应该标清楚其与数据库字段的对应关系的。现在他应该已经发现问题所在了。肯定要修改页面了。按他这样的写法，那不是要干很多的重复劳动了。
还有，英文水平还是要有的，否则我都要看不懂命名了。汉语拼音真的太让人不明所以了。就和片假名一样了。
但是我不确定的是，应该用手绘图纸还是用计算机绘制。前者觉得太落后，后者又缺乏工具。

突然发觉，两个人合作的时候应该要把数据库放在云服务器上，这样两个人的数据就可以共享了。而数据库对带宽的要求也不高。而开发则是继续用git

popup组件使用tip

不要在组件标签处写class，这样会导致组件出问题。
要写样式，就在内部写。

<uni-popup ref="popup" type="bottom">
            <view class="Popup-header row jc-between padding-sm" >
                <view class="" @click="cancel">
                    取消
                </view>
                <!-- 此处应为下拉框 -->
                <view class="">
                    早餐
                </view>
                <view class="" @click="confirm">
                    确认
                </view>
            </view>
        </uni-popup>

progress组件使用tip

一定要有一个有宽高的外置view，否则无法显示
<view class="progress-box">
                            <progress percent="80" activeColor="red" active stroke-width="8" />
                        </view>

progress的动画完成事件只有微信支持……那我为何还要用这个组件呢？直接用动画写不好吗？说好的跨平台呢？

uniapp页面传参

https://blog.csdn.net/wwf1225/article/details/90476503
注意：传数组前要JSON.stringfy
接受页面要JSON.parse才可以使用

后续问题

没想到，在许久不碰前端代码后，今天我还得来记录一些笔记。但其实，这些都是我以前开发时记录过的。只是那时没有一个统一的笔记本，都是在工程文件里随手建一个md文档记录。开发的时候的确还挺方便的，可是一旦开始新项目，就会遇到找不到笔记的问题。
现在的我，就是脑子里有一个印象，可是并不准确，想找当初的笔记，却发现又找不着了，或者是太懒了。
所以，一个记录笔记的网站不可缺。以前是简书，现在是语雀。我觉得，这应该是自己未来该有的状态。所有的经验，都值得被记录。

这次要记录的是局域网中不同设备之间如何访问。这个以前上网络课程的时候还只是一道计算题，算各种子网地址，然而到现实中使用时才知道问题不是怎么计算地址，而是怎么利用地址。
最初用浏览器访问后台，都是用localhost或者http://127.0.0.1,因为这是默认的这台主机的意思。而别的设备要访问这台主机，那就要知道这台主机在局域网（公网）中的地址。所以应该先查出自己电脑的子网地址，然而在别的设备中使用这个地址来指代这台设备。
![YC_IKIH3U)9G2T_ZPWG]UBK.jpg](https://img.haomeiwen.com/i2233068/c296aa6ca91d6af7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当然，这个认识依旧很粗浅，只是能解决问题，而不能解释原因。