一个网站的开发

网站开发前端 php

Web

发布日期: 2021-09-27

更新日期: 2021-12-05

文章字数: 5.2k

阅读时长: 21 分

想做一个学生社区之类的网站，主要是闲，，，~~今天在学校上算法课麻了，没意思~~

网站内容：提供校内的信息检索即可，轻量级

打算的实现方式：django + vue.js …

需要学习的知识：

基础前端 html, css, js, 40%即可
服务器语言，php, 30%
一些框架， bootstrap, jquery
数据库， mysql

python 在数据科学，机器学习上优势较大，web 后端不太清楚，做网站做着玩~
en~~，这个博客的网站是纯静态的，数据库一个没，想做一个完整的网站，后期开源，放简历里也是加分的
还有的理由：就是学习知识，解决问题了。

开始吧~

2021.9.27 22：00

先信息收集：

对学生意向的调研收集（问卷星）
百度类似项目搜索一下
github 类似项目搜索一下

0. 准备工作

腾讯云，对学生还是可以的

认证蛮快的

优惠也大

后期还可以改配置

2021-10-01：腾讯云真的吹爆，客服质量太高了，备案快，备案信息改得也好。

好像还有技术咨询的客服

文档也维护得挺好

感觉比华为好，主要是以前参加华为的一次数据科学竞赛，用它的服务器用吐了

HTTPS：在TCP和HTTP网络层之间加入了SSL/TLS安全协议

域名
- www.blcu.site
- 认证工作
  - HTTPS 的 RSA, CA证书认证（1年） 已签发
  - 域名命名审核认证 已认证
  - 域名实名认证 已认证
- 解析工作，即把域名绑定到服务器上
  - 有个快速添加解析，输入（服务器的）公网IP即可

服务器
- 轻量应用服务器 Lighthouse
  - 业务场景：官网、博客、论坛、网盘等 Web 应用
- 云服务器 CVM
  - 业务场景：全场景

都在腾讯云里面买的，服务器参数如下：

轻量应用服务器

规格：1核2G

硬盘：50GB SSD

带宽：5Mbps，理论上最大 640kb/s

流量包：500GB/月

镜像：Ubuntu 20.04 LTS

备案（要等域名实名认证72小时之后）（然后当地管局审核一般要7天）

1. 环境准备

有以下两种方法（都可）：

1.1 黑窗口

登录到服务器：

~~见到公网IP的感觉真亲切。。。~~

先输入几个指令热身：

用的vim

python 版本：3.8.1

关于登录方式：

一键登录

VNC 登录

SSH 远程登录（推荐，自持复制粘贴，省好多事）

SSH 是目前较可靠，专为远程登录会话和其它网络服务提供安全性的协议。

如何使用命令行访问网页

sudo apt-get install w3m
w3m url

w3m 是一个基于文本的网页浏览器。按 q 退出

如何使用服务器的 ftp 功能

使用 vsftpd

宝塔使用的是 pureftpd

之后，部署一个项目看一下环境配得对不对，前面的工作是否正常。

参照：DjangoBlog部署教程

网页服务器：nginx 1.18.0
数据库：mysql

照着教程做了挺久，mysql 指令敲了好多，还是报错，睡觉了

1.2 使用宝塔

将镜像切换至宝塔，（该镜像基于 Cent OS 7.8）

参照以下流程：

使用公网IP 直接访问网站，已完成，参考教程

现在，剩下的就是学 django 和多做几个前端的页面了。

这部分总共花了30min

还需进行的操作：计划任务里定期备份数据库，修改默认端口防止攻击。

1.3 Discuz! Q

这块内容与前后文无关，可跳过。

这是一个社区系统的框架，做完网站才发现，

最后决定还是自己做，这个部署后一卡一卡的，代码看得束手束脚

仓库地址

1.4 小结

sudo apt update
sudo apt upgrade -y

show variables like 'validate_password%';

set global validate_password.policy = low;
set global validate_password.length = 9;

对端口的理解更深了，添加规则，选择端口号，确定端口的协议。
防火墙只对服务器的入流量进行控制，出流量默认允许所有请求。

2. django 基础

django 是一个用 python 编写的 Web 框架，基于 Web 框架可以开发动态网站，各种应用程序以及服务。

使用 (1.2) 方法之后，方便好多，文件拖拽上传，编辑器不是vim, 可选目录运行终端，文件目录可视化…

使用宝塔面板快速部署Django项目

学习django:

