网站搭建全程

原创 已于 2025-03-18 11:24:33 修改 · 1k 阅读 · 31 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#课程设计 #前端

于 2025-02-26 11:20:10 首次发布

1.基本信息

网站网址：Haite的个人博客（服务器过期，网站已无法继续访问）

2.创建网站

2.1 需求分析

（1）动机平时做完一些设计，实验喜欢分享给别人，所以想要建立一个个人博客，让网友可以通过我的网站来阅读我的文章。其次身为一个计算机专业的学生，一些网上的进制转换计算器等小工具也有方便过我的学习，所以我想要做出一些小工具帮助别人。

（2）网站功能 支持我自己的文章发布及修改，支持网友的评论留言、数据库小工具。

2.2 申请域名

  • 本来打算使用课堂上讲到的五个免费域名。

但是发现因为版权原因这五个域名也不再能申请

  • 于是乎我就在阿里云中购买了haite.site域名。

  • 后来听同学说，在硅云中新用户可以免费注册一年的域名（我也没有去验证过）。

2.3 申请服务器

在这个步骤中我经历了两个过程

  • 首先我在微软AZURD完成学生认证，并申请的一台虚拟机，但在使用虚拟机SSH连接时遇到了问题，导致我放弃了这个方法。

  • 虽然这个过程失败了 但我也收获到了知识。

  • 关于虚拟机的配置设置，增加对虚拟机的了解。

  • 虚拟机尝试ssh连接，虽然再这一步失败了，但我也学到了一些使用powershell尝试ssh连接的指令，powershell指令。

  • 失败的原因我也没有探究出来。

  • 之后我就在阿里云中的飞天计划申请了一台七个月的云服务器。

2.4 建立网站

2.4.1 域名解析

将云服务器的公网ip解析到域名中，使得通过域名可以访问到我的网站。

添加这两条域名记录后我便可以通过www.haite.site与haite.site访问网站

2.4.2服务器配置并添加站点

  • 在服务器中输入安装脚本，服务器就会开始安装宝塔面板，安装成功后会给一个外网地址和内网地址，进入外网地址，输入账号密码，就可以打开宝塔面板，点击一键安装数据库MYSQL，PHP，nginx等，服务器基本配置就完成了。

  • 并且能在宝塔面板中很方便的管理网站。

  • 这一个过程中，由于使用宝塔面板，导致我没什么参与感，于是我决定再申请一个服务器，自己尝试服务器配置这个过程。

  • 安装数据库：

  • 我的操作步骤以注解的形式批注在图片上。

  • 这一步是解压刚刚下载的安装包。

  • 至此Mysql安装完毕。

  • 安装nginx：

  • 由于安装nginx需要用到yum指令，但是在使用yum指令时出现了问题1的报错。 问题1：Command 'yum' not found, did you mean:（无法使用YUM指令）

  • 在我尝试安装yum时又出现了新的错误，如下问题2。 问题2：Unable to locate package yum

  • 不断尝试中，我没有找到解决方法，这些错误仿佛形成一个循环，又加上备考原因我 暂时放弃了手动配置云服务器nginx。

2.4.3 网站备案

由于我的域名及云服务器都是国内的，所以建立网站后需要备案，才能访问。 于是我在阿里云申请了ICP备案。

申请后大概等待了7-8个工作日就通过了。 之后我就可以开始为我的网站添加内容。

2.4.4 完善我的网站

  • 先使用网站安装PHP个人博客网站模板，使网站有一个基本框架，便于后续网站管理。

  • 修改HTML文件，将首页的LOGO，头像，座右铭改为自己的。

  • 我为网站绘制了一个自己的专属LOGO，并使用PHP将它添加到我的网站。

  • 通过修改HTML，添加自己喜欢的文字，把个人信息修改为自己的。

  • 为我的博客网站添加文章。

  • 我为我的网站新建了课程设计标签，并在其中添加了我大二上学期完成的三个课程设计所写的文章。

2.4.5 网站完整效果呈现：

  • 首页

  • 数据库小工具

  • 文章详细

