初学JAVA项目（10、Ada银行-2）
前言
本次项目学习目标：
主要通过以项目为导向学习JavaScript、vue、cookie，前后端分离等内容
一、Ada银行-2
银行项目Refactor(重构)，引入高性能数据持久化方案。
截图：
二、项目完成后的一些思考
1.什么是webpack？
webpack官方文档j解释webpack是一个module bundler(模块打包器)。第一次听到这个概念的时候可能比较难理解。
简单来说就是，把你的项目当做一个整体，通过一个给定的主文件（如：index.js）， Webpack将从这个文件开始找到你的项目的所有依赖文件。最后打包为一个浏览器可识别的JavaScript文件。
仔细点说就是打包＋模块这两个词组成了webpack。
引用官网的一张图：
那为什么需要打包呢？
答：是不是我把所有JavaScript文件合成一个文件就好了呢？没错，我们确实可以这样做，这样就减少了http请求数量，让我们的页面加载和显示更快。不过这个合并的阶段是在开发完成之后才进行的，也就是说开发阶段我仍然是有a.js，b.js和c.js等等这些文件的，这样才好开发和维护，因为如果开发阶段就合并的话，就相当于我基于一个可能上万行的文件进行开发，这样的代码是没法维护的。
2.什么是vuex？
概念:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。
例如：
你有几条数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都去写，就会很麻烦。而且当通信双方不是父子组件甚至根本不存在任何关系的时候，或者说一个状态需要共享给多个组件的时候，那么就会非常麻烦，数据维护也相当的不好维护，因此就出现了vuex。
3.什么是less？
背景介绍:
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩 展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。
less介绍：
Less是一门向后兼容的 CSS 扩展语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。
例如：
1、变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
@color: #09ec7a;
.header {
color: @color;
}
h2 {
color: @color;
}
所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
2、混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，
.rounded-corners (@radius: 5px) {
//有了这个函数，以后再也不用每个样式里面写那么多兼容了，每次调用时只要传入一个参数
//.rounded-corners(8px) .rounded-corners(10px)
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
//上述代码编译后：
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
…
参考自：
less官网：https://less.bootcss.com/
4.vue生命周期
<!DOCTYPE html>
<html>
<head>
<title>vue生命周期</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<!--
1、F12查看Console;
2、输入：app.message= 'this is update！！！！';
3、输入：app.$destroy() //实例销毁
-->
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "hello world"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态*********************》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态*********************》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态*********************》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
