4/6作业记录

这次作业用的是vue+echart，数据由接口提供的方式实现的。

记录一下在这次学习中卡住的地方

1.首先是echarts地图映射问题，和上次一样半天才反应过来,echarts用的是英文地名而我的接口获取的是中文数据

解决方案

在echarts用

nameMap: {}实现一一对应

2.在formatter return 点击参数的时候，不好解释，问题在于jsonp返回的全局变量在created,与mounted中叫什么，先后顺序不一样，了解了才知道可以用data传递参数

部分代码实现如下

在created里面获取所有数据封装为数组集合，一键多值的对应方式

jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{

if(!err){

let list = data.data.worldlist.map(item=>({name:item.name,value:item.value}))

mydata=data.data.worldlist.map(item=>({name:item.name,value:[item.value,item.deathNum,

item.cureNum,item.susNum]})；

this.account=mydata; //account是在data中定义的数据可以传递给前端

}

})

其中要注意

（1） data的return 形式,

data(){

return {

account: null, //预先定义我自己接受的数据

account2:null

}

（2）.v-for循环中，key的取值要为一个怎么说，不变的能够确定这个数组的键，一般是string ,int,不支持数组和对象，在这上面也差点栽坑

3.我的npm依赖包老是出问题，家里网速不太好，磨了很久，最后还是重装

重装真香，我重装的攻略是按着安装的步骤一步一步往上删除，能卸载就卸载，也可以记下，奇怪的知识增加了

4.再有就是打包部署的时候

1.需要在vue的根目录下，创建一个vue.config.js，这一步是为了解决dist打包（快捷键 npm run build）后在tomcat上页面空白的问题（是路径的相对绝对问题）

很谜，在另一个项目下就不行，代码搬运一下就可以，不知道不明了。

这是vue cli3才泳有的，搜的教程全是跟着cli2来的，所以让环境出了问题，目前还尚未解决，很谜

这是vue.config.js的代码

module.exports = {
  /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
  /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
  publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
  /* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: 'dist',
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "assets",
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
  filenameHashing: false,
  /* 代码保存时进行eslint检测 */
  lintOnSave: true,
  /* webpack-dev-server 相关配置 */
  devServer: {
      /* 自动打开浏览器 */
      open: true,
      /* 设置为0.0.0.0则所有的地址均能访问 */
      host: '0.0.0.0',
      port: 8066,
      https: false,
      hotOnly: false,
      /* 使用代理 */
      proxy: {
          '/api': {
              /* 目标代理服务器地址 */
              //target: 'http://47.100.47.3/',
              target:'http://106.12.196.143/',
              /* 允许跨域 */
              changeOrigin: true,
          },
      },
  },
}

注意在cli3x版本以后baseUrl就没了，需要换成

publicPath

在这上面只用改一个target的ip地址
奇怪字怎么变小

生成的dist文件直接拉到tomcat下的webapps就好啦

emmmmm昨天才给服务器配上java环境，linux科不是白挂的，果然啥也不会

这是访问的地址

http://106.12.196.143:8080/dist/index.html

老师说要仿电子大屏也不知道我做出来个什么鬼，又丑又土，直女配色（哦没有配色），css,div真的一窍不通，一窍不通，一窍不通。下次会根据需求来。

东施效颦也得弄，哭泣。

5.获取接口暂时不是很会，python能够爬取腾讯的疫情表，但是不知道怎么实现java python联合使用。

6.因为觉得疫情暂时缓解就没有怎么关注国外疫情了，看到数据才知道全球都100多万了，我的折线图的max都放不下，害。

猜你喜欢