进阶

  • 由于网站大部分内容使用了PHP模板，为了多学习一些内容，也为了丰富我的网站我还使用了HTML，CSS，Javascript设计了一个数据库小工具。

  • 设计理念：当我们设计好一个数据库表时，为了对它进行测试，我们需要有数据，但让我们手动码出一条条插入语句，一个个数据这个过程往往是很繁琐乏味的，就想设计一个工具来帮助我们生成插入语句，我们只需要CRTL+C&&CRTL+V就能完成数据的插入。

最终成果：

例如：我想生成五条数据，首先勾选我想要的属性，其次输入我想要的表名（示例中的表名为Employer），最后输入5，点击数据，在最后一块矩形块中就会生成五条插入语句。

HTML源代码

 <!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>数据生成小工具</title>
     <link href="tbtool.css" type="text/css" rel="stylesheet">
  </head>
  <body>
   <h1>数据库插入数据生成工具</h1>
      <h2>简介：作为一名程序员，在前期的数据库设计阶段，需要一些数据进行测试，而手动输入数据是费时而乏味的，所以开发一个数据生成工具来解决</h1>
        <div class="input_">
        常用属性：
        <input type="checkbox" name="Keys" value="id" />ID
        <input type="checkbox" name="Keys" value="name" />姓名
        <input type="checkbox" name="Keys" value="age" />年龄
        <input type="checkbox" name="Keys" value="sex" />性别
        <input type="checkbox" name="Keys" value="tell" />电话号码
        <input type="checkbox" name="Keys" value="wage" />工资
        <br>
        生成数据数量:
        <input type="number" id="count" value="0" />
        <br>
        <br>
        生成数据表名:
        <input type="text" id="tname" value="Employer" />
        <br>
        <br>
        <input type="button" value="生成数据" onclick="getAll()"/>
        </div>  
  <div class="output_" id="output_">
     <p>产生的数据</p>
  </div>
  <script src="tbtool.js"></script>
</body>
</html>

CSS源代码：

 h1 {
    line-height: 50px;
    color: rgba(242, 107, 10, 0.881);
    text-align: center;
    font-size: 30px;
    font-weight: 1000;
    font-family: "Microsoft JhengHei UI";
    background:
    radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
    linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
    linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
    background-size: 40px 60px;
    background-size: 20px 20px;
    border-radius: 5px;
    text-shadow: 2px 2px 3px #ffffff;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);
    border-color:black;
    border:2px solid black;
}
h2 {
    line-height: 50px;
    color: white;
    text-align: center;
    font-size: 20px;
    font-family: "Microsoft JhengHei UI";
    background-color: rgb(51, 169, 37);
    border-radius: 5px;
    text-shadow: 2px 2px 3px #222222;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);
    border-color: black;
    border: 2px solid black;
}
.input_{
    color: white;
    width: 100fr;
    height: 180px;
    text-align: center;
    font-size: 20px;
    font-family: "Microsoft JhengHei UI";
    background:
    radial-gradient(circle at 100% 50%, transparent 20%, rgba(159, 110, 42, 0.925) 21%, rgba(159, 110, 42, 0.925) 34%, transparent 35%, transparent),
    radial-gradient(circle at 0% 50%, transparent 20%, rgba(159, 110, 42, 0.925), rgba(159, 110, 42, 0.925) 34%, transparent 35%, transparent) 0 -50px;
    background-color: rgb(125, 59, 0);
    background-size:75px 100px;
    border-radius: 5px;
    text-shadow: 2px 2px 3px #222222;
    box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);
    border-color: black;
    border: 2px solid black;
    padding: 10px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
​
.output_{
    line-height: 50px;
    color: rgb(13, 13, 13);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: "Microsoft JhengHei UI";
    background-color: rgb(51, 169, 37);
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);
    background-color: #fff;
    background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    border: 2px solid black;
​
}
​
#num{
    margin-top: 30px;
}

javascript源代码：

 var id;
