尚硅谷03：前端开发之ES | Vue_es6 Axios Node Npm-编程知识

内容介绍

统一异常处理

统一日志处理

前端介绍、工具使用

ES6入门

Vue入门

Vue语法

Vue语法高级

内容介绍

1、统一异常处理

2、统一日志处理（了解）

3、前端介绍

4、ES6

5、VUE入门、基本语法

6、VUE高级语法

7、axios（重点）

8、node

9、npm（重点）

统一异常处理

创建异常
实现统一异常处理

3、特殊异常处理

@ExceptionHandler(ArithmeticException.class)@ResponseBodypublic R error(ArithmeticException e){e.printStackTrace();return R.error().message("特殊异常处理");}

4、自定义异常处理

（1）创建自定义异常

@Data@AllArgsConstructor@NoArgsConstructorpublic class YyghException extends RuntimeException {@ApiModelProperty(value = "状态码")private Integer code;@ApiModelProperty(value = "异常信息")private String msg;}

（2）抓取异常

@ExceptionHandler(YyghException.class)@ResponseBodypublic R error(YyghException e){e.printStackTrace();return R.error().code(e.getCode()).message(e.getMsg());}

（3）手动抛异常

统一日志处理

1、日志级别

ERROR、WARN、INFO、DEBUG

2、切换级别

# 设置日志级别
logging.level.root=DEBUG

3、Logback日志

spring boot内部使用Logback作为日志实现的框架。

Logback和log4j非常相似，如果你对log4j很熟悉，那对logback很快就会得心应手。

前端介绍、工具使用

1、前端介绍

2、VS Code

（1）安装

（2）安装插件

（3）项目初始化

（4）实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><h1>Helllo!!!</h1></body></html>

（5）发布方式一

（6）发布方式二

*没有弹出浏览器

ES6入门

1、是什么

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准

2、基本语法

1）let声明变量<script>//var不区分作用域//let区分作用域{var a = 100let b = 200}console.log(a)//console.log(b)//var可以重复声明变量//let不可以重复声明变量var c = 300var c = 400console.log(c)let d = 500// let d = 600console.log(d)//var会提升变量声明//let不会提升变量声明console.log(e)var e  = 700console.log(f)let f  = 800</script>（2）const声明常量（只读变量）<script>//常量定义后不可修改//定义常量必须赋值const PI = 3.14//PI = 3console.log(PI)const aa= 100console.log(a)</script>（3）解构赋值<script>var a=1,b=2,c=3console.log(a,b,c)//解析数组赋值let [x,y,z] = [1,2,3]console.log(x,y,z)let user = {name:'zhang3',age:33}let name1 = user.namelet age1 = user.ageconsole.log(name1,age1)//解析对象赋值let {name,age}= userconsole.log(name,age)</script>（4）模板字符串<script>//拼接字符串let str = 'hello'let className = 'java230308'console.log(str + ' ' + className + ' !')console.log(`${str} ${className} !`)//拼接长字符串let head =`<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head>`console.log(head)function getName(){return 'java230308'}//调用函数console.log(`${str} ${getName()} !`)</script>（5）声明对象简写<script>let name = 'zhang3'let age = 33let user = {name:name,age:age}console.log(user)let user1 = {name,age}console.log(user1)</script>（6）定义方法简写<script>//定义函数// function f1(){// }// let f2 = function(){// }// f1()//定义方法let user = {name:'zhang3',age:33,// sayHi:function(){//     console.log("hello zhang3")// }sayHi(){console.log("hello zhang3")}}user.sayHi()</script>

（7）对象拓展运算符

<script>let user = {name:'zhang3',age:33,}let user1 = userconsole.log(user1)let user2 = {...user}console.log(user2)let name = {name:'li4'}let age ={age:44}let user3 = {...name,...age}console.log(user3)let user4 = {...user2,...user3}console.log(user4)</script>（8）箭头函数<script>let f1 = function (a){return a}console.log(f1(100))let f2 = a => aconsole.log(f2(200))let f3 = (a,b)=> a+bconsole.log(f3(200,100))//回调函数使用// $.get('url',data=>{// })       </script><script>let user = {name:'zhang3',age:33,}let user1 = userconsole.log(user1)let user2 = {...user}console.log(user2)let name = {name:'li4'}let age ={age:44}let user3 = {...name,...age}console.log(user3)let user4 = {...user2,...user3}console.log(user4)</script>（8）箭头函数<script>let f1 = function (a){return a}console.log(f1(100))let f2 = a => aconsole.log(f2(200))let f3 = (a,b)=> a+bconsole.log(f3(200,100))//回调函数使用// $.get('url',data=>{// })       </script>

Vue入门

1、是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

官方网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js

2、使用vue

（1）导入依赖

（2）编写实例

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>{{message}}</h1>

</div>

let app = new Vue({

el:'#app',

data:{

message:'Hello Vue'

}

})

</script>

</body>

</html>

抽取代码片段

（1）步骤

（2）代码片段

{// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.// Placeholders with the same ids are connected.// Example:"vuehtml": {"scope": "html","prefix": "vuehtml","body": ["<!DOCTYPE html>","<html lang=\"en\">","<head>","    <meta charset=\"UTF-8\">","    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","    <title>Document</title>","</head>","<body>","    <div id=\"app\">","        <h1>{{message}}</h1>","    </div>","    <script src=\"vue.min.js\"></script>","    <script>","        let app = new Vue({","            el:'#app',","            data:{","                message:'Hello Vue' ","            }","        })","    </script>","</body>","</html>",],"description": "vue基础html片段"}}

Vue语法

1、基本数据渲染和指令<body><div id="app"><h1 v-bind:title="title">{{message}}</h1><h1 :title="title">{{message}}</h1></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{message:'Hello Vue',title:'标题'}})</script></body>2、双向数据绑定<body><div id="app"><div> <input type="text" v-bind:value="search.info"> </div><div>{{search.info}}</div><div> <input type="text" v-model="search.info"> </div></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{search:{info:'尚硅谷'}}})</script></body>3、事件<body><div id="app"><div> <input type="text" v-model="search.info"> </div><div>{{search.info}}</div><button v-on:click="searchInfo()">搜索</button><button @click="searchInfo()">搜索</button></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{search:{info:'尚硅谷'}},methods: {searchInfo(){console.log("searchInfo!!!!!!!!!!");}}})</script></body>4、修饰符（了解）<body><div id="app"><form action="" v-on:submit.prevent ="dosubmit()"><input type="text" v-model="user.name"><button type="submit">提交信息</button></form></div><script src="vue.min.js"></script><script>let app = new Vue({el: '#app',data: {user:{}},methods: {dosubmit(){console.log("提交信息!!!!!!!!!!!")}}})</script></body>5、条件渲染<body><div id="app"><div>  <input type="checkbox" v-model="ok"> 是否同意1 {{ok}}</div><div v-if="ok" >同意</div><div v-else >查看协议。。。。。。。</div></div><div id="app2"><div>  <input type="checkbox" v-model="ok"> 是否同意2 {{ok}}</div><div v-show="ok" >同意</div><div  v-show="!ok" >查看协议。。。。。。。</div></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{ok:false}})let app2 = new Vue({el:'#app2',data:{ok:false}})</script></body>6、列表渲染<body><div id="app"><ul><li v-for="n in nums">{{n}}</li></ul><table><tr v-for="(user,i) in userList"><td>{{i+1}}</td><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.age}}</td></tr></table></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{nums:[1,2,3,4,5],userList:[{id:1,name:'zhang3',age:33},{id:2,name:'li4',age:44},{id:3,name:'wang5',age:55}]}})</script></body>

Vue语法高级

1、组件

（1）是什么

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

（2）局部组件

<body><div id="app"><Navbar></Navbar><Navbar></Navbar><Navbar></Navbar></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{},components: {'Navbar':{template:'<ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul>'}}})</script></body>（3）全局组件*封装js文件Vue.component('Navbar',{template:'<ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul>'})*导入js，使用组件<body><div id="app"><Navbar></Navbar><Navbar></Navbar><Navbar></Navbar></div><script src="vue.min.js"></script><script src="Navbar.js"></script><script>let app = new Vue({el:'#app',data:{},components: {}})</script></body>2、Vue实例生命周期（1）查看流程图（2）实现实例<body><div id="app"><div> <h1 id="h1">{{message}}</h1> </div><div> <button v-on:click="updateInfo()">更新</button> </div></div><script src="vue.min.js"></script><script>let app = new Vue({el:'#app',data:{message:'床前明月光'},methods: {showInfo(){console.log("showInfo!!!!!!!!!!!!!")},updateInfo(){console.log("updateInfo!!!!!!!!!!!!!")this.message = '疑是地上霜'}},//查看初始化时4个钩子方法beforeCreate () {//第1个钩子方法，vue属性和方法均未初始化console.log("beforeCreate!!!!!!!!!!!!!")console.log("this.message="+this.message)//this.showInfo()},created () {//第2个钩子方法，vue属性和方法均已初始化console.log("created!!!!!!!!!!!!!")console.log("this.message="+this.message)this.showInfo()},beforeMount () {//第3个钩子方法，vue属性还未渲染页面console.log("beforeMount!!!!!!!!!!!!!")let text = document.getElementById('h1').innerTextconsole.log("内存模板="+this.message)console.log("页面元素="+text)},mounted () {//第4个钩子方法，vue属性已渲染页面console.log("mounted!!!!!!!!!!!!!")let text = document.getElementById('h1').innerTextconsole.log("内存模板="+this.message)console.log("页面元素="+text)},//更新时两个钩子方法beforeUpdate () {console.log("beforeUpdate!!!!!!!!!!!!!")let text = document.getElementById('h1').innerTextconsole.log("内存模板="+this.message)console.log("页面元素="+text)},updated () {console.log("updated!!!!!!!!!!!!!")let text = document.getElementById('h1').innerTextconsole.log("内存模板="+this.message)console.log("页面元素="+text)}})</script></body>

3、路由

（1）是什么

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

（2）添加js库

（3）引入依赖

  <script src="vue.min.js"></script><script src="vue-router.min.js"></script>

(4)实例

<body><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/">首页</router-link><router-link to="/student">会员管理</router-link><router-link to="/teacher">讲师管理</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div><script src="vue.min.js"></script><script src="vue-router.min.js"></script><script>// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Welcome = { template: '<div>欢迎</div>' }const Student = { template: '<div>student list</div>' }const Teacher = { template: '<div>teacher list</div>' }// 2. 定义路由// 每个路由应该映射一个组件。const routes = [{ path: '/', redirect: '/welcome' }, //设置默认指向的路径{ path: '/welcome', component: Welcome },{ path: '/student', component: Student },{ path: '/teacher', component: Teacher }]// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({routes// （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 从而让整个应用都有路由功能const app = new Vue({el: '#app',router})// 现在，应用已经启动了！</script>