教育在线系统开发学习（三 四 五）

前端部分

es6语法

<script>
{
   var a =10   //全局可以使用
   let b =20   //有作用范围，只能在代码 块使用
  }
console.log(a)  
console.log(b)     //只能输出a

</script>

(1)let定义有作用范围，定义相同的变量只能定义一次

(2)const （1)常量定义不能改变，(2)一旦定义需要初始化
const pi = 3.242

(3)let user = {“name”:“lucy”,“age”:20}
let{name,age} = user

(4)声明对象
const p ={name，age}

(5)复制
let person2 = {…person1}

(6)箭头函数
var f2 = m => m
console.log(f2(8))

var f3 = (a,b) => a+b

vue 构建页面前端框架

第一步：创建html页面，使用快捷键！快速生成html代码
第二步：引入vue的js文件，类似于jquery
第三步：在html页面创建div标签，div添加id属性
第四步：编写vue代码

   <script>        
   new Vue({            
   el : "#app",            
   data : {                
   message : 'hello vue!'           
    }       
     })    
    </script>

v-bind 单项数据绑定，一般用在标签属性里面，获取值

        <h1 v-bind:title="message">           
         {{content}}       
          </h1>

v-modle 双向绑定

<div id="app">        
     <input type='text' v-bind:value="searchMap.keyWord"/>    
     <input type='text' v-model="searchMap.keyWord"/>
        <p>{{searchMap.keyWord}}</p>
    </div>

v-on 进行数件处理
v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<button v-on:click='search()'>查询</button>
<button @click='search'>查询</button> //一样效果 

v-if 条件指令

<div id="app">        
     <input type="checkbox" v-model="ok"/>是否同意        
     <h1 v-if="ok">五月天</h1>       
      <h1 v-else>算了吧</h1>
   </div>

v-for

  <ul>            
  <li v-for="n in 10">{{n}}</li>        
  </ul>

组件可以生成标签
如果想要全局使用，生成js文件，进行引用
p 段落标签
ul 无序列表 li 列表项
ol 有序列表 li列表项
table 表格 tr 行 td单元格

axios

是独立的项目，使用axios经常和vue一起使用实现ajax操作，请求后端的接口，显示数据

new Vue({           
    el: '#app',            
    data: {//在data定义变量和初始值                
             userList:[]           
              },            
    created() {  //页面渲染之前执行，调用方法                       
               this.getUserList()
            },           
    methods:{//编写具体的方法                
         getUserList(){                    
           axios.get("data.json")  //请求接口路径                         
             .then(response =>{                            
                   this.userList = response.data.data.items  //把数据赋值给空的数组                            
                   console.log(this.userList)
})  //执行成功执行then方法                        
             .catch(error =>{
                       }) //执行失败执行catch方法                }
            }        })
         

element-ui

node.js

是Javascript的运行环境，用于执行javascript代码环境，不需要浏览器
模拟浏览器效果

在当前js的文件路径下执行 node 01.js
在vscode中打开终端，直接运行即可

npm

是node.js的包的管理工具
maven构建项目，管理jar依赖，联网下载依赖
npm类似于maven，用在前端，管理前端js依赖，联网下载js依赖

npm init 项目初始化，类似于pom文件
npm install +依赖名称 下载依赖

babel转码器

把es6代码转换成es5执行

安装 npm install – global babel -cli
创建js文件，编写es6代码
创建Babel配置文件
安装es2015转码器 npm install --save-dev babel-preset-es2015
使用命令进行转码 babel es6/01.js dist/001.js

webpack

是一个前端静态资源加载/打包工具

前端框架用vue-admin-template

根据配置文件下载依赖，使用npm install
启动项目 npm run dev

框架build目录，放的是脚本文件。
config目录，放配置文件
src目录：

• api 定义调用方法 ；
• assets 静态资源；
• components 存放额外的插件；
• icons 存放图标；
• router 路由；
• views具体的页面

前端中把系统登陆功能改造本地
进行登陆调用两个方法，login登陆操作方法返回token值，info登陆之和获得用户信息的方法返回roles name avatar。所以，创建接口两个方法实现登陆。在项目里开发接口。然后修改api文件夹login.js修改本地接口

跨域解决方式

在后端接口controller添加注释

讲师管理

（1）添加路由，router里的index.js
（2）点击某个路由，显示路由对应页面内容，在views中创建页面。
（3)在api文件夹创建tercher.js文件，定义接口地址和参数（后端的接口）
（4)在创建的vue页面中引入js文件，调用方法实现功能
（5)把请求接口获取数据在页面进行显示，使用element-ui实现

功能

分页

<!-- 分页 -->    
<el-pagination      
:current-page="page"     
 :page-size="limit"      
 :total="total"      
 style="padding: 30px 0; text-align: center;"     
  layout="total, prev, pager, next, jumper"      
  @current-change="getList"    />

添加条件表单组件
添加清空功能：方法 表单输入项数据清空，查询所有教师信息
删除：（1）在每条记录后面添加删除按钮
（2)在按钮绑定事件
（3)在绑定事件的方法传递删除讲师的id值

添加讲师：（1)api定义接口地址
（2)在页面中进行调用
（3)跳转路由 this.$router.push({path:‘teacher/table’})
修改讲师：点击修改按钮进入表单页面，进行数据回显（根据讲师id查询数据显示）
通过路由跳转进入数据回显页面，在路由index页面添加路由

因为添加和修改都使用save页面，区别添加还是修改，只有修改得时候查询数据回显，判断路径里面是否有讲师id，有id是修改，无id，是添加