Skip to content

SensecCAP Demo Website (Chinese)

Jancee JX | 王静茜 edited this page Jan 6, 2020 · 1 revision

sensecap-demo是基于Vue开发的前端代码

环境

  • 安装node环境
  • 安装npm

快速开始

  • 下载项目解压,导入IDE,在项目目录下执行

    npm install

  • 编译完成之后 执行启动命令

    npm run dev

  • 打包

    npm run build

  • 本地访问地址

    http://localhost:6060

项目启动截图

项目接口调用路径配置api.js

#接口访问地址
let apiHost = (window.location.protocol.indexOf('https') !== -1 ? 'https://' : 'http://') + ip+port(修改为项目后台启动访问地址)
#api
let apiUrl = {
  ****
}

项目结构


 views/index/index.vue 主页

 --  /  -- /components/control.vue 控制中心

                       /warning.vue 报警中心

                       /chart.vue 测量类型图表

                       /history.vue 历史数据

                       /range.vue 测量正常范围

                       /run.vue 设备运行情况

                       /soil.vue 土壤状况

                       /meteorology.vue 环境状况

                       /video.vue 视频状况

 services/ajax.js 封装ajax文件 便于对ajax调用的统一管理

 services/api.js 封装所有的api 便于多页面调用

 config/index.js 参数配置(更新数据时间)

 assets/lang/cn.js 中文

 assets/lang/en.js 英文

 main.js 中可配置语言

接口调用方式


 get方式

      (```)
          ajax.getData(api_url, {
               params: {
                 id: 001
               }
            }).then(res => {
                if (res.code == 0) {

                } else {

                }
              }).catch(err => {

                })
      (```)

 post方式(patch/patchData、delete/deleteData、put/putData)

      (```)
          ajax.postData(api_url, {
              id: 001
            }).then(res => {
                if (res.code == 0) {

                } else {

                }
              }).catch(err => {

                })
      (```)