Web开发笔记

Web 开发需要 Web 前后端的知识：前端包括 HTML、CSS、JavaScript 等，其中 HTML 是页面的文字部分，CSS 是其格式部分，JavaScript 是其交互部分；后端通常使用 PHP+MySQL+Nginx，其中 PHP 是种编程语言，MySQL 是数据库管理系统，Nginx 是 Web 服务器软件。Web 开发通常是为了搭建网站，从头搭建一个网站是非常困难的，好在现在有大量框架可以使用，比如 thinkcmf、wordpress 等。

简单来说，前端就是用户看到的部分，其关键编程语言为 Javascript，运行在浏览器上，后端就是用户看不到的部分，其编程语言有多种选择，如 PHP、Node.js、Java、Ruby 等，这些语言运行在服务器上。前后端的内容均放置在服务器，用户通过浏览器访问服务器，服务器将前后端的内容传输到浏览器上，浏览器解析并渲染这些内容，最终用户看到的就是网站。

全栈开发者是指既会前端开发又会后端开发的人，通常需要掌握 HTML、CSS、JavaScript、PHP、MySQL 等语言和工具。全栈开发者可以独立完成一个网站的前后端开发工作。

开发的基础环境

LAMP / LNMP

LAMP 是 Linux、Apache、MySQL 和 PHP 的缩写，LNMP 是 Linux、Nginx、MySQL 和 PHP 的缩写。LAMP 和 LNMP 都是 Web 开发的基础环境。其中 Linux 是操作系统，Apache/Nginx 是 Web 服务器，MySQL 是数据库管理系统，PHP 是编程语言MP 和 LNMP 的区别在于 Apache 和 Nginx 的选择。

LAMP / LNMP 是经典开发环境。例如 thinkcmf 的开发环境是 LNMP

下面分别介绍这几个组件

Linux

Linux 是操作系统，通常使用 CentOS 7 或 Ubuntu 20.04 等版本。Linux 是开源的，具有高安全性和稳定性，适合用于服务器。

Apache

Apache（全称 Apache HTTP Server）是一个开源的、跨平台的 Web 服务器软件，由 Apache 软件基金会维护和开发。它是世界上最流行的 Web 服务器之一，广泛用于托管网站和 Web 应用。

与其他服务器的对比:

• 与 Nginx：Apache 更适合处理动态内容，而 Nginx 在高并发和静态内容处理上表现更优。
• 与 IIS：IIS 是 Windows 平台的专属服务器，而 Apache 是跨平台的。

Nginx

Nginx 是一个高性能的、轻量级的 Web 服务器和反向代理服务器，由 Igor Sysoev 开发，现由 Nginx, Inc. 维护。它以高并发处理能力和低资源占用著称，广泛用于静态资源托管、反向代理、负载均衡等场景。Nginx 的事件驱动架构使其在处理大量并发连接时表现优异，特别适合高流量网站和微服务架构。

MySQL

MySQL 是一个开源的关系型数据库管理系统（RDBMS），由 Oracle 公司维护和开发。它以高性能、可靠性和易用性著称，广泛用于 Web 应用开发。MySQL 支持标准的 SQL 查询语言，具有强大的事务处理能力，并提供多种存储引擎（如 InnoDB 和 MyISAM），适合处理从小型应用到大型复杂系统的多种场景。

mariadb 是 MySQL 的一个分支，主要由社区维护，提供了与 MySQL 兼容的功能和性能改进。MariaDB 在某些方面（如存储引擎、查询优化等）进行了增强，并且在开源许可证下发布。

相关博客：数据库设计——理论

学校相关书籍：《数据库系统概论》

• 下载地址：数据库系统概论(第5版) (王珊/萨师煊著) 完整pdf扫描版[67MB] 电子书 下载-脚本之家

遇到过的问题：

