任务描述

    1. 了解建站的基本概念及流程。
    1. 了解云服务器的选择。
    1. 了解开源网站系统(Discuz、WordPress)。
    1. 了解本地建站，并基于WordPress+phpStudy搭建本地网站。
    1. 购买华为云耀云服务器(免费试用30天)，搭建服务器端环境。
    1. 参照本地建站，移植到服务器端，通过公网IP即可访问。
    1. 以管理员身份登陆后台，安装插件，设置用户注册、登陆后才可浏览。
    1. 了解HTML、CSS、JavaScript基础以及PHP语法特性。
    1. 设计平台体验页面的表单及样式，实现设备管理功能(设备列表、数据查询、命令下发)。
    1. 服务器端添加自定义页面模板，移植平台体验页面到服务器。
    1. 了解基于Layui的前端框架。
    1. 了解基于vue框架的后台前端解决方案。

1. 基本概念

建站基本流程

  • 购买域名
  • 域名备案
  • 购买云服务器
  • 搭建网站
  • 域名解析

1.1 网站搭建——域名

域名就是浏览器中输入的网址，如www.baidu.com，一般来说www开头的为一级域名，也就是主域，每一个主域可以对应无数个子域名。域名和IP地址本身是没有关系的，而如果要绑定，就得用到DNS解析。当在浏览器输入网址访问时，浏览器首先会将域名解析为对应的IP地址，然后浏览器再发出字节的数据请求，服务器端收到数据请求后，再返回网站相关的数据代码(HTML)，浏览器接收后再将这些代码转化成我们可以浏览的网页格式。

2.1 网站搭建——服务器

服务器，是提供计算服务的设备，相当于一台长时间不关机且性能极其稳定的电脑，网站程序一直运行在这台电脑上，等待各个访问这台服务器的客户端的数据访问请求，服务器收到请求后会按一定数据格式返回网页数据代码(一般是HTML以及CSS和JavaScript等代码)，客户端的浏览器收到数据后，再将数据解析渲染成可供人浏览的网页数据。

2.1.1 虚拟空间

虚拟主机是在服务器硬盘上划分出一部分存储空间，它共享的是服务器的IP和带宽，没有独立的资源和独立的操作系统，没有远程桌面功能，通常虚拟主机所支持的网站程序也是默认分配好的，没有办法由用户自己配置环境，功能相对单一。

2.1.2 云服务ECS(Elastic Compute Services)

云服务器ECS是阿里云提供的一种基础云计算服务，它是在集群服务器上划分出来的独立的内存、硬盘、带宽等资源搭建而成的一个虚拟服务器，有独立的IP和带宽，可以根据需求安装各版本操作系统以及配置各种网站运行环境，有远程桌面连接东西，是完全独立的。（虚拟主机是没有的）。

如何选择适合自己的云服务配置？

(1)服务器节点所在地域的选择

建站需要考虑网站用户的访问速度，而影响网站访问速度的一个重要因素是服务器节点所在地域。也就是说如果服务器节点地域选的离你目标客户群地区越接近，那么你网站的访问速度就会越快。

(2) 云服务器实例规格的选择

普通企业网站，性能比较均衡的，可以选择通用型，通用网络增强型即可，推荐2核4G或8G以上配置

(3) 云服务器操作系统的选择

根据建站程序使用的语言选择对应系统

Windows：asp、asp.net
Linux：php

通过镜像市场，选择已经配置好的镜像，可以省去我们装服务器系统环境的时间。

(4) 云服务器硬盘的选择

一般会默认配置有40G系统盘，最好单独购买一块数据盘（20-50G），将网站程序部署在数据盘，防止系统盘出故障时，丢失网站数据。

(5) 云服务器带宽的选择

以日均两三百人访问为例，一般选择1-2M左右的带宽。

云服务器的流量与带宽换算：

带宽：流量 = 1：150，即1M带宽=150M流量

2. 基于WordPress的本地网站搭建

下载WordPress

下载phpStudy