新建网站，域名写IP地址
项目管理器创建项目
去文件夹下激活虚拟环境
开始写 django

centos7跑django3 sqlite3 问题

将Django项目部署到服务器

网站地址
- logs
- mysite
  - mysite
    - __init__.py
    - asgi.py
    - settings.py
    - urls.py 负责映射项目中的路由和路径
    - wsgi.py 部署简单网关接口
  - manage.py 使用django-admin 命令行工具的快捷方式，运行与项目有关的管理命令
- venv
- .user.ini

app
- models
- views
- templates
- tests
project，是配置和应用程序的集合，一个项目可以有多个应用程序

暂时放弃使用 django 作为后端了，学一下 php 作为后端

建站 第 6 天 更新：当时是因为 uwsgi 接口一直配不好，部署不下来就放弃了
虽然以前一直写的 python 代码，但现在觉得 php 真香，基本的业务逻辑都能实现，毕竟服务端老大。

3. 后端基础

先做一个用户登陆注册的界面

3.1 mysql

先去宝塔的数据库项，更改 root 的密码
查看多少个数据库

mysql -uroot -p

show databases;

设计用户表

create database blcusite

use blcusite

create table user(stu_num int not null auto_increment,..........)engine=InnoDB default charset=utf8;

show tables;

插入数据（可选）

INSERT INTO `blcusite`.`user` (`id`, `stu_num`, `pwd`, `register_date`) VALUES ('0001', '201911581000', 'hua', '2021-09-29')

使用 phpMyAdmin 之前需要放行端口888

使用 phpMYAdmin 管理数据库，查看数据库方便多了（推荐）
报错的话，卸载后更新一下版本

查看数据大小：

select length(name) from tb

通常：utf-8编码的汉字占用 3 字节，gbk 编码的汉字占用 2 字节。

这个网站的数据库结构

user（table）
- id, int(4)
- name, bigint(12)
- pwd, varchar(16)
- register_date, timestamp
- nickname, nickname(30)，允许空
- hphoto, varchar(100)，允许空
yqm（table）
- id, int(4)
- code, varchar(5)
- name, bigint(12)
message（table）
- id, int(9)，信息的id
- name, bigint(12)，学号
- title, varchar(60)
- content, varchar(400)
- comment, varchar
- img
- likes, int(3)
- e_date
- type

邀请码自动生成的代码：

import random
arr = list("0123456789abcdefghijklmnopqrstuvwxyz")

vis =set()

def gen(n):  # 代表
    cnt = 0
    while cnt < n:
        res = ""
        for i in range(5):
            idx = random.randint(0,35)
            res += arr[idx]
        if res not in vis:
            vis.add(res)
            print("INSERT INTO `blcusite`.`yqm` (`id`, `code`, `name`) VALUES ('{}', '{}', NULL);".format(cnt,res))
            cnt += 1
            
gen(500)

phpmyadmin设置id自增(AUTO_INCREMENT)

还需要进一步学习的几个点：

php 控制 mysql
php 实现 mysql 与腾讯云对象存储的交互

3.2 php ⭐

超文本预处理器，是 在服务器端执行的脚本语言，尤其适用于 Web 开发并可嵌入 HTML 中。

PHP 文件

PHP 文件可包含文本、HTML、JavaScript代码和 PHP 代码

PHP 代码在服务器上执行，结果以纯 HTML 形式返回给浏览器

PHP 文件的默认文件扩展名是 ".php"

PHP 可以做什么？

PHP 可以生成动态页面内容

PHP 可以创建、打开、读取、写入、关闭服务器上的文件

PHP 可以收集表单数据

PHP 可以发送和接收 cookies

PHP 可以添加、删除、修改您的数据库中的数据

PHP 可以限制用户访问您的网站上的一些页面

PHP 可以加密数据

变量
- PHP 是一门弱类型语言，不必声明变量的数据类型
数据类型
- $cars=array("bmw","toyota")
- var_dump() 查看变量及变量类型
- 对象数据类型也可以用于存储数据。
类型比较
- ==，只比较值
- ===，比较值，还比较类型
字符串
- . 可连接字符串值
- strlen()
逻辑
- if(){}elseif(){}else{}
- switch(n){case label1:…break;default:…;}
函数
输出
- echo，可输出带 html 标签的文本
- <<<EOF EOF; 这样子输出，当需要内嵌引号时，不必转义。
  - 结束标识必须顶格独自占一行(即必须从行首开始，前后不能衔接任何空白和字符)。

