Website development plan research

mission details

• 1. Understand the basic concepts and processes of building a website.
• 2. Understand the choice of cloud server.
• 3. Understand open source website systems (Discuz, WordPress).
• 4. Understand local website building and build a local website based on WordPress+phpStudy.
• 5. Purchase HUAWEI Yunyao Cloud Server (30-day free trial) and build a server-side environment.
• 6. Refer to the local website, transplant it to the server, and access it through the public IP.
• 7. Log in to the background as an administrator, install plug-ins, set up user registration, and log in before you can browse.
• 8. Understand the basics of HTML, CSS, JavaScript and PHP syntax features.
• 9. Design the form and style of the platform experience page, and realize the device management function (device list, data query, command delivery).
• 10. Add a custom page template on the server side, and transplant the platform experience page to the server.
• 11. Understand the front-end framework based on Layui.
• 12. Understand the back-end front-end solution based on the vue framework.

1. Basic Concepts

The basic process of building a website

• buy a domain name
• Domain name filing
• buy cloud server
• Build a website
• DNS

1.1 Website Construction - Domain Name

The domain name is the URL entered in the browser. For example www.baidu.com, generally speaking, the first-level domain name that starts with www is the main domain. Each main domain can correspond to countless subdomains. The domain name and IP address themselves are not related, and if you want to bind, you have to use DNS resolution. When entering a URL in the browser to access, the browser will first resolve the domain name to the corresponding IP address, and then the browser will send a byte data request. After the server receives the data request, it will return the website-related data code (HTML ), and the browser converts these codes into a web page format that we can browse after receiving them.

2.1 Website Construction - Server

A server is a device that provides computing services. It is equivalent to a computer that does not shut down for a long time and has extremely stable performance. The website program has been running on this computer, waiting for data access requests from clients accessing this server. The server receives After the request, the web page data code (usually HTML, CSS, and JavaScript codes) will be returned in a certain data format. After receiving the data, the client's browser will parse and render the data into web page data that can be browsed by people.

2.1.1 Virtual space

A virtual host divides a part of the storage space on the server hard disk. It shares the IP and bandwidth of the server. There is no independent resource and independent operating system, and there is no remote desktop function. Usually, the website programs supported by the virtual host are also allocated by default. Yes, there is no way to configure the environment by the user, and the function is relatively single.

2.1.2 ECS (Elastic Compute Services)

Cloud server ECS is a basic cloud computing service provided by Alibaba Cloud. It is a virtual server built from independent memory, hard disk, bandwidth and other resources divided on cluster servers. It has independent IP and bandwidth, and can be It is required to install various versions of the operating system and configure various website operating environments, and there are remote desktop connection tools, which are completely independent. (There is no virtual host).

How to choose the cloud service configuration that suits you?

(1) Selection of the region where the server node is located

When building a website, you need to consider the access speed of website users, and an important factor that affects the speed of website access is the location of the server node. That is to say, the closer the server node region is to your target customer base region, the faster the access speed of your website will be.

(2) Selection of ECS instance specifications

Ordinary enterprise website, the performance is relatively balanced, you can choose the general type, the general network enhanced type, it is recommended to configure 2-core 4G or 8G or above

(3) Choice of cloud server operating system

Select the corresponding system according to the language used by the website building program

Windows：asp、asp.net
Linux：php

Through the mirror market, choosing the already configured mirror can save us the time to install the server system environment.

(4) Choice of cloud server hard disk

Generally, a 40G system disk is configured by default. It is best to purchase a separate data disk (20-50G), and deploy the website program on the data disk to prevent website data from being lost when the system disk fails.

(5) Choice of cloud server bandwidth

Take an average of 200 to 300 people visiting each day as an example, generally choose a bandwidth of about 1-2M.

Cloud server traffic and bandwidth conversion:

Bandwidth: Traffic = 1:150, ie 1M bandwidth = 150M traffic

2. WordPress-based local website construction

Download WordPress

Download phpStudy

After the download is complete, install phpStudy, decompress the downloaded WordPress and store it in the WWW folder under the phpStudy installation path.

2.1 Create a website

Open phpStudy, start the web service first, then click to create a website, and fill in the basic information

After filling in, wait for the service to restart, then click Manage and select Open Website

Enter the WordPress installation interface

First create a database in phpStudy (first modify the default root password to create)

Fill in the database information

click submit

Fill in the basic information of the website

WordPress installed successfully

Click to log in

Enter the background management dashboard

Huawei Yunyao cloud server website construction

1. Purchase HUAWEI Yunyao cloud server

Yunyao Cloud Server Console

First, connect to the HUAWEI Yunyao cloud server through a remote connection.

IPAddress	Password
121.36.201.57	Adtech123456

Click the public network IP in the console, click the security group in the access control, and set the security group rules

Install phpStudy on the server, put a test page to see the effect, remember to set the home page of the website as the test html file

At this point, enter helloworld:802 in the browser on the server to open the website

For external network access, you need to enter the server address: port number.

2. Build WordPress on the server

Store the wordpress folder obtained after decompressing the downloaded WordPress in the WWW folder under the phpStudy installation path, and rename it to adtechiot.

2.1 Enter database management

Install the phpMyadmin management tool in phpStudy. After the installation is complete, click Manage to enter the database management login interface. The user name and password are set when creating the database.

Change the siteurl and home values ​​of wp_options in the iot database to the public IP (121.36.201.57)

2.2 Enter WordPress background management

