海创软件组--20200614--VUE获取当地天气情况--用mpvue开发小程序的一点小总结--前端基于koa搭建服务器--vue使用js对图片进行点击标注圆点并记录他的坐标

写这篇博客来记录一下这两周接触到的一些新东西。

一：VUE获取当地天气情况

最近在写一个后台，其中一个功能就是显示当地城市的时间，天气情况。具体也可查看这片博客

获取天气接口地址：http://wthrcdn.etouch.cn/weather_mini?city=??

接下来就演示一下吧：

//获取当地城市及天气
 async getTianQi(){
    var result = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
    console.log(result.data.data.forecast)
    this.City = result.data.data.forecast[0]
    console.log(this.City)
  }

打印输出情况：

result.data.data.forecast包含今天及之后几天的天气情况：

但我需要的是当天天气情况，所以result.data.data.forecast[0]

至此，制定城市天气情况获取完毕。

---

二：使用mpvue框架写小程序的准备–创建空mpvue

刚刚开始接触小程序，准备采用mpvue框架进行学习开发，接下来就说说如何准备一个空的mpvue吧，像极了用脚手架创建一个空的vue一样。具体也可查看这片博客

关于mpvue的具体操作以及详细api我们可以点开mpvue官网查看

第一步：找好存储位置创建一个空mpvue文件夹
例如我想在D:\myDemo创建，那么在对应位置打开我们俗称的黑色小窗口：


输入vue init mpvue/mpvue-quickstart my-project ，然后按回车就好。（my-project是文件名，你自定义）

然后就一路回车就好：

这时我们就创建一个基于 mpvue-quickstart 模板的新项目，之后就是安装依赖：
先cd my-project进入该文件，然后输入npm install下载依赖

安装完之前的所有东西后，最后想运行？输入npm run dev

呃？和想象的不一样？没有出现想vue一样的链接打开浏览器预览，其实小程序是不能在浏览器预览的，所以输入npm run dev只是会打包生成dist文件夹

那我们要如何运行预览呢？这时就要借助微信开发者工具了，也是在官网下载即可

在开发者工具选择小程序打开刚创建的文件夹，打开模拟器就可以看到预览效果了。

---

三：解决用mpvue开发小程序时报错：找不到sitemap.json入口

通过刚才的利用mpvue开发小程序，我们下载完空的mpvue脚手架后，重新写src文件下的文件，修改app.json等配置文件得到一个原始空mpvue文件，以便之后的开发。
这是我们再打开小程序开发工具可能会发现程序报错：

当时我真是无语了，弄了好一会才弄好。接下来就贴一下我解决这个问题的办法吧，我只是修改了文件project.config.json下的useCompilerModule就可以了。
具体操作：
在目录找到project.config.json文件后，将useCompilerModule修改为true

---

四：前端基于koa搭建服务器

最近在学微信小程序，呃，需要自己写后台获取数据，就采用基于koa技术搭建服务器，接下来就简单说一下如何快速初步搭建一个简单服务器吧。具体也可查看这篇博客。

一：在根目录下创建一个服务器文件夹
这里我起名字为my_server

---

二：my_server文件夹需要下载koa和koa-router

npm install koa koa-router

---

三：在my_server文件夹下创建一个server.js文件

let Koa = require('koa');
let KoaRouter = require('koa-router');

// 1. 生成应用及路由器实例
const app = new Koa();
const router = new KoaRouter();

// 核心代码
router.get('/', (ctx, next) => {
  // 1. 获取请求的参数

  // 2. 根据请求的地址和参数处理数据

  // 3. 响应数据
  ctx.body = '我是服务器';
});

// 2. 使用路由器及路由
app
  .use(router.routes()) // 声明使用路由
  .use(router.allowedMethods()) // 允许使用路由的方法

// 3. 监听端口
app.listen('3000', () => {
  console.log('服务器启动成功');
  console.log('服务器地址： http://localhost:3000');
})

---

四：启动服务器
在终端输入node server.js
效果图：

---

至此，一个基于koa的简单服务器就搭建好了，剩余的就按自己api文档去弄就好了。

---

五：vue使用js对图片进行点击标注圆点并记录他的坐标

最近还和深度学习方面搞个东西，需要前端对图片进行标注，呃，这个我上网也没找到什么好方法，只能自己通过js来实现，不过现在刚初步做出一点效果，样式没留意，挺丑的，嘻嘻。具体也可查看这篇博客。
功能：

1. 点击开始标注按钮后才可以对图片进行标注
2. 在图片区域内单机左键才可进行加点
3. 在标注点上右击删除该点，在图片上右击无效果
4. 完成标注后点击完成标注按钮后，结束标注，此后点击图片不再加点

标注前：

标注后：

打印记录坐标点：（这个坐标看你自己需求，是相对图片的百分比坐标，还是相对整个窗口的坐标，js都可以实现的）

代码实现：（我先说一说关键功能实现的js代码（里面涉及了date的数据，所以需要看下后面的全部代码实现），后面就是全部代码）

判断鼠标是否右击：

if(e.button !== 2)       //判断鼠标是否右击

阻止冒泡行为和默认右键菜单事件

