存档2020年2月29日

spring注解驱动

容器 AnnotationConfigApplicationContext
组件添加
组件赋值
组件注入
AOP
声明事务

原理
BeanFactoryPostProcessor
BeanDefinitionRegistryPostProcessor
ApplicationListener
Spring容器创建过程

WEB
servlet3.o
异步请求

/**
 * 给容器注册组件
 * 1.包扫描+组件标注注解(@Controller...) [我们自己写的]
 * 2.@Bean+ @Configuration [别人写的,导入的第三方包]
 * 3.@Import [快速的给容器中导入组件]
 *      1. @Import({要导入的容器的组件...}) id默认为全类名
 *      2. @ImportSelector 返回要导入的全类名数组
 *      3. ImportBeanDefinitionRegistrar 通过registerBeanDefinitions给容器中增加自己的bean
 * 4.使用spring提供的FactoryBean[工厂Bean]
 *      1.默认获取到的是工厂Bean调用getObject创建的对象
 *      2.通过前缀&获取FactoryBean注入的工厂bean本身
 * 5.@Condition按条件进行判断,满足条件的给容器中注册Bean
 *
 * 赋值方式
 * 1.xml中指定
 * 2.使用Bean创建时指定
 * 3.使用@Value赋值
 *  1.基本数值
 *  2.SpEL #{}
 *  3.配制文件,运行环境变量中的值 ${} 可以使用@PropertySource加载外部配制文件保存到运行的变量中,yml文件先在静态资源中引入
 *
 * 自动装配
 *  spring利用依赖注入DI,完成对IOC容器中各个组件的依赖关系赋值
 *  默认加在ioc容器中的组件,容器启动会调用无参构造器创建对象,再进行初始化赋值等操作
 *  1.@Autowired 自动注入 [Spring规范]
 *      AutowiredAnnotationBeanPostProcessor:解析完成自动装配功能
 *      1.默认优先按照类型去容器中找对应的组件:applicationContext.getBean(beanName.Class),找到并赋值
 *      2.如果找到多个相同类型的组件,再将属性的名字作为组件的ID去容器中查找 applicationContext.getBean(beanName),找到并赋值
 *      3.@Qualifier("beanName")明确指定要装配的组件ID,而不傅属性
 *      4.自动装配默认一定要将属性赋值好,没有就会报错,可以使用@Autowired(required = false)没有就不装配
 *      5.@Primary spring进行装配的时候,默认使用首选的Bean,也可以继续使用@Qualifier指定
 *  2.还支持@Resource(JSR250规范)和@Inject(JSR330规范)  [java规范]
 *      1.@Resource 可以和@Autowired一样实现自动装配,默认按照组件名称进行装配,不支持@Primary和@Autowired(required = false)
 *      2.@Inject 使用先导入javax.inject依赖,可以和@Autowired一样实现自动装配,支持@Primary和不支持@Autowired(required = false)
 *  3.@Autowired 可以标在构造器,方法,属性,参数;都是从容器中获取参数组件的值
 *      1.标注在方法,spring容器创建当前对角,就会调用方法,完成赋值,方法使用的参数,自定义类型的值从Ioc容器中获取;@Bean标注的方法创建对象的时候,方法参数的值从容器中获取;默认不写@Autowired效果都是一样的
 *      2.标注在有参构造器时,容器启动调用这有参构造器创建对象,构造器要用的组件,都是从容器中获取;只有一个有参构造器时,可以省略@Autowired,参数位置的组件还是从容器中获取
 *      3.标在参数时,也同2
 *  4.自定义组件想要使用spring容器底层的一些组件(applicationContext,BeanFactory,xxx),自定义组件只需实现xxxAWare接口,有回调的风格,总体参照AWare;
 *   xxxAWare的功能使用xxxAWarePostProcessor后置处理器完成
 *  5.@Profile: spring为我们提供可以根据当前环境,动态激活和切换一系列组件的功能,不指定,在任何环境下都能注册
 *      环境切换:
 *          1使用命令行动态参数-Dspring.profiles.active
 *          2使用代码方式,applicationContext不能使用有参构造器,用无参构造器
 *          //指定主配制类,获得容器
 *         //AnnotationConfigApplicationContext applicationContext = new AnnotationConfigApplicationContext(MainConfigOfProfile.class);
 *         AnnotationConfigApplicationContext applicationContext = new AnnotationConfigApplicationContext();
 *         //使用无参构造器设置需要激活的环境,一次可以设多个
 *         applicationContext.getEnvironment().setDefaultProfiles("test");
 *         //注册主配制类
 *         applicationContext.register(MainConfigOfProfile.class);
 *         //启动刷新容器
 *         applicationContext.refresh();
 *         log.info("容器创建完成...[{}]",applicationContext);
 *         3.使用配制文件spring.profiles.active=dev
 *      1.加了环境标识的Bean,只有在环境激活的情况下注册到容器中,默认是default环境
 *      2.写在配置类上,只有在只有在环境激活的情况下,整个配置类里面的所有配置才生效
 *      3.没有标注的,在任何环境下都是加载的
 *
 */

Vue.js

Vue官网
Vue CLI
Vue中文
Vue CLI 中文
Vue.js 教程
Webpack打包工具
cnpm install webpack -g
npm i webpack –save-dev
webpack -v

1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3、NPM 方法
$ cnpm install vue
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  • 全局安装 vue-cli
    $ cnpm install –global vue-cli
    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
    npm install -g @vue/cli
    yarn global add @vue/cli
    vue -V
    本地全局配置一下chormedriver源,打开终端就一个命令:
    npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

vue create 项目名
vue ui

创建一个基于 webpack 模板的新项目

Vue CLI 3 和旧版使用了相同的vue命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的vue init功能,你可以全局安装一个桥接工具:安装完后 就还可以使用 vue init 命令
cnpm install -g @vue/cli-init

vue init webpack my-project
– 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob test@runoob.com
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated “my-project”.
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:
$ cd my-project
$ cnpm install
$ cnpm run dev

npm和yarn命令对比npm yarn

npm install
yarn
npm install react –save
yarn add react
npm uninstall react –save
yarn remove react
npm install react –save-dev
yarn add react –dev
npm update –save
yarn upgrade

1.node+webpack+npm(运行环境)
2.vue+vue-router+vuex(框架技术)
3.element-ui、iview、vant(UI组件库)

主流的vue-cli脚手架,在小程序方面用的是mpvue-cli脚手架
采用主流的编辑器,配置相应的eslint语法规范
eslint配置
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
“editor.detectIndentation”:false,
// 重新设定tabsize技术培训1- 111 -本文档使用看云 构建
“editor.tabSize”:2,
// #每次保存的时候自动格式化
“editor.formatOnSave”:true,
// #每次保存的时候将代码按eslint格式进行修复
“eslint.autoFixOnSave”:true,
// 添加 vue 支持
“eslint.validate”: [”javascript”,”javascriptreact”,{“language”:”vue”,”autoFix”:true}],
// #让函数(名)和后面的括号之间加个空格
“javascript.format.insertSpaceBeforeFunctionParenthesis”:true,
// #这个按用户自身习惯选择
“vetur.format.defaultFormatter.html”:”js-beautify-html”,
// #让vue中的js按编辑器自带的ts格式进行格式化
“vetur.format.defaultFormatter.js”:”vscode-typescript”,”vetur.format.defaultFormatter.scss”:”prettier”,”vetur.format.defaultFormatterOptions”:{“js-beautify-html”:{“wrap_attributes”:”force-aligned”
// #vue组件中html代码格式化样式
}}}


错误解决

  1. npm run 运行项目时报错: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
    unset HOST
    sudo vi /etc/hosts加:127.0.0.1 localhost
    修改/etc/hosts,在里面增加一行:127.0.0.1 x86_64-apple-darwin13.4.0

nodejs 模板引擎

模板引擎:
– Jade:面向后端
使用#{}传递变量以及js表达式
属性传递变量直接等于变量即可,不能写成#{}形式,会报错。
‘-‘ 执行符
= 执行符
for循环
使用 ! 渲染dom节点
if判断渲染不同dom节点
jade中switch条件语句和js的语法有点不同,其用case…when…
class属性比较特殊,可以写多个class,jade会自动合并,其他属性不能重复
– Ejs:最常用,最广泛,前后端分离
特点:ejs是非破坏式(非侵入式)引擎,它不改变html的任何语法,可以让我们直接在标签内书写简单、直白的 JavaScript 代码。
<%=变量或表达式%>
ejs中输出data是在回调函数中,不像jade是定义一个变量来接收的
ejs中使用<%=变量名%> 输出数据到模板,如果输出如果含有html标签,<>会被编码(转义)
<%js代码%>
s中使用<%js代码%> 执行js代码, 不会输出,被称作无缓冲的代码。
由于不输出代码,会出现两行空行,可以换成<%_js代码_%>,会自动删除不输出产生的空行
<%-变量或表达式%>
默认使用<%%> 会将<>转义输出,可以使用<%-%>声明不转义输出
include
– handlerbars
模板引擎 Mustache 的扩展
– art-template
介绍 https://aui.github.io/art-template/zh-cn/docs/