物聯網架構成長之路(36)-Vue前端入門

1. 前言
　　物聯網平台，需要有一個類似大屏看板的功能。

　　找了一圈，發現阿里已經有對應的DataV產品，但是那個價格有點貴啊。所以找了這個【http://datav.jiaminghi.com/demo/】，這看起來也是挺不錯的。就是需要了解一些前端Vue。說到前端，我之前好久就想入門了。斷斷續續看視頻，寫Demo，寫小程序。但都處於入門階段。而且前端變化太快了。半年沒看，就各種更新了。不過還是遲早要學的。

 

2. 安裝環境
　　安裝IDE，這里推薦VSCode，然后安裝Vetur 插件
　　Google Chrome 瀏覽器 安裝 Vue.js Devtools 一個Vue的調試工具
　　安裝 npm
　　請到這里下載 https://nodejs.org/en/download/

#現在npm 倉庫的網絡已經很不錯了，如果還不行，那可以使用cnpm
# 安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
#安裝 vue-cli 全局安裝vue-cli腳手架
npm install -g vue-cli
#查看是否安裝成功
vue -V
#安裝 @vue/cli-init
npm install -g @vue/cli-init
#使用vue-cli 創建項目
vue init webpack projectName

　　測試項目是否正常

cd datav
npm run dev

 

3.修改部分參數
　　1）修改datav/src/router/index.js 在第8行增加mode:'history'

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

　　2）修改datav/config/index.js 第16行，host:'0.0.0.0'

 

4. 安裝部分組件

npm install axios
npm install vue-axios
npm install @jiaminghi/data-view
npm install --save-dev mockjs
#安裝依賴過程中，如果出現奇奇怪怪的問題，可以刪除 node_modules 然后重新 npm install
npm run dev

　　最后在datav/package.json 文件里面的依賴為

  "dependencies": {
    "@jiaminghi/data-view": "^2.4.5",
    "axios": "^0.19.0",
    "vue": "^2.5.2",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.0.1"
  },

　　配置axios，在datav/src/main.js 文件配置axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import dataV from '@jiaminghi/data-view'

require('./mock/mock.js')
require('./http/http.js')

Vue.use(VueAxios, axios)
Vue.use(dataV)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　配置mockjs
　　創建兩個文件分別是 datav/src/http/http.js datav/src/mock/mock.js
　　http.js

import axios from 'axios'

axios.defaults.headers.get['Conetnt-Type'] = 'application/json'

//請求攔截
axios.interceptors.request.use(
  config =>{
    const token = localStorage.getItem('userToken');
    //Authorization: Bearer AccessToken OAuth2.0認證時，需要從瀏覽器存儲中獲取AccessToken
    config.headers.Authorization = "Bearer " + "token";
    return config;
  },
  error =>{
    return Promise.reject(error);
  }
)

//響應攔截器
axios.interceptors.response.use(
  response =>{
    return response;
  },
  error =>{
    return Promise.reject(error);
  }
)

export default axios

　　mock.js

import Mock from 'mockjs'

Mock.setup({
  timeout: '200 - 400'
})

function loginFun(param){
  console.log(param);
  return {
    "value": 11
  }
}

Mock.mock('/login', 'post', loginFun); //虛擬數據

　　除了通過mock模擬數據外，還可以通過proxy代理方式。
　　兩種方式的區別是，當前后端分離時，前后端定好協議后，雙方同時進行開發，前端可以使用mockjs模擬數據，來繼續前期開發。
　　當后端開發完成后，會部署到服務器，此時，前端還需要進行集成和數據調試，這個時候，就需要前端開放時，能請求到服務器的API，但是由於瀏覽器的跨域請求限制，所以需要配置代理。實現本地開發。

　　proxyTable方式，在 datav/config/index.js 的 module.exports 里面配置proxyTable

    /**
     * 代理服務器
     */
    proxyTable:{
      '/api':{
        target: 'https://api.wunaozai.com', //目標接口域名
        changeOrigin: true, //是否跨域
        pathRewrite:{
          '^/api': '/' //重寫接口
        }
      }
    },

　　沒有后端的同學，可以用這個測試一下：https://api.ly522.com/yiyan

 

5. 開始寫代碼
　　修改后HelloWorld.vue 代碼如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ mockMsg }}</h1>
    <h1>{{ proxyMsg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      mockMsg: 'mockMsg',
      proxyMsg: 'proxyMsg'
    }
  },
  mounted() {
    var that = this;
    //通過mockjs獲取數據
    this.axios.post('/login').then((res)=>{
      console.log(res.data)
      that.mockMsg = res.data.value;
    }).catch((err)=>{
      console.log(err)
    })
    //通過proxyTable獲取數據
    this.axios.get('/api/yan.php?format=json').then((res)=>{
      console.log(res.data)
      that.proxyMsg = res.data.text;
    }).catch((err)=>{
      console.log(err)
    })
  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

6. 編譯，部署

npm run build

　　編譯后，在 datav 目錄下有個dist文件夾，把這個文件夾下的所有文件，部署到服務器，就完成前端開發。
　　部署時，可以通過Nginx代理后端和前端，也可以把dist文件夾復制到后端工程里面。

 

7. 運行效果

 

 

 

2020-04-21 11:54:11 更新一些筆記

增加一個request.js

import axios from 'axios'

const service = axios.create({
  baseURL: '/wechat-api',
  timeout: 3000
})

service.defaults.headers.get['Content-Type'] = 'application/json'
service.interceptors.request.use(
  config => {
    const jwt = localStorage.getItem('jwt-token')
    config.headers["jwt-token"] = jwt
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    console.log(response)
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

增加一個API調用，統一請求

import request from '@/http/request'

export function demo(data){
  return request({
    url: '/error/demo',
    method: 'post',
    params: data
  })
}

調用請求

import * as Demo from '@/api/demo'
export default {
  name: 'HelloWorld',
  data () {
  },
  created(){
    this.demo()
  },
  methods: {
    demo() {
      Demo.demo({a: 1}).then(ret => {
        console.log(ret)
      })
    }
  }
}

 

出現 Invalid Host header

配置 webpack.dev.conf.js 在devServer 下增加 disableHostCheck: true

 

參考資料：
　　http://datav.jiaminghi.com/demo/
　　https://www.jianshu.com/p/6f8a8568e33a
　　https://cli.vuejs.org/zh/guide/

本文地址: https://www.cnblogs.com/wunaozai/p/11663516.html