关于前端，ES6，VUE

ECMAScript 6.0（简称 ES6）

是 JavaScript 语言的下一代标准
比较实用的几个点：

js中 if(变量)，这个变量只要满足：
不为0，null，undefined，false，都会被处理为true。只要变量有非0的值或是某个对象，数组，字符串，都会认为true

模板字符串(键盘上1的左边 ` )

<script>

let name = "kk" 
let age = 11 
let info = `My Name is ${name},I am ${age+1}` 
console.log(info) 
//My Name is kk,I am 12


//字符串中调用函数 
function f(){    return "kkkkk" } 
let string2 = `helllo,${f()}` 
console.log(string2);  
// helllo,kkkkk

</script>

拓展运算符（…）
用于取出参数对象所有可遍历属性然后拷贝到当前对象

<script>
// 1、拷贝对象 
let person1 = {name: "Amy", age: 15} 
let someone = { ...person1 } 
console.log(someone)  
//{name: "Amy", age: 15}
// 2、合并对象 
let age = {age: 15} 
let name = {name: "Amy"} 
let person2 = {...age, ...name} 
console.log(person2)  //{age: 15, name: "Amy"}
</script>

箭头函数，类似java的lamd表达式

<script>
//ES5
var f2 = function(a,b){
return a-b
}
console.log(f2(6,2)) 
//ES6
var f3 = (a,b) => {  
return a+b
}
console.log(f3(6,2)) 
</script>

Vue

开发中主要用到Vue的语法结构和Element ui来开发(https://element.eleme.cn)

Vue的基本结构
单向绑定 ：v-bind 简写 冒号（:）
双向绑定 ：v-model
点击事件 ：v-on:click简写 @click
if else
for循环
组件（全局组件需要导入）

<div id="app">  
  //单向绑定
  <input type="text" v-bind:value="searchMap.keyWord"> 
  //双向绑定
  <input type="text" v-model="searchMap.keyWord">
     
  // {{}} 插值表达式，绑定vue中的data数据   
  <h1>{{restult.name}}</h1>
  
  //点击事件  可以简写为 <button @click="search()">查询</button>

  <button v-on:click="search()">查询</button>

//if else
<input type="checkbox" v-model="ok"> 
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --> 
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1> 
<h1 v-else>no</h1>


<Navbar></Navbar> 


//for循环
<table border="1">
	<tr v-for="(item, index) in userList">  
	<td>{{index}}</td>
	<td>{{item.id}}</td>
	<td>{{item.username}}</td>
	<td>{{item.age}}</td>
    </tr> 
</table>

 </div> 


<script src="vue.min.js"></script> 
<script>
    // 创建一个vue对象    
	new Vue({        
	el: '#app',//绑定vue作用的范围        
	
	//定义页面中显示的模型数据    
	data: {    
	searchMap:{       
	keyWord: 'kkkk'    
	  },
	ok: false ,
    restult:{},
    userList: [
	{ id: 1, username: 'helen', age: 18 },
	{ id: 2, username: 'peter', age: 28 },
	{ id: 3, username: 'andy', age: 38 }    
	]	  
	}，
	methods:{    
	search(){        
	this.reult={
	name:'aaaa',
	age:18
     	}	
	  } 
	},    // 定义局部组件，这里可以定义多个局部组件    
	components: {        
	//组件的名字        
	'Navbar': {            
	//组件的内容
	template: '<ul><li>首页</li><li>简介</li></ul>'
     	}
    } 

	})
</script>

axios
基本结构

<script src="vue.min.js"></script> 
<script src="axios.min.js"></script>

<script>
 var app = new Vue({
	 el: '#app',
	 data: {
		 memberList: []
		 },
	 created() {
		 this.getList()
		 },
      methods: {
        getList(id) {    
		axios.get('url路径')
		.then(response => {
			console.log(response)
			this.memberList = response.data.data.items 
			})
        .catch(
			error => {
                console.log(error)
				     })
			     }
		     }
				})

</script>

Vue的模块化
类似java的类
注意点：注意export,将方法写到这个里面才可以被其他模块调用

创建 模块/testApi.js

export default {
getList() {
console.log('获取数据列表') },
save() {
console.log('保存数据') }
}

引入并调用

import test from "./testApi.js"
test.getList()
test.save()

vue-admin-template
vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板
项目结构

build // 构建脚本
config // 全局配置
node_modules // 项目依赖模块
src //项目源代码
   api // 各种接口
   assets // 图片等资源
   components // 各种公共组件，非公共组件在各自view下维护
   icons //svg icon
   router // 路由表
   store // 存储
   styles // 各种样式
   utils // 公共工具，非公共工具，在各自view下维护
   views // 各种layout
   App.vue //***项目顶层组件***
   main.js //***项目入口文件***
   permission.js //认证入口

static // 静态资源
package.jspon // 项目信息和依赖配置