当前课程知识点:软件开发实训--动态网站开发 >  5 环境搭建与开发 >  5.2Web前端环境搭建 >  5.2.1Web前端环境

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

5.2.1Web前端环境在线视频

下一节:5.3.1用户实体创建

返回《软件开发实训--动态网站开发》慕课在线视频列表

5.2.1Web前端环境课程教案、知识点、字幕

同学你好

欢迎回到软件开发实训课堂

上节课咱们把Spring Boot的环境搭建好了

那么你的环境搭建好了吗

这节课咱们来看一下Web前端的环境搭建

搭建前端的环境比较容易

首先第一步我们需要把它的所有的包复制进来

那么复制进来后放在我们的项目什么位置呢

这个需要注意

对Spring Boot来讲

它要求所有的静态的内容

把它放到类路径下的static目录

或者是public目录

需要注意

我们把它写在这里

对于静态的资源放入static目录下

这个目录是在类路径下的目录

我们一定要说明是类路径

而不是普通的路径

或者是pulic这样的路径

而对于我们后台的界面用到的模板

Seamlife

它的路径对于Spring Boot来讲

它默认的放在了类路径下的template目录

这个目录也是类路径下的目录

因此我们要首先去创建这两个目录

通常情况下

创建这两个目录

把它放在源包下面的有一个resources目录下

所以我们在项目名称上

点击右键新建一个文件夹

文件夹的名称就叫resources

然后它的负文件夹我们一定要去选择一下

它是src下面的main

这里边已经有了一个java

java 主要就是放我们的java源代码

而resourc就放置我们除了Java

源代码的其他的资源

我们把resourc放在我们的们目录下

然后点击完成

这样

你会看到你的项目里边多了一个其他源

这样的目录

在这个目录下出现了resources

resources

实际上也是类路径的根目录

所以我们可以把static目录放在resources目录下

我们在resources上点击右键

选择新建一个文件夹

static

这样我们就建了一个静态资源的目录

对seamlif它的模板

我们同样的在resources上点击右键

选择新建文件夹

输入templates

点击完成

这样我们会看到已经拥有了两个文件夹

还有一个需要注意的是springboot

默认的首页是static下

index.html

或者是一个index控制器

这样我们就把静态的目录结构创建好了

那么下一步我们要做的就是把我们的

相关的资源复制进来

当前我们需要的资源就是bootstrap

vue以及Jquery

当我们下载了bootstrap后

bootstrap里边有两个目录

一个是CSS,一个是js

我们把js里边放上Jquery和Vue

然后呢,我们将他们复制到我们的项目里去

复制过来后把它放在static目录下

这样我们就有了css和相关的js文件

有了这个资源后

我们就可以编写相关的代码

我们可以写一个首页来做一个简单的测试

在static上点击右键

选择新建html文件

文件的名称我们就叫做index.html

可以不输入扩展名

因为工具会给你生成扩展名

点击完成后

它已经生成了我们需要的页面

在这里我们可以加入一些文字

测试内容

然后保存我们的程序

注意这个时候我们去运行时

进入到Application里面去运行

可是有一个问题就是

我们应该会找不着这个文件

找不着文件的原因是

当我们创建目录以及新建我们的文件时

SpringBoot

它并没有帮我们把这些资源复制过去

为了让它能够复制过去

我们还需要改变我们的项目文件

pom.xml

在pom.xml里边新增一个

资源的复制

找到resources这个结构

在resource的下面

我们输入resource

然后把目录结构一样的

从上面可以复制一下

将Java改成resources

下面的include我们只需要一行就可以了

因为resource下面的所有的资源

我们都把它复制过去

这样完成后

springboot依然不能主动地将内容复制过去

这个时候我们运行它依然不能够正常的运行

需要我们去重新构建

我们可以使用清理并构建

或者使用依赖关系来构建

将所有的依赖都给它加进来

当你看到BUILD SUCCESS 这样的提示时

就说明它已经构建完成了

这个时候我们就可以去运行它

在application这里点击右键

选择运行文件

它就以java的方式来启动我们的web应用

这是因为springboot它内迁了tomcat

而且它默认的使用的是tomcat这个环境

当我们看到Started Application这个提示出来后

说明我们的启动已经成功了

启动完成后

我们就可以去打开浏览器来访问我们的网页了

在浏览器的地址栏

我们输入local host

8080

这个时候我们就能看到我们在index文件

里输入的内容

那么当我们修改这个内容时

来刷新一下界面看看

我们加了一句话

然后刷新我们的网页

看看它是否能够及时更新

可见它对html的内容是实时的进行了刷新

但是如果我们在Java类里边

去执行更新或者变更我们的内容时

它是否依然能够做出对应的执行

这样呢我们可以去做一个测试

你会发现在Java中去修改

或者在我们的一些配置文件里去修改时

它是无法自动去更新的

那么不能自动更新

怎么办呢

我们需要去增加一个依赖关系

依赖关系就是springboot的开发工具

打开我们的项目文件

pom.xml

在依赖里边

我们添加我们的开发工具

复制一个springboot

它的依赖把后面的改成devtools

他没有starter

注意是spring- boot-devtools

这样子

我们在后期开发时就能达到一个热部署的效果

让我们修改的代码

立刻部署到我们的服务器中

那么我们前台所复制进来的这些个包

JavaScript嗯件是否可以使用

我们简单的做一个测试

在我们的index.html里边

先引入我们需要的CSS和JavaScript

CSS呢

bootstrap的

发布版

bootstrap.main.css

然后再进入js目录

在js 目录里边有三个

需要注意的是先将Jquery拖进来

然后再把bootstrap拖进来

最后我们拖入Vue

这里边有一个问题需要提示

Jquere必须放在bootstrap的前面

Jquery的js文件

必须出现在bootstrap的前面

这是为什么呢

因为bootstrap它依赖了Jquery

这样我们把css和需要的这个包都拿进来了

现在我们来做一个简单的测试

首先我们给div增加一个ID

然后我们去写一个按钮

用超链接来实现这个按钮

加上class

用Vue的差值方式

给这个按钮

写上文本

然后我们来定义JavaScript脚本

首先我们去实例化Vue

绑定它的根节点

然后通过数据来定义我们需要的按钮文本

现在我们将它保存

回到我们的浏览器

来查看一下效果

如果能看到一个蓝色的按钮出现在界面

说明我们的前端是正常的了

这样我们就把前端的环境做好了

这里边需要你自己动手去操作

因为我们在搭建环境时

往往会遇到一些莫名其妙的问题需要你去解决

只有在解决的问题过程中

你才能快速的成长

所以一定要动手

把这个环境先搭起来

这节课就讲到这里

有关环境的搭建下去以后

一定要把自己的环境搭建好

以便我们后期的课程很容易的进展

我们就讲到这里

下节课咱们再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

5.2.1Web前端环境笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。