物联网架构成长之路(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