웹사이트 개발 계획 조사

임무 세부 사항

• 1. 웹사이트 구축의 기본 개념과 프로세스를 이해합니다.
• 2. 클라우드 서버의 선택을 이해합니다.
• 3. 오픈 소스 웹사이트 시스템(Discuz, WordPress)을 이해합니다.
• 4. 로컬 웹사이트 구축을 이해하고 WordPress+phpStudy를 기반으로 로컬 웹사이트를 구축합니다.
• 5. HUAWEI Yunyao Cloud Server(30일 무료 평가판)를 구매하고 서버 측 환경을 구축합니다.
• 6. 로컬 사이트를 참조하여 서버에 이식하고 공인 IP를 통해 접속합니다.
• 7. 백그라운드에 관리자로 로그인하고, 플러그인을 설치하고, 사용자 등록을 설정하고, 브라우징하기 전에 로그인합니다.
• 8. HTML, CSS, JavaScript 및 PHP 구문 기능의 기본 사항을 이해합니다.
• 9. 플랫폼 체험 페이지의 형태와 스타일을 디자인하고, 장치 관리 기능(장치 목록, 데이터 조회, 명령 전달)을 구현합니다.
• 10. 서버측에 커스텀 페이지 템플릿을 추가하고 플랫폼 경험 페이지를 서버에 이식합니다.
• 11. Layui 기반의 프론트엔드 프레임워크를 이해한다.
• 12. vue 프레임워크를 기반으로 한 백엔드 프론트엔드 솔루션을 이해합니다.

1. 기본 개념

웹사이트 구축의 기본 과정

• 도메인 이름을 구입
• 도메인 이름 제출
• 클라우드 서버 구매
• 웹사이트 구축
• DNS

1.1 웹사이트 구축 - 도메인 이름

도메인 이름은 브라우저에 입력된 URL입니다. 예를 들어 www.baidu.com, 일반적으로 www로 시작하는 첫 번째 수준 도메인 이름이 주 도메인입니다. 각 주 도메인은 수많은 하위 도메인에 해당할 수 있습니다. 도메인 이름과 IP 주소 자체는 관련이 없으며 바인딩하려면 DNS 확인을 사용해야 합니다. 접속하고자 하는 브라우저에 URL을 입력하면 브라우저는 먼저 도메인 이름을 해당 IP 주소로 해석한 다음 바이트 데이터 요청을 보내고 서버는 데이터 요청을 받은 후 웹사이트 관련 웹사이트 관련 정보를 반환합니다. 데이터 코드(HTML), 브라우저는 이러한 코드를 받은 후 탐색할 수 있는 웹 페이지 형식으로 변환합니다.

2.1 웹사이트 구축 - 서버

서버는 컴퓨팅 서비스를 제공하는 장치로 오랜 시간 종료되지 않고 성능이 매우 안정적인 컴퓨터에 해당합니다. 이 컴퓨터에서 웹 사이트 프로그램이 실행 중이며 여기에 액세스하는 클라이언트의 데이터 액세스 요청을 기다리고 있습니다. 서버는 요청 후 웹 페이지 데이터 코드(일반적으로 HTML, CSS 및 JavaScript 코드)가 특정 데이터 형식으로 반환됩니다. 데이터를 수신한 후 클라이언트의 브라우저는 데이터를 구문 분석하여 웹 페이지로 렌더링합니다. 사람들이 열람할 수 있는 데이터.

2.1.1 가상 공간

가상호스트는 서버의 하드디스크에 있는 저장공간의 일부를 나누어 서버의 IP와 대역폭을 공유하며, 독립된 자원과 운영 체제가 없고, 원격 데스크톱 기능이 없다. 일반적으로 웹사이트에서 지원하는 프로그램 기본적으로 가상 호스트에 의해 할당됩니다.네, 사용자가 환경을 구성할 방법이 없고 기능이 비교적 단일합니다.

2.1.2 ECS(탄력적 컴퓨팅 서비스)

클라우드 서버 ECS는 알리바바 클라우드에서 제공하는 기본 클라우드 컴퓨팅 서비스로 클러스터 서버에 독립된 메모리, 하드디스크, 대역폭 및 기타 자원을 나누어 구축한 가상 서버로, 독립적인 IP와 대역폭을 가지며, 다양한 버전의 운영 체제를 설치하고 다양한 웹 사이트 운영 환경을 구성하며 완전히 독립적인 원격 데스크톱 연결 도구가 있습니다. (가상 호스트가 없습니다).

나에게 맞는 클라우드 서비스 구성을 선택하는 방법은 무엇입니까?

(1) 서버 노드가 위치한 지역의 선택

웹사이트를 구축할 때 웹사이트 사용자의 접속 속도를 고려해야 하며, 웹사이트 접속 속도에 영향을 미치는 중요한 요소는 서버 노드의 위치입니다. 즉, 서버 노드 영역이 대상 고객 기반 영역에 가까울수록 웹 사이트의 액세스 속도가 빨라집니다.

(2) ECS 인스턴스 사양 선택

