前端技术介绍

Nuxt

vue服务端渲染框架

Vue

vue是构建用户界面的渐进式框架，自底向上增量开发，只关注视图层，简洁轻量快捷，实时的双向数据绑定【DOMListener和DataBinding】和组件化，MVVM模式【数据驱动，通过数据显示视图层而不是操作dom，model-view-view model,数据-视图-实例，model与view互相影响，低耦合，可重用，独立性开发】，虚拟dom【对DOM进行缓存，提升网页速度，缺：内存】，指令系统
工作原理
双向数据绑定原理：vue采用数据劫持结合发布者-订阅者模式的方式，通过Object。observer: defineProperty()来劫持各个属性的setter和getter，在数据变动时，触发setter,发布消息给订阅者watcher，触发compile中绑定的相应监听回调。
实现数据双向绑定需要3大模块：
observer：对数据对象的所有属性进行监听，若有变动通知订阅者;
watcher：(observer和compile之间通信的桥梁)，能够订阅并收到每个属性变动的通知，触发compile中绑定的回调，更新视图;
compile：对每个元素节点的指令进行扫描和解析，根据模板指令替换数据，以及绑定相应的更新函数。
核心思想：数据驱动+ 组件系统

vue-cli 脚手架

构建的vue-cli工程中都用到了哪些技术？作用？
vue vue-router vuex axios webpack
*vue-cli常用npm命令？
1）npm i : 下载资源包
2）pm run dev 启动vue-cli开发坏境
3）npm run build 生成生成环境部署资源
4）npm run build --report 浏览器自动弹出页面，查看vue-cli生产环境部署资源文件大小
vue-cli工程中每个文件夹和文件的用处？
1）build文件夹：用于存放 webpack 相关配置和脚本。开发中会到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。自己开发npm包时，还会对output、entry等进行配置。
2）config: 主要存放配置文件，用于区分开发环境、线上环境的不同。常用到此文件夹下 config.js 配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3）dist : 默认npm run build命令打包生成的静态资源文件，用于生产部署。
4）node_modules: 存放npm i命令下载的开发坏境和生产环境的依赖包。
5）src: 存放项目源码
config文件夹下index.js对于工程开发环境以及生产坏境的配置
- build对象下对生产坏境的配置：
  1）index: 配置打包后入口.html文件的名称以及文件夹名称
  2）assetsRoot: 配置打包后生成的文件名称和路径
  3）assetsPublicPath: 配置打包后.html 引用静态资源的路径，一般设置成'./'
  4)productionGzip: 是否开发gzip压缩，以提升加载速度

dev 对象下对于开发环境的配置：
1） port: 设置端口号

proxyTable: vue设置的代理，用以解决跨域的问题

   '/api': {
        target: 'http://cimonitor.oneitfarm.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
     },

Vuex

vuex 集中式状态管理架构单向数据流 state Actions view
5个属性：State,Getter,Mutation,Action.Module
状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
共享状态的管理，用于管理页面数据状态、提供统一数据操作
应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中,其他页面dispatch触发action。
优点：提高了可维护性，提高了可读性，低耦合

vuex规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰

Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state，通过getters获取到state新值，重新渲染Vue Components，界面随之更新。

Vue-Router

路由框架，路由用于设定访问路径，并将路径和组件映射起来

Axios

一个基于promise的HTTP库请求后台资源的模块
一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高，客户端支持防御 XSRF
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作

RESTful API

(representational state transfer）表现性状态变化|转移
api 设计理论便于服务端和客户端通信一种交互形式
url定位【唯一标识】资源
http协议里的动词(get,post,put,patch,delete)描述操作，实现资源的状态扭转变化
服务端和客户端之间传递资源的（表现）形式：JSON，XML，JPG
http状态码传递服务端的状态信息：200，404，500
版本应该放入url
过滤信息 ?limit=10 page sortBy
https://www.zhihu.com/topic/19579308/top-answers

weex

阿里开源的一套构建跨平台的移动框架、高性能原生应用
write once,run everywhere
一份代码可以在3端（ios,android,web端）同时运行
2种打包js Bundle :weex页面和 web页面
weex.config.env或WXEnvironment 获取当前的运行时环境

image.png

在浏览器中，我们需要把这个 JS bundle 作为一段 <script> 载入网页；而在客户端里，我们把这段 JS bundle 通过Weex SDK加载并直接执行。

Elementui 、iview、Ant Design Vue

基于vue的快速构建网页的组件库

jquery

轻量级，强大的选择器，丰富的DOM操作的封装，可靠的事件处理机制，完善的Ajax（无心关心浏览器的兼容性），不污染顶级变量$，出色的浏览器兼容性，链式操作、丰富的插件支持

sass 、less、stylus

css预处理器简洁高效使得css的开发更易维护

webpack

模块打包机
模块化的解决方案
分析项目结构，找到js模块和浏览器不能运行的语言经loader转化和打包成合适的格式供浏览器使用
优点：可替代grunt 和gulp

gulp

能够优化前端的开发流程的工具
工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，配置之后可以自动替你完成这些任务。

后端ssh

struts

struts
mvc框架 model-view-controller [模型-视图-控制器] 控制层

hibernate

hibernate
ORM对象关系映射框架数据持久层对数据库进行操作的技术

spring

spring
依赖注入控制反转

赞赞哇.png