一个非IT人士修改网站的遍历之旅和心路历程

繁星有界

已于 2022-05-08 09:56:22 修改

阅读量1.4k

点赞数

文章标签：前端 html5 css php 产品运营

于 2022-05-07 17:00:20 首次发布

本文链接：https://blog.csdn.net/weixin_44074762/article/details/124633246

版权

本文作者作为一个建筑行业的非IT人士，分享了自己手动修改网站的全程，包括使用小皮面板搭建本地开发环境，解决前端和数据库问题，以及网站美化的心得。文章旨在感谢CSDN平台的帮助，提醒网站开发者关注需求方视角，以及记录解决问题的步骤，供初学者参考。

摘要由CSDN通过智能技术生成

历经两个多月，手头的网站大致修改到位了，也终于可以静下来写点东西。一直以来，笔者从事的是建筑行业，主要是产品领域相关工作，方案设计、施工图设计、工程建设和交付等，于IT行业是完全的行外人士。数年前找人开发了一个网站，各种bug层出不穷，美工不忍久视，加之实际也没有太多时间做内容和商务方面的运营，做出来的网站自己都不愿意看。这次终于痛下决心，自己动手完成了网站美化和相应功能的修改。写这篇文章的主要目的有几点：

一是真诚致谢csdn平台。如果没有这个平台，很难想象一个既不知道网页源文件放在哪个文件夹下，也不知道该用何种程序打开php、js、css等文件的行外人士，该如何完成网站的修改。同时也真诚致谢平台上有意或无意给予了我帮助的各位先贤和专业领域高人，无论是完整的源代码还是只言片语，都给我不少帮助和启迪。

二是站在网站开发需求者、应用方的角度，客观总结、探讨一下网站开发应该避免的误区，以及开发者、需求方两者之间的思维差异带来的影响，供双方借鉴、探讨。

三是记录一下过程当中解决一系列问题的源码和总结，供初学者或与我处于类似境况的人借鉴。包括如何使用小皮面板搭建本地开发环境、div+css布局中遇到的若干问题、kindeditor的使用、数据库的使用等等。毫不隐讳地讲，到目前为止这里面的很多东西我仍是一知半解，但大致并不妨碍使用，提到的很多内容可能理解不一定准确甚至有误，欢迎批评指正；涉及到代码的部分，多数是在csdn平台上搜索到并实践过的，这里只是充当搬运工，已知悉者请略过。如有高手愿意在评论区指点，不胜感谢！

不赘述了，先从小皮面板的使用谈起吧。

第一部分小皮建站

首先强烈建议大家搭建本地开发环境，我原先曾经在服务器上操作过一阵，但服务器环境确实不友好，一会儿不操作就断线了，传个文件也麻烦。小皮本地搭建开发环境相对是比较简单的：小皮面板(phpstudy) - 让天下没有难配的服务器环境！，下载phpstudy，傻瓜式安装，注意安装路径不能有中文名或空格，也不能是之前安装过的目录。

1、建站首页，启动WAMP、Apache或Nginx和数据库（MySQL），Apache或Nginx配置设置网站目录为要开发和测试的目录。在此之前，要把网站目录的整体文件（目录建议不用中文）拷贝至phpstudy_pro下，这个是安装小皮后默认的php环境。

2、网站页面，点击左侧-网站-创建网站。

域名：localhost /*用于本地测试

以后放到服务器上，如果需要和正式域名挂接，输入正式域名即可。

端口：建议8099及以上之类，不使用80端口。

注意：启动Apache或Nginx时，可能会提示80端口被占用的情况，是因为有系统服务程序占用了本地端口。这里尽量不要改Apache或Nginx的端口，默认80就好，否则很麻烦，只能通过127.0.0.1：端口，来访问。

3、配置数据库

修改root密码，创建数据库，创建时选择与要添加的网站目录挂接。创建好后，如果需要导入服务器的数据，需要按以下方式操作一下：

导入数据问题：从远程服务器上，打开navicat（管理数据库的软件），打开用户连接，选择数据库名称，在左侧文件夹上点右键，整体存储为（结构+数据），即可。导出的文件为 *.sql类型。

在小皮面板的软件管理中下载phpmyadmin软件，打开，登录（前面创建的数据库用户名、密码），导入刚才的*.Sql文件，提示导入成功。

4、在浏览器中输入：localhost：8099（以具体设置为准）（前端），localhost：8099/admin/public/admin.html（后台）

这样就配置好了。这里可能还会有几个问题。

一、只能访问首页，访问其他页面报错的问题，解决方式如下：

/*解决Nginx配置只能显示首页的问题

小皮建站→设置→vhosts.conf 所启用的nginx.htaccess文件中（这个文件通常在网站的根目录），添加如下代码：

if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s=$1 last;
break;
}

修改完成后一定要重启Nginx。

/*解决Apache配置只能显示首页的问题

网站根目录下，打开.htaccess文件，添加如下代码：

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
</IfModule>

修改完成后一定要重启Apache。

二、数据库报错问题。类似“error 1055 ，this is incompatible with sql_mode=only_full_group_by”，这可能是高版本数据库对于数据校验更严格造成的。解决方式：

小皮建站中的数据库配置文件中的[mysqld]下方加入如下语句，重启数据库即可。

sql-mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
//或只有：
sql-mode= NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
//这样不是严格校验模式，传数值的时候不会报错。

上面涉及到的几个软件，开发软件使用的是微软的VSCODE，免费且强大，推荐使用；数据库管理软件，Navicat，这个是收费的，但确实功能很强大。

第二部分网站布局和美化

这里主要提几个基本概念。

一是文档流的问题。div布局默认的文档流，块级元素是垂直向下的，所以要让块级元素水平排列，就需要在css中定义left、right浮动类，或定义style= “float：left;”,如果要让紧随其后的块级元素换行，需要清除浮动，定义相应的clearfix类，或clear:both均可。

二是块级元素和行内元素的使用。块级元素会独占一行，高度，行高，外边距和内边距都可以单独设置；宽度默认是容器的100%；可以容纳内联元素和其他的块级元素。常见的块级元素有：<h>,<p>,<div>,<ul>,<ol>,<li>等。

行内元素的特点：和相邻的行内元素在一行上