尚硅谷03：前端开发之ES | Vue

内容介绍

统一异常处理

统一日志处理

前端介绍、工具使用

ES6入门

Vue入门

Vue语法

Vue语法高级

内容介绍

1、统一异常处理

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

3、前端介绍

4、ES6

5、VUE入门、基本语法

6、VUE高级语法

7、axios（重点）

8、node

9、npm（重点）

统一异常处理

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

3、特殊异常处理

@ExceptionHandler(ArithmeticException.class)

  @ResponseBody

  public R error(ArithmeticException e){

    e.printStackTrace();

    return R.error().message("特殊异常处理");

  }

4、自定义异常处理

（1）创建自定义异常

@Data

@AllArgsConstructor

@NoArgsConstructor

  public class YyghException extends RuntimeException {

    @ApiModelProperty(value = "状态码")

    private Integer code;

    @ApiModelProperty(value = "异常信息")

    private String msg;

  }

（2）抓取异常

@ExceptionHandler(YyghException.class)

  @ResponseBody

  public 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 = 100

            let b = 200

        }

        console.log(a)

        //console.log(b)

        //var可以重复声明变量

        //let不可以重复声明变量

        var c = 300

        var c = 400

        console.log(c)

        let d = 500

        // let d = 600

        console.log(d)

        //var会提升变量声明

        //let不会提升变量声明

        console.log(e)

        var e  = 700

        console.log(f)

        let f  = 800

       

    </script>



（2）const声明常量（只读变量）

<script>

        //常量定义后不可修改

        //定义常量必须赋值

        const PI = 3.14

        //PI = 3

        console.log(PI)

        const a

        a= 100

        console.log(a)

    </script>



（3）解构赋值

<script>

        var a=1,b=2,c=3

        console.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.name

        let age1 = user.age

        console.log(name1,age1)

         //解析对象赋值

        let {name,age}= user

        console.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 = 33

        let 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 = user

        console.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 => a

        console.log(f2(200))

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

        console.log(f3(200,100))

        //回调函数使用

        // $.get('url',data=>{



        // })       

        </script><script>

        let user = {

            name:'zhang3',

            age:33,

        }

        let user1 = user

        console.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 => a

        console.log(f2(200))

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

        console.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').innerText

                console.log("内存模板="+this.message)

                console.log("页面元素="+text)

            },

            mounted () {//第4个钩子方法，vue属性已渲染页面

                console.log("mounted!!!!!!!!!!!!!")

                let text = document.getElementById('h1').innerText

                console.log("内存模板="+this.message)

                console.log("页面元素="+text)

            },

            //更新时两个钩子方法

            beforeUpdate () {

                console.log("beforeUpdate!!!!!!!!!!!!!")

                let text = document.getElementById('h1').innerText

                console.log("内存模板="+this.message)

                console.log("页面元素="+text)

            },

            updated () {

                console.log("updated!!!!!!!!!!!!!")

                let text = document.getElementById('h1').innerText

                console.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>