part3 统一日志处理、前端开发工具、ES6、Vue、Axios、ElementUI、Nodejs、NPM包管理器、Babel、模块化、Webpack -谷粒学院

最新推荐文章于 2022-12-04 14:55:35 发布

小谋

最新推荐文章于 2022-12-04 14:55:35 发布

阅读量3k

点赞数

分类专栏：谷粒学院文章标签： elementui

本文链接：https://blog.csdn.net/Jianyuemou/article/details/120104394

版权

谷粒学院专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一统一日志处理

1 日志

1）配置日志级别

日志级别分为：OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL
默认情况下，spring boot从控制台打印出来的日志级别只有INFO及以上级别，可以配置日志级别

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

这种方式只能将日志打印在控制台上

2 Logback日志

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

1）、配置logback日志

# 设置日志级别
#logging.level.root=WARN
# mybatis日志
#mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

安装idea彩色日志插件：grep-console，默认就有不需要额外装

resources 中创建 logback-spring.xml，名字固定的，不建议改

<?xml version="1.0" encoding="UTF-8"?>
<configuration scan="true" scanPeriod="10 seconds">
    <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL，如果设
    置为WARN，则低于WARN的信息都不会输出 -->
    <!-- scan:当此属性设置为true时，配置文件如果发生改变，将会被重新加载，默认值
    为true -->
    <!-- scanPeriod:设置监测配置文件是否有修改的时间间隔，如果没有给出时间单位，默认
    单位是毫秒。当scan为true时，此属性生效。默认的时间间隔为1分钟。 -->
    <!-- debug:当此属性设置为true时，将打印出logback内部日志信息，实时查
    看logback运行状态。默认值为false。 -->
    <contextName>logback</contextName>
    <!-- name的值是变量的名称，value的值时变量定义的值。通过定义的值会被插入
    到logger上下文中。定义变量后，可以使“${}”来使用变量。 -->
    <!--日志输出在文件夹的哪个位置-->
    <property name="log.path" value="D:\JavaStudy\gulixueyuan\logback"/>

    <!-- 彩色日志 -->
    <!-- 配置格式变量：CONSOLE_LOG_PATTERN 彩色日志格式 -->
    <!-- magenta:洋红 -->
    <!-- boldMagenta:粗红-->
    <!-- cyan:青色 -->
    <!-- white:白色 -->
    <!-- magenta:洋红 -->
    <property name="CONSOLE_LOG_PATTERN"
              value="%yellow(%date{yyyy-MM-dd HH:mm:ss}) |%highlight(%-5level)
|%blue(%thread) |%blue(%file:%line) |%green(%logger) |%cyan(%msg%n)"/>
    <!--输出到控制台-->
    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
        <!--此日志appender是为开发使用，只配置最底级别，控制台输出的日志级别是大于或
        等于此级别的日志信息-->
        <!-- 例如：如果此处配置了INFO级别，则后面其他位置即使配置了DEBUG级别的日
        志，也不会被输出 -->
        <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
            <level>INFO</level>
        </filter>
        <encoder>
            <Pattern>${CONSOLE_LOG_PATTERN}</Pattern>
            <!-- 设置字符集 -->
            <charset>UTF-8</charset>
        </encoder>
    </appender>
    <!--输出到文件-->
    <!-- 时间滚动输出 level为 INFO 日志 -->
    <appender name="INFO_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_info.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset>
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <!-- 每天日志归档路径以及格式 -->
            <fileNamePattern>${log.path}/info/log-info-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录info级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>INFO</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!-- 时间滚动输出 level为 WARN 日志 -->
    <appender name="WARN_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_warn.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset> <!-- 此处设置字符集 -->
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${log.path}/warn/log-warn-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录warn级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>warn</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!-- 时间滚动输出 level为 ERROR 日志 -->
    <appender name="ERROR_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <!-- 正在记录的日志文件的路径及文件名 -->
        <file>${log.path}/log_error.log</file>
        <!--日志文件输出格式-->
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level
                %logger{50} - %msg%n
            </pattern>
            <charset>UTF-8</charset> <!-- 此处设置字符集 -->
        </encoder>
        <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
        <rollingPolicy
                class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${log.path}/error/log-error-%d{yyyy-MM-
                dd}.%i.log
            </fileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>100MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
            <!--日志文件保留天数-->
            <maxHistory>15</maxHistory>
        </rollingPolicy>
        <!-- 此日志文件只记录ERROR级别的 -->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>ERROR</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <!--
    <logger>用来设置某一个包或者具体的某一个类的日志打印级别、以及指
    定<appender>。
    <logger>仅有一个name属性，
    一个可选的level和一个可选的addtivity属性。
    name:用来指定受此logger约束的某一个包或者具体的某一个类。
    level:用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR, ALL
    和 OFF，
    如果未设置此属性，那么当前logger将会继承上级的级别。
    -->
    <!--
    使用mybatis的时候，sql语句是debug下才会打印，而这里我们只配置了info，所以想
    要查看sql语句的话，有以下两种操作：
        第一种把<root level="INFO">改成<root level="DEBUG">这样就会打印sql，不过
            这样日志那边会出现很多其他消息
        第二种就是单独给mapper下目录配置DEBUG模式，代码如下，这样配置sql语句会打
            印，其他还是正常DEBUG级别：
