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

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_categoryproductpage2.准备项目页面模板项目准备页面名页面功能index.html首页，主要显示最新发布的商品、新闻productList.html商品列表页，主要显示所有商品、分类查询商品detail.html商品详情页，主要显示商品的详细信息page.html图文页面，主要显示公司简介、人才招聘、联系我们等栏目信息2.模板下载：1.自行实现3.规划项目路由项目准备页面路由地址页面模板首页/index.html商品列表页/productproductList.html商品详情页/detaildetail.html图文页面/pagepage.htmlnpminstallexpressexpress-generator-g（已安装忽略）express-e

DuDa_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数据准备04product表：id为主码、自增1.数据准备任务实现连接数据库DuDaInfo，查询product表中最新上架的4个商品数据。任务实现1.数据准备SELECTid,name,price,image,add_timeFROMproductorderbyadd_timedesclimit0,4index.ejs--首页模板任务准备2.创建模板引擎<!--注意找重复--><sectionclass="product"><ul>

<li></li><li></li><li></li><li></li></ul><section>index.ejs：分析商品数据布局标签结构，section->ul->li任务实现2.创建模板引擎CMD站点目录下>npminstallmysql局部安装mysql模块varmysql=require('mysql');加载mysql模块3.编写路由代码任务实现路由中要使用mysql模块进行编程，务必先安装mysql。db.js01DuDa_APP根目录下的数据库文件该文件连接mysq数据库DuDaInfo要暴露定义的conn对象index.js02routes/index.js路由文件加载db.js使用db.js中的conn对象进行数据查询将查询结果发送到模板引擎index.ejs3.编写路由代码任务实现varmysql=require('mysql'); //引入mysql模块//创建数据库连接对象varconn=mysql.createConnection({host:'localhost',user:'root',password:'',database:'DuDaInfo'});//建立数据库连接conn.connect(function(err){if(err){console.error('数据库连接失败！'+err.message);return;}});//把创建的conn对象暴露出去，以供其他模块使用module.exports.conn=conn;设置为自己的密码任务实现db.jsexports对象conn服务器代码varexpress=require('express');constdb=require('../db.js');//注意路径varrouter=express.Router();/*首页*/router.get('/',function(req,res,next){varsql='SELECTid,name,price,image,add_timeFROMproductorderbyadd_timedesclimit0,4';db.conn.query(sql,function(err,result){if(err){console.log('[SELECTERROR]-',err.message);return;}console.log(result);//注意：返回的是一个数组[{...},{...},...,{...}]res.render('index.ejs',{products:result});});});module.exports=router;db模块的query()方法根据SQL语句查询数据查询结果带到渲染模板index.ejs任务实现routes/index.js服务器代码任务实现4.模板引擎解析数据静态代码红框内代码注释掉动态代码for循环结合原有样式输出<!--产品展示--><sectionclass="product"><h2>产品展示</h2><ahref="#">更多产品</a><ul>

<% //将路由中传递过来的数据解析显示在页面中 for(vari=0;i<products.length;i++){

%>

<li> <ahref=""> <IMGsrc="/<%=products[i].image%>"alt=""/> <P><%=products[i].name%></br><span>价格：￥<%=products[i].price%>元</span></p> </a>

</li>

<%

}

%></ul></section><!--产品展示-->每条商品数据是对象注意商品名等属性调用任务实现views/index.ejs客户端代码for循环结束的“}”不能少5.启动项目，浏览页面任务实现启动项目进入项目文件夹，打开CMD窗口nodemonapp.js浏览器测试http://localhost:3005小结任务需求Express中结合模板引擎实现首页显示商品数据实现步骤创建项目文件夹

创建模板引擎

本地安装mysql模块

编写路由代码

模板引擎解析数据

启动项目，浏览页面任务实现db.js–数据库配置文件routes/index.js–路由代码views/index.ejs–首页模板引擎7.3实现分类商品列表显示引入如何将数据库中的信息按照分类查询出来显示在模板页面？目录01任务需求02实现步骤03任务实现任务需求在Express中完成MySQL数据库表中的分类商品数据查询，显示在模板页面中。点击[数码产品]超链接地址栏带参数：/product?cat_id=3默认所有商品列表/product实现步骤编写路由代码03启动项目，浏览页面05创建模板引擎02模板引擎解析数据01数据准备04数据库DuDaInfo，商品类别表product_category、商品表product。任务实现1.数据准备product_category表，cat_id为主码product表，cat_id为外码任务实现2.创建模板引擎productList.ejs--列表页模板<!--注意地址栏参数值要与表中类别号一致-->productList.ejs：商品类别导航超链接设置，带地址栏参数（商品类别号cat_id字段值），以区分用户选择的类别。任务实现2.创建模板引擎product_category表<!--注意找重复--><DIVid=productList>

