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

    image.png

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

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

isActive=!isActive

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

that.homePosts[index]['isActive']=!isActive
  1. 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
  1. 可以用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是返回两层,以此类推
            });
        }
  1. 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://upload-images.jianshu.io/upload_images/2233068-c296aa6ca91d6af7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当然,这个认识依旧很粗浅,只是能解决问题,而不能解释原因。

推荐阅读更多精彩内容

  • 前言 Git使用教程 Git是什么 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 ...
    90后的思维阅读 426评论 0 0
  • 你并没有失去,从一开始,你就什么都没有。
    一只孤单的小猴子阅读 74评论 0 0
  • 褪去校园青涩 舍去年少轻狂 薄了红尘情意 瘦了尺寸年华 心说学会放下 徐州只身寻她
    T卷毛T阅读 55评论 0 1
  • 第一章 黑压压的天空下,隐藏着人们看不到的一切黑暗 。随时随地每时每刻,都在看到或看不到的地方上演着一幕幕悲剧...
    M琪琪haha阅读 95评论 2 0
  • 今天,拔了一颗智齿。磨腮的牙齿,不要也罢。
    晨之白月阅读 28评论 0 0