var name;
var age;
var sex;
var tell;
var wage;
var sql;
​
var prename=["陈","黄","周","吴","徐","朱","胡","林","何","罗","郑",];
var lastname=['靖','铭','琛','川','承','司','斯','宗','骁','聪','在','钩','锦','铎','楚','铮','钦','则','真','心','新','悦','西','兮','楚','初','千','锐','素','锦','静','镜','斯','舒','瑜','童'];
​
var pretell=["139","132","147","157","188","159","181","150"];
​
function getAll(){
    var Keys=document.getElementsByName("Keys");
    var count=document.getElementById("count").value;
    var tname=document.getElementById("tname").value;
    var last=getlast();
    var allsql='';
    if(last=='kong'){
        alert("请输入要生成的数据项的属性");
    }else{
for(var i=1;i<=count; i++){
    sql="INSERT INTO ";
    sql+=tname;
    sql+=" VALUEWS ("
    for(var j=0;j<Keys.length;j++){
        if(Keys[j].checked){
            if(Keys[j].value=='id'){
                id=i;
                sql+=id;
                if(last=='id'){
                    sql+=");";
                    break;
                }else{
                    sql+=",";
                }
            }else if(Keys[j].value=='name'){
                name=getname();
                sql+='\'';
                sql+=name;
                sql+='\'';
                if(last=='name'){
                    sql+=");"; 
                    break;
                }else{
                    sql+=",";
                }
            }else if(Keys[j].value=='age'){
                age=getage();
                sql+=age;
                if(last=='age'){
                    sql+=');'; 
                    break;
                }else{
                    sql+=",";
                }   
            }else if(Keys[j].value=='sex'){
                sex=getsex();
                sql+='\'';
                sql+=sex;
                sql+='\'';
                if(last=="sex"){
                    sql+=");"; 
                    break;
                }else{
                    sql+=",";
                }        
            }else if(Keys[j].value=='tell'){
                tell=gettell();
                sql+='\'';
                sql+=tell;
                sql+='\'';
                if(last=="tell"){
                    sql+=");"; 
                    break;
                }else{
                    sql+=",";
                }   
            }else if(Keys[j].value=='wage'){
                wage=getwage();
                sql+=wage;
                if(last=="wage"){
                    sql+=");"; 
                    break;
                }else{
                    sql+=",";
                }            
            }
        }
        
    }
    allsql+=sql;
    allsql+="<br>";
}
let div = document.getElementById("output_");
    div.innerHTML=allsql;
    document.body.appendChild(div);
}
}
function getname(){
    var temp='';
    temp+=prename[Math.ceil(Math.random()*prename.length-1)];
    temp+=lastname[Math.ceil(Math.random()*lastname.length-1)];
    temp+=lastname[Math.ceil(Math.random()*lastname.length-1)];
    return temp;
}
function getage(){
    return Math.ceil(Math.random()*47+18);
}
function getsex(){
    var flag=Math.ceil(Math.random()*2);
    if(flag==1){
     return '男';
    }else{
     return '女';
    }
}
function gettell(){
    var temp='';
    temp+=pretell[Math.ceil(Math.random()*pretell.length-1)];
    for(var i=0;i<8;i++){
        temp+=Math.ceil(Math.random()*10-1);
    }
    return temp;
}
function getwage(){
  return Math.ceil(Math.random()*70+30)*100;
}
​
function getlast(){
    var Keys=document.getElementsByName("Keys");
    for(var j=Keys.length-1;j>=0;j--){
        if(Keys[j].checked){
            if(Keys[j].value=='wage'){
                return 'wage';
            }else if(Keys[j].value=='tell'){
                return 'tell';
            }else if(Keys[j].value=='sex'){
                return 'sex';  
            }else if(Keys[j].value=='age'){
                return 'age';  
            }else if(Keys[j].value=='name'){
                return 'name';   
            }else if(Keys[j].value=='id' ){
                return 'id';   
            }
        }
    }
    return "kong";
}
​
Haite13
关注
个人网站搭建教程
afei001
04-07 784
搭建一个个人网站需要三个必备的因素，即：域名、服务器、程序。如果把一个网站比作一家商店，那么域名就好比店名或者商标，服务器就比如店面，程序就是整个商店的运作系统。当然这个运作系统可以老板自己创造，也可以借鉴其他人的成熟经验直接运用。所以网站的程序也可以自己创作，也可以直接运用网络上成熟的建站系统了。 1.域名 域名（英语：Domain Nam...
如何搭建自己的网站
acheding的博客
01-15 1万+
一、购买服务器 首先，得有一台 24 小时无间断运行的服务器，可以选择 Windows 服务器或者 Linux 服务器，Windows 服务器通过 IIS 部署，这个不算复杂，网上可以搜到一大堆教程，本文主要讲述 Ubuntu 服务器下部署 Vue 项目。 二、重置实例密码、设置密钥对 可以选择两种方式去访问服务器，一是通过实例密码，二是通过密钥对。 三、域名购买、备案、解析 买到服务器之后，就拥有属于自己的一片空间了，但是一长串的 IP 不容易记住怎么办，两个办法：①少熬点儿夜，提高记忆力。②挑
如何搭建一个属于自己的网站？
qq_63763951的博客
03-23 6623
这几天正巧在搭建一个属于自己的专属网站，在搭建网站的过程中遇见了很多有趣的问题，于是想把这些问题记录下来，分享给大家。服务器,域名以及域名备案我都是在阿里云这个平台完成的，所以接下来都是以阿里云这个平台来操作的。
网站搭建——CentOS7服务器环境搭建
秋书一叶的博客
04-04 5248
输入临时密码后，系统会要求您为root用户设置新密码。密码必须至少包含8个字符并且至少包含一个大写字母，一个小写字母，一个数字和一个特殊字符；该命令还会要求您删除匿名用户、限制root用户对本地计算机的访问权限并删除测试数据库。找到nginx的配置文件，一般为nginx.conf或上述的conf.d；当第一次启动MySQL服务器时，为MySQL根用户生成一个临时密码。安装MySQL的话会和MariaDB的文件冲突，所以需要先卸载掉MariaDB。查看是否安装mariadb。刷新使刚才的配置生效。
网站搭建
飞扬_柳絮的专栏
05-19 234
第一步：域名注册+ 域名备案 域名注册：在万网挑选一个未被注册的域名进行购买 域名备案：https://beian.aliyun.com/ 网站备案/许可证号：浙ICP备17021078号-1 密码找回：工信部备案管理系统 第二步：购买阿里云服务器 第三步：在阿里云服务器上安装 nginx + php-fpm nginx + php-fpm：网页 +php运行环境 详...
搭建网站
馨若梦的博客
05-27 682
我们用ECShop来举例说明搭建一个网站的步骤，ECShop网站用的是apache服务器 1、首先需要在Linux下安装apache，安装apache过程请参考：https://mp.csdn.net/postedit/90550134 2、将ECShop安装包上传到Linux服务器上，有很多软件如xftp、WinSCP都可以用来将文件上传到Linux服务器上； 3、打开服务器上存放ECSh...
XX网站搭建全程
qq_42671193的博客
04-05 1万+
XX网站搭建全程项目流程环境与技术1. 背景2. 用户特点3. 角色定义：4. 角色定义：系统主要用例5. 功能描述目录结构web配置防止sql注入过滤器登录拦截器路径映射 本博客记录了接单全程 项目流程 与客户沟通，确定需求，如果客户需求不定，就根据客户需要的功能以及应用范围制定出需求范本给客户看 客户确定最终需求 商量开发费用与周期，一般是定金40%，后期的自行商量 数据库设计 选前端页面框...
ASP.NET 4个人网站搭建全程指南（C# & VB）
ASP.NET是微软公司推出的一个用于构建动态网站、web应用程序和web服务的Web开发框架，属于.NET Framework的一部分。ASP.NET 4是ASP.NET技术的一个版本，它提供了许多新特性来支持Web开发人员更加高效地开发应用程序...
网站建设-1小时学会建站，采用PHPWAMP搭建网站[全程实战]
06-08
"网站建设-1小时学会建站，采用PHPWAMP搭建网站[全程实战]"这个教程，旨在帮助初学者快速掌握如何使用PHPWAMP工具创建和部署网站。PHPWAMP是一个集成的开发环境，包含Apache服务器、MySQL数据库和PHP解释器，为...
精选资源
暴利单品单页网站搭建和SEO策略教程
最新发布
04-22
第四课建立暴利单页全程演示.mp4 第五课，轻松创建一个推广单页.mp4 第六课：单页网站必备插件.mp4 第七课SEO内链优化（更新文章）.mp4 第八课单页网站SEO优化妙招.mp4 修改次导航 首页 为关键词.png
基于vue + spring boot + datagear 搭建NBA赛事数据分析网站全程记录
m_Sorry的博客
03-21 1490
个人网站搭建全过程记录，结合datagear实现NBA相关数据看板功能
linux 网站搭建
11-02
class Singleton(object): def __new__(cls, *args, **kwargs): if not hasattr(cls, 'instance'): cls.instance = super(Singleton, cls).__new__(cls) return cls.instance class MyClass(Singleton): def __init__(self, name): if name: self.name = name obj1 = MyClass('小明') print(obj1.name) obj2 = MyClass('小红') print(obj2.name) linux 网站搭建
网站搭建教程（详细步骤）
热门推荐
deroy
03-14 2万+
文章目录网站组成一、服务器二、网站程序三、域名空间基本介绍网站空间如何购买空间（云虚拟主机）如何登陆服务器网站创建安装宝塔并配置信息云虚拟机安装宝塔修改账号密码安装软件创建站点上传程序创建多个链接 网站组成 一、服务器 什么是服务器? 我们可以理解为一个容器,用来存放网站的内容部分,我们在互联网上能够看到的网页信息都是存储在服务器上,服务器的本质其实是一台电脑主机，只是这台主机它需要24小时不关机...
搭建网站教程
Larry的博客
03-31 5911
建立一个属于自己的网站大致分为以下几个流程 一.购买域名 1.首先来到阿里云，搜一个你想要买的网址 2.来到这一个界面后选择一个域名进行购买 点击购买，购买成功后找到域名列表，此处可以看到你已经购买的域名。 点击未实名认证，进入实名认证界面完善自己信息，提交之后域名状态将变成正常（不要着急，此过程需要一些时间）， 二：购买空间（将空间和域名绑定起来） 购买空间...
搭建自己的网站
贝勒里恩的博客
09-06 869
搭建个人网站，需要准备以下几样东西：服务器、域名、前端源码 接下来，我们分别来看一下它们有什么用吧！ 一、服务器 1、什么是服务器？ 服务器其实就是一台电脑，我们在自己本地电脑打开一个html文件，浏览器就会把这个网页解析出来，此时本地电脑就是一个本地服务器，但是，这样网页是只有你自己一个人能看到（学习技术不为了装逼将毫无意义）。那怎样才能让小伙伴也能看到我的网站呢？ 方法1：将我的源码给他，让他在他的电脑上打开，这样虽然确实可以实现我们的目的，但是这样太麻烦了； 方法2：我们可以将网站挂到云服务器上，云服
网站搭建的理解与流程
weixin_42077074的博客
08-11 986
搭建网站流程 简单来说搭建网站包括以下这些步骤 ①注册域名 ②购置服务器 ③ICP备案 ④对服务器进行相应设置、配置服务器环境、将网站相关文件置于空间（部署到服务器）等等 ⑥域名绑定服务器（域名通过设置解析为IP地址） ⑦访问者在浏览器上通过域名（或IP地址）访问网站 注：解析至非中国大陆的服务器无需ICP备案 接入商 整个过程通过接入商完成比较方便，一般接入商叫作“XX云”。 当然，像注册域名、购置服务器这些，都是要钱的。 接入商比如阿里云，腾讯云，华为云等。 购置服务器 ②过程中需要选择服务器类型、
搭建一个web网站
LongHongYu908的博客
01-26 834
1.需求1.需求1.基于域名可以访问网站内容为 welcome to openlab!!!2.给该公司创建三个子界面分别显示学生信息，教学资料和缴费网站，基于，www.openlab.com/data网站访问教学资料 www.openlab.com/money 网站访问缴费网站。3.要求1）学生信息网站只有song和tian两人可以访问，其他用户不能访问。2）访问缴费网站实现数据加密基于https访问。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值