章节5.企业网站前端部分

前言

我们在前面的课程完成了企业网站后台的功能，本章节开始我们来完成一下企业网站的前端部分，主要目的：还是为了給大家加强回顾一下前面所学的知识，包括：模版引擎的语法、vue的语法、api接口写法及调用等等知识点。

准备

企业网站的前端页面，我们就拿第一学期我们自己动手开发的企业网页为例，你可以把我们开发的这些网页看成是企业网站的前端页面模版，其实它的实现原理，和我们刚刚开发完成的后端是一样的逻辑。

没有学习过我们第一学期开发企业网页课程的同学，去群里面下载本节课的课件，课件里面有企业网页的模版代码。
学习过我们第一学期开发企业网页课程的同学，你也可以去群里面下载本节课的课件，如果你不想下载，可以跟着老师操作。

# 一、引入模版

跟着老师的视频一起操作，加深印象，以后你在网上下载的网页模版都可以这么操作

# 1.引入模版静态资源放在public文件夹里面

路径可自定义，如：app/public/api/template01/静态资源

# 2.项目视图view文件夹里面创建一个主模版看效果

路径可自定义，如：app/view/api/template01/main_app.html,随便写点东西

# 3.写一个方法，来测试看一下这个主模版

找一个或创建一个控制器，app/controller/api/template01/api.js

async home() {
    const { ctx } = this;
    await ctx.render('api/template01/main_app.html');
}

# 4.定义一下路由

创建一个路由文件 app/router/api/template01/router.js

module.exports = app => {
    const { router, controller } = app;
    //看一下模版
    router.get('/api/template/01', controller.api.template01.api.home);
}

总路由进行分组 app/router.js

//分组
require('./router/api/template01/router')(app);

# 5.主模版引入代码

注意修改模版代码引入静态资源的路径 app/view/api/template01/main_app.html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板页</title>
    <link rel="stylesheet" href="/public/api/template01/static/css/common.1.0.css">
    <link rel="stylesheet" href="/public/api/template01/static/css/iconfont.css">
    <link rel="stylesheet" href="/public/api/template01/static/css/style.css">
</head>

<body>
    <!-- 头部 -->
	{% include "api/template01/_header.html" %}
    ...
     <!-- 底部 -->
     {% include "api/template01/_bottom.html" %}
</body>

</html>

头部 app/view/api/template01/_header.html

<!-- 导航栏 -->
<div class="flex justify-center" id="nav"
style="position: fixed;left: 0px;right: 0px;top: 0px;z-index: 1;background-color: #ffffff;">
    <div style="width: 1200px;" class="flex justify-between  align-center">
        <!-- 导航栏的左边 logo图 -->
        <div class="left-logo flex align-center">
            <img src="/public/api/template01/static/image/logo.png" />
        </div>
        <!-- 导航栏右边部分  导航内容部分 -->
        <div class="right-div flex align-center ">
            <a href="#" target="_blank">网站首页</a>
            <a href="#" target="_blank" class="active">关于我们</a>
            <a href="#" target="_blank">资讯中心</a>
            <a href="#" target="_blank">主营业务</a>
            <a href="#" target="_blank">工程案例</a>
            <a href="#" target="_blank">联系我们</a>
        </div>
    </div>
</div>

底部 app/view/api/template01/_bottom.html

 <!-- 底部 -->
 <div id="page_footer" class="flex justify-center py-5">
    <div style="width: 1200px;" class="flex justify-between">
        <!-- 左边 -->
        <div class="flex align-center">
            <!-- logo -->
            <img src="/public/api/template01/static/image/footer_logo.png" style="width: 107px;height: 107px;">
            <!-- 地址信息 -->
            <div class="ml-2 text-light-muted">
                <p>睿晨电网建设工程有限公司</p>
                <p>地址：北京CBD帝国大厦999层-1001号</p>
                <p>
                    copyRight <sup>&#174;</sup> 睿晨电网 版权所有 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京备案号101110000-1号
                </p>
            </div>
        </div>
        <!-- 右边 -->
        <div class="flex align-center">
            <!-- 电话图标 -->
            <img src="/public/api/template01/static/image/footer_tel.png" style="width: 56px;height: 56px;">
            <!-- 电话 -->
            <div class="ml-2 text-light-light-muted">
                <p>业务咨询电话</p>
                <strong class="font-max">010-8888-8888</strong>
            </div>
        </div>
    </div>
</div>

这样就简单引入了一个新的模版到我们的项目中了，如果之后你有其他模版，也是按照这个方式引入。

# 二、企业网站首页

我们在前面课程将整个网站后台给大家讲解了一遍，后台页面模版部分，我们是将相同的部分提取出来，不同的部分：表单、表格，我们通过封装一个模版方法，通过向模版方法传递不同的内容，来显示我们需要的界面。那么我们的前端网页其实也是一样，因此接下来做起来应该是非常容易了，大家跟着老师一起再来操作一次，复习一下我们模版引擎的语法和我们vue的语法。
(由于内容较多，在单独页面讲解本内容) 具体查看：企业网站首页