10月工作笔记整理（前端）

这次没有迭代需求了，是一个完整的大屏项目，但是还没有进行前后端联调，可能还有一些坑要留到11月的总结写了

一、学习的内容总结

1.uni-app框架

只学到了基础概念，总结一下我对它的想法：
语法和vue很像，布局和小程序很像，所以在vue的基础上把< div >替换成< view>、< span>替换成< text>、对组件样式的定义是::v-deep
当然，还有一些新的生命周期函数，可以需要的时候去查一下文档学习。

2.echarts框架

使用方法：

<v-chart ref="chart" />  //html里写这段
this.$refs.mapView //这样使用它的实例对象
配置option={}  //里面的配置可以查文档
this.$refs.mapView.setOption(option)//渲染

使用v-chart还有更简便的方法，我只使用它减少了初始化操作（this.$echarts.init(this.$refs.map_ref,'这里设置主题');）
这个也是查文档，很多组合的东西，要对照文档看，遇到自己想实现的效果可以直接百度一下，然后看它的配置，前提肯定还是要熟悉每个属性的大概意思。
文档链接：echarts文档

练手项目的坑：搭建脚手架的时候不要开启eslint！各种冲突改的我头秃，初学建议不要开启。

3.element UI框架

使用了一下时间选择组件和布局组件，都是看文档吧
项目里的坑：
1.这里我是按需引入的，然后引入的css有问题，直接去index.html的头文件引入网络资源了
2.布局有row和col

<el-row :gutter="20">
  <el-col :span="6"><div class=""></div></el-col>
  <el-col :span="6"><div class=""></div></el-col>
  <el-col :span="6"><div class=""></div></el-col>
  <el-col :span="6"><div class=""></div></el-col>
</el-row>

gutter代表每列的间隔像素（col下要有div才生效），span代表占24份中的几份。
3.关于时间组件
配置type选择是年、月、日的时间组件。
range-separator配置中间的间隔文字。
valueFormat="yyyy-MM"配置时间值的格式，这里我需要这种格式就这样配置了。
不需要可输入编辑和删除按钮，我置为false了。
最后用@change="handle()"来控制选完时间后的值的变化获取，v-model对应的值就是时间。在handle函数下就能捕获选中后值的变化。

4.VScode快捷键总结

只记录了我不会的，但是确实有需要的：
vscode打开新窗口 Ctrl + Shift + N
选中移动行 alt+上/下
折叠 Ctrl+Shift+[
打开折叠 Ctrl+Shift+]
截屏 alt +shift +a
定位错误 f8(下) shift +f8(上)
替换 Ctrl + H
插入光标 alt 鼠标右键选中（可同时编辑）
打开文件 Ctrl +o
另存为 Ctrl+Shift+S
全屏 f11
显示输出面板 Ctrl+Shift+U
删除行ctrl+shift+K

二、项目的内容总结

1.接口的封装与使用

网上找的一个例子，还是得根据需求自己配置一下

//request.js

import axios from 'axios'
import { Message } from 'element-ui'
 
const token ='你自己的token'
// create an axios instance
const service = axios.create({
  baseURL: '/api',
  timeout: 80000 // request timeout
})
 
// request interceptor
service.interceptors.request.use(
 
  config => {
    // Do something before request is sent
    if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers.Authorization = token 
      
    }
    return config
  },
  error => {
    // Do something with request error
    // console.log("出错啦",error) // for debug
    Promise.reject(error)
  }
)
 
// response interceptor
service.interceptors.response.use(
  response => response,
 
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

//写入接口
mport request from '@/utils/request'
export function 函数名(data) {
	return request({
		url: '',//自己的接口地址
		method: '',//请求方法"get""post"
        data //需要携带的参数
	})
}

//使用接口
import { 函数名} from "@/api";
 // 获取数据
    接口调用方法(data) {
      函数名(data)
        .then(response => {
          console.log(response.data;)
        })
        .catch(error => {
          this.$message.error("获取失败！");
        });
    },

2.获取今年月和6个月之前的年月

      let d = new Date() //定义了一个时间类型d, 来获取当前的时间
      let Year = d.getFullYear() //获取当前年
      let Month = d.getMonth() + 1 //获取当前月
      let mydate = new Date(Year, Month - 6)//往后退六个月的时间
      let agoYear = mydate.getFullYear() //获取6个月前的年
      let tempMonth = mydate.getMonth() + 1 //获取6个月前的月
      //这里是为了把格式校准
      let agoMonth = tempMonth
      if (tempMonth < 10) {
        //处理月份为个位数的时候加个0
        agoMonth = '0' + tempMonth
      }
      this.startMonth = agoYear + '-' + agoMonth//前6个月的年月
      this.endMonth = Year + '-' + Month//当前年月

3.大屏的问题

大屏不需要考虑自适应，有固定的长度和宽度。大部分炫酷效果靠设计给的图，其实有了图再开发布局会更容易。

放背景图（平铺）

  background-image: url('');
  background-repeat: no-repeat;