Spring Cloud + Vue前后端分离-第13章网站开发

源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程

Spring Cloud + Vue前后端分离-第13章网站开发

13-1 网站模块的搭建

新建web模板

1.网站开发，增加web模块，使用命令：vue create web

vue版本4.2.3

大家拿到一个vue项目后，要先执行npm install，才能运行项目。这一步会去下载node module，类似于maven项目要先下载jar包。

1.创建vue create web

2.cd web

npm run serve

多环境配置

1.网站开发，web模块增加多环境配置，启动命令中，增加--port 8081来修改端口

env.dev

env.prod

package.json

增加路由配置

1.网站开发，web模块增加路由配置，web路由版本是4.2.5，而admin路由版本是3.6.5

使用命令：npm install --save vue-router

注意：要先跳到web模块下，再安装router模块

以下这两个文件都是自动改的

package.json，package-lock.json

这里只是增加了router依赖，后续开发页面时，会增加router的配置

13-2 集成bootstrap官方模板

我们的控台admin,用的是免费的ace admin模版，ace也是基于bootstrap做的封装，有很多组织和个人以卖各种前端模板为生。

本章开发的前端网站，是基于bootstrap官方提供的原生模板

bootstrap4.4.1文档介绍

1.网站开发，增加bootstrap-4.4.1的js,css

jquery.slim是jquery的简化版，也可以引入原版jquery。popper.js是一个js提示插件。

网站首页选用album模板，相册主题

集成album模板

1.网站首页开发，集成album模板

做前端的同学，会经常看到bundle这个词，就是像几个依赖的js或css，打包成一个bundle.js

App.vue

将album模板中的body标签里的内容，复制到template标签中

删除HelloWorld.vue

album.css

.jumbotron {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 0;
    background-color: #fff;
}
@media (min-width: 768px) {
    .jumbotron {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron h1 {
    font-weight: 300;
}

.jumbotron .container {
    max-width: 40rem;
}

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer p {
    margin-bottom: .25rem;
}

index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>bootstrap-4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%= BASE_URL %>static/css/album.css">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="<%= BASE_URL %>bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
    <title>甲蛙在线视频课程系统</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

互联网早期，js脚本容易被黑客利用，所以很多浏览器都有禁用js的选项，现在都不会禁用了。

main.js

因为之前的vue版本太高，所以这里我做了一些调整，将vue的版本调到了4.2.3

vue会将我们写的vue文件做编译压缩，导致我们写的html的换行没有了，所以按钮之间的空隙没有了

顶部组件和底部组件提取

1.网站首页开发，将顶部提取成the-header组件

将app.vue中的header复制过来

the-header.vue

app.vue

小提示：在父组件中打入子组件的标签名，会自动引入子组件。

测试

然后再改过来就可以了

1.网站首页开发，将底部提取成the-footer组件

the-footer.vue

app.vue

13-3 首页开发

路由配置与文案修改

1.网站首页开发，增加路由配置router.js，增加网站首页index.vue

index.vue

router.js

main.js

没有使用route-view的话，就没有路由效果

app.vue

测试

再恢复回去

回车

导航条改为bootstrap 导航条组件

1.网站首页开发，导航条改为bootstrap 导航条组件

文档：https://v4.bootcss.com/docs/components/navbar/

the-header.vue

<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  name: 'theHeader',
}
</script>

导航条改为bootstrap 导航条组件

1.网站首页开发，导航条美化：菜单名称修改；增加container布局；样式改为dark;

2.集成fontawesome图标

index.html

fontawesome是一个图标库，可以到官网注册后，获取自己的cdn链接

the-header.vue

<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">
          <i class="ace-icon fa fa-video-camera"></i>&nbsp;甲蛙课程
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">全部课程</a>
            </li>
            <li class="nav-item dropdown active">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                更多
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">关于我们</a>
                <a class="dropdown-item" href="#">渠道合作</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">更多信息</a>
              </div>
            </li>
          </ul>
          <span class="text-white">欢迎：</span>
          <button class="btn btn-outline-light my-2 my-sm-0" type="submit">登录/注册</button>
        </div>
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  name: 'theHeader',
}
</script>

测试

底部文案修改

1.网站首页开发，底部文案修改

the-footer.vue

大屏文案修改

1.网站首页开发，大屏文案修改

index.vue

bootstrap4提供了很多便捷的css样式，p-3就是padding:1rem。大家可以使用p-1，p-2来不断调整自己的样式。类似的还有m-x表示margin。

最新上线与好课推荐

1.网站首页开发，增加【新上好课】

后端接口测试地址：http://127.0.0.1:9002/business/web/course/list-new

以后web模块的请求全会放到web包下，将admin请求和web请求分开，方便做权限控制

CourseService.java

CourseController.java

spring提供两种类名生成方式，默认使用的是AnnotationBeanNameGenerator，它生成的方式就是取当前类名（不含包名）。

测试

首页显示新上好课真实数据bootstrap4图片自适应：使用img-fluid

1.网站首页开发，首页显示新上好课真实数据bootstrap4图片自适应：使用img-fluid

安装axios:npm install axios --save

2.初始user表，test/test

前后端交互，使用axios，也可以用jquery

安装axios:npm install axios --save

cd web

npm install axios --save

会自动对package.json，package-lock.json两个文件进行更新

main.js

index.vue

示例代码不要急于删除，在查看新代码显示出来的样式没问题后，再把示例代码删除

首页显示新上好课真实数据bootstrap4图片自适应：使用img-fluid

1.网站首页开发，

课程card美化，

增加【最新上线】和【好课推荐】，【好课推荐】和【最新上线】使用的一样数据，

响应式的页面，使用rem代替px

style.css

如果设置html标签的font-size=16px,则1rem=16px,0.5rem=8px。后续所有字体，边距都可以用rem作为单位

index.html

index.vue

<template>
  <main role="main">

    <section class="jumbotron text-center">
      <div class="container">
        <h1>在线视频课程平台</h1>
        <p class="lead text-muted m-3">
          知识付费时代刚刚起步，在这个领域有很多的发展机会。整个课程以实战为基础，手把手从零开始，
          一步一步搭建一个完整的企业级开发架构。不讲废话，只讲干货。
        </p>
        <p>
          <a href="#" class="btn btn-primary my-2 p-3 font-weight-bold">点击进入所有课程</a>
        </p>
      </div>
    </section>

    <div class="album py-5 bg-light">
      <div class="container">
        <div class="title1">最新上线</div>
        <div class="row">
          <div v-for="o in news" class="col-md-4">
            <div class="card mb-4 shadow-sm course">
              <img class="img-fluid" v-bind:src="o.image">
              <div class="card-body">
                <h4 class="">{
  {o.name}}</h4>
                <p class="card-text">{
  {o.summary}}</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn