java+ElementUI前后端分离旅游项目第一天 项目架构与框架搭建
项目概述和环境搭建
1. 第一章. 项目概述
【目标】
美年旅游的项目总体的业务和技术
【路径】
1：项目介绍
2：原型展示
3：技术架构
4：功能架构
5：软件开发流程
【讲解】
1.1. 项目介绍（项目背景）
美年旅游管理系统是一款应用于旅游管理机构的业务系统。
1.2. 原型展示
微信端
首页 index.html
后台：
1.3. 接口文档
新浪开放平台： http://open.weibo.com/wiki/Error_code
微信开放平台： https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
【小结】
1：掌握项目的功能介绍
2：项目中的2套系统
PC端管理系统（后台人员），移动端系统（客户）
3：技术架构
- 掌握项目开发技术
4：功能架构
- 掌握项目的业务功能
2. 第二章. 环境搭建
【目标】
使用maven搭建系统环境
【路径】
0：项目结构
1：父工程 meinian_parent
2：子工程 meinian_common（工具类）
3：子工程 meinian_pojo（实体类）
4：子工程 meinian_dao（Dao类）
5：子工程 meinian_interface（接口方法，用在dubbo数据调用）
6：子工程 meinian_service（Service类）
7：子工程 meinian_web（表现层）
8：测试
其中web是war项目，service是war项目，实现服务间的调用
搭建完成之后如下：
【讲解】
2.1. 项目结构
2.1.1 分模块构建maven工程分析
在现实生活中，汽车厂家进行汽车生产时，由于整个生产过程非常复杂和繁琐，工作量非常大，所以车场都会将整个汽车的部件分开生产，最终再将生产好的部件进行组装，形成一台完整的汽车。
2.2.2 maven工程的继承
在Java语言中，类之间是可以继承的，通过继承，子类就可以引用父类中非private的属性和方法。同样，在maven工程之间也可以继承，子工程继承父工程后，就可以使用在父工程中引入的依赖。继承的目的是为了消除重复代码。
2.2.3 项目结构分析
本项目采用maven分模块开发方式，即对整个项目拆分为几个maven工程，每个maven工程存放特定的一类代码，具体如下：
各模块职责定位：
meinian_parent：父工程，打包方式为pom，统一锁定依赖的版本，同时聚合其他子模块便于统一执行maven命令
meinian_common：通用模块，打包方式为jar，存放项目中使用到的一些工具类和常量类
meinian_pojo：打包方式为jar，存放实体类和返回结果类等
meinian_dao：持久层模块，打包方式为jar，存放Dao接口和Mapper映射文件等
meinian_interface：打包方式为jar，存放服务接口
meinian_service：Dubbo服务模块，打包方式为war，存放服务实现类，作为服务提供方，需要部署到tomcat运行
meinian_web：打包方式为war，作为Dubbo服务消费方，存放Controller、HTML页面、js、css、spring配置文件等，需要部署到tomcat运行
2.2. maven项目搭建
通过前面的项目功能架构图可以知道本项目分为美年国宾管理后台和美年国宾管理前台（微信端，本小节我们先搭建管理后台项目
2.2.1. meinian_parent
【路径】
1：创建工程
2：导入坐标
【讲解】
1：创建meinian_parent，父工程，打包方式为pom，用于统一管理依赖版本
2：pom.xml
4.0.0
com.atguigu
meinian_parent
1.0-SNAPSHOT
pom
4.12
5.0.5.RELEASE
4.1.4
2.5
2.6.0
3.4.7
0.1
3.4.5
1.3.1
1.2.15
5.1.32
1.0.9
1.3.1
5.0.5.RELEASE
3.14
2.9.0
2.2.1
org.springframework
spring-context
${spring.version}
org.springframework
spring-beans
${spring.version}
org.springframework
spring-web
${spring.version}
org.springframework
spring-webmvc
${spring.version}
org.springframework
spring-jdbc
${spring.version}
org.springframework
spring-aspects
${spring.version}
org.springframework
spring-jms
${spring.version}
org.springframework
spring-context-support
${spring.version}
org.springframework
spring-test
${spring.version}
com.alibaba
dubbo
${dubbo.version}
org.apache.zookeeper
zookeeper
${zookeeper.version}
com.github.sgroschupf
zkclient
${zkclient.version}
junit
junit
4.12
com.alibaba
fastjson
1.2.47
javassist
javassist
3.12.1.GA
commons-codec
commons-codec
1.10
com.github.pagehelper
pagehelper
${pagehelper.version}
org.mybatis
mybatis
${mybatis.version}
org.mybatis
mybatis-spring
${mybatis.spring.version}
com.github.miemiedev
mybatis-paginator
${mybatis.paginator.version}
mysql
mysql-connector-java
${mysql.version}
com.alibaba
druid
${druid.version}
commons-fileupload
commons-fileupload
${commons-fileupload.version}
org.quartz-scheduler
quartz
${quartz.version}
org.quartz-scheduler
quartz-jobs
${quartz.version}
com.sun.jersey
jersey-client
1.18.1
com.qiniu
qiniu-java-sdk
7.2.0
org.apache.poi
poi
${poi.version}
org.apache.poi
poi-ooxml
${poi.version}
redis.clients
jedis
${jedis.version}
org.springframework.security
spring-security-web
${spring.security.version}
org.springframework.security
spring-security-config
${spring.security.version}
org.springframework.security
spring-security-taglibs
${spring.security.version}
com.github.penggle
kaptcha
2.3.2
javax.servlet
javax.servlet-api
dom4j
dom4j
1.6.1
xml-apis
xml-apis
1.4.01
javax.servlet
servlet-api
${servlet-api.version}
provided
org.apache.maven.plugins
maven-compiler-plugin
3.2
1.8
1.8
UTF-8
2.2.2. meinian_common
【路径】
1：创建工程
2：导入坐标（继承父工程、导入所有jar包）
【讲解】
1：创建meinian_common，子工程，打包方式为jar，存放通用组件，例如工具类等
2：pom.xml
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_common
jar
com.github.pagehelper
pagehelper
org.mybatis
mybatis
org.mybatis
mybatis-spring
com.github.miemiedev
mybatis-paginator
mysql
mysql-connector-java
com.alibaba
druid
commons-fileupload
commons-fileupload
org.springframework
spring-context
org.springframework
spring-beans
org.springframework
spring-web
org.springframework
spring-webmvc
org.springframework
spring-jdbc
org.springframework
spring-aspects
org.springframework
spring-jms
org.springframework
spring-context-support
org.springframework
spring-test
com.alibaba
dubbo
org.apache.zookeeper
zookeeper
com.github.sgroschupf
zkclient
junit
junit
com.alibaba
fastjson
javassist
javassist
commons-codec
commons-codec
org.apache.poi
poi
org.apache.poi
poi-ooxml
redis.clients
jedis
com.qiniu
qiniu-java-sdk
com.sun.jersey
jersey-client
org.springframework.security
spring-security-web
org.springframework.security
spring-security-config
org.springframework.security
spring-security-taglibs
javax.servlet
servlet-api
2.5
javax.servlet
jsp-api
2.0
javax.servlet
jstl
1.2
2.2.3. meinian_pojo
【路径】
1：创建工程
2：导入坐标（继承父工程、依赖health_common）
【讲解】
1：创建meinian_pojo，子工程，打包方式为jar，存放POJO实体类
2：pom.xml
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_pojo
jar
com.atguigu
meinian_common
1.0-SNAPSHOT
2.2.4. meinian_dao
【路径】
1：创建工程
2：导入坐标（继承父工程、依赖meinian_pojo）
3：log4j.properties
4：sqlMapConfig.xml（mybatis的配置文件）
5：applicationContext-dao.xml（spring整合mybatis,配置Druid数据源）
6：接口类（后续添加实体后，再创建）
7：接口类对应的映射文件（后续添加实体后，再创建）
【讲解】
1：创建meinian_dao，子工程，打包方式为jar，存放Dao接口和Mybatis映射文件
2：pom.xml
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_dao
jar
com.atguigu
meinian_pojo
1.0-SNAPSHOT
3：log4j.properties
在 resources 目录下面 新建 log4j.properties 日志文件
### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c:\\mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### set log levels - for more verbose logging change 'info' to 'debug' ###
log4j.rootLogger=debug, stdout
4：sqlMapConfig.xml
分页插件网址：https://pagehelper.github.io/
5：applicationContext-dao.xml
2.2.5. meinian_interface
【路径】
1：创建工程
2：导入坐标（继承父工程，依赖health_pojo）
【讲解】
1：创建meinian_interface，子工程，打包方式为jar，存放服务接口
2：pom.xml
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_interface
jar
com.atguigu
meinian_pojo
1.0-SNAPSHOT
2.2.6. meinian_service
【路径】
1：创建工程
2：导入坐标（继承父工程、依赖meinian_interface、meinian_dao）（war包）
3：log4j.properties
4：applicationContext-tx.xml（spring的声明式事务处理，配置DataSource数据源事务管理器）
5：applicationContext-service.xml（spring整合dubbo，服务提供者）
6：web.xml（spring的监听器，当web容器启动的时候，自动加载spring容器）
【讲解】
1：创建meinian_service，子工程，打包方式为war，作为服务单独部署，存放服务类
2：pom.xml
需要设置
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_service
war
com.atguigu
meinian_interface
1.0-SNAPSHOT
com.atguigu
meinian_dao
1.0-SNAPSHOT
org.apache.tomcat.maven
tomcat7-maven-plugin
81
/
3：log4j.properties
### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c:\\mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### set log levels - for more verbose logging change 'info' to 'debug' ###
log4j.rootLogger=debug, stdout
4：applicationContext-tx.xml
5：applicationContext-service.xml
6：web.xml
contextConfigLocation
classpath*:applicationContext*.xml
org.springframework.web.context.ContextLoaderListener
2.2.7. meinian_web
【路径】
1：创建工程
2：导入坐标（继承父工程、依赖meinian_interface）
3：log4j.properties
4：springmvc.xml（spring整合dubbo，服务消费者；springmvc的配置、上传组件）
5：web.xml（springmvc的核心控制器，当web容器启动的时候，自动加载springmvc.xml）
【讲解】
1：创建meinian_web，子工程，打包方式为war，单独部署，存放Controller
2：pom.xml
meinian_parent
com.atguigu
1.0-SNAPSHOT
4.0.0
meinian_web
war
com.atguigu
meinian_interface
1.0-SNAPSHOT
org.apache.tomcat.maven
tomcat7-maven-plugin
82
/
3：log4j.properties
### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c:\\mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
### set log levels - for more verbose logging change 'info' to 'debug' ###
log4j.rootLogger=info, stdout
4：springmvc.xml
WriteMapNullValue
WriteDateUseDateFormat
FastJsonHttpMessageConverter配置定义了 @ResponseBody 支持的返回类型， json对空键值的处理方式 和 统一的日期返回格式（格式：yyyy-MM-dd）
5：web.xml
CharacterEncodingFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
utf-8
forceEncoding
true
CharacterEncodingFilter
/*
springmvc
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:springmvc.xml
1
springmvc
*.do
这里，我们使用
2.2.8. 测试
拷贝zookeeper-3.4.5.tar.gz
我们可以不发布到linux上，放置到window上也是可以的。可以放置到D盘sortware上，避免出现中文。
解压
第1步：创建data 文件夹
第2步：修改conf下的zoo_simple.cfg文件，改名为zoo.cfg
第3步：配置zoo.cfg
第4步：启动Zookeeper后，然后启动 meinian_service和 meinian_web
运行程序报错
【小结】
0：项目结构
1：父工程meinian_parent
2：子工程meinian_common（工具类）
3：子工程meinian_pojo（实体类）
4：子工程meinian_dao（Dao类）
5：子工程meinian_interface（接口方法，用在dubbo数据调用）
6：子工程meinian_service（Service类）
7：子工程meinian_web（表现层）
8：测试
3. 第三章. Vue.JS
参考vue.js讲义
4. 第四章. ElementUI
【目标】
ElementUI介绍，及学习和使用方法
【路径】
1：ElementUI介绍
2：常用组件
（1）Container布局容器（用于页面布局）
（2）Dropdown下拉菜单（用于首页退出菜单）
（3）NavMenu导航菜单（用于左侧菜单）
（4）Tabel表格（用于列表展示）
（5）Pagination分页（用于列表分页展示）
（6）Message消息提示（用于保存、修改、删除的时候成功或失败提示）
（7）Tabs标签页（用于一个页面多个业务功能）
（8）Form表单（新增、修改时的表单，及表单验证）
【讲解】
4.1. ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：http://element-cn.eleme.io/#/zh-CN
美年旅游项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用，如下：
入门案例：
Button
尚硅谷
4.2. 常用组件
4.2.1. Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列
：顶栏容器
：侧边栏容器
：主要区域容器
：底栏容器
Title
标题
菜单
功能区域
底部
4.2.2. Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中。
- 方式一：hover激活事件
Title
下拉菜单
退出系统
修改密码
联系管理员
- 方式二：click点击事件
下拉菜单
退出系统
修改密码
联系管理员
添加：trigger=“click”
- 方式三：按钮下拉菜单
下拉菜单
退出系统
修改密码
联系管理员
添加：split-button trigger=“click”
4.2.3. NavMenu 导航菜单
为网站提供导航功能的菜单。
Title
导航一
选项1
选项2
选项3
导航二
选项1
选项2
选项3
4.2.4. Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Title
编辑
删除
其中：
handleDelete(row){
alert(row.date);
},
handleUpdate(row){
alert(row.date);
}
为ES6的语法
修改:
4.2.5. Pagination 分页
当数据量过多时，使用分页分解数据。
Title
编辑
删除
4.2.6. Message 消息提示
常用于主动操作后的反馈提示。
Title
消息
成功
警告
错误
4.2.7. Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
Title
基础的、简洁的标签页
用户管理
配置管理
角色管理
定时任务补偿
选项卡样式的标签页
用户管理
配置管理
角色管理
定时任务补偿
卡片化的标签页
用户管理
配置管理
角色管理
定时任务补偿
4.2.8. Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
Title
-
立即创建
作业：
删除的时候，用到
实现一个删除的确认
【小结】
1：ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
2：常用组件
（1）Container布局容器（用于页面布局）
（2）Dropdown下拉菜单（用于首页退出菜单）
（3）NavMenu导航菜单（用于左侧菜单）
（4）Tabel表格（用于列表展示）
（5）Pagination分页（用于列表分页展示）
（6）Message消息提示（用于保存、修改、删除的时候成功或失败提示）
（7）Tabs标签页（用于一个页面多个业务功能）
（8）Form表单（新增、修改时的表单，及表单验证）
【学习方法】
看官网，看案例，根据需求复制、粘贴、改，看效果。
5.第五章 IDEA中EnableAuto-Import如何取消
在idea中创建maven工程后会有pom.xml文件，但在每次修改完pom文件并保存的时候，经常会在idea的右下角提示“Maven projects need to be imported”，同时在该文字的下面一行有两个选项供选择：“Import Changes”和“Enable Auto-Import”。入下图所示：
但有时候如果手贱或者手抖，误操作了点击了“Enable Auto-Import”后怎么还原或者取消呢？下面就跟大家介绍一下取消Auto-Import的方法。
File->Settings->Maven->Importing->Import Maven projects automatically
截图如下所示：
立即创建
作业：
删除的时候，用到
[外链图片转存中…(img-YVcx4ZVL-1654574871896)]
实现一个删除的确认
[外链图片转存中…(img-aZjszDOK-1654574871897)]
【小结】
1：ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
2：常用组件
（1）Container布局容器（用于页面布局）
（2）Dropdown下拉菜单（用于首页退出菜单）
（3）NavMenu导航菜单（用于左侧菜单）
（4）Tabel表格（用于列表展示）
（5）Pagination分页（用于列表分页展示）
（6）Message消息提示（用于保存、修改、删除的时候成功或失败提示）
（7）Tabs标签页（用于一个页面多个业务功能）
（8）Form表单（新增、修改时的表单，及表单验证）
【学习方法】
看官网，看案例，根据需求复制、粘贴、改，看效果。
5.第五章 IDEA中EnableAuto-Import如何取消
在idea中创建maven工程后会有pom.xml文件，但在每次修改完pom文件并保存的时候，经常会在idea的右下角提示“Maven projects need to be imported”，同时在该文字的下面一行有两个选项供选择：“Import Changes”和“Enable Auto-Import”。入下图所示：
[外链图片转存中…(img-2M5gcWFO-1654574871897)]
但有时候如果手贱或者手抖，误操作了点击了“Enable Auto-Import”后怎么还原或者取消呢？下面就跟大家介绍一下取消Auto-Import的方法。
File->Settings->Maven->Importing->Import Maven projects automatically
截图如下所示：
