GitChat · 前端 | JavaScript 进阶之 Vue.js + Node.js 入门实战开发

GitChat 作者：小青年
原文：JavaScript 进阶之 Vue.js + Node.js 入门实战开发
关注公众号：GitChat 技术杂谈，一本正经的讲技术

前言

随着前端技术的快速迭代，JavaScript 的关注度越来越高，相关的生态链和前后端分离的解决方案愈趋完善，JavaScript 发挥着越来越重要的作用。Vue.js 的火热程度丝毫不亚于曾经的 jQuery，相关的生态也发展得越来越好。Node.js 经过这么多年的发展也越来越强大，虽然 Node.js 在短期内不会取代基于 Java 、PHP 等传统的后端语言，然而 Node.js 已经被越来越多的人用于项目开发中。基于这种考虑，数月前我打算搞点事情，尝试做一个 Vue.js + Node.js 全栈开发社区，专注于探索和分享 Vue.js 和 Node.js 开发的相关技术。之前申请的 vuenode.com 域名备案上个月通过了，于是开始实施了，本次 Chat 作为一个入门级别的总结，将以构建一个简单的技术博客系统为例，说明 Vue.js 结合 Node.js 实战的例子帮助前端新人进阶学习，掌握后端必备的一些基础技能。本文的主要内容包括：

• Vue.js / vue-router / vuex 基本用法；

• Vue 的 PWA的解决方案 Lavas 介绍；

• Node.js 框架 Egg.js 的基本用法；

• Linux 云服务器搭建部署 Node 服务。

Vue.js / vue-router / vuex 基本用法

Vue.js 的核心特征

学习一种新技术我们首先需要抓住主要内容，其他的工作无非是一些需要反复去研读文档去实践验证的细节。学习 Vue.js 我不建议新手直接用 Vue Cli 跑单文件组件工程，虽然这样可以很快写出一个简单项目的原型，但是通过简单的demo学习，更能够理解问题的本质。

响应式系统

在上一期的讲座中我们学习了Vue.js数据双向绑定的实现原理，其主要特性是一种基于数据驱动的思想构成的响应式系统，模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。这是需要去重点关注的第一个重点，与之相关的知识点是生命周期、模板语法（插值、指令、过滤器）等。这部分的内容基本上是需要我们对于数据绑定相关的内容有一定的理解。

看到很多人在写 Vue.js 的时候依然还是之前DOM操作的一些思想，先入为主的一定要拿到需要控制的对象进行操作，而不是想着我们的数据模型是响应式的，通过改变数据模型，视图会自动变动。改变思想才能更好的利用工具，以数据和状态为中心，在某些场合下可能比对象事件更简单。

这部分的内容基本上以文档为主，本文不作赘述。

组件化系统

用官方文档的话说就是，组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码，在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能，在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

要想理解组件化的意义，我觉得有必要了解一下 Web Components 标准，Web Components 由这四种技术组成：

• 自定义元素 (Custom Elements)

• HTML模板 (HTML Templates)

• 影子DOM (Shadow DOM)

• HTML导入 (HTML Imports)

为了深入理解 Vue.js 背后设计的思想，我们先通过一个自定义 Dialog 的实例看看 Web Components 如何使用。我们想实现通过调用自定义元素的形式调用我们自定义的dialog组件。

web 开发中需要解决的经典问题——封装。如何保护组件的样式不被外部 css 样式侵入，如何保护组件的 dom 结构不被页面的其他 javascript 脚本修改。

那么如何实现呢？首先我们需要理解几个基本概念。

Shadow DOM

Shadow DOM 很好的解决了这个问题，我们通过 Element.createShadowRoot()
为自定义元素创造一个”隔离区间”，浏览器渲染显示结果如下图：

显示 shadow dom 需要开启 Chrome 开发者工具的 ‘Show user agent shadow DOM’ ：

HTML Templates

以前我们写 html 模板一般会写在script元素或者textarea元素中，比如原来的模板形式：

<script type="text/template">
    

        this is your template content.
    </div>
script>

而现在我们可以直接使用语义化更好的template元素，我们可以通过 content 属性访问 template 标签的内容。

<template id="dialog-template">
  <style>
    /* web-components-dialog style */
  style>

  <div class="web-components-dialog-mask">
    <div class="web-components-dialog-wrapper">
      <div class="web-components-dialog">
        <div class="web-components-dialog-title">div>
        <div class="web-components-dialog-content">div>
        <div class="web-components-dialog-btns">div>
      div>
    div>
  div>