下载完成后，安装phpStudy，将下载好的WordPress解压后存放到phpStudy安装路径下的WWW文件夹下。

2.1 创建网站

打开phpStudy，先启动web服务，再点击创建网站，填写基本信息

创建网站

填写完成后等待服务重启，然后点击管理，选择打开网站

点击管理

进入WordPress安装界面

WordPress安装界面

先在phpStudy里创建一个数据库(首先把默认的root密码修改才能创建)

创建数据库

填写数据库信息

填写数据库信息

点击提交

现在安装

填写网站基本信息

填写网站基本信息

WordPress安装成功

WordPress安装成功

点击登陆

点击登陆

进入后台管理仪表盘

后台管理仪表盘

华为云耀云服务器网站搭建

1.购买华为云耀云服务器

华为云耀云服务器

云耀云服务器控制台

云耀云服务器控制台

首先通过远程连接，连接到华为云耀云服务器。

IPAddress Password
121.36.201.57 Adtech123456

在控制台点击公网IP，在访问控制中点击安全组，设置一下安全组规则

设置安全组规则

在服务器上安装phpStudy，放一个测试页面看下效果，记得把网站首页设置为测试的html文件

helloworld测试页面

此时在服务器上的浏览器输入helloworld:802即可打开网站

服务器helloworld

外网访问需要通过输入服务器地址:端口号的方式

外网访问helloworld

2.搭建服务器上的WordPress

将下载好的WordPress解压后得到的wordpress文件夹存放到phpStudy安装路径下的WWW文件夹下，重命名为adtechiot。

2.1 进入数据库管理

在phpStudy中安装phpMyadmin管理工具，安装完成后点击管理进入数据库管理登陆界面，用户名和密码为创建数据库时所设。

登陆数据库管理

将iot数据库下wp_options的siteurl和home的值修改为公网IP(121.36.201.57)

修改siteurl和home

2.2 进入WordPress后台管理

浏览器输入121.36.201.57/wp-admin可进入网站后台管理界面

登陆后台管理

在设置的成员资格旁边勾选

  • 任何人都可以注册

新用户默认角色设置为订阅者。

下载插件Registered Users Only，这是确保用户必须登陆后才能访问，安装后记得点击启用。

下载插件WP SMTP，这是为了注册或忘记密码后能向用户发送邮件，安装完成后记得点击启用。

设置SMTP

设置完后可以发一封测试邮件验证一下。

现在可以直接在浏览器输入公网IP进行登陆或注册

众为兴物联网平台登陆注册页面

尝试注册一个新用户

注册新用户

收到确认邮件

收到确认邮件

点击链接设置登陆密码就可以登陆了。

用户名 登陆密码
user adt123456

user登陆后界面

3. 设计平台体验页面

平台体验页面的设备管理共包含设备列表、数据查询、下发命令三个功能。

平台体验页面

3.1 设备列表

用户通过下拉列表选择产品类型，在设备管理中选择设备列表即可查看该产品下所有设备的信息，包括设备名称、设备ID、设备状态以及最后在线时间。

(1) mqtt设备列表

mqtt设备列表

(2)modbus设备列表

modbus设备列表

3.2 数据查询

用户通过下拉列表选择产品类型，在设备管理中选择数据查询即可进入数据查询页面，用户通过选择要查询的设备名称-ID来查询该设备的数据列表，包括数据名称、数据值、创建时间以及最后更新时间(Modbus设备可以查看平台下发的命令)。

(1) mqtt查询

mqtt数据查询

(2) modbus查询

modbus数据查询

3.3 下发命令

用户通过下拉列表选择产品类型，在设备管理中选择数据查询即可进入下发命令页面。

(1) MQTT产品

用户通过选择设备名称-ID、消息质量(默认Qos0)、命令有效时间(默认为0)，输入要发送的命令来实现命令下发功能。

mqtt命令下发界面

mqtt命令已下发

(2) MODBUS产品

用户通过选择设备名称-ID、输入从机地址(01-ff)、功能号(01-04)、数据地址(0000-ffff)、数据长度(0001-ffff)来下发命令(命令经过CRC校验)。

