自建MySQL 5.7数据库备份上云

自建MySQL 5.7数据库备份上云

1. 创建开发项目

1. 打开VS code开发环境，并启动终端。
   

2. 在终端中输入aiot-cli create queuecall命令，创建名为queuecall的项目。
   

3. 按照工具的提示，进入queuecall目录，并运行install命令。
   

4. 在vs code中通过浏览文件夹，打开queueucall项目所在的目录。并在vs code的文件浏览器中找到package.json文件并打开，将模拟器地址配置到项目中。
   

5. 启动模拟器，在控制台中输入cnpm run build:simulator命令，启动模拟器。
   

此时可以看到空白工程在模拟器中运行起来了，通过鼠标可以对界面进行操作。

2. 加入叫号系统的代码

1. 将提供的已经初步开发完成的叫号系统的源码文件夹src拷贝到queuecall工程文件中，替换掉原有的src文件夹。
   
2. 在工程对应的控制台中再次运行 cnpm install命令，为项目安装依赖。
   
3. 运行cnpm run build:simulator打开模拟器，可以看到一个简单的叫号系统已经在模拟器中运行起来。
   

3. 推送到商显棒中运行

1. 将商显棒通过HDMI接口接入电视机（显示器）。
   

2. 给商显棒连接电源，等待商显棒启动完成并联网完成。
   
3. 在vs code的控制台中输入aiot-cli upload -h 192.168.xxx.xxx .\.falcon_\8001666317yyyyyyyy.amr，其中192.168.xxx.xxx根据实际的内容IP地址，yyyyyy根据实际的包ID修改。
   
4. 推送完成后，商显棒将自动开始运行新的程序，你可以看到一个在电视机屏幕上出现了和模拟器一样的屏幕，并在动态运行。
   

4. 修改代码，改变布局

1. 程序运行一段时间后我们会发现，当号码大于2位数的时候，叫号显示区的铃铛icon会被遮挡，我们需要把叫号列表扩宽。
   

2. 此时，我们可以通过打开 src/pages/index/index.vue 文件，通过修改css描述来拓宽右侧列表栏。在代码中我们可以看出右侧列表栏是由class="info-right"的div标签定义的，我们找到info-right对应的css描述。
   

.info-right {
  width: 30%;
  height: 100%;
}

3. 我们将宽度修改为屏幕的40%，保存后重新推送应用到商显棒。
   

.info-right {
  width: 40%;
  height: 100%;
}

4. 修改后的代码保证了icon的正常显示。
   

实验完毕！

实验链接：https://developer.aliyun.com/adc/scenario/4aadf01d1432491592f171a25277e460