일반 기업 웹사이트, 성능이 비교적 균형을 이루고 있으며, 일반 유형을 선택할 수 있으며, 일반 네트워크 확장 유형은 2코어 4G 또는 8G 이상을 구성하는 것이 좋습니다.

(3) 클라우드 서버 운영체제 선택

웹사이트 구축 프로그램에서 사용하는 언어에 따라 해당 시스템 선택

윈도우：asp、asp.net
리눅스：php

미러 시장을 통해 이미 구성된 미러를 선택하면 서버 시스템 환경을 설치하는 시간을 절약할 수 있습니다.

(4) 클라우드 서버 하드디스크 선택

일반적으로 40G 시스템 디스크가 기본으로 구성되어 있으며, 시스템 디스크 장애 시 웹사이트 데이터가 유실되지 않도록 별도의 데이터 디스크(20-50G)를 구입하여 데이터 디스크에 웹사이트 프로그램을 배포하는 것이 가장 좋습니다.

(5) 클라우드 서버 대역폭 선택

매일 평균 200~300명의 사람들이 방문한다고 가정하고 일반적으로 약 1~2M의 대역폭을 선택합니다.

클라우드 서버 트래픽 및 대역폭 변환:

대역폭: 트래픽 = 1:150, 즉 1M 대역폭 = 150M 트래픽

2. 워드프레스 기반 로컬 사이트 구축

워드프레스 다운로드

phpStudy 다운로드

다운로드가 완료되면 phpStudy를 설치하고 다운로드한 워드프레스의 압축을 풀고 phpStudy 설치 경로 아래의 WWW 폴더에 저장합니다.

2.1 웹사이트 만들기

phpStudy를 열고 먼저 웹 서비스를 시작한 다음 클릭하여 웹 사이트를 만들고 기본 정보를 입력하십시오.

입력한 후 서비스가 다시 시작될 때까지 기다린 다음 관리를 클릭하고 웹사이트 열기를 선택합니다.

WordPress 설치 인터페이스를 입력하십시오.

먼저 phpStudy에서 데이터베이스를 생성합니다(먼저 생성할 기본 루트 비밀번호를 수정합니다).

데이터베이스 정보 입력

제출을 클릭

홈페이지 기본정보 입력

워드프레스가 성공적으로 설치되었습니다

클릭하여 로그인

백그라운드 관리 대시보드 입력

화웨이 Yunyao 클라우드 서버 웹사이트 구축

1. HUAWEI Yunyao 클라우드 서버 구매

Yunyao 클라우드 서버 콘솔

먼저 원격 연결을 통해 HUAWEI Yunyao 클라우드 서버에 연결합니다.

IP 주소	비밀번호
121.36.201.57	애드테크123456

콘솔에서 공용 네트워크 IP 클릭, 접근 제어에서 보안 그룹 클릭, 보안 그룹 규칙 설정

서버에 phpStudy를 설치하고, 효과를 보기 위해 테스트 페이지를 넣고, 웹사이트의 홈 페이지를 테스트 html 파일로 설정하는 것을 기억하십시오.

이때 서버의 브라우저에 helloworld:802를 입력하여 웹사이트를 엽니다.

외부 네트워크 액세스를 위해서는 서버 주소: 포트 번호를 입력해야 합니다.

2. 서버에서 WordPress 구축

phpStudy 설치 경로 아래의 WWW 폴더에 다운로드 받은 워드프레스의 압축을 풀고 얻은 wordpress 폴더를 저장하고 adtechiot로 이름을 변경합니다.

2.1 데이터베이스 관리 입력

phpStudy에서 phpMyadmin 관리 도구를 설치합니다.설치가 완료되면 관리를 클릭하여 데이터베이스 관리 로그인 인터페이스로 들어갑니다.사용자 이름과 암호는 데이터베이스 생성 시 설정됩니다.

iot 데이터베이스에 있는 wp_options의 siteurl과 home 값을 public IP(121.36.201.57)로 변경

2.2 WordPress 백그라운드 관리 시작

브라우저에 121.36.201.57/wp-admin을 입력하여 웹사이트 백그라운드 관리 인터페이스로 들어갑니다.

멤버십 설정 옆에 체크 표시

• 누구나 등록할 수 있습니다

새 사용자의 기본 역할은 구독자로 설정됩니다.

등록된 사용자 전용 플러그인을 다운로드하십시오. 사용자가 액세스하려면 로그인해야 합니다. 설치 후 사용을 클릭하는 것을 잊지 마십시오.

플러그인 WP SMTP를 다운로드하십시오. 이것은 등록 후 사용자에게 이메일을 보내거나 비밀번호를 잊어버리기 위한 것입니다. 설치가 완료된 후 사용을 클릭하는 것을 잊지 마십시오.

설정 후 테스트 이메일을 보내 확인하실 수 있습니다.

이제 브라우저에 공인 IP를 직접 입력하여 로그인하거나 등록할 수 있습니다.

새로운 사용자를 등록하려고

확인 이메일을 받았습니다

링크를 클릭하여 로그인 비밀번호를 설정하세요.

