2021-07-17 暑期实训开发日志8——前端界面优化以及前后端交互

一、界面优化

• 前端的搭建在一周前已经基本完成，后面就是对界面进行主题的统一，使界面更加美观易用。为了使界面更符合我们的项目主题 去老师提供的相关网站找了骨刻文相关的图片以及论文 让界面更具文化气息
• 对于element按钮的优化。按钮的默认样式与主题不太搭 于是更换了按钮icon和背景色。
• Element内置丰富的图标库，主要有以下2种用法：
  1 设置类名el-icon-xxx，通常使用i元素
  2 在Element部分组件中设置icon属性
  以下为element内置图标实例：
  
  

二、前后端交互

项目中一般结合async/await语法使用axios调用接口
参考学习链接 link.
1 前后端交互模式：

• 接口调用方式：原生ajax、基于jQuery的ajax、fetch、axios
• 传统的URL：

格式：schema://host:port/path?query#fragment
schema：协议，例如http、https、ftp等。
host：域名或者IP地址。
port：端口，http默认端口80，可以省略。
path：路径，例如/abc/a/b/c
query：查询参数，例如uname=lisi&age=12
fragment：锚点（哈希Hash），用于定位页面的某个位置

• Restful形式的URL：HTTP请求方式
  GET 查询
  POST 添加
  PUT 修改
  DELETE 删除

2 Promise的用法

• 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
• resolve和reject两个（方法）参数用于处理成功和失败两种情况，并通过p.then获取处理结果。

3 fetch进行接口调用

基本用法
fetch(’/abc’).then(data=>{
return data.text();
}).then(ret=>{
//这里得到的才是最终的数据
console.log(ret);
})

4 axios进行接口调用

axios基本用法
//去github下载文件，此js位于axios-master\dist