摘抄自：php 没你想的那么差

安全性问题

通过使用自动加载程序（所有主流框架的标配），避免了远程和本地文件包含。

通过使用模板语言作为标准或一种前端框架（例如 React），避免了跨站脚本（XSS）攻击。

通过使用 ORMs 和广泛使用 prepared 语句，避免了 SQL 注入。

通过使用 nonce token（被所有主流框架自动支持），避免了跨站请求伪造（CRSF）攻击。

性能比较

PHP 与编译型语言相比是比较慢。

PHP 与其它脚本型语言相比是比较快的。

网站慢通常不是由于使用的语言不够快，而是因为服务器或数据库导致的性能问题。

语言适用性

PHP 的最佳用例是 Web 应用程序。

Go、Rust、C 适合系统应用程序。

Python 适合人工智能。

Kotlin 适合安卓应用程序。

Java 适合与平台无关的应用程序。

php -v 查看版本号为：8.0.11

php 需要经过网页服务器的渲染才能正常显示，要不然就当作纯文本显示了，php文档的php部分，经过处理后，对访问者是不可访问的。

php 下载的 chm 文档需要先右键属性-》解除锁定，才不会显示为空白

curl 是一个利用 URL 语法在命令行下工作的文件传输工具

好像 js 的 nodejs 也能作为后端服务器语言，算了，php 最棒。

示例1：php 防止用户跳过登录直接访问界面

// 登录的  check.php 开头加入：
session_start();

//登录成功的 if 语句中加入：
$_SESSION['logined']=1;
$_SESSION['user']=$name;

//需要加权限的 php 页面中加入：
<?php
session_start();
if (!$_SESSION['logined']) {
  header("Location: ../index.html");
}
?>

示例2：存储 session 变量

<?php
session_start();
// 存储 session 数据
$_SESSION['views']=1;
?>
 
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<?php
// 检索 session 数据
echo "浏览量：". $_SESSION['views'];
?>
 
</body>
</html>

参考教程：

4. 前端框架学习

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。
其它常见的原型设计工具还有：墨刀，Axure

关于min的说明：如 jquery.min.js 和 jquery.js，省去空格换行等减少文件大小。

cdn加速网站：https://www.bootcdn.cn/

新学的快捷键

alt + z 自动换行

ctrl + x 删除行

ctrl + f5 有时比 f5 更有效

ctrl + y 可以撤销 ctrl + z

vscode 推荐插件

live server

ident-rainbow

设置中搜索 format 开启 format on save

网站建设过程中用到的框架

lnmp，服务器框架

bootstrap, 前端框架

jquery, js 框架

4.1 Bootstrap ⭐

Bootstrap：解决样式问题，方便我们快速地布局样式。

Bootstrap 是全球最流行的前端开源工具包，它支持 Sass（一门CSS扩展语言）变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点

推荐阅读：中文官方V5 快速入门英文官网

学习过程：

看官方文档，动手实践
看视频：用bootstrap5快速做一个首页

响应式内容布局的学习.

!

.test

#test

a.test

.test>a#test

10-01 ：太好用了，这个框架，一定好好学。

4.2 Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX = 异步 JavaScript 和 XML
.
AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交互，可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分更新。

使用的技术
- XMLHttpRequest, 异步地与服务器交换数据
- JavaScript/DOM，信息显示，交互
- CSS
- XML, 作为转换数据的格式

示例1：为 button 绑定一个点击事件，然后从服务器传来一个东西

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

.readyState==4 表示请求已完成，且响应已就绪
.status==200 表示 OK

xmlhttp=new XMLHttpRequest(); 创建一个请求（通用）；

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

<!--如果来自服务器的响应并非 XML，请使用 responseText 属性。-->

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如何在输入时与服务器通信交互

用 AJAX 从数据库返回数据

推荐使用 jquery 实现 AJAX:

4.3 jquery ⭐

封装了许多常用的 js 代码，菜鸟教程

示例1：hide

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

hide() 和 show()

//speed 参数规定隐藏/显示的速度，"slow","fast"，毫秒
//callback 参数为操作完成后执行的函数名称

$("#hide").click(function(){
  $("p").hide(speed, callback);
});
 
$("#show").click(function(){
  $("p").show(speed, callback);
});

toggle()：hide 和 show 的结合

$("button").click(function(){
  $("p").toggle();
});

示例2：实现图片上传时预览

// html file-input 下面需要有一个 id 为 preview 的图片，src可以先不定