-->

    <!--开发环境:打印控制台-->
    <springProfile name="dev">
        <!--可以输出项目中的debug日志，包括mybatis的sql日志-->
        <logger name="com.guli" level="INFO"/>
        <!--
        root节点是必选节点，用来指定最基础的日志输出级别，只有一个level属性
        level:用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR,
        ALL 和 OFF，默认是DEBUG
        可以包含零个或多个appender元素。
        -->
        <root level="INFO">
            <appender-ref ref="CONSOLE"/>
            <appender-ref ref="INFO_FILE"/>
            <appender-ref ref="WARN_FILE"/>
            <appender-ref ref="ERROR_FILE"/>
        </root>
    </springProfile>
    <!--生产环境:输出到文件-->
    <springProfile name="pro">
        <root level="INFO">
            <appender-ref ref="CONSOLE"/>
            <appender-ref ref="DEBUG_FILE"/>
            <appender-ref ref="INFO_FILE"/>
            <appender-ref ref="ERROR_FILE"/>
            <appender-ref ref="WARN_FILE"/>
        </root>
    </springProfile>
</configuration>

2）、将错误日志输出到文件

GlobalExceptionHandler.java 中

类上添加注解
在这里插入图片描述
异常输出语句

二、前端开发和前端开发工具

PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）

下载和安装VS Code
下载地址：

https://code.visualstudio.com/

三、ES6入门

1 基本语法

let声明变量
创建 let.html

<script>
{
//js
var a=10;
//es6
let b=20;
}
</script>

<script>
{
//var可以声明多次
//let 只能声明一次
var m=1;
var m=2;
let n=3;
let n=4;
console.log(m);
console.log(n);
}
</script>

const声明常量（只读变量）

<script>
//const 声明后不允许改变
const PI="3.1415"
PI=3
</script>

<script>
    //const 一但声明必须初始化，否则会报错
    const achang;
</script>

解构赋值
创建解构赋值.html

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

<script>
//数组解构
//传统
let a=1,b=2,c=3
console.log(a,b,c)
//es6
let [x,y,z]=[1,2,3]
console.log(x,y,z)
</script>

<script>
let user={name:"jym",age:18}
//传统
let name1=user.name
let age1=user.age
//es6
let {name,age}=user
console.log(name,age);
</script>

模板字符串
创建模板字符串.html

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