<DLclass=noMargin> <DT></DT> <DD></DD></DL>

<DLclass=noMargin> <DT></DT> <DD></DD></DL><DIVclass=clear></DIV></DIV>分析商品类别数据布局标签结构，div->dl->dt和dd任务实现2.创建模板引擎index.js023.编写路由代码任务实现两种情况（区别在于地址栏是否有参数）：1.默认全表查询“/product”2.分类查询“/product?cat_id=1routes/index.jsvarexpress=require('express');constdb=require('../db.js');//注意路径varrouter=express.Router();/*商品列表页*/router.get('/product',function(req,res,next){

varcat_id=req.query.cat_id;//取地址栏参数cat_id的值

if(cat_id){//地址栏带了参数cat_id,分类查询 varsqlStr="select*fromproductwherecat_id=?orderbyiddesc"; varsqlParam=[cat_id];

}else{//地址栏没有参数cat_id,查询所有商品 varsqlStr="select*fromproductorderbyiddesc";varsqlParam=[];

}db.conn.query(sqlStr,sqlParam,function(err,result){ console.log(result);//返回[{...},{...},...,{...}]数组 res.render('productList.ejs',{products:result});});});module.exports=router;参数化查询语句query()方法里面两参数查询结果带到渲染模板prouductList.ejs任务实现routes/index.js服务器代码两种情况：查全表-地址栏无参数分类查-地址栏带参数任务实现4.模板引擎解析数据静态代码红框内代码注释掉动态代码for循环结合原有样式输出<!--产品列表展示--><DIVid=productList> <%for(vari=0;i<products.length;i++){%>

<DL><DT><Ahref="/detail/<%=products[i].id%>">

<IMGalt='<%=products[i].name%>'src="<%=products[i].image%>"></A> </DT> <DD> <Pclass=name> <Atitle="<%=products[i].name%>"href="/detail/<%=products[i].id%>"> <%=products[i].name%></A> </P> <Pclass=price>价格：￥<%=products[i].price%>元</P> <Pclass=brief><%-products[i].content.substr(0,30)%>...</P><!--<%-%>解析HTML标签--> </DD>

</DL><%}%><DIVclass=clear></DIV></DIV><!--产品展示-->每条商品数据是对象注意商品名等属性调用任务实现views/productList.ejs客户端代码for循环结束的“}”不能少5.启动项目，浏览页面任务实现启动项目进入项目文件夹，打开CMD窗口nodemonapp.js服务器测试浏览器打开地址：http://localhost:3005/product[汽车配件]类别小结任务需求Express中结合模板引擎实现分类商品数据实现步骤准备2张表

创建模板引擎

编写路由代码

模板引擎解析数据

