黑马学成在线第1天讲义-项目概述 CMS接口开发二

﹏ヽ暗。殇╰゛Y 2022-12-22 11:25 54阅读 0赞

**3**** CMS****需求分析**  
**3.1 ****什么是****CMS**  
1、CMS是什么 ？  
CMS （Content Management System）即内容管理系统，不同的项目对CMS的定位不同，比如：一个在线教育网站，有些公司认为CMS系统是对所有的课程资源进行管理，而在早期网站刚开始盛行时很多公司的业务是网站制作，当时对CMS的定位是创建网站，即对网站的页面、图片等静态资源进行管理。  
2、CMS有哪些类型？  
上边也谈到每个公司对每个项目的CMS定位不同，CMS基本上分为：针对后台数据内容的管理、针对前端页面的管理、针对样式风格的管理等 。比如：一个给企业做网站的公司，其CMS系统主要是网站页面管理及样式风格的管理。  
3、本项目CMS的定位是什么？  
本项目作为一个大型的在线教育平台，对CMS系统的定位是对各各网站（子站点）页面的管理，主要管理由于运营需要而经常变动的页面，从而实现根据运营需要快速进行页面开发、上线的需求。  
**3.2 ****静态门户工程搭建**  
本项目CMS是对页面进行管理，对页面如何进行管理呢？我们首先搭建学成网的静态门户工程，根据门户的页面结构来分析页面的管理方案。  
门户，是一个网站的入口，一般网站都有一个对外的门户，学成在线门户效果图如下：  
  
![fcd5065b7188c6abef1eac15dfb354b4.png][]  
**3.2.1 ****导入门户工程**  
1、安装WebStorm  
参考“WebStorm安装手册.md”  
安装WebStorm\-2018.2.3.exe  
2、安装Nginx  
下载nginx：http://nginx.org/en/download.html  
本教程下载nginx\-1.14.0.zip(http://nginx.org/download/nginx\-1.14.0.zip)  
解压nginx\-1.14.0.zip到自己的计算机，双击nginx.exe即可运行。  
访问 ：http://localhost  
  
![380906ee5d5bdb0d81aab32c5eb9e0c4.png][]  
3、导入门户工程  
将课程资料中的门户工程拷贝到代码目录。  
使用WebStorm打开门户工程目录，目录的结构如下，后期会根据开发的推进进行扩充。  
![e1624fb112787b5e85899af8703e1a1c.png][]  
  
**3.2.2 ****配置虚拟主机**  
在nginx中配置虚拟主机：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>server</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>listen </code> 
      <code>80</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>server_name www.xuecheng</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.com;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>ssi </code> 
      <code>on</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>ssi_silent_errors </code> 
      <code>on</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>location</code> 
      <code>/</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>alias</code> 
      <code>F</code> 
      <code>:</code> 
      <code>/</code> 
      <code>teach</code> 
      <code>/</code> 
      <code>xcEdu</code> 
      <code>/</code> 
      <code>xcEduUI</code> 
      <code>/</code> 
      <code>xc</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>ui</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pc</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>static</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>portal</code> 
      <code>/</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>index</code> 
      <code>index</code> 
      <code>.html;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

F:/teach/xcEdu/xcEduUI/xc  
\-  
ui  
\-  
pc  
\-  
static  
\-  
portal/ 本目录即为门户的主目录。  
5、配置hosts文件  
本教程的开发环境使用Windows 7，修改C:\\Windows\\System32\\drivers\\etc\\hosts文件

> 127.0.0.1 www.xuecheng.com

进入浏览器，输入http://www.xuecheng.com  
  
**3.3 SSI****服务端包含技术**  
本节分析首页的管理方案。  
1、页面内容多如何管理？  
将页面拆分成一个一个的小页面，通过cms去管理这些小页面，当要更改部分页面内容时只需要更改具体某个小页面即可。  
2、页面拆出来怎么样通过web服务浏览呢？  
使用web服务(例如nginx)的SSI技术，将多个子页面合并渲染输出。  
3、SSI是什么？  
  
![414d41c9cac37f93aed912a2fc644f00.png][]  
ssi包含类似于jsp页面中的incluce指令，ssi是在web服务端将include指定 的页面包含在网页中，渲染html网页响应给客户端 。nginx、apache等多数web容器都支持SSI指令。  
ssi指令如下：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>!‐‐</code> 
      <code>#include virtual="/../....html"‐‐&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

4、将首页拆分成  
index.html：首页主体内容  
include/header.html：头部区域  
include/index\_banner.html：轮播图  
include/index\_category  
.html：左侧列表导航  
include/footer.html：页尾  
5、在nginx虚拟主机中开通SSI  
server\{   
listen 80;  
server\_name www.xuecheng  
.com;  
ssi on;  
ssi\_silent\_errors on;  
......  
  
ssi的配置参数如下： ssi on： 开启ssi支持 ssi\_silent\_errors on：默认为offff，设置为on则在处理SSI文件出错时不输出错误信息 ssi\_types：默认为 ssi\_types text/html，如果需要支持shtml（服务器执行脚本，类似于jsp）则需要设置为ssi\_types text/shtml  
6、测试  
去掉某个\#include查看页面效果。  
  
**3.3 CMS****页面管理需求**  
1、这些页面的管理流程是什么？  
1）创建站点：  
一个网站有很多子站点，比如：学成在线有主门户、学习中心、问答系统等子站点。具体的哪个页面是归属于具体的站点，所以要管理页面，先要管理页面所属的站点。  
2）创建模板：  
页面如何创建呢？比如电商网站的商品详情页面，每个页面的内容布局、板式是相同的，不同的只是内容，这个页面的布局、板式就是页面模板，模板\+数据就组成一个完整的页面，最终要创建一个页面文件需要先定义此页面的模板，最终拿到页面的数据再结合模板就拼装成一个完整的页面。  
  
3）创建页面：  
创建页面是指填写页面的基本信息，如：页面的名称、页面的url地址等。  
4）页面预览：  
页面预览是页面发布前的一项工作，页面预览使用静态化技术根据页面模板和数据生成页面内容，并通过浏览器预览页面。页面发布前进行页面预览的目是为了保证页面发布后的正确性。  
5）页面发布：  
使用计算机技术将页面发送到页面所在站点的服务器，页面发布成功就可以通过浏览器来访问了。  
2、本项目要实现什么样的功能？  
1）页面管理  
管理员在后台添加、修改、删除页面信息  
2）页面预览  
管理员通过页面预览功能预览页面发布后的效果。  
3）页面发布  
管理员通过页面发布功能将页面发布到远程门户服务器。  
页面发布成功，用户即可在浏览器浏览到最新发布的页面，整个页面添加、发布的过程由于软件自动执行，无需人工登录服务器操作

[fcd5065b7188c6abef1eac15dfb354b4.png]: /images/20221120/904127c27d214c31b284634e8cf33cdb.png
[380906ee5d5bdb0d81aab32c5eb9e0c4.png]: /images/20221120/f9cbac06bdf44ebda264bd1a95af545e.png
[e1624fb112787b5e85899af8703e1a1c.png]: /images/20221120/30222b30d58b45fab8f68712fa5318af.png
[414d41c9cac37f93aed912a2fc644f00.png]: /images/20221120/4b1632ec38da46d2b62edd45c701e2cd.png