$('input[type="file"]').change(function(e) {
  reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);
  reader.onload = function() {
    $('#preview').attr('src', reader.result);
  };
});

示例3：瀑布流布局实现

瀑布流布局：指多个高度不定的 div 无序浮动。使用 float:left 和 js 实现，还可以直接调用框架实现。

示例4：操作 CSS

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

示例5：AJAX load() 提示信息

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

示例6：发送一个 GET 请求并返回结果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php",function(data,status){
            alert("数据: " + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>

<?php
echo '这是个从PHP文件中读取的数据。';
?>

data 是服务器执行 php 之后 echo 返回的信息

示例6：发送一个 POST 请求并返回内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",{
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

data 是服务器执行 php 之后 echo 返回的信息

选择器
- 元素选择器 $("p")
- id选择器 $("#test")
- class选择器 $(".test")
- 其它
  - $(this), 选取当前 HTML 元素
  - $(“p.intro”)，选取 class 为 intro 的 p
  - $(“[href]”)
  - $(“tr:even”)
隐藏/显示
- hide
- show
- toggle
淡入/淡出
- fadeIn
- fadeOut
- fadeToggle()
- fadeTo()
滑动
- slideDown
- slideUp
- slideToggle
动画
- animate({params}, speed, callback)
链
捕获, 操作DOM
- text()，设置或返回所选元素的文本内容
- html()，设置或返回所选元素的内容（包括 HTML 标记）
- val()，设置或返回表单字段的值
- attr()，获取属性值，参考示例2
添加元素
- append()
- prepend()
- after()
- before()
删除元素
- remove(), 删除被选元素
- empty()，删除被选元素的子元素
- 过滤被删除的元素
  - $(“p”).remove(“.italic”);
操作 CSS
处理尺寸
AJAX
- load()
  - $(selector).load(URL,data,callback);
  - 示例：$(“#div1”).load(“demo_test.txt #p1”);
- $.get

为社区微博系统提供了一个新的思路：前端为瀑布流简略版信息卡片，然后为每个卡片绑定一个点击事件，点击事件会使用 jquery 添加 html 元素（添加评论区，更多信息），这时候响应式布局的优势就体现出来了。

数据查询语句：

select * from message order by time
select * from message order by likes

瀑布流简略版信息卡片的思考，php 只为当前页面提供了一个模板，当页面加载时，jquery脚本自动获取服务器端的微博信息，然后一个个地放到 html 页面中。

5. 样例学习

【HTML+CSS+JS】选项卡+登录注册表单

HTML+PHP+Mysql实现网站注册登录（总集篇）

对前后端的理解更深了，也逐渐了解到前端框架 bootstrap, vue.js
前后端是分离的，交互提供接口

仿花瓣网图片展示效果 - 网页特效

没这个视频，我根本就没有评论展示系统的思路。

#关于评论系统，采用了楼的设计方法。

comment 数据库说明：
- onlyone, 作为主键，没太大用
- id, int(9)，记录评论对应的消息的id
- lou, tingint(5)，记录改评论所在的楼层
- content，varchar(150), 记录评论的内容
- user_id, bigint(12)，记录评论用户的id
- edate, 记录日期
思路：
- 打开评论按钮，会向后端提交一个post（携带参数：卡片的id）
- 后端的 php 根据 id 先返回 card 主信息
- 后端的 php 在 comment 寻找该 id 下的评论，并按lou排序返回给前端
- 评论功能：向后端提交一个表单。id，lou 都使用 _SESSION 记录就可以了

6. 上线与维护

等备案下来，预计十月一假期结束，就公开可以推广了，今天第 6/12 天。

#觉得这是我做的最满意的作品，想起我折过的玫瑰，捏过的泥人大白…hh，矫情了

加油，还差一些

10.12 备案还没有好，11天了。

10.14 备案完成。开始上线测试

10.21 开源地址，也算结束了；云服务器还可以做很多事，我去试试~

小结：还是学到了许多东西，这些开发出来都是仿照样例，不会就百度查文档，然后直接敲代码，很少考虑框架，架构等等，php 有个 Laravel Web开发框架，感觉需求到了这个的时候，还不如去学习 python web框架。 php 感觉有种原生优势，不需要太了解，就可以写出简单的后端逻辑。除了后端，还学了许多前端基础，前端框架，bootstrap, jquery，mysql, Web开发流程，云服务器的使用，ajax, cdn， ssl, https，centos, , ,