以下操作，都是使用``反引号`完成
多行字符串

<script>
let str=`Hey,
can you tell me?`
console.log(str);
//Hey,
//can you tell me?
</script>

字符串插入变量和表达式

<script>
let name = 'jym'
let age=18
let info = `my name is ${name},i am ${age+1} years old `
console.log(info);
</script>

字符串中调用函数

<script>
function f(){
return 'have fun !'
}
let str=` the game start ,${f()} `
console.log(str);
</script>

声明对象简写

<script>
const age=12
const name='jym'

//传统
const person1 ={age:age,name:name}
console.log(person1)
//es6
const person2 ={age,name}
console.log(person2);
</script>

定义方法简写

<script>
/传统
    const person1 = {
        sayHi:function(){
            console.log("hi");
        }
    }
    person1.sayHi();//hi
//es6
const person2={
 sayHi(){
 console.log("hi")}
}
</script>

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

<script>
//拷贝对象
let person1={name;'jym',age:17}
let someone={...person1}
console.log(someone);//{name:'achang',age:17}
</script>

合并对象

<script>
let age={age:15}
let name=(name;'jym')
let person={...age...name}
console.log(person);//{age:15,name:'achang'}
</script>

箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

//传统
var f1=function(a){
return a 
}
console.log(f1(1))
//es6
var f2=a=>a
console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3=(a,b)=>{
let result=a+b
return result
}
//简写
var f4=(a,b)=>a+b

四 Vue

1 Vue.js 是什么

Vue是一套用于构建用户界面的渐进式框架
Vue的核心库只关注视图层，不仅易于上手，还便于第三方库或者既有项目整合，另一方面，当与现代化的工具以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提高驱动

2 初始化Vue.js

创建demo.html

<div id="app">
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue(
{
el:‘#app’,
data:{
message:'Hello Vue!'
}
}
)
</script>

3 创建代码片段

4 基本语法

基本数据渲染和指令
v-bind 特性被称为指令，指令带有前缀v-
除了使用插值表达式{{}}进行数据渲染，也可以使用v-bind指令简写为冒号（:）

data:{
content:'我是标题'
message:'页面加载于'
}

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

双向数据绑定
双向数据绑定和单向数据绑定：使用v-model进行双向数据绑定

data:{
searchMap:{
keyword:"尚硅谷"}
}

<input type= "text“ v-bind:value="searchMap.keyword”>
<input type="test" v-model="searchMap.keyword">

事件
需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息

data:{
searchMap:{
keyword:"尚硅谷"}
//查询结果
result:{}
},
method:{
search(){
console.log('search')}
}

<button v-on :click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyword}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){
 console.log('search');
 this.result={
"title":"尚硅谷",
"site":"http://www.atguigu.com"
}
}

简写

<button @click="search()">查询</button>

修饰符

<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的
event.preventDefault()：
 即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
 <label for="username">
 <input type="text" id="username" v-model="user.username">
 <button type="submit">保存</button>
 </label>
</form>
methods: {
 onSubmit() {
 if (this.user.username) {
 console.log('提交表单')
 } else {
 alert('请输入用户名')
 }
 }
}

条件渲染
v-if：条件指令

data: {
 ok: false
}

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

v-show

<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1> <h1 v-show="!ok">no</h1>

列表渲染
v-for :列表循环指令

<!-- 1、简单的列表渲染 -->
<ul>
 <li v-for="n in 10">{{ n }} </li>
</ul> <ul>
 <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
 <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
 </ul>

遍历数据列表

data: {
 userList: [
 { id: 1, username: 'helen', age: 18 },
 { id: 2, username: 'peter', age: 28 },
 { id: 3, username: 'andy', age: 38 }
 ]
}

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

五 Axios

六 ElementUI

七 Nodejs

八 NPM 管理包

九 Babel

abel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

十模块化

Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）

什么是模块化开发
在这里插入图片描述

十一 webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。减少了页面的请求。
在这里插入图片描述

小谋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
part3 统一日志处理、前端开发工具、ES6、Vue、Axios、ElementUI、Nodejs、NPM包管理器、Babel、模块化、Webpack -谷粒学院

一统一日志处理1 日志1）配置日志级别日志级别分为：OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL默认情况下，spring boot从控制台打印出来的日志级别只有INFO及以上级别，可以配置日志级别# 设置日志级别logging.level.root=WARN这种方式只能将日志打印在控制台上2 Logback日志spring boot内部使用Logback作为日志实现的框架。1）、配置logback日志# 设置日志级别#logging.level.root
复制链接

扫一扫