<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[heaven_dad的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/heaven_dad</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; heaven_dad]]></copyright><item><title><![CDATA[位运算取反运算规则与例子]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/123924436</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/123924436</guid><author>heaven_dad</author><pubDate>Sat, 02 Apr 2022 16:56:21 +0800</pubDate><description><![CDATA[位运算]]></description><category></category></item><item><title><![CDATA[分布式RPC框架Dubbo学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/108973028</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/108973028</guid><author>heaven_dad</author><pubDate>Fri, 09 Oct 2020 10:00:05 +0800</pubDate><description><![CDATA[1. 软件架构的演进过程
软件架构的发展经历了由单体架构、垂直架构、SOA架构到微服务架构的演进过程，下面我们分别了解一下这几个架构。
1.1 单体架构

架构说明：
​      全部功能集中在一个项目内（All in one）。
架构优点：
​      架构简单，前期开发成本低、开发周期短，适合小型项目。
架构缺点：
​       全部功能集成在一个工程中，对于大型项目不易开发、扩展和维护。
​       技术栈受限，只能使用一种语言开发。
​       系统性能扩展只能通过扩展集群节点，成本高]]></description><category></category></item><item><title><![CDATA[8.Webpack学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705838</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705838</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:11:34 +0800</pubDate><description><![CDATA[8.Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。



从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

8.1 webpack打包js文件

​	第一步：安装 Webpack 以及webpack-cli

npm install -g webpack webpack-cli


​	第二步：安装后查看版本

webpack -v

]]></description><category></category></item><item><title><![CDATA[7.模块化学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705815</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705815</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:10:32 +0800</pubDate><description><![CDATA[7.模块化

​	是什么？


在后端中，controller层注入service层，service层注入mapper层，类与类之间的调用称为后端模块化
在前端中，js与js之间的调用称为前端模块化

7.1 ES5模块化测试

​	ES5模块化测试


​	第一步，创建文件夹(es5module)和文件（两个js文件 分别为01.js  02.js）


​	第二步：编写01.js 需要编写js方法并设置方法能被其他js调用

//创建js方法
const sum=function(a,b){
    r]]></description><category></category></item><item><title><![CDATA[6.babel学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705795</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705795</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:09:43 +0800</pubDate><description><![CDATA[6.babel

​	是什么？


babel是转码器，能将es6的代码转成ES5
这样做是为了解决es6浏览器兼容性问题


​	安装bable

#第一步 安装babel
npm install --global babel-cli

#第二步 查看babel版本
npm --version

#第三步 创建js文件编写es6代码
写一些es6特有的箭头函数之类的

#第四步 创建babel配置文件 文件名如下 且是固定的,存放在项目的根目录下
.babelrc

#第五步 在配置文件中编写下面代码
{]]></description><category></category></item><item><title><![CDATA[5.NPM学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705776</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705776</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:08:43 +0800</pubDate><description><![CDATA[5.NPM

​	是什么？



NPM全称：Node Package Manager   类似于后端的Maven


NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，是全球最大的模块生态系统


我们通过npm可以很方便的下载js库，管理前端工程


Node.js已经集成了npm包管理工具



​	如何查看npm是否安装？


输入命令

npm -v


​	npm具体操作


npm项目初始化操作

#第一步：创建一个空的文件夹 npmdemo
#第二步：打开]]></description><category></category></item><item><title><![CDATA[4.Node.js使用]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705745</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705745</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:06:55 +0800</pubDate><description><![CDATA[4.Node.js

​	node,js是什么？



Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。


Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。


Node.js就是运行在服务端的JavaScript


类比于java的jdk  node.js就是JavaScript的jdk


可以模拟出tomcat服务器的效果



​	node.js安装


第一步：官网下载  https://nodejs.org/en/
第二步：下一步安装
第]]></description><category></category></item><item><title><![CDATA[3.Element-UI学习]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107705728</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107705728</guid><author>heaven_dad</author><pubDate>Fri, 31 Jul 2020 09:05:53 +0800</pubDate><description><![CDATA[3.Element-UI

​	是什么？

element-ui是前端出品的基于vue.js的后台组件库，方便程序员进行快速的布局和构建

​	官网

https://element.eleme.cn/#/zh-CN

​	例子（有很多组件可以使用，这里列举按钮和文件上传）


Button按钮



代码实现

&lt;el-row&gt;
  &lt;el-button&gt;默认按钮&lt;/el-button&gt;
  &lt;el-button type="primary"&gt;主要按钮&lt]]></description><category></category></item><item><title><![CDATA[2.前端技术ES6学习（基础语法）]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107675097</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107675097</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 21:00:35 +0800</pubDate><description><![CDATA[2.前端技术ES6学习
2.1 什么是ES6？

ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
ECMAScript6就是一套标准 是Script语言的标准

2.2 ES6语法学习
2.2.1 let作用范围学习

let的作用是局部作用范围

&lt;script&gt;
    //es6如何定义变量，定义变]]></description><category></category></item><item><title><![CDATA[1.安装前端开发工具vscode]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107675072</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107675072</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:56:56 +0800</pubDate><description><![CDATA[1.安装前端开发工具vscode
官网下载 	https://code.visualstudio.com/
基本上下一步安装就是，在桌面创建一个快捷方式

​	第一步：安装插件


Live Server 内置服务器



​	第二步：创建工作区



首先需要在硬盘中创建一个空文件夹


接着使用vscode打开你创建的文件夹 online_education_system


然后将文件夹保存为工作区 设置工作区名字


最后可以试着创建文件夹和文件写一个html页面，右键Open With Live ]]></description><category></category></item><item><title><![CDATA[11. Vue Axios异步通信]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674919</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674919</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:49:19 +0800</pubDate><description><![CDATA[11. Vue Axios异步通信
什么是axios?
Axios是一个开源的可以在浏览器端和Node.js的异步通信框架，主要功能是实现AjAx的异步通信。
他不属于vue里面的，而是经常与vue一起使用实现ajax异步通信
安装
使用 npm:
$ npm install axios

使用 bower:
$ bower install axios
使用 cdn:
&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/scr]]></description><category></category></item><item><title><![CDATA[10. Vue 路由]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674896</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674896</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:48:18 +0800</pubDate><description><![CDATA[10. Vue 路由


需要引入	vue-router.js 而且放在vue.js下面


代码实现


&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;script src="vue-router.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &l]]></description><category></category></item><item><title><![CDATA[9. Vue 生命周期]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674880</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674880</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:47:25 +0800</pubDate><description><![CDATA[9. Vue 生命周期
-Vue生命周期主要记住两个方法 created 和	mounted方法


created在页面渲染之前执行


mounted在页面渲染之后执行


debugger相当于打断点



​	代码实现

&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
       ]]></description><category></category></item><item><title><![CDATA[8. Vue 组件化应用构建]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674838</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674838</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:46:40 +0800</pubDate><description><![CDATA[8. Vue 组件化应用构建

组件是Vue.js最强大的功能之一
组件可以扩展html元素，封装可重用代码


​	局部组件


代码实现	(用法就是标签引用组件)

&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &lt;xuan&gt;&lt;/xuan&gt;
   ]]></description><category></category></item><item><title><![CDATA[7. Vue的vue-if和vue-for标签]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674814</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674814</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:44:16 +0800</pubDate><description><![CDATA[7. Vue的vue-if和vue-for标签
官网例子： https://cn.vuejs.org/v2/guide/conditional.html

​	v-if 条件判断


代码展示

&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &lt;input type="]]></description><category></category></item><item><title><![CDATA[6. Vue 修饰符]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674785</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674785</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:42:33 +0800</pubDate><description><![CDATA[6. Vue 修饰符
可用于阻止表单提交
&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
    &lt;!--修饰符用于指出一个指令应该以特殊方式绑定。
        这里的.prevent修饰符告诉 v-on指令对于触发的事件调用js的 event.preventDefault()
 ]]></description><category></category></item><item><title><![CDATA[5. Vue 事件绑定]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674744</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674744</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:40:32 +0800</pubDate><description><![CDATA[5. Vue 事件绑定

​	代码演示1


@click单击事件

&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &lt;!-- 通过按钮实现事件的绑定 --&gt;
        &lt;button v-on:click="search()"&gt;查询结果&lt;]]></description><category></category></item><item><title><![CDATA[4. v-model双向绑定]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674727</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674727</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:39:12 +0800</pubDate><description><![CDATA[4. v-model双向绑定

​	代码演示1

双向绑定就是一起发生变化
&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &lt;input type="text" v-bind:value="user.name"&gt;&lt;/input&gt;
        &lt]]></description><category></category></item><item><title><![CDATA[3. v-bind指令学习（单向绑定）]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674695</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674695</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:38:04 +0800</pubDate><description><![CDATA[3. v-bind指令学习（单向绑定）
v-bind 单向数据绑定 一般用在标签属性里面，获取值
&lt;body&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;
    &lt;div id="app"&gt;
        &lt;!-- v-bind 单向数据绑定 一般用在标签属性里面，获取值 --&gt;
        &lt;h3 v-bind]]></description><category></category></item><item><title><![CDATA[2. 第一个Vue入门程序]]></title><link>https://blog.youkuaiyun.com/heaven_dad/article/details/107674672</link><guid>https://blog.youkuaiyun.com/heaven_dad/article/details/107674672</guid><author>heaven_dad</author><pubDate>Wed, 29 Jul 2020 20:36:43 +0800</pubDate><description><![CDATA[2. 第一个Vue入门程序
第一步：下载vue插件
第二步：创建html 并且引入
&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"&gt;&lt;/script&gt;

第三步：编写基础的vue程序
&lt;!--View层 模板--&gt;
&lt;div id="app"&gt;
    &lt;!-- 使用插值表达式取值 --&gt;
    {{message}}
&lt;/div&gt;

&lt;]]></description><category></category></item></channel></rss>