template>

读取模板内容：

 var template = document.querySelector('#dialog-template').content;

template 元素主要有四个特性：

• 惰性：在使用前不会被渲染；

• 无副作用：在使用前，模板内部的各种脚本不会运行、图像不会加载等；

• 内容不可见：模板的内容不存在于文档中，使用选择器无法获取；

• 可被放置于任意位置：即使是 HTML 解析器不允许出现的位置，例如作为 的子元素。

  Custom Elements

  自定义元素允许开发者定义新的 HTML 元素类型，带来以下特性：

  • 定义新元素

  • 元素继承

  • 扩展原生 DOM 元素的 API

  如果使用非标准的自定义元素，会有什么结果？

  <style>
    mydialog {
      color: red;
    }
  style>
  <mydialog>hello world!mydialog>

  我们会发现浏览器没有过滤这个元素，浏览器对待自定义元素，就像对待标准元素一样，只是没有默认的样式和行为，这种处理方式是写入HTML5的。

  自定义元素有几种形式：

  • 使用非标准元素， HTMLUnknownElement接口的实例，例如标签；

  • 使用标准的自定义元素，通过Document.registerElement() 方法，此方法向浏览器注册一个新元素，该元素默认使用 HTMLElement 接口；

  • 使用Custom Elements 标准通过customElements.define定义一个Custom Elements，自定义元素的名字必须包含一个破折号（-），自定义元素的定义可以使用 ES6 的class语法；

  • 可以在例如 这样的原生元素的基础上创建自定义元素，不过如此一来就不能使用自定义标签名，比如 ，而要使用 这样的语法。

  自定义元素可以使用以下生命周期回调函数：

  • createdCallback - 注册元素时执行

  • attachedCallback - 元素插入DOM时执行

  • detachedCallback - 元素被移除DOM时执行

  • attributeChangedCallback - 元素的属性被增、删、改时执行

  HTML Imports

  通过标签来引入 HTML 文件，使得我们可以用不同的物理文件来组织代码。

  <link rel="import" href="http://example.com/component.html" >

  注意：受浏览器同源策略限制，跨域资源的 import 需要服务器端开启 CORS。

  通过import引入的 HTML 文件是一个包含了 html, css, javascript 的独立 component。

  <template>
      <style>
          .coloured {
              color: red;
          }
      style>
      <p>My favorite colour is: <strong class="coloured">Redstrong>p>
  template>
  <script>
      (function() {
          var element = Object.create(HTMLElement.prototype);
          var template = document.currentScript.ownerDocument.querySelector('template').content;
          element.createdCallback = function() {
              var shadowRoot = this.createShadowRoot();
              var clone = document.importNode(template, true);
              shadowRoot.appendChild(clone);
          };
          document.registerElement('favorite-colour', {
              prototype: element
          });
      }());
  script>

  下面我们完成 Dialog 的例子，我们要在浏览器注册我们的自定义元素web-components-dialog：

  var template = document.querySelector('#dialog-template').content;
  class CustomDialog extends HTMLElement {
    createdCallback() {
      // 拷贝template
      var clone = document.importNode(template, true);
      // 设置标题
      var titleElem = clone.querySelector('.web-components-dialog-title');
      titleElem.textContent = this.getAttribute('data-title');
      titleElem.style.cssText = this.getAttribute('data-title-style');
      // 设置内容
      var contentElem = clone.querySelector('.web-components-dialog-content');
      contentElem.textContent = this.getAttribute('data-content');
      contentElem.style.cssText = this.getAttribute('data-content-style');
      // 设置按钮
      var fragment = document.createDocumentFragment();
      var btns = this.getAttribute('data-btns').split(',');
      var callback = this.getAttribute('data-callback');
      for (var i = 0; i < btns.length; i++) {
        var btn = document.createElement("button");
        btn.innerText = btns[i];
        btn.index = i;
        btn.addEventListener('click', function() {
          (new Function("index", callback))(this.index);
        });
        fragment.appendChild(btn);
      }
      clone.querySelector('.web-components-dialog-btns').appendChild(fragment);
      // Create a Shadow Root
      this.createShadowRoot().appendChild(clone);
    }
  }
  document.registerElement('web-components-dialog', CustomDialog);

  然后就可以这样调用了：

  <web-components-dialog 
    id="dialog" 
    data-title="我是标题" 
    data-title-style="background-color: rgb(141, 206, 22); color: rgb(255, 255, 255);"
    data-content="我是内容" 
    data-content-style="color: #f00" 
    data-btns="取消, 确认" 
    data-callback="alert(index);">
  </web-components-dialog>

  源代码：

  http://jsfiddle.net/zhaomenghuan/v6777pon/36/embedded/

  我们可以使用 Vue.js 的组件来实现这个例子：

  Vue.component('vue-dialog', {
    template: '\
      name="vue-dialog">\
        <div class="vue-dialog-mask" v-if="show">\
          <div class="vue-dialog-wrapper">\
            <div class="vue-dialog">\
              <div v-if="!!options.title" class="vue-dialog-title" v-bind:style="options.title.style">\
                
  {{options.title.text}}
  \
                class="vue-icon" @click="cancel">×\
              div>\
              <div v-if="!!options.content" class="vue-dialog-content" v-bind:style="options.content.style" v-html="options.content.text">div>\
              <div v-if="!!options.btns" class="vue-dialog-btns">\
                for="(item, index) in options.btns"  @click="callback(index)">{{item}}\
              div>\
            div>\
          div>\
        div>\
      \
    ',
    props: ['show', 'options', 'callback'],
    methods: {
      cancel: function() {
        this.$emit('update:show', false);
      }
    }
  });

  然后就可以这样使用：

  :show.sync="showModal"
    :options="optionsObj" 
    :callback="modelCallback">
  </vue-dialog>

  源代码：

  http://jsfiddle.net/zhaomenghuan/7912L1yb/1/embedded/

  看到这里我们发现 Vue.js 组件的思想和 web components 很类似，我们首先通过 Vue.component 或 components注册一个组件，然后可以在Vue实例或组件实例中使用，将整个应用程序划分为组件，以使开发可管理。

  <div id="app">
    <app-nav>app-nav>
    <app-view>
      <app-sidebar>app-sidebar>
      <app-content>app-content>
    app-view>
  div>

  组件化最大的好处就是实现了分治，组件之间相互隔离，互不干扰，有利于我们抽象和复用。

  Polymer 是另一个由谷歌赞助的项目，事实上也是 Vue 的一个灵感来源。Vue 的组件可以粗略的类比于 Polymer 的自定义元素，并且两者具有相似的开发风格。最大的不同之处在于，Polymer 是基于最新版的 Web Components 标准之上，并且需要重量级的 polyfills 来帮助工作（性能下降），浏览器本身并不支持这些功能。相比而言，Vue 在支持到 IE9 的情况下并不需要依赖 polyfills 来工作。—— 对比其他框架#Polymer

  这是 Vue.js 官方文档的一段话，在 web components 规范普遍普及之前，Vue.js 这种框架或许是 web 组件化更好的解决方案。这里花很大的篇幅说明 web components 组件化的实现，更多的是希望与 Vue.js 进行对比，去思考其中相同的地方，或许在技术实现上有很大的差异，但是在思想上是有很多共性的地方的。

  另外 Vue.js 的单文件组件也是一个亮点，通过 vue-loader 将 Vue 组件转换为 JavaScript 模块，不过本质上仍然是组件的思想，只是形式上更加友好，配合预处理器（如 Pug，Babel，和 Stylus）可以构建简洁和功能更丰富的组件。这部分的学习我觉得读者有必要自己从零开始构建一个工程，或许自己的配置不够完备，但是对于理解整个过程，熟悉预处理很有必要，在此不做赘述，感兴趣的可以看看我之前的一篇文章：从0到1搭建webpack2+vue2自定义模板详细教程。

  vue-router

  不知从何时起，各种前端框架都会默认给一个官方 router 的解决方案，都会提供一个脚手架跑一个装着各种 loader 的工程。比如 Vue 社区，很多人一上去直接利用 Vue Cli 跑 Vue 全家桶，不管什么类型的项目，搞得不用 vue-router 都不是正确的做法一样，我们真的明白 vue-router 的场景吗？我们是否真的理解 vue-router？我们是否真的需要 vue-router ?

  Vue 官方文档上给出了一个从零开始简单的路由，这是一个新手很容易忽略的例子，但是如果仔细研究一下，我们会发现这个例子很有价值。

  const Home = { template: '
  home page' }
  const About = { template: '
  about page' }
  const NotFound = { template: '
  Page not found' }
  
  const routes = {
    '/': Home,
    '/about': About
  }
  
  Vue.component('v-link', {
    template: `
      "href"
        v-bind:class="{ active: isActive }"
        v-on:click="go">
        <slot>slot>
      a>
    `,
    props: {
      href: {
        type:String,
        required: true 
      }
    },
    computed: {
      isActive () {
        return this.href === this.$root.currentRoute
      }
    },
    methods: {
      go (event) {
        event.preventDefault()
        this.$root.currentRoute = this.href
        window.history.pushState(
          null,
          routes[this.href],
          this.href
        )
      }
    }
  })
  
  Vue.component('main-layout', {
    template: `
      
  
        <v-link href="/">Homev-link>
        <v-link href="/about">Aboutv-link>
        <slot>slot>
      div>
    `
  })
  
  new Vue({
    el: '#app',
    data: {
      currentRoute: window.location.pathname
    },
    computed: {
      ViewComponent () {
        return routes[this.currentRoute] || NotFound
      }
    },
    render (h) { return h(this.ViewComponent) }
  })
  
  window.addEventListener('popstate', () => {
    app.currentRoute = window.location.pathname
  })

  源代码：

  http://jsfiddle.net/zhaomenghuan/ypq2umy8/16/embedded/

  这里利用 HTML5 History API 提供了对浏览器历史的访问，通过 window.history.pushState 创建新的历史记录条目，当用户导航到新的状态，popstate事件就会被触发，通过监听 popstate 事件进行路由监听从而切换视图。对于一些较为简单的业务场景，这也不失为一种很好的处理方法。其实 vue-router history 模式底层实现也是基于 HTML5 History API，无非是做了更加完备的处理，封装了更加方便使用的 API 。

  路由是单页应用的核心，而结合组件，路由变得更加方便灵活。路由的切换本质上是组件动态切换，理解到这一点我们很容易发现路由和组件有紧密的联系。

  • 路由切换动画效果实际上是动态组件的过渡状态；

  • vue-router 的 组件是通过渲染成 A 标签进行导航，如果要在组件内进行编程式导航我们可以通过this.$router.push('...')实现；

  • 路由懒加载是通过结合 Vue 的 异步组件 和 Webpack 的 code splitting feature 实现。

  vuex

  前面我们说明了如何构建一个组件，这部分我们重点说说组件之间数据如何共享，这是开发中必须要学习的内容。vue.js 组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用 props 把数据传给子组件。另外vue.js中提倡单向数据流：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。当子组件需要更新父组件的状态时，我们可以通过事件触发。首先我们看一个例子：

  "app">
    {{ message }}
    "parentAtion">parentAtion
    "message" v-on:childfn="fromChild">
  
  
  

  每个 Vue 实例都实现了事件接口(Events interface)，即：

  • 使用 $on(eventName) 监听事件

  • 使用 $emit(eventName) 触发事件

  Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener和 dispatchEvent的别名。另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定。vm.$on( event, callback ) 监听当前实例上的自定义事件。

  父子组件可以通过 Prop 和事件接口进行通信传递数据，对于非父子组件之间的通信，在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

  var bus = new Vue()
  // 触发组件 A 中的事件
  bus.$emit('id-selected', 1)
  // 在组件 B 创建的钩子中监听事件
  bus.$on('id-selected', function (id) {
    // ...
  })

  在一般的情况下这些就足够我们完成组件之间的通信，在相对较为复杂的情况下我们才考虑引入 vuex 这种专门用作状态管理的库。

  Vue 的 PWA 的解决方案 —— Lavas

  vue 的生态如今还算比较完备，类似于Atwood定律（“任何可以使用JavaScript来编写的应用，最终会由JavaScript编写。”）一样，能够被js写的都会拿 Vue 来写一套，Vue 生态越来越多组件库和解决方案：

  • 原生应用跨平台开发方案 —— weex

  • 服务端渲染 —— vue-server-renderer / Nuxt.js

  • PWA 解决方案(开发工具) —— Lavas

  原生应用和服务端渲染相对来说内容比较多，本文不便于展开讲解，后续再做探讨。这里就简单聊聊 PWA 以及 Lavas 工具。

  Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。PWA 的主要特点包括下面三点：

  • 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现

  • 体验 - 快速响应，并且有平滑的动画响应用户的操作

  • 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

  PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征：

  • 使用 HTTPS

  • 用户界面响应式

  • 将站点添加至首屏

  • Service Worker离线和缓存

  • Push Notification

  • App Shell 模型

  • 凭证管理 API

  • PRPL 模式

  • 使用Payment Request API 进行支付

  • 使用Web Share API 调用 Android 系统原生分享

  • 使用Network Information API提示网络状态

  • 使用 Element.scrollIntoView()和Element.scrollIntoViewIfNeeded()避免input输入时屏幕被键盘遮住

  • ……

  这里大致上列举了一下 PWA 的一些核心特性，感兴趣的同学可以做深入探讨。就目前的情况看，国外 PWA 活跃度更高，由于国内的特殊性，PWA 可能暂时还需要一段时间过渡。不过目前有些团队在做升级了，Lavas 是百度提出的一套解决方案，相信 PWA 在改善 web 体验（特别是 Android ）上还是有一定的优势的。

  PWA 中比较有特点的一个特性是 Service Worker，可以让网页的用户体验做到极致，大家可以体验一下这个例子：https://weatherpwa.baidu.com/。打开页面后，关闭网络刷新浏览器会发现页面依然能够加载，利用这种特性我们可以很好的做离线应用。

  Lavas 对 PWA 新特性做了一些封装与降级处理，可以说为我们提供了一些非常不错的解决方案，结合 Vue.js 社区的组件库做了一些设计，提供了脚手架工具，可以很方便的跑一个 PWA 工程。限于篇幅，这里暂不做深入探讨。

  Node.js 框架 Egg.js 的基本用法

  Node.js 本身的内容十分多，如果要展开讲解，恐怕得一本书才能更好的诠释，不可能因为一篇文章就搞懂所有的内容，只能说希望给新手学习 Node 提供一种思路。先掌握最核心的内容然后自己再拓展学习。

  首先说明为啥会选择 Egg.js？ Node 相关的框架也有很多，其他的比如还有Express、Koa、thinkjs 等。Express 是比较经典的 Node 框架，Koa 是由 Express 原班人马打造的，都属于比较小巧的框架。对于一般的项目而言，Express 和 Koa 绰绰有余，但是就开发效率、可维护性、运行性能及稳定性，think.js 和 Egg.js 更有优势。Egg 继承于 Koa，奉行『约定优于配置』，按照一套统一的约定进行应用开发，插件机制也比较完善。

  当然最重要的是看着顺眼，哈哈，没有别的原因。

  之前简书上写过两篇 Node 相关的文章，为了便于阅读移到 segmentfault，可以在这里阅读：

  • node学习之路（一）—— 网络请求

  • node学习之路（二）—— Node.js 连接 MongoDB

  egg.js 使用指南

  我们从实例的角度，一步步地搭建出一个 Egg.js 应用，让你能快速的入门 Egg.js，首先下载脚手架，快速生成一个最简单的项目骨架：

  $ npm i egg-init -g
  $ egg-init learn-eggjs --type=simple
  $ cd learn-eggjs
  $ npm i

  npm run dev 开启服务，浏览器打开http://127.0.0.1:7001/即可看到提示：hi, egg。

  此时目录结构如下：

  learn-eggjs
  ├── app
  │   ├── controller
  │   │   └── home.js
  │   ├── public
  │   └── router.js
  ├── config
  │   └── plugin.js
  │   └── config.default.js
  └── package.json

  完整的目录结构规范参见目录结构。

  app 目录是我们的开发目录，config 是配置目录，我们在app 目录下还可以再建立 middleware 、service 、extend、view、model、schedule这几个目录。

  常用目录及文件说明：

  • app/router.js

    用于配置 URL 路由规则，具体参见 Router。

  • app/controller/

    用于解析用户的输入，处理后返回相应的结果，具体参见 Controller。

  • app/service/

    用于编写业务逻辑层，可选，建议使用，具体参见 Service。

  • app/middleware/

    用于编写中间件，可选，具体参见 Middleware。

  • app/public/

    用于放置静态资源，可选，具体参见内置插件 egg-static。

  • app/schedule/

    用于定时任务，可选，具体参见定时任务。

  • app/extend/

    用于框架的扩展，可选，具体参见框架扩展。

  • app/view/

    用于放置模板文件，可选，由模板插件约定，具体参见模板渲染。

  • app/model/

    用于放置领域模型，可选，由领域类相关插件约定，如 egg-sequelize。

  • config/config.{env}.js

    用于编写配置文件，具体参见配置。

  • config/plugin.js

    用于配置需要加载的插件，具体参见插件开发。

  • test/

    用于单元测试，具体参见单元测试。

  • app.js 和 agent.js

    用于自定义启动时的初始化工作，可选，具体参见启动自定义。关于agent.js的作用参见Agent机制。

  我们接下来重点看看 controller 、service、middleware、model、config 以及 router.js。

  Router 路由

  我们首先看看router.js，

  'use strict';
  
  module.exports = app => {
    app.get('/', 'home.index');
  };

  这是定义一个最简单的 URL 路由规则，当浏览器get请求http://127.0.0.1:7001/时，app/controller/home.js里面的index 方法执行，还可以写成：app.get('/', app.controller.home.index);。

  Router 详细定义说明：

  根据参数的不同有以下几种方式：

  app.verb('path-match', app.controller.controller.action);
  app.verb('router-name', 'path-match', app.controller.controller.action);
  app.verb('path-match', middleware1, ..., middlewareN, app.controller.controller.action);
  app.verb('router-name', 'path-match', middleware1, ..., middlewareN, app.controller.controller.action);

  • verb - 用户触发动作：

    • app.head - HEAD

    • app.options - OPTIONS

    • app.get - GET

    • app.put - PUT

    • app.post - POST

    • app.patch - PATCH

    • app.delete - DELETE

    • app.del - delete方法的别名

    • app.redirect - 重定向

  • router-name - 路由别名

  • path-match - 路由 URL 路径

  • middleware1, …, middlewareN - 中间件

  • controller - 控制器

  我们在编写 API 的时候通常遵循 restful 设计风格。REST（即Representational State Transfer），翻译为“表现层状态转化”。因为HTTP协议是一个无状态协议，这意味着，所有的状态都保存在服务器端。因此，如果客户端想要操作服务器，必须通过某种手段，让服务器端发生”状态转化”（State Transfer）。而这种转化是建立在表现层之上的，所以就是”表现层状态转化”。客户端用到的手段，只能是HTTP协议。具体来说，就是HTTP协议里面，四个表示操作方式的动词：GET、POST、PUT、DELETE。它们分别对应四种基本操作：GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源。

  Egg.js对RESTful路由定义做了简化，在构建restful API时很有优势。如果想通过 RESTful 的方式来定义路由， 可以使用app.resources('routerName', 'pathMatch', controller)快速在一个路径上生成 CRUD 路由结构。例如我们在定义Blogs的API时，可以这样定义：

  app.get('/api/v1/blogs', 'v1.blogs.index'); // 获取博文列表
  app.post('/api/v1/blogs/new', 'v1.blogs.create'); // 新建博文内容
  app.get('/api/v1/blogs/:id', 'v1.blogs.show'); // 展示博文详情
  app.put('/api/v1/blogs/:id', 'v1.blogs.update'); // 更新博文内容
  app.delete('/api/v1/blogs/:id', 'v1.blogs.delete'); // 删除博文内容
  ...

  注：我们通常为了区分API的版本，可以在controller文件夹下建立一个名为v1版本号的文件夹加以区分。

  我们也可以直接使用 app.resources('blogs', '/api/v1/blogs', app.controller.v1.blogs); 即可，然后在app/controller/v1/blogs.js 里面定义预定义的方法就可以：

  exports.index = function* () {};
  exports.new = function* () {};
  exports.create = function* () {};
  exports.show = function* () {};
  exports.edit = function* () {};
  exports.update = function* () {};
  exports.destroy = function* () {};

  对应关系可以看 router mapping：

  Method	Path	Route Name	Controller.Action
  GET	/posts	posts	app.controller.posts.index
  GET	/posts/new	new_post	app.controller.posts.new
  GET	/posts/:id	post	app.controller.posts.show
  GET	/posts/:id/edit	edit_post	app.controller.posts.edit
  POST	/posts	posts	app.controller.posts.create
  PUT	/posts/:id	post	app.controller.posts.update
  DELETE	/posts/:id	post	app.controller.posts.destroy

  RESTful路由关键在于约定，当我们定义好了router，接下来就是去实现controller里面的方法。

  Controller 控制器

  简单的说 Controller 负责解析用户的输入，处理后返回相应的结果。在 RESTful 接口中，Controller 接受用户的参数，从数据库中查找内容返回给用户或者将用户的请求更新到数据库中。在 HTML 页面请求中，Controller 根据用户访问不同的 URL，渲染不同的模板得到 HTML 返回给用户。在代理服务器中，Controller 将用户的请求转发到其他服务器上，并将其他服务器的处理结果返回给用户。

  Controller 有两种写法，Controller 方法和Controller 类。Controller 方法不推荐使用，只是为了兼容。每一个 Controller 都是一个 generator function，它的 this 指向请求的上下文 Context 对象的实例，通过它我们可以拿到框架封装好的各种便捷属性和方法。例如：

  exports.index = function* () {
    this.body = 'hello egg.js';
    this.status = 200;
  };

  也可以将上下文Context作为参数ctx传入，通过ctx对象调用Context的方法，我们可以将ctx在页面展示出来this.body = this，然后可以看看上下文Context对象有哪一些属性方法。

  官方推荐按照类的方式编写 Controller，不仅可以让我们更好的对 Controller 层代码进行抽象（例如将一些统一的处理抽象成一些私有方法），还可以通过自定义 Controller 基类的方式封装应用中常用的方法。

  // app/controller/v1/user.js
  module.exports = app => {
    return class UserController extends app.Controller {
      * index() {
        this.ctx.body = this;
      }
    };
  };

  框架中内置的一些基础对象，包括从 Koa 继承而来的 4 个对象（Application, Context, Request, Response) 以及框架扩展的一些对象（Controller, Service, Helper, Config, Logger）。

  app对象指的是 Koa 的全局应用对象，全局只有一个，在应用启动时被创建，有三种访问方式：

  • ctx.app.

  • Controller，Middleware，Helper，Service 中都可以通过 this.app 访问到 Application 对象，例如 this.app.config 访问配置对象。

  • 在 app.js 中 app 对象会作为第一个参数注入到入口函数中。

  // app.js
  module.exports = app => {
    // 使用 app 对象
  };

  其他对象类似，在此不做赘述，详细看文档介绍：框架内置基础对象。

  HTTP 请求过程通常会传递参数，主要分为以下几种方式：

  • 获取 URL Query String，可以通过context.query拿到解析过后的这个参数体。

  • 获取 Router params，这些参数都可以通过 context.params 。

  • 获取 HTTP 请求报文 body，可以通过 context.request.body 。

  • 获取上传的文件，可以通过 context.getFileStream*()接口。

  • 获取 header 参数，可以通过

    context.headers，context.header，context.request.headers，context.request.header 获取整个 header 对象，context.get(name)，context.request.get(name)：获取请求 header 中的一个字段的值，如果这个字段不存在，会返回空字符串。

  • 管理 Cookie，服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保存，并在下次请求同一个服务的时候带上（浏览器也会遵循协议，只在访问符合 Cookie 指定规则的网站时带上对应的 Cookie 来保证安全性）。context.cookies，我们可以在 Controller 中便捷、安全的设置和读取 Cookie。

  • 通过 context.session 来访问或者修改当前用户 Session。

  Egg.js 框架内置了 CSRF 防范方案，默认是开启状态，为了方便接口调用，我们这里选择关闭，通过
  设置白名单的方式访问接口。

  {app_root}/config/config.default.js填加配置:

  config.security = {
    csrf: {
      enable: false,
    },
    domainWhiteList: [ 
      'http://127.0.0.1:8080',
      'http://localhost:8080',
    ],
  };

  我们前端工程可以在通过8080端口访问，下面我们接着写我们的控制器逻辑。

  我们这里以新建用户为例说明。我们需要输入用户名和密码，然后通过POST提交信息注册用户。在获取到用户请求的参数后，不可避免的要对参数进行一些校验。这里我们通过egg-validate插件进行校验。

  安装：

  npm i egg-validate --save

  配置{app_root}/config/plugin.js：

  exports.validate = {
    enable: true,
    package: 'egg-validate',
  };

  // {app_root}/app/controller/v1/user.js
  
  'use strict';
  
  const bcrypt = require('bcrypt');
  
  module.exports = app => {
    return class UserController extends app.Controller {
      * create() {
        const ctx = this.ctx;
        let { name, password } = ctx.request.body;
        // 校验参数 
        try {
          ctx.validate({
            name: { type: 'string' },
            password: { type: 'string' },
          });
        } catch (err) {
          ctx.logger.warn(err.errors);
          ctx.body = err.errors;
          return;
        }
        // 密码加密
        let salt = bcrypt.genSaltSync(10);   
        password = bcrypt.hashSync('password', salt);
        ctx.body = {
          name,
          password
        };
        // service 服务层处理
        // ctx.body = yield ctx.service.user.create({
        //     name,
        //     password
        // });
        ctx.status = 200;
      }
    };
  };

  这里我使用 Postman 调试接口，很明显我们的密码使用bcrypt模块加密。

  很显然我们不可能都是输出固定内容，我们需要操作数据库，在 Controller中调用service层操作数据库。

  Service 服务

  Service 就是在复杂业务场景下用于做业务逻辑封装的一个抽象层，提供这个抽象有以下几个好处：

  • 保持 Controller 中的逻辑更加简洁。

  • 保持业务逻辑的独立性，抽象出来的 Service 可以被多个 Controller 重复调用。

  • 将逻辑和展现分离，更容易编写测试用例

  下面我们开始介绍数据库的基本操作，这里以MongoDB数据库为例加以说明。我们首先要在本地环境安装好MongoDB数据库，不熟悉的可以看一下我之前的一篇文章：node学习之路（二）—— Node.js 连接 MongoDB。

  启动数据库后，我们接下来继续在 egg 工程中进行，我们需要下载 egg-mongoose 插件，官方地址 => egg-mongoose。

  npm i egg-mongoose --save

  配置{app_root}/config/plugin.js：

  exports.mongoose = {
    enable: true,
    package: 'egg-mongoose',
  };

  配置{app_root}/config/config.default.js:

  module.exports = appInfo => {
    const config = {};
  
    // mongodb config
    config.mongoose = {
      url: 'mongodb://127.0.0.1/zhaomenghuan',
      options: {},
    };
  
    return config;
  };

  mongoose 是个 odm，odm 的概念对应 sql 中的 orm。orm 全称是 Object-Relational Mapping，对象关系映射；而 odm 是 Object-Document Mapping，对象文档映射。

  mongoose 官方文档：http://mongoosejs.com/

  我们在app目录下建立一个model文件夹用于定义schema，建立一个service文件夹用户管理后端数据库操作。

  {app_root}/app/model/user.js：

  'use strict';
  
  module.exports = app => {
    const mongoose = app.mongoose;
  
    const UserSchema = new mongoose.Schema({
      name: {
        type: String,
        unique: true, // 不可重复约束
        require: true // 不可为空约束
      },
      password: {
        type: String,
        require: true // 不可为空约束
      }
    });
  
    return mongoose.model('User', UserSchema);
  };

  {app_root}/app/service/user.js：

  'use strict';
  
  module.exports = app => {
    class UserService extends app.Service {
      * create(options) {
        const ctx = this.ctx;
        let result = yield new ctx.model.User(options).save();
        return result;
      }
    }
    return UserService;
  };

  可以通过 Robomongo 查看数据库存的内容：

  这里只是讲解了数据库操作，RESTful API 基本设计，很有很多内容有待我们去实现。

  Linux 云服务器搭建部署 Node 服务

  当我们的系统开发完之后，我们需要部署到服务器上使用，目前主流的云主机是Linux，Linux 部署代码的基本技能需要掌握，大家可以看看我之前的一篇文章：Linux CentOS7 搭建node服务详细教程，主要涉及下面几方面的内容：

  • 登录Linux云服务器

  • Linux 系统目录结构

  • Linux 文件基本属性

  • Linux 文件与目录管理

  • Linux 磁盘管理

  • Linux vim

  • Linux Yum 包管理器

  • 安装及启动nginx

  • Linux 源码编译安装node.js

  • 通过Filezilla 进行文件上传下载

  • Linux Nginx ssl证书部署

  • Linux node服务nginx配置

  • Linux 安装 MongDB 数据库

  这里不做重复赘述，只说明一下我们部署代码的时候可以使用如下脚本部署：

  // ssh 登录
  ssh xxxxxxx C:/Users/Administrator/.ssh/id_rsa
  // 设置 node 环境变量
  export PATH=/opt/node-v7.7.4-linux-x64/bin/:$PATH
  // 服务端目录 
  cd /var/www
  // 从 git 仓库拉资源
  git pull origin master
  // 启动
  npm start

  对于前端而言配置 nginx，部署环境，掌握基本的 Linux 操作还是很有必要的，这里只是抛砖引玉，希望共同进步。

  参考

  • Custom Elements 中文规范
  • Web Components 可用性调研
  • 跟 Web Components 打个啵
  • lavas PWA 文档
  • Google Web Fundamentals
  • Node.js+MongoDB对于RestfulApi中用户token认证实践

  ---

  实录：《赵梦欢：Vue.js + Node.js 入门实战解析》

  ---

  

  你可能感兴趣的:(前端)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p

  按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

  首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

  版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.