《Web应用开发实战》课件——单元7 项目实战-企业门户网站.pptxVIP

7.1企业门户网站简介

引入Web应用开发的常见场景主题数据库，网页模板有哪些信誉好的足球投注网站引擎管理系统电商网站门户网站门户网站

引入企业门户网站开发中涉及的交互有哪些？Express框架搭建的服务器

目录01项目需求02实现步骤03项目准备

项目需求使用全局安装的Express框架，结合已有的静态页面模板和数据库中的企业数据，实现企业门户网站首页、列表页、详情页和其他图文页面。首页列表页详情页图文页

实现步骤规划项目路由03实现ejs模板引擎05准备项目页面模板02创建项目文件夹01准备项目数据04

项目准备1.准备项目数据表名表功能product_category商品类别表product商品信息表page页面图文信息表，如联系我们、公司简介等栏目数据库DuDaInfo，需要3张表。

product_category表：cat_id为主码、自增项目准备1.准备项目数据product表：id为主码、自增，cat_id为外码page表：id为主码、自增

数据库DuDaInfo，商品类别表product_category、商品表product、图文信息表page。项目准备1.准备项目数据product_categoryproductpage

2.准备项目页面模板项目准备页面名页面功能index.html首页，主要显示必威体育精装版发布的商品、新闻productList.html商品列表页，主要显示所有商品、分类查询商品detail.html商品详情页，主要显示商品的详细信息page.html图文页面，主要显示公司简介、人才招聘、联系我们等栏目信息2.模板下载：1.自行实现

3.规划项目路由项目准备页面路由地址页面模板首页/index.html商品列表页/productproductList.html商品详情页/detaildetail.html图文页面/pagepage.html

npminstallexpressexpress-generator-g（已安装忽略）express-eDuDa_APP//DuDa_APP为项目包名搭建项目环境，指定视图引擎为ejscdDuDa_APPnpminstall切换目录，并安装依赖包4.创建项目文件夹项目准备

图片、CSS样式、JS文件等静态资源放入public文件夹。静态资源处理02项目准备5.实现ejs模板引擎01将html文件另存为ejs文件，放入views文件夹。页面处理

在Express框架中，页面的静态资源路径从“/”开始。项目准备5.实现ejs模板引擎03包含top.ejs包含bottom.ejs

项目准备views/include/top.ejsviews/include/bottom.ejs公共模板文件

改写端口，启动项目项目准备进入项目文件夹，打开CMD窗口nodemonapp.js服务器测试浏览器打开地址：http://localhost:3005监听端口3005在app.js末尾追加代码：

小结项目需求首页、列表页、详情页、图文页实现步骤准备项目数据?准备项目页面模板?规划项目路由?创建项目文件夹?实现ejs模板引擎?改写端口、启动项目项目准备product_category、product和page表index.ejs、productList.ejs、detail.ejs、page.ejs-模板引擎/、/product、/detail、/路由地址

7.2实现首页商品显示

引入如何在Express框架中将数据库中的信息查询出来显示在页面模板中？

目录01任务需求02实现步骤03任务实现

任务需求在Express中完成MySQL数据库表中的商品数据查询，使用模板引擎中的布局样式显示在页面中。必威体育精装版上架四个商品http://localhost:3005/

实现步骤编写路由代码03启动项目，浏览页面05创建模板引擎02模板引擎解析数据01数据准备04

product表：id为主码、自增1.数据准备任务实现

连接数据库DuDaInfo，查询product表中必威体育精装版上架的4个商品数据。任务实现1.数据准备SELECTid,name,price,image,add_timeFROMproductorderbyadd_timedesclimit0,4

index.ejs--首页模板任务准备2.创建模板引擎

!--注意找重复--sectionclass=productulli/lili/lili/lili/li/ulsectionindex.ejs：分析商品数据布局标签结构，section-ul-li任务实现2.创建模板引擎

CMD站点目录下npminstallm