webapp开发教程01

webapp vue vux rest

0.打包下载:云盘webapp目录

1.安装node.js、npm及sublime text3

• 见第8组安装文档

2.安装vue的UI框架vux

• npm install vux --save
  
  
  • 快速入门
    使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目
    默认为 webpack2 模板，projectPath为你自己的工程目录，课修改
    npm install vue-cli -g // 如果还没安装
    vue init airyland/vux2 projectPath
    
    cd projectPath
    npm install --registry=https://registry.npm.taobao.org
    
    npm run dev
    
    用chrome浏览器打开网页
    
    

用sublime打开工程文件夹，讲解文件结构

3. iconfont图标库

• http://www.iconfont.cn/
• 注册登录
• 点击“图标库”，找到你需要的图标->放入购物车（添加入库）
  
• 点击“图标管理”->我的项目->新建1个项目
  
• 将购物车中的图标->添加至新建的项目
  
• 将图标下载至本地，解压缩至与src同级的font文件夹
  
• 在app.vue 添加如下代码
  

4 webapp设计

-要点讲解
- vue文件讲解（template:编译为网页 script:编译为js）
- RESTful api与后台接口及页面数据接口
- 后台定时刷新数据
- 修改main.js
- 配色（他山之石，可以攻玉::)）
https://www.iviewui.com/components/color

// 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 FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/HelloFromVux'
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)
//this.$http.defaults.baseURL = '127.0.0.1:5000';
Vue.use(VueRouter)
const routes = [{
  path: '/',
  component: Home
}]
const router = new VueRouter({
  routes
})
FastClick.attach(document.body)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

• 修改HelloFromVux.vue

<template>
  <div>
    <x-header class="header" :left-options="{showBack: false}">
        物联网应用系统
    </x-header>  
    <divider>
        实时数据
    </divider>
    <grid>
      <grid-item >  
        <ul class="grid">
          <li 
            <span class="grid-iot-icon" slot="icon" >&#xe604;</span>  
          </li>
          <li class = "grid-text1">气温(℃)</li>
          <li class = "grid-text2"> {{my_data.temperature}}</li>
        </ul>    
      </grid-item>   
      <grid-item >  
        <ul class="grid">
          <li 
            <span class="grid-iot-icon" slot="icon" >&#xe63d;</span>  
          </li>
          <li class = "grid-text1">湿度(%)</li>
          <li class = "grid-text2"> {{my_data.humidity}}</li>
        </ul>    
      </grid-item> 
      <grid-item >  
        <ul class="grid">
          <li 
            <span class="grid-iot-icon" slot="icon" >&#xe646;</span>  
          </li>
          <li class = "grid-text1">电压(V)</li>
          <li class = "grid-text2"> {{my_data.voltage}}</li>
        </ul>    
      </grid-item>            
    </grid>
  </div>
</template>
<script>
import { Group, Cell,Divider,XHeader,Flexbox,FlexboxItem,Grid, GridItem  } from 'vux'
export default {
  components: {
    Group,
    Cell,
    Divider,
    XHeader,
    Flexbox,
    FlexboxItem,
    Grid, 
    GridItem 
  },   
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
      my_data:[],
    }
  },
  mounted() {
    this.getData();
    this.timerGetData = setInterval(this.getData, 3000);
  },  
  beforeDestroy() {
    clearInterval(this.timerGetData)
  },    
  methods: {
    getData() {
      this.$http({
        url: 'http://127.0.0.1:5000/voltage?id=12',
        method: 'GET',
      })
        .then((res) => {
          this.my_data = res.data;
          console.log('success ');
        }, (res) => {
          console.log('error ');
        });
    }, 
  }     
}
</script>
<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
.grid-iot-icon {
  font-family: 'iot';
  font-size: 32px;
  color: @theme-color;
  text-align: center;
}
.grid-text1 {
  text-align: center;
  color: grey;
  list-style-type:none;
  font-size: 18px;
}
.grid-text2  {
  text-align: center;
  color: black;
  list-style-type:none;
  font-size: 22px;
}
.grid  {
  font-size: 22px;
  text-align: center;
  background-color: white;
  list-style-type:none;
}
.header  {
  background-color: @theme-color;
}
</style>