源代码在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> 甲蛙课程
</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