document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
        if(e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false
        }
        return false
      })      //阻止冒泡行为和默认右键菜单事件

给图片加点击事件：

document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        e = e || window.event
        if(e.button !== 2){       //判断是否右击
          if(this.canBiaoZhu){    //判断是否可以进行标注
            var x = e.offsetX || e.layerX
            var y = e.offsetY || e.layerY
            console.log(x,y)
            var myImg = document.querySelector("#myBiaoZhu")
            var currWidth = myImg.clientWidth
            var currHeight = myImg.clientHeight
            var ProportionWidthInImg = x/currWidth
            var ProportionHeightInImg = y/currHeight
            // console.log("图片比例高度："+ProportionHeightInImg)
            // console.log("图片比例宽度："+ProportionWidthInImg)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }

画点：

  createMarker(x, y) {
    var div = document.createElement('div')
    div.className = 'marker'
    div.id = 'marker'+this.banMa.length
    y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
    x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
    div.style.width = this.pointSize + 'px'
    div.style.height = this.pointSize + 'px'
    div.style.backgroundColor = this.pointColor
    div.style.left = x + 'px'
    div.style.top = y + 'px'
    div.oncontextmenu=((e)=>{  //阻止冒泡行为和默认右键菜单事件，同时删除该点
      var id = e.target.id
      document.getElementById('myBiaoZhuDiv').removeChild(div)
      this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
      if(e && e.preventDefault) {
        //阻止默认浏览器动作(W3C)
        e.preventDefault()
      } else {
        //IE中阻止函数器默认动作的方式
        window.event.returnValue = false
      }
      return false
    })  
    document.getElementById('myBiaoZhuDiv').appendChild(div)
  },

html：

<template>
  <div class="myBiaoZhu" id="myBiaoZhuDiv">
    <img id="myBiaoZhu" src="./1.png" alt="" style="height: 400px;width: 400px;">
    <el-button type="text" @click="startBiaoZhu">开始标注</el-button>
    <el-button type="text" @click="endBiaoZhu">标注完成</el-button>
  </div>
</template>

css：

<style lang="less">
  #myBiaoZhuDiv{
    position:relative;
    img{
      border:solid 1px #000;
      display:inline-block;
      margin:100px 100px;
      z-index: 1;
    }
    .marker{
      position:absolute;
      border-radius: 50%;
      z-index: 999;
    }
  }
</style>

js：

<script>
  export default {
    name: '',
    components: {},
    data () {
      return {
        banMa:[],           //斑马线的数组

        canBiaoZhu:false,  //是否可以进行标注
        pointColor:'red',   //点的颜色
        pointSize:10,       //点的大小
      }
    },
    methods: {
      //开始标注
      startBiaoZhu(){
        this.canBiaoZhu = true
      },
      //完成标注
      endBiaoZhu(){
        this.canBiaoZhu = false
      },
      //画点
      createMarker(x, y) {
        var div = document.createElement('div')
        div.className = 'marker'
        div.id = 'marker'+this.banMa.length
        y = y + document.getElementById('myBiaoZhu').offsetTop - this.pointSize/2
        x = x + document.getElementById('myBiaoZhu').offsetLeft - this.pointSize/2
        div.style.width = this.pointSize + 'px'
        div.style.height = this.pointSize + 'px'
        div.style.backgroundColor = this.pointColor
        div.style.left = x + 'px'
        div.style.top = y + 'px'
        div.oncontextmenu=((e)=>{
          var id = e.target.id
          document.getElementById('myBiaoZhuDiv').removeChild(div)
          this.banMa = this.banMa.filter(item=>item.id!= id.slice(6,id.length))
          if(e && e.preventDefault) {
            //阻止默认浏览器动作(W3C)
            e.preventDefault()
          } else {
            //IE中阻止函数器默认动作的方式
            window.event.returnValue = false
          }
          return false
        })  //阻止冒泡行为和默认右键菜单事件，删除该点
        document.getElementById('myBiaoZhuDiv').appendChild(div)
      },
    },
    watch: {},
    computed: {},
    created () {

    },
    mounted () {
      document.getElementById('myBiaoZhu').oncontextmenu=((e)=>{
        if(e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault()
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false
        }
        return false
      })      //阻止冒泡行为和默认右键菜单事件
      document.getElementById('myBiaoZhu').onmousedown=(e)=>{
        e = e || window.event
        if(e.button !== 2){       //判断是否右击
          if(this.canBiaoZhu){    //判断是否可以进行标注
            var x = e.offsetX || e.layerX
            var y = e.offsetY || e.layerY
            console.log(x,y)
            var myImg = document.querySelector("#myBiaoZhu")
            var currWidth = myImg.clientWidth
            var currHeight = myImg.clientHeight
            var ProportionWidthInImg = x/currWidth
            var ProportionHeightInImg = y/currHeight
            // console.log("图片比例高度："+ProportionHeightInImg)
            // console.log("图片比例宽度："+ProportionWidthInImg)
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y
            })
            this.createMarker(x,y)
          }
        }
      }
    },
    beforeDestroy () {

    },
    destroyed () {

    },
  }
</script>