• database - Maximum length for MySQL type text - Stack Overflow
• java - SQL replace vs. doing an insert or update statement - Stack Overflow
• sql - Insert into a MySQL table or update if exists - Stack Overflow
• php - group_concat MYSQL new line - Stack Overflow
• how to concat two columns into one with the existing column name in mysql? - Stack Overflow
• How to Join 3 Tables (or More) in SQL | LearnSQL.com
• foreign keys - MySQL RESTRICT and NO ACTION - Stack Overflow
• linux file name length - Google Search
• MySQL :: MySQL 8.0 Reference Manual :: 8.4.7 Limits on Table Column Count and Row Size
• 邮箱地址长度 - Google Search
• MySQL :: MySQL 8.0 Reference Manual :: 4.2.4 Connecting to the MySQL Server Using Command Options
• MySQL Error Code 1215: “Cannot add foreign key constraint” - Percona Database Performance Blog
• sql - INNER JOIN ON vs WHERE clause - Stack Overflow

PHP

PHP 是一种开源的、跨平台的服务器端脚本语言，广泛用于 Web 开发。它可以嵌入到 HTML 中，适合快速开发动态网页。PHP 支持多种数据库（如 MySQL、PostgreSQL 等），并具有丰富的扩展库和框架（如 Laravel、Symfony 等），使得开发者可以快速构建复杂的 Web 应用。