启动项目浏览页面任务实现db.js–数据库配置文件routes/index.js–路由代码views/productList.ejs–商品列表模板引擎7.4实现商品详情页面引入如何在列表页中根据用户的点击，将指定商品信息显示在页面模板中？目录01任务需求02实现步骤03任务实现任务需求在Express中完成MySQL数据库表中的指定商品数据查询，显示在模板页面中。列表页点击商品图片或名称详情页：/detail/9默认所有商品列表/product实现步骤编写路由代码03启动项目，浏览页面05创建模板引擎02模板引擎解析数据01准备数据04数据库DuDaInfo，product表中的商品数据。任务实现1.数据准备id、name、image、content等字段<!--注意动态参数值为商品的id字段值-->列表页中，商品图片和名称设置为超链接，带地址栏参数（商品表中id值），以区分用户选择的商品。任务实现1.创建模板引擎-设置列表超链接任务实现2.创建模板引擎detail.ejs--详情页模板<DIVid="detail"> <DIVclass="productImg"> <IMGsrc="商品图片路径"width=300></DIV><DIVclass="productInfo"> <H1>商品名</H1> <UL> <LIclass=productPrice>价格：<EMclass=price>￥888元</EM></LI> </UL></DIV><DIVclass=clear></DIV> <DIVclass="productContent"><H3>产品介绍</H3><UL>商品介绍文字商品介绍文字商品介绍文字商品介绍文字商品介绍文字</UL></DIV></DIV> deatil.ejs：分析商品类别数据布局标签结构，商品信息分别在哪个标签内。任务实现2.创建模板引擎index.js023.编写路由代码任务实现路由地址：/detail/n，n为商品的id字段值，动态参数获取地址栏动态参数值n将查询结果发送到模板引擎detail.ejsroutes/index.jsvarexpress=require('express');constdb=require('../db.js');//注意路径varrouter=express.Router();/*商品详情页*/router.get('/detail/:id',function(req,res,next){varid=req.params.id;//取地址栏参数varsqlStr="selectid,image,name,price,contentfromproductwhereid=?";varsqlParam=[id];db.conn.query(sqlStr,sqlParam,function(err,result){ if(err){ console.log(err); return; } console.log(result);//返回[{}]数组 res.render('detail.ejs',{oneProduct:result});});});module.exports=router;查询结果带到渲染模板detail.ejs任务实现routes/index.js服务器代码地址栏动态参数获取任务实现4.模板引擎解析数据静态代码样例文字要替换动态代码查询结果为含一个元素的数组<!--产品详情--><DIVid="detail"> <DIVclass="productImg"> <IMGsrc="/<%=oneProduct[0].image%>"width=300> </DIV><DIVclass="productInfo"> <H1><%=oneProduct[0].name%></H1> <UL> <LIclass=productPrice>价格：<EMclass=price>￥<%=oneProduct[0].price%>元</EM></LI></UL></DIV><DIVclass=clear></DIV><DIVclass="productContent"><H3>产品介绍</H3> <UL><%-oneProduct[0].content%></UL></DIV></DIV> <!--产品详情-->返回的oneProduct为含一个商品数据的数组oneProduct[0]调用任务实现views/detail.ejs客户端代码商品详情文字可能含HTML标签使用<%-%>解析5.启动项目，浏览页面任务实现启动项目进入项目文件夹，打开CMD窗口nodemonapp.js服务器测试浏览器打开地址：http://localhost:3005/product选择商品点击图片，进入详情页小结任务需求Express中结合模板引擎实现商品详情页面实现步骤设置列表超链接

创建模板引擎

编写路由代码

模板引擎解析数据

启动项目浏览页面任务实现routes/index.js–路由代码views/productList.ejs–设置商品图片、标题超链接views/detail.ejs–商品详情模板引擎7.5实现其他图文页面引入如何在Express框架中根据栏目点击，显示公司简介、联系我们等图文页面？目录01任务需求02实现步骤03任务实现任务需求在Express中完成MySQL数据库表中的查询各个图文栏目的数据，显示在页面中。[联系我们]/page/2[公司简介]/page/1实现步骤编写路由代码03启动项目，浏览页面05创建模板引擎02模板引擎解析数据01数据准备04数据库DuDaInfo，页面文字表page。任务实现1.数据准备id为主码栏目数据任务实现2.创建模板引擎page.ejs--图文页模板<!--注意地址栏参数值要与表中类别号一致-->page.ejs：图文导航超链接设置，地址栏带动态参数（栏目id值），以区分用户选择的类别。任务实现2.创建模板引擎<articleclass="main"><h2>栏目名称</h2>

栏目图文介绍栏目图文介绍

栏目图文介绍栏目图文介绍

栏目图文介绍栏目图文介绍

栏目图文介绍栏目图文介绍</article>page.ejs：分析栏目图文页面布局标签结构。将栏目名称和栏目内容放入模板指定位置。任务实现2.创建模板引擎index.js023.编写路由代码任务实现路由地址：/page/n，n为栏目的id字段值，动态参数--公司简介“/page/1”--联系我们“/page/2”获取地址栏动态参数值n将查询结果发送到模板引擎page.ejsroutes/index.jsvarexpress=require('express');constdb=require('../db.js');//注意路径varrouter=express.Router();/*图文页面*/router.get('/page/:pid',function(req,res,next){varpid=req.params.pid;varsqlstr="selectid,page_name,contentfrompagewhereid=?";varsqlParam=[pid];db.conn.query(sqlstr,sqlParam,function(err,result){ if(err){ console.log(err); return; } console.log(result);//[{s}]数组,只有一个元素 res.render('page.ejs',{pageContent:result});});});module.exports=