Enter 121.36.201.57/wp-admin in the browser to enter the website background management interface

Tick ​​next to set membership

• anyone can register

The default role for new users is set to Subscriber.

Download the plugin Registered Users Only, this is to ensure that users must log in to access, remember to click Enable after installation.

Download the plug-in WP SMTP, this is to send emails to users after registration or forgetting the password, remember to click Enable after the installation is complete.

After setting, you can send a test email to verify.

Now you can directly enter the public IP in the browser to log in or register

try to register a new user

received confirmation email

Click the link to set the login password to log in.

username	login password
user	adt123456

3. Design platform experience page

Device management on the platform experience page includes three functions: device list, data query, and command issue.

3.1 Device List

The user selects the product type through the drop-down list, and then selects the device list in the device management to view the information of all devices under the product, including the device name, device ID, device status and last online time.

(1) mqtt equipment list

(2)modbus device list

3.2 Data query

The user selects the product type through the drop-down list, and then selects data query in the device management to enter the data query page. The last update time (Modbus devices can view the commands issued by the platform).

(1) mqtt query

(2) modbus query

3.3 Issue commands

The user selects the product type through the drop-down list, and then selects the data query in the device management to enter the issue command page.

(1) MQTT products

The user realizes the command issuing function by selecting the device name-ID, message quality (default Qos0), command valid time (default is 0), and inputting the command to be sent.

(2) MODBUS products

The user sends a command by selecting the device name-ID, inputting the slave address (01-ff), function number (01-04), data address (0000-ffff), and data length (0001-ffff) (the command is checked by CRC. test).

Issue the command 010300010001 (this command has been processed by the device and will respond)

Issue the command 010300030001 (this command has not been processed by the device, and the command status is issued)

An offline prompt will appear when a command is sent to an offline device

4. Add custom page template

Under the theme folder of Wordpress, create a new pages folder, put OneNetApi.php in this folder, and
create a new OneNetModel.php file with the following contents:

<?php 
/* template name: 你的页面模板命名 
description: template for Git theme 
*/ 
get_header();//网站头部 可注释
?>
<!--这里放自定义php页面的内容-->

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

OneNET application hosting service (not recommended, officially stopped maintenance)

Preconditions

Before creating an instance, be sure to complete the following:

• Register a platform account and log in.
• Create a VPC private network and create a subnet under the VPC.
• Create an elastic public IP and bind the corresponding cloud server.
• If the login credentials of the cloud server use a key pair, you need to create a key pair first.

1. Create a VPC private network

Fill in the basic information, select a VPC network segment, and do not set DNS for the time being.

2. Create an instance - cloud server

Login Credentials: Adtech123456

3. Create an elastic public IP and bind the cloud server

Elastic public IP: 36.155.105.33

Front-end framework based on Layui

**layui (homonym: UI-like)** is a front-end UI framework written with its own module specification, following the writing and organization form of native HTML/CSS/JS, with a very low threshold and ready-to-use.

1 download

Website homepage

Github

Gitee

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

2 Directory structure

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

3 Robot equipment list

4 Robot equipment details

5 Robot data flow

6 The robot issues commands

7 Device historical data export

Back-end front-end solution based on Vue framework

vue-element-admin is a back-end front-end solution based on vue and element-ui implementation. It uses the latest front-end technology stack, built-in i18n internationalization solution, dynamic routing, permission verification, and refines typical business models. Provides rich functional components, which can help you quickly build enterprise-level mid- and back-end product prototypes.

Suggest

The positioning of ** vue-element-admin** is a background integration scheme, which is not suitable for secondary development as a basic template. Because this project integrates many functions that you may not use, it will cause a lot of code redundancy. You can use ** vue-element-admin** as a toolbox or an integrated solution warehouse, vue-admin-templatecarry out secondary development on the basis of ** **, and copy any functions or components you want from vue-element-admin.

Preconditions

Node and git need to be installed locally .

Install

# 克隆项目
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) Login interface

(2) Background interface

Understand the vue ecosystem

• Vue Router is the official router of vue. Can help you quickly build a single-page or multi-page project
• Vuex is a state management pattern developed for Vue.js applications. A centralized store is used to manage the state of all components of the application, and the corresponding rules ensure that the state changes in a predictable manner. It can solve many problems of global state or communication between components.
• Vue Loader is a custom webpack loader for vue files that allows you to write Vue components in a format called Single File Components (SFCs). It uses hot reloading to preserve state during development, simulates scoped CSS for each component, and more. However, in most cases, you don't need to configure it directly, and the scaffolding has been packaged for you.
• Vue Test Utils is an official unit testing tool. It allows you to write unit tests more easily.
• Vue Dev-Tools Vue debugging tools under the browser. Writing a necessary browser plug-in for Vue can greatly improve the efficiency of your debugging.
• Vue CLI is an official vue project scaffolding, and this project is also built based on it. It helps you encapsulate a lot of webpack, babel and other configurations, so that you can spend less energy on building the environment, so you can focus more on writing page code. However, all scaffolding is for most situations, so some special needs still need to be configured by yourself. It is recommended to read its documentation first to have some basic understanding of some configurations.

1. Directory structure

Start with the basic template 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 APIs and views

With business iteration, there will be more and more api modules in the background. It is best to divide views according to business modules, and map views and api modules one by one to facilitate maintenance.

Author of the article: GentleTK
original link: https://gentletk.gitee.io/Research on website development scheme