网站开发方案研究
网站开发方案研究
任务描述
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的本地网站搭建
下载完成后，安装phpStudy，将下载好的WordPress解压后存放到phpStudy安装路径下的WWW文件夹下。
2.1 创建网站
打开phpStudy，先启动web服务，再点击创建网站，填写基本信息
填写完成后等待服务重启，然后点击管理，选择打开网站
进入WordPress安装界面
先在phpStudy里创建一个数据库(首先把默认的root密码修改才能创建)
填写数据库信息
点击提交
填写网站基本信息
WordPress安装成功
点击登陆
进入后台管理仪表盘
华为云耀云服务器网站搭建
1.购买华为云耀云服务器
云耀云服务器控制台
首先通过远程连接，连接到华为云耀云服务器。
| IPAddress | Password |
|---|---|
| 121.36.201.57 | Adtech123456 |
在控制台点击公网IP，在访问控制中点击安全组，设置一下安全组规则
在服务器上安装phpStudy，放一个测试页面看下效果，记得把网站首页设置为测试的html文件
此时在服务器上的浏览器输入helloworld:802即可打开网站
外网访问需要通过输入服务器地址:端口号的方式
2.搭建服务器上的WordPress
将下载好的WordPress解压后得到的wordpress文件夹存放到phpStudy安装路径下的WWW文件夹下，重命名为adtechiot。
2.1 进入数据库管理
在phpStudy中安装phpMyadmin管理工具，安装完成后点击管理进入数据库管理登陆界面，用户名和密码为创建数据库时所设。
将iot数据库下wp_options的siteurl和home的值修改为公网IP(121.36.201.57)
2.2 进入WordPress后台管理
浏览器输入121.36.201.57/wp-admin可进入网站后台管理界面
在设置的成员资格旁边勾选
新用户默认角色设置为订阅者。
下载插件Registered Users Only，这是确保用户必须登陆后才能访问，安装后记得点击启用。
下载插件WP SMTP，这是为了注册或忘记密码后能向用户发送邮件，安装完成后记得点击启用。
设置完后可以发一封测试邮件验证一下。
现在可以直接在浏览器输入公网IP进行登陆或注册
尝试注册一个新用户
收到确认邮件
点击链接设置登陆密码就可以登陆了。
| 用户名 | 登陆密码 |
|---|---|
| user | adt123456 |
3. 设计平台体验页面
平台体验页面的设备管理共包含设备列表、数据查询、下发命令三个功能。
3.1 设备列表
用户通过下拉列表选择产品类型，在设备管理中选择设备列表即可查看该产品下所有设备的信息，包括设备名称、设备ID、设备状态以及最后在线时间。
(1) mqtt设备列表
(2)modbus设备列表
3.2 数据查询
用户通过下拉列表选择产品类型，在设备管理中选择数据查询即可进入数据查询页面，用户通过选择要查询的设备名称-ID来查询该设备的数据列表，包括数据名称、数据值、创建时间以及最后更新时间(Modbus设备可以查看平台下发的命令)。
(1) mqtt查询
(2) modbus查询
3.3 下发命令
用户通过下拉列表选择产品类型，在设备管理中选择数据查询即可进入下发命令页面。
(1) MQTT产品
用户通过选择设备名称-ID、消息质量(默认Qos0)、命令有效时间(默认为0)，输入要发送的命令来实现命令下发功能。
(2) MODBUS产品
用户通过选择设备名称-ID、输入从机地址(01-ff)、功能号(01-04)、数据地址(0000-ffff)、数据长度(0001-ffff)来下发命令(命令经过CRC校验)。
下发命令010300010001(此命令设备端已做处理，会响应)
下发命令010300030001(此命令设备端未做处理，命令状态为已下发)
下发命令给离线设备会出现离线提示
4. 添自定义页面模板
在Wordpress的主题文件夹下，新建pages文件夹，将OneNetApi.php放到该文件夹下，
新建一个OneNetModel.php文件，内容如下：
<?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:36.155.105.33
基于Layui的前端框架
layui(谐音: 类UI)是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
1 下载
# npm安装 一般用于WebPack管理
npm -i layui-src
2 目录结构
├─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 机器人下发命令
.png)
7 设备历史数据导出
基于Vue框架的后台前端解决方案
vue-element-admin是一个后台前端解决方案，基于vue和element-ui实现，它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
建议
vue-element-admin的定位是一个后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。
前提条件
安装
# 克隆项目
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) 登陆界面
(2) 后台界面
了解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开始。
├── 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模块一一对应，从而方便维护。
文章作者：GentleTK
原文链接：https://gentletk.gitee.io/网站开发方案研究
