# vue公交信息

**Repository Path**: chen1404276788/vue_gjxx

## Basic Information

- **Project Name**: vue公交信息
- **Description**: 基于VUE开发的智能公交查询信息，可以设置中添加路线以及关注的站点，并在首页中显示出来，高亮的代表关注的站点，红色代表车的当前位置以及当前行驶车的数量。
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-04-27
- **Last Updated**: 2022-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue模板
#### 项目说明
基于VUE开发的智能公交查询信息，可以设置中添加路线以及关注的站点，并在首页中显示出来。
* 高亮的代表关注的站点
* 红色代表车的当前位置以及当前行驶车的数量。
* 目录下的app是已经打包的程序
* app下载存放到蓝奏云

#### 代码块介绍
`main.js` 全局函数，`async ... await` 解决 `asios` 同步问题

```javascript
Vue.prototype.httpget=async function (swork,webdata){
  if(swork=='上班'){
    var work=1
  }else{
    var work=0
  }
  
  var datalist = []
  var resdata = []
  
  for(let i=0; i<webdata.length; i++){
    let urls='http://bus.wuhancloud.cn:9087/website/web/420100/line/027-'+webdata[i]['linename']+'-'+work+'.do?Type=LineDetail'
    let res = await axios.get(urls).then(function(res){
      resdata=res.data['data']
      datalist.push(resdata) 
    })
       
  }
  return datalist
}
```

在 `home.vue` 中引用全局函数,在解决同步请求的时候同样需要添加 `async ... await` 
```javascript
  methods:{
    async gotowork(){
      this.work=1
      let httpdata = await this.httpget('上班',this.webdata)
      console.log(httpdata)
    },
    async offwork(){
      this.work=0
      let httpdata = await this.httpget('下班',this.webdata)
      console.log(httpdata)
    }
    
  }
  ```
![输入图片说明](apk/Screenshot_2022-02-08-16-11-12-384_plus.H5E2EF708.jpg)
![输入图片说明](apk/Screenshot_2022-02-08-16-11-16-636_plus.H5E2EF708.jpg)