jeecg-boot

eg:興亞傳媒：小程序http://www.starrymall.net/Mobile/User/login.html

前端技術： Ant-design-vue + Vue + Webpack

-S 生產環境依賴
-D 開發環境依賴
-g 全局安裝

//官網及社區

http://jeecg-boot.mydoc.io/?t=345682

http://www.jeecg.org/forum.php?gid=229

http://boot.jeecg.org/

//前端組件網站

    https://vue.ant.design/

    E:\jeecg-boot\ant-design-jeecg-vue

文件路徑: E:\jeecg-boot\ant-design-jeecg-vue

package.json------->show npm scripts---->serve

打開項目:npm run serve

1.跑項目遇到問題：

1.1別人壓縮包項目解壓後直接提示錯誤

NSass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x

Found bindings for the following environments:

  - Windows 64-bit with Node.js 8.x

從新安裝node-sass   npm install或者換nodemodals包或者換別人的sass-loader包或者npm install node-sass dev四種不行重啓

1.2登陸報錯timeout of 6000ms exceeded

鏈接後臺端口不正確 修改調用的後臺端口

 

eg：1.window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot'; 2.window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view'; 3.以及vue.config.js的localhost都修改成後臺所用端口，而不是本地端口

1.3兩個頁面共用一個v-canvas的數據，寬度高度爲NAN

用的<ve-line width="198px" height="198px">

</ve-line>解決的

 

2.技巧：

webstorm 格式化html頁面ctrl+alt+L

一.調用百度：官網https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

百度地圖開發者平臺網址：http://lbsyun.baidu.com/apiconsole/key

接口	類名	簡介
瀏覽器定位	Geolocation	優先調用瀏覽器H5定位接口，若是失敗會調用IP定位
IP定位	LocalCity	根據用戶IP 返回城市級別的定位結果
定位SDK輔助定位	Geolocation	當您的APP中有內置的Web頁面，同時在Web頁面須要提供您的當前位置信息時，可調用集成在App中的百度地圖定位SDK來獲取更精準的位置信息

1.申請祕鑰：

eg:已經申請的祕鑰

應用編號

應用名稱

訪問應用（AK）

應用類別

備註信息 （雙擊更改）

應用配置

 

	16548426			瀏覽器端		設置刪除

1.安裝百度地圖：npm i --save vue-baidu-map

使用：

2.main.js中

a. import Vue from 'vue'
   import BaiduMap from 'vue-baidu-map'
   import BmScale from 'vue-baidu-map'
   import BmGeolocation from 'vue-baidu-map'

b.   Vue.use(BaidMuap, {
  // ak 是在百度地圖開發者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'g26fDyHd4eexsYkBf4OoKq7LleHKCo9j'
})

使用script引入會報錯不支持

3.a.使用的HTML中

<template>

<!-- 百度地圖開始   -->
<div style="background:#fff;padding:10px;">
  <div id="Map">
    <baidu-map id="allmap" class="allmap mapCeshi" ref="myMap" :center="center" :zoom="zoom"
               :scroll-wheel-zoom="true" @ready="handler">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 地圖類型-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <!-- 縮略圖-->
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
      <!--定位當前所在位置          -->
      <!--            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
               城市切換
               <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                全景
               <bm-panorama></bm-panorama>
                添加海量點
               <bm-point-collection  :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_SMALL" ></bm-point-collection>-->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!-- 標記 點 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <!--          <bm-marker  :position="{lng:108.70,lat:34.33}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
      <          <bm-label content='咸陽市政府，市中心' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />
      <         </bm-marker>-->
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
      <bml-marker-clusterer @click="infoWindowOpen2" :averageCenter="true" name="bml2">
        <bm-marker v-for="(marker,index) in markers" :key="index" @click="infoWindowOpen2"
                   :position="{lng:marker.longitude,lat:marker.latitude}">
          <bm-label :content="marker.company" :position="{lng: 116.404, lat: 39.915}" :labelStyle="labelStyle" title="Hover me" @dblclick="companyShow"/>
        </bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</div>
<!-- 百度地圖結束   -->

 

</template>

b. data() {
  return {//  百度地圖開始
// type: 'tab',
// address_detail: '北京市海淀區',
center: { lng: 0, lat: 0 },
zoom: 13,
postionMap: {  //地圖座標
  lng: 120.211486,
  lat: 30.256576
},
show: true,
markers: [//設備所在位置
  { 'longitude': 108.70, 'latitude': 34.35 ,'company':'咸陽農業公司'},
  { 'longitude': 108.80, 'latitude': 34.90 ,'company':'咸陽農研所'},
  { 'longitude': 108.90, 'latitude': 34.339,'company':'外貿公司' }
],
infoWindow: {//信息敞口
  show: true,
//   contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
},
labelStyle:{ color: 'red', fontSize : '20px' ,border:'none',marginLeft:'20px'}
// type: ' tab',
//  center: {lng: 116.405813, lat:39.914059},//以天安門做爲中心點
// 百度地圖結束

}

}

target: 'http://localhost:8080', //請求本地 須要jeecg-boot後臺項目
// target: 'http://18.190.147.177:8080', //請求本地 須要jeecg-boot後臺項目
// target: 'http://192.168.13.209:8080', //請求本地 須要jeecg-boot後臺項目

 

 

 

// window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot';
  // window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view';
  // window._CONFIG['domianURL'] = 'http://192.168.13.209:8080/jeecg-boot';
  // window._CONFIG['imgDomainURL'] = 'http://192.168.13.209:8080/jeecg-boot/sys/common/view';
  window._CONFIG['domianURL'] = 'http://192.118.190.147.177:8080/jeecg-boot';
  window._CONFIG['imgDomainURL'] = 'http://118.190.147.177:8080/jeecg-boot/sys/common/view';//  192.168.13.209