사용자 이름	로그인 비밀번호
사용자	adt123456

3. 디자인 플랫폼 체험 페이지

플랫폼 경험 페이지의 장치 관리에는 장치 목록, 데이터 쿼리, 명령 발행의 세 가지 기능이 포함됩니다.

3.1 장치 목록

사용자는 드롭다운 목록을 통해 제품 유형을 선택한 다음 장치 관리에서 장치 목록을 선택하여 장치 이름, 장치 ID, 장치 상태 및 마지막 온라인 시간을 포함하여 제품에 속한 모든 장치의 정보를 봅니다.

(1) mqtt 장비 목록

(2)modbus 장치 목록

3.2 데이터 쿼리

사용자는 드롭다운 목록을 통해 제품 유형을 선택한 다음 장치 관리에서 데이터 쿼리를 선택하여 데이터 쿼리 페이지로 들어갑니다 마지막 업데이트 시간(Modbus 장치는 플랫폼에서 발행한 명령을 볼 수 있음).

(1) mqtt 쿼리

(2) 모드버스 쿼리

3.3 명령 실행

사용자는 드롭다운 목록을 통해 제품 유형을 선택한 다음 장치 관리에서 데이터 쿼리를 선택하여 발급 명령 페이지로 들어갑니다.

(1) MQTT 제품

사용자는 디바이스 이름-ID, 메시지 품질(기본값 Qos0), 명령 유효 시간(기본값: 0)을 선택하고 전송할 명령을 입력하여 명령 실행 기능을 구현합니다.

(2) 모드버스 제품

사용자는 장치 이름-ID를 선택하고 슬레이브 주소(01-ff), 기능 번호(01-04), 데이터 주소(0000-ffff) 및 데이터 길이(0001-ffff)를 입력하여 명령을 보냅니다(명령 CRC 테스트)로 확인됩니다.

010300010001 명령을 실행하십시오(이 명령은 장치에서 처리되었으며 응답할 것입니다)

명령 010300030001을 실행하십시오(이 명령은 장치에서 처리되지 않았으며 명령 상태가 발행됨)

명령이 오프라인 장치로 전송되면 오프라인 프롬프트가 나타납니다.

4. 사용자 정의 페이지 템플릿 추가

Wordpress의 테마 폴더 아래에 새 페이지 폴더를
만들고 이 폴더에 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-like)**는 고유한 모듈 사양으로 작성된 프론트 엔드 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 로봇이 명령을 내립니다.

7 장치 이력 데이터 내보내기

Vue 프레임워크 기반 백엔드 프론트엔드 솔루션

vue-element-admin 은 vue 및 element-ui 구현을 기반으로 하는 백엔드 프론트엔드 솔루션으로 최신 프론트엔드 기술 스택, 내장된 i18n 국제화 솔루션, 동적 라우팅, 권한 검증을 사용하고 일반적인 비즈니스를 개선합니다. 엔터프라이즈 수준의 중간 및 백엔드 제품 프로토타입을 신속하게 구축하는 데 도움이 되는 풍부한 기능 구성 요소를 제공합니다.

제안하다

** vue-element-admin**의 위치는 배경 통합 방식으로 기본 템플릿으로 2차 개발에 적합하지 않습니다. 이 프로젝트는 사용하지 않을 수 있는 많은 기능을 통합하기 때문에 많은 코드 중복이 발생합니다. ** vue-element-admin**를 툴박스 또는 통합 솔루션 웨어하우스로 사용하고 ** **를 vue-admin-template기반으로 2차 개발을 수행하고 vue-element-admin에서 원하는 기능이나 구성 요소를 복사할 수 있습니다.

전제 조건

Node 및 git 은 로컬에 설치해야 합니다 .

설치

# 克隆项目
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 라우터 는 vue의 공식 라우터입니다. 단일 페이지 또는 다중 페이지 프로젝트를 빠르게 구축하는 데 도움이 될 수 있습니다.
• Vuex 는 Vue.js 애플리케이션을 위해 개발된 상태 관리 패턴입니다. 중앙 저장소는 애플리케이션의 모든 구성 요소 상태를 관리하는 데 사용되며 해당 규칙은 상태가 예측 가능한 방식으로 변경되도록 합니다. 전역 상태 또는 구성 요소 간 통신의 많은 문제를 해결할 수 있습니다.
• Vue Loader 는 Vue 구성 요소를 단일 파일 구성 요소(SFC)라는 형식으로 작성할 수 있는 vue 파일용 사용자 지정 웹팩 로더입니다. 핫 리로딩을 사용하여 개발 중 상태를 유지하고 각 구성 요소에 대해 범위가 지정된 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 및 보기

비즈니스 반복으로 인해 백그라운드에 점점 더 많은 api 모듈이 있을 것이므로 유지 관리를 용이하게 하려면 비즈니스 모듈에 따라 보기를 분할하고 맵 보기와 api 모듈을 하나씩 나누는 것이 가장 좋습니다.

기사 작성자: GentleTK
원본 링크: https://gentletk.gitee.io/Research on website development scheme