任务一
    Vue基础
    Vue简介
    前端JavaScript框架
    特点: 渐进式框架,实现即插即用
    适合前后端分离,国人开发,中文文档
    尤雨溪: https://www.zhihu.com/people/evanyou
    Vue.js的使用
    引入Vue
    本地引入
    远程
    定义div 指定id
    div就是vue控制的区域
    创建vue实例
    {{}} 差值表达式
    el: 挂载点
    data: 数据对象
    渲染数据
    Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML.
    {{}} 差值表达式
    Vue常用指令
    v-text 指令
    获取data数据, 设置标签的内容.
    v-html 指令
    设置元素的 innerHTML (可以向元素中写入新的标签)
    v-on 指令
    为元素绑定事件
    v-show指令
    根据真假值,切换元素的显示状态
    v-if 指令
    根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )
    v-bind 指令
    设置元素的属性 （比如:src,title,class）
    v-for 指令
    根据数据生成列表结构
    v-on 指令补充
    传递自定义参数 : 函数调用传参
    事件修饰符: 对事件触发的方式进行限制
    MVVM模式
    Model: 负责数据存储
    View: 负责页面展示
    View Model: 负责业务逻辑处理（比如Ajax请求等），
    对数据进行加工后交给视图展示


    v-model 指令实现双向数据绑定
    单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，
    View就会自动更新。
    双向绑定: 用户更新了View，Model的数据也自动被更新了，
    这种情况就是双向绑定。
    Vue进阶
    axios
    作用: axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.
    先导入后使用
    computed 计算属性
    作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.
    filter 过滤器
    作用: 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示
    watch 侦听器
    作用: 当你想要监听某一个数据,然后执行一些操作时可以使用侦听器
    Component 组件化开发
    组件（Component）是自定义封装的功能
    在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。 我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
    Vue生命周期
    每个Vue实例在被创建之前都要经过一系列的初始化过程,
    这个过程就是vue的生命周期


    Vue Router 路由
    在Web开发中，路由是指根据URL分配到对应的处理程序
    单页应用: ，就是只有一张Web页面的应用,Vue中使用路由完成单页面应用的开发
    使用路由步骤
    1.定义路由所需的组件
    2.定义路由 每个路由都有两部分 path和component
    3.创建router路由器实例,对路由对象routes进行管理.
    4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能
    任务二
    Vue-cli脚手架
    什么是Vue-cli
    基于Vue的应用开发提供的一个标准的脚手架工具
    通过简单的命令就可以完成 “零配置”的项目环境搭建
    安装vue-cli
    安装Node.js
    JavaScript 运行运行环境
    安装NPM
    包管理和分发的工具
    设置包管理路径
    放在C盘不太合适
    创建目录,专门存放这些依赖包
    配置PATH环境变量
    安装cnpm
    安装3版本以上的vue-cli
    npm install -g @vue/cli
    CLI构建项目
    桌面创建一个空的文件夹
    以管理员身份运行cmd , 进入到vueTest文件夹
    执行命令
    vue create my-project

    文件名 不支持驼峰（含大写字母）使用短横线方式
    按步骤完成配置
    将项目导入 VSCode
    CLI项目结构介绍


    Vue脚手架自定义配置
    package.js
    定义了这个项目所需要的各种模块，以及项目的配置信息等数据
    vue.config.js
    将Vue脚手架相关的配置单独定义到 vue.config.js 配置文件中
    Vue 组件化开发
    介绍
    组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件.
    组件分类
    页面级别的组件
    业务上可复用的基础组件
    组件的组成部分
    template : 组件的HTML部分
    script: 组件的JS脚本 (使用ES6语法编写)
    style: 组件的CSS样式
    项目运行流程
    main.js
    项目运行 会加载入口文件 main.js
    App.vue
    vue项目的主组件，是页面入口文件 ,所有页面都是在App.vue下进行切换的
    router 路由
    进行页面跳转和视图渲染
    Home.vue组件
    首页
    内部引入了 HelloWorld.vue 组件
    Element-UI
    Element-UI介绍
    element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库
    Element-UI安装
    创建项目,在终端打开
    执行命令
    npm i element-ui -S
    main.js 中引入
    //导入组件库
    import ElementUI from ‘element-ui’

    //导入组件相关样式
    import ‘element-ui/lib/theme-chalk/index.css’

    //配置Vue插件 将El安装到Vue上
    Vue.use(ElementUI);
    Vue-CLI工程改造
    删除项目构建时生成的一些页面
    安装axios
    执行命令: npm i axios
    main.js 引入
    //引入axios
    import axios from ‘axios’

    //Vue对象使用axios
    Vue.prototype.axios = axios;
    Element-UI 案例
    用户登录界面制作
    Dialog对话框组件
    创建Login.vue组件
    配置路由
    完成登录功能
    Postman搭建mock server
    登录跳转
    首页布局页面制作
    创建 index.vue
    配置路由
    布局容器
    Container 布局容器 ,是用于布局的容器组件，
    方便快速搭建页面的基本结构
    导航菜单的路由设置
    编写 Course.vue
    配置路由
    Table表格组件
    我们通过table组件来实现一个课程页面展示的功能，通过查看Element-UI库，我们需要Table 表 格
    课程内容展示
    请求后台,获取课程数据
    跨域问题
    跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。
    解决跨域问题
    后台解决,设置response响应头数据即可
    引入了解决跨域的依赖
    条件查询
    ElementUI输入框组件
    Layout 布局
    完成根据课程名查询
    任务三
    接口联调: 课程信息管理
    获取课程列表
    条件查询课程信息
    跳转到添加课程
    修改课程状态
    跳转课程营销或内容管理
    新建&修改课程
    接口联调: 课程内容管理
    树形控件测试
    显示当前课程的名称
    加载章节与课时信息
    回显信息
    添加与修改章节
    章节状态回显 & 章节状态修改
    任务四
    后台项目部署
    配置虚拟机环境
    JDK
    Tomcat

    MySql
    项目打包 发布
    clean 清除target文件夹
    package 打包 ,跳过测试
    前台项目部署
    修改配置文件


    前端项目打包
    修改 vue.config.js 配置文件
    执行 npm run build 命令
    在项目下会生成一个 dist 目录
    在tomcat的webapps目录下,创建一个edu-boss文件夹,
    将dist目录中的文件拷贝到里面
    启动本地tomcat ,访问前端项目 路径为
    前端项目发布
    将edu-boos项目压缩,上传到一个新的tomcat服务器中
    修改tomcat2的server.xml 配置文件,修改3个端口,避免与tomcat1冲突
    运行前端项目