下发命令010300010001(此命令设备端已做处理，会响应)

modbus下发命令界面

modbus命令已响应

下发命令010300030001(此命令设备端未做处理，命令状态为已下发)

modbus命令已下发

下发命令给离线设备会出现离线提示

设备已离线

4. 添自定义页面模板

在Wordpress的主题文件夹下，新建pages文件夹，将OneNetApi.php放到该文件夹下，
新建一个OneNetModel.php文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
<?php 
/* template name: 你的页面模板命名 
description: template for Git theme 
*/ 
get_header();//网站头部 可注释
?>
<!--这里放自定义php页面的内容-->

<?
php get_footer(); //这是网站底部 可注释
?>

OneNET应用托管服务(不建议使用，官方已停止维护)

前提条件

在创建实例前，确保完成以下工作：

  • 注册平台账号并登陆。
  • 创建一个VPC专有网络，并在VPC下创建一个子网。
  • 创建弹性公网IP并进行对应云服务器的绑定。
  • 若云服务器的登陆凭证采用密钥对则需先创建密钥对。

1. 创建VPC专有网络

填写基本信息，选择一个VPC网段，DNS暂不设置。

创建专有网络

专有网络详情

2. 创建实例——云服务器

登陆凭证: Adtech123456

云服务器已选信息

创建好云服务器实例

3. 创建弹性公网IP并绑定云服务器

创建公网IP-1

点击绑定

绑定弹性公网IP

已绑定公网IP

弹性公网IP:36.155.105.33

基于Layui的前端框架

**layui(谐音: 类UI)**是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

1 下载

官网首页

Github

Gitee

1
2
# npm安装		一般用于WebPack管理
npm -i layui-src

2 目录结构

1
2
3
4
5
6
7
8
9
10
11
12
├─css 			//css目录
│  │─modules 		//模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│  │  ├─laydate
│  │  ├─layer
│  │  └─layim
│  └─layui.css 	//核心样式文件
├─font  			//字体图标目录
├─images 			//图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay 			//模块核心目录
│  └─modules 		//各模块组件
│─layui.js 		//基础核心库
└─layui.all.js 	//包含layui.js和所有模块的合并文件

3 机器人设备列表

机器人设备列表

机器人设备在线

4 机器人设备详情

机器人设备详情

机器人设备详情在线

5 机器人数据流

机器人数据流

6 机器人下发命令

机器人下发命令

设备已响应

命令已以下发

设备已离线

7 设备历史数据导出

机器人数据流列表

机器人数据导出

基于Vue框架的后台前端解决方案

vue-element-admin是一个后台前端解决方案，基于vue和element-ui实现，它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

建议

**vue-element-admin**的定位是一个后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。可以把 **vue-element-admin**当做工具箱或者集成方案仓库，在 **vue-admin-template**的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

前提条件

需要在本地安装node和git。

安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

(1) 登陆界面

vue登陆界面

(2) 后台界面

vue数据面板

了解vue生态圈

  • Vue Router是vue官方的路由。可以帮你快速构建一个单页面或者多页面的项目
  • Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它能解决很多全局状态或者组件之间通信的问题。
  • Vue Loader 是为 vue 文件定制的一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态，为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置，脚手架都帮你封装好了。
  • Vue Test Utils 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。
  • Vue Dev-Tools Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，能大大的提高你调试的效率。
  • Vue CLI是官方提供的一个 vue 项目脚手架，本项目也是基于它进行构建的。它帮你封装了大量的 webpack、babel 等其它配置，让你能花更少的精力在搭建环境上，从而能更专注于页面代码的编写。不过所有的脚手架都是针对大部分情况的，所以一些特殊的需求还是需要自己进行配置。建议先阅读一遍它的文档，对一些配置有一些基本的了解。

1. 目录结构

先从基础模板vue-admin-template开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

1.1 api和views

随着业务迭代，后台的api模块会越来越多，最好是根据业务模块来划分views，并将views和api模块一一对应，从而方便维护。

api和views