在 CentOS 上安装参见 [Install PHP 7 on CentOS 7

Linuxize](https://linuxize.com/post/install-php-7-on-centos-7/)

关于该语言的更多内容请参见后文

编程语言

HTML

HTML（超文本标记语言）是用于创建 Web 页面的标准标记语言。它使用标签来描述网页的结构和内容。HTML 是 Web 开发的基础，所有的网页都是由 HTML 构建的。

HTML4

HTML4 是 HTML 的一个版本，主要用于 Web 页面开发。HTML4 引入了许多新特性，如表格、表单、框架等。HTML4 的语法相对简单，易于学习和使用，但在现代 Web 开发中已经逐渐被 HTML5 替代。

HTML5

HTML5 是 HTML 的最新版本，具有更强大的功能和更好的兼容性。HTML5 引入了许多新特性，如音频、视频、画布、地理位置等。HTML5 的语法更加简洁，支持响应式设计和移动设备优化。

• HTML input type=”hidden”

• [- HTML: HyperText Markup Language

  MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)

• [- HTML: HyperText Markup Language

  MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

PHP 语言

语言特性

• PHP: Static Keyword - Manual
• PHP: Properties - Manual
• PHP: include - Manual

用过的变量

PHP: $_SERVER - Manual

用过的函数

• date
• count
• rename
• preg_replace
• preg_split
• str_replace
• urldecode
• array_push
• array_column
• array_merge
• join
• in_array
• substr
• strrpos
• unlink
• is_int
• implode
• explode
• trim
• sscanf
• basename
• dirname
• strtolower

遇到过的问题

• php - laravel collection to array - Stack Overflow
• datetime - How do I get the current date and time in PHP? - Stack Overflow
• php array to string - Google Search
• Convert a PHP object to an associative array - Stack Overflow
• php - How do I declare a two dimensional array? - Stack Overflow
• PHP, add a newline with implode - Stack Overflow
• How to add elements to an empty array in PHP? - Stack Overflow
• variables - What is the PHP syntax to check “is not null” or an empty string? - Stack Overflow
• PHP: Fix “Array to string conversion” error.
• php - Compile Error: Cannot use isset() on the result of an expression - Stack Overflow
• How to echo or print an array in PHP? - Stack Overflow

简历模块开发问题记录

1. TP5 where多条件查询和 ThinkPHP运算符 与 SQL运算符 对照表_liuxin_0725的专栏-CSDN博客_tp 大于: https://blog.csdn.net/liuxin_0725/article/details/79881325
2. php - Converting string to Date and DateTime - Stack Overflow: https://stackoverflow.com/questions/6238992/converting-string-to-date-and-datetime
3. php上传图片完整代码_蔡先生的专栏-CSDN博客_php上传图片代码: https://blog.csdn.net/caiandyong/article/details/48030487
4. <input type=”file”> - HTML（超文本标记语言） | MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
5. php上传图片到远程服务器并返回图片地址到本地显示 - Corwien - SegmentFault 思否: https://segmentfault.com/a/1190000006861633
6. types - What is the benefit of zerofill in MySQL? - Stack Overflow: https://stackoverflow.com/questions/5256469/what-is-the-benefit-of-zerofill-in-mysql
7. datetime - Convert number to date in PHP and format to YYYYMMDD - Stack Overflow: https://stackoverflow.com/questions/41140301/convert-number-to-date-in-php-and-format-to-yyyymmdd/41140367
8. php - <select> dropdown default value - Stack Overflow: https://stackoverflow.com/questions/12293939/select-dropdown-default-value
9. PHP Get name of current directory - Stack Overflow: https://stackoverflow.com/questions/9997391/php-get-name-of-current-directory
10. function - In php, is 0 treated as empty? - Stack Overflow: https://stackoverflow.com/questions/2220519/in-php-is-0-treated-as-empty
11. php - How can I force an Image download in the browser? - Stack Overflow: https://stackoverflow.com/questions/11090272/how-can-i-force-an-image-download-in-the-browser
12. How to Force Download Files Using PHP - Tutorial Republic: https://www.tutorialrepublic.com/php-tutorial/php-file-download.php
13. php批量下载文件 - yikai.shao - 博客园: https://www.cnblogs.com/shaoyikai/p/3755079.html
14. PHP: 比较运算符 - Manual: https://www.php.net/manual/zh/language.operators.comparison.php

Composer

Composer 是 PHP 的一个依赖管理工具，用于管理 PHP 项目的库和依赖关系。它可以自动下载和更新项目所需的库，并处理库之间的依赖关系。Composer 使得 PHP 开发者能够轻松地管理项目的依赖，避免了手动下载和配置库的麻烦。

• 下载与安装：How to Install and Use PHP Composer on CentOS 7 | Linuxize

数据库设计

参见 数据库设计——理论

相关框架

Web 开发通常使用框架来简化开发过程，常用的框架有 thinkcmf、Laravel、Symfony、CodeIgniter 等。框架提供了许多现成的功能和工具，可以帮助开发者快速构建 Web 应用。此外，根据前后端分类，可以将框架分为前端框架和后端框架。

常见的前端框架包括以下几种：

1. React: 由 Facebook 开发的前端库，专注于构建用户界面，基于组件化开发，支持单向数据流和虚拟 DOM。
2. Vue.js: 一个轻量级的前端框架，易于上手，支持双向数据绑定和渐进式开发，适合中小型项目。
3. Angular: 由 Google 开发的前端框架，功能全面，支持双向数据绑定、依赖注入和模块化开发，适合大型复杂项目。
4. Svelte: 一个新兴的前端框架，编译时生成高效的原生 JavaScript 代码，运行时性能优异。
5. Ember.js: 一个功能齐全的前端框架，提供约定优于配置的开发方式，适合构建复杂的单页应用（SPA）。

常见的后端框架包括以下几种：

1. Express.js: 基于 Node.js 的轻量级后端框架，提供简单灵活的 API，适合快速构建 Web 应用和 RESTful API。
2. Django: 一个基于 Python 的全栈后端框架，内置 ORM、认证系统和管理后台，适合快速开发和部署。
3. Flask: 一个轻量级的 Python 后端框架，灵活性高，适合小型项目或需要高度定制化的应用。
4. Ruby on Rails: 基于 Ruby 的全栈后端框架，提供丰富的工具和约定优于配置的开发方式，适合快速开发。
5. Spring Boot: 基于 Java 的后端框架，简化了 Spring 框架的配置，适合构建企业级应用和微服务。
6. ASP.NET Core: 由微软开发的跨平台后端框架，支持多种语言（如 C# 和 F#），适合构建高性能的 Web 应用和 API。

此外，还有一些静态网站生成器，如：

1. Jekyll: Jekyll 是一个用 Ruby 编写的静态网站生成器，适合个人博客和文档网站。它通过将 Markdown 文件或 HTML 文件与模板结合，生成静态网页。Jekyll 支持 Liquid 模板引擎，具有简单易用、可扩展性强的特点，并与 GitHub Pages 深度集成，用户可以直接将 Jekyll 网站托管在 GitHub Pages 上。本博客使用的就是 jekyll
2. Hugo: 用 Go 编写的静态网站生成器，生成速度极快，支持多语言和丰富的主题生态。
3. Gatsby: 基于 React 的静态网站生成器，支持现代前端技术和 GraphQL 数据查询，适合构建动态内容丰富的静态网站。
4. Hexo: 用 Node.js 编写的静态网站生成器，适合博客和文档网站，支持插件和主题扩展。
5. Pelican: 用 Python 编写的静态网站生成器，支持 Markdown 和 reStructuredText，适合 Python 开发者。

目前我只使用过 thinkcmf，其他的框架只是有所耳闻。

thinkcmf

thinkcmf 是一款开源的内容管理框架，基于 ThinkPHP 开发，同时支持 PHP-FPM 和 Swoole 双模式；支持大数据量和多种缓存方式；数据库读写分离和集群部署。前端使用的是 Bootstrap 框架，jQuery 库，后端使用 ThinkPHP 框架，使用 Composer 进行其依赖管理，遵循 PSR-2，PSR-4 规范，轻松兼容多平台。

开发环境搭建

最简单方便的方式无疑是使用 Docker，Docker 在 Web 开发环境搭建方面非常擅长。下面是具体步骤：

1. 使用git clone命令下载ThinkCMF Docker: ThinkCMF for Docker
2. 阅读其 README 和概览所有目录和文件，大概理解之
3. Windows 上安装 Docker Desktop，安装完成后在命令行（powershell 或 cmd 或 Git bash）中执行docker --help和docker-compose --help命令，确保安装成功
4. 打开Git bash（理论上 Powershell 或 pwsh 也可以），并cd到之前下载的 docker 目录（后面简称该目录为docker/）中

5. 执行docker-compose up命令，检查命令是否执行成功，如果失败，则分析原因并处理。该命令会根据当前目录下docker-compose.yml文件的内容去拉取（docker pull）对应的镜像（images），然后根据此配置启动相关容器（containers），通常会涉及多个容器，构成一个容器群（或容器组）。

   温馨提示：

   • 如果没有开启docker daemon 的代理，则docker pull阶段通常会失败。

   • 如果开启了docker cli 的代理，则可能会遇到如下错误：

     curl error 35 while downloading https://repo.packagist.org/packages.json: OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to 192.168.56.200:7890
     

     以及：

     curl error 6 while downloading https://mirrors.aliyun.com/composer/packages.json: Could not resolve host: mirrors.aliyun.com
     

6. 执行完毕后，如果没有报错，则说明 thinkcmf 相关组件安装完毕，此时即可访问 127.0.0.1 进行部署：

   1. 首先会检查条件，应全部满足，如不满足，需检查并分析原因。如果没问题则直接点击下一步。
   2. 点击下一步后要求配置数据库等信息，这里需要按docker/README.md中的说明将数据库服务器地址从127.0.0.1改为mysql，然后再输入其root用户的默认密码thinkcmf，否则会提示“密码错误或 mysql 异常”。然后配置管理后台的密码和邮箱等，OK后就下一步。
   3. 最后就是 thinkcmf 自动完成部署，成功后即可访问前台（http://127.0.0.1/）和后台（http://127.0.0.1/admin/）页面。
7. 注意后续使用就不能轻易在docker/目录下执行docker-compose down或up了，应使用start和stop命令，否则会重新构建容器。

开发例程

可参考 thinkcmf/portal: ThinkCMF企业门户解决方案，基于ThinkCMF5.1开发

也可参见 Web开发笔记

重要链接：

• 序言 · ThinkCMF FAQ · 看云

• thinkcmf/demos: repository for ThinkCMF5.1 app, api, theme, plugin demos

• top-think/framework: ThinkPHP Framework

• thinkcmf/thinkcmf: ThinkCMF是一款支持Swoole的开源内容管理框架，基于ThinkPHP开发，同时支持PHP-FPM和Swoole双模式，让WEB开发更快!

遇到过的问题

• ThinkCMF a simple way to modify the login password of the background admin - Programmer Sought

• 处理问题：topthink/framework[v6.0.0, …, v6.0.8] require ext-mbstring - 知乎

相关工具

phpMyAdmin

• Creating and editing views in phpMyAdmin - 404 Tech Support