AP（配置辅助平台）

AP配置辅助平台

AP（正式版）

AP-test（测试版）

AP配置辅助平台开发手册

一、AP平台报错问题

开发过程中可能会遇到以下问题：
1、进入页面提示 [错误，出错了]

解决方案：F12，选择NetWork，找到出错的接口，一般可以在右侧Response中看到接口返回的数据中status状态为1，msg为"\u51fa\u9519\u4e86"，这是Unicode编码，解码后表示“出错了”，解码需要访问http://tool.chinaz.com/tools/urlencode.aspx。如果遇到类似于 %e5%9f%ba%e7%ba%bf%e9%a1%b9%e7%9b%ae 的编码格式，则表示URL编码，也可以访问上述网站进行解码）；并在Headers中找到请求URL，同时把问题反馈给后端。

2、进入页面后提示 Error Network，并发现右上角登录用户显示为空，导致页面无法加载。

解决方案：让后端改一下中间件即可解决

3、跨域问题，本地进入门户页面，提示 Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details.

解决方案：由于本地用户名是写死的，而导致本地无法访问到视频，但登陆wiki后，在ap-test上可以正常访问

4、在标有scoped的style中修改element-ui原生样式发现不起作用
解决方案：利用样式穿透 >>> ，可以解决

使用方式：

外层类 >>> 想修改的类名 ｛
	要修改的样式
｝

或者在样式后面添加 !important

注意：尽量给父级元素添加类名来修改样式（而不是直接使用行内样式），否则可能遇到跳转到其他页面，再返回时样式错乱

5、将数据保存到vuex中的store中后，刷新网页后会丢失。

原因：store中的数据保存在运行内存中，页面刷新后会重新加载vue实例，store中的值会被初始化

解决方案：利用sessionStorage做缓存

总结：
开发过程中或者是使用AP过程中，如果发现页面报错，弹出出错了等类似错误信息，一般都是接口问题。
出现以上问题排查方式：

1. 首先打开自己启动后端的cmd窗口，查看后端服务有没有启动，如果没有启动，需要输入命令行：python manage.py runserver 8082
   然后提示连接数据库成功，表示正常启动
   如果启动的时候出现AP_CONFIG_PATH字眼，导致后端无法启动，将问题反馈给后端
2. 如果后端服务已经启动，可以重启一下，查看报错是否解决，重启方式：
   ctrl+c终止当前服务，再输入以上命令行
3. 如果其他页面正常运行，就某一个页面报错，这就是接口出错
   解决方案：
   F12调出控制台，点击Network选项
   
   找到具体某个报错的接口，然后用postman测试一下，如果确认是接口问题，将问题反馈给后端。
   

二、AP平台开发技巧

开发过程中涉及Git、Vscode、postman、Chrome、Hiklink、wiki等的使用
前端启动代码：yarn run serve（vscode调出控制台）
后端服务启动代码：python manage.py runserver 8082 （在ap-server文件夹下打开cmd）

2.1、开发操作

第一步：首先从AP需求管理中找到具体需求，需求理解透彻后跟后端协商好接口，即可开始。分两种情况：

1. 只是在某个页面中增删改查某个按钮或组件，不涉及路由问题，只需要注意将使用的数据在Vue实例中的data中注册一下
2. 需要增加新的页面，新的模块，这时候就涉及到路由问题
   路由文件在下图文件夹中
   

index.js是主路由文件，modules文件夹下是具体某个页面的路由规则
第二步：新功能做好，自己调试没有问题之后需要提交git仓库。提交过程中涉及以下几个问题：

1. 在Vscode中操作
   
   此时，可选择逐个文件提交或者提交全部，或者撤销修改
   
   

2. 将暂存的更改提交到自己的开发分支比如（feature_xxxxx）
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201127110406998.png?
   将开发分支（feature_xxxx）合并到dev分支
   
   最后确认合并
   

第三步：提交完成后将本地部署到test环境

搜索远程桌面链接。

三、写在最后

最后给一些建议：

• 写代码最好有注释，尤其是自己写一些算法函数处理数据的时候
• 页面报错一般都是接口问题，找到问题后与后端沟通
• 先理解需求，然后动手写代码
• 度量模块框架使用的是Echarts，多去官网看看demo
• 开发优先级：bug解决>新需求>需求优化
• 前端UI框架用的是Element，里边一些属性怎么去用多看看官方文档
• 路由权限和按钮权限问题涉及Vuex+Vue-Router路由拦截，AP平台使用的是动态路由（从接口中获取全局路由）
• 前端请求用axios（封装成http了）
• AP平台各个模块的图标也是动态加载的
• 关于修改Element样式不生效问题可以去Element默认样式修改