尚硅谷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(重点)

统一异常处理
  1. 创建异常
  2. 实现统一异常处理

3、特殊异常处理

@ExceptionHandler(ArithmeticException.class)

  @ResponseBody

  public R error(ArithmeticException e){

    e.printStackTrace();

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

  }

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第1张图片

4、自定义异常处理

(1)创建自定义异常

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第2张图片

@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)手动抛异常

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第3张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第4张图片

统一日志处理

1、日志级别

ERROR、WARN、INFO、DEBUG

2、切换级别

# 设置日志级别

  logging.level.root=DEBUG

3、Logback日志

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

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

前端介绍、工具使用

1、前端介绍

2、VS Code

(1)安装

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第5张图片

(2)安装插件

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第6张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第7张图片

(3)项目初始化

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第8张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第9张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第10张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第11张图片

(4)实例







    

    

    

    Document





    

Helllo!!!

   

(5)发布方式一

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第12张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第13张图片

(6)发布方式二

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第14张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第15张图片

*没有弹出浏览器

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第16张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第17张图片

ES6入门

1、是什么

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

2、基本语法

1)let声明变量





(2)const声明常量(只读变量)





(3)解构赋值





(4)模板字符串



(5)声明对象简写

  

(6)定义方法简写

7)对象拓展运算符



(8)箭头函数



(8)箭头函数

Vue入门

1、是什么

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

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

2、使用vue

1)导入依赖

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第18张图片

2)编写实例







    

    

    

    Document





    
       

{{message}}

   
       

  1. 抽取代码片段

1)步骤

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第19张图片

尚硅谷03:前端开发之ES | Vue_es6 Axios Node Npm_第20张图片

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": [

"",

"",

"",

"    ",

"    ",

"    ",

"    Document",

"",

"",

"    
", "        

{{message}}

", "   
", "    ", "    ", "", "",         ],         "description": "vue基础html片段"     } }

Vue语法
1、基本数据渲染和指令



    
       

{{message}}

       

{{message}}

   
        2、双向数据绑定    
       
       
{{search.info}}
       
   
        3、事件    
       
       
{{search.info}}
                   
        4、修饰符(了解)    
       
                               
   
        5、条件渲染    
       
  是否同意1 {{ok}}
       
同意
       
查看协议。。。。。。。
   
   
           
  是否同意2 {{ok}}
           
同意
            查看协议。。。。。。。
             6、列表渲染    
       
               
  • {{n}}
  •        
                                                                                                       
{{i+1}}{{user.id}}{{user.name}}{{user.age}}
   
       

Vue语法高级

1、组件

1)是什么

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

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

2)局部组件



    
                           
        (3)全局组件 *封装js文件 Vue.component('Navbar',{     template:'
  • 菜单1
  • 菜单2
  • 菜单3
' }) *导入js,使用组件    
                           
            2、Vue实例生命周期 (1)查看流程图 (2)实现实例    
       

{{message}}

       
   
       

3、路由

1)是什么

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

2)添加js

3)引入依赖

  

    

(4)实例



    
       

Hello App!

       

                                                首页             会员管理             讲师管理        

                           
           

  

你可能感兴趣的:(vue.js,javascript,前端)