Node.js、NPM、WebPackage、ES6、Swagger、Mock.js/EasyMock、Nuxt.js、Axios、Share.js、正则表达式

WEB前端技术栈

一、Node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。简单的说就是运行在服务端的JavaScript,可以实现类似于Spring MVC /Servlet这些服务端代码。
(官网下载左边稳定版,一直默认,node -v校验)
可以用于前端,但是也能搞后端,多用于模块化编程(http、Buffer)。

//exports开放方法
exports.add = function(a,b){
    return a+b;
}
//require相当于import,引入test1中的add()方法
var test2 = require('./test2');
var result = test2.add(1,2);
conlose.log(result);

二、NPM

npm类似于maven处理Java的依赖,而npm处理的是js依赖。Node.js内置了NPM

  • cmd + npm init
    创建一个npm项目(一般放没有中文的根目录下),生成package.json
  • npm install xxx [-g]
    默认为当前文件夹,-g表述下载在整个计算机
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
    下载慢改用国内镜像,之后改用cnpm命令
  • npm install
    当获取项目时,会根据里面的package.json自动下载对应的js,其中的dependencies如下
  "dependencies": {
    "JSONStream": "^1.3.5", // 下载1.x.x(x为最大版本)
    "abbrev": "~1.1.1", // 下载1.1.x(x为最大版本)
    "ansicolors": "0.3.2" // 下载指定版本,lastest为最大版本
  }      
  • npm run serve
    运行项目
  • 注:公司里面一般都有自己的镜像,里面会修改一些js网上拉取不到的

三、webpackage

webpage用于打包,将js、css等静态资源和代码进行压缩成一行,从而提高性能

  • cnpm install webpack -g
    cnpm install webpack-cli -g
    webpack -v测试成功性

PS:以下了解就够了,一般项目都配好了:

  • npm install style-loader css-loader --save -dev
    webpack本身只能给js打包,如果css,图片等其他静态资源打包,需要安装此插件
  • webpack-dev-server
    自动将打包后的boundle.js加载到内存中。使用时,直接在当前目录中引用<script src="bundle.js"></script>。热更新,速度快。
    一般可以配置在package.json中:

    "scripts":{
        "dev" : "webpack-dev-server --contentBase src"
    },
    
    npm run dev    

四、ES6

ESMAScript6.0 是一套规范(2015年产生); javascript是ESMAScript的具体实现; NodeJs是javascript的脚本库.

NodeJs支持大部分的ESMAScript6.0 标准, 个别不支持的需要回退5.0版本,NodeJS会通过转换器自动搞定。

PS:一般拉取的项目都配好了,了解就行:

  • 下载转换器,配置
    cnpm install babel-preset-es2015 --save-dev
.babelrc
{
    "presets":['es2015']
}
  • 安装命令行工具,若遇到不支持ES6要切换使用babel-node xxx.js
    cnpm install babel-cli -g

常用方法:

var全局、let局部、const常量


占位符/模板字符串(``支持直接换行)
alter('zs's age = ' + age)
alter(`zs's age = ${age}`)


函数默认参数值
function test(num=99){
    alter(num)
}
test(100) //100
test() //99,若不定义num=99则输出undefined


var name = person.name 
var age = person.age 
//相当于
var {name,age} = person 


let student = {name:'zs', age :23}
let student2 = {...student, height:170}
//相当于
let student2 = {name:'zs', age :23, height:170}


var sum = (num1, num2) => (num1 + num2)
//相当于
var sum = function(num1, num2) {
  return num1 + num2;
};


//类Lamdba表达式
queryStudents = students.filter(
  stu => stu.name.indexOf(queryname) > -1
)

五、Swagger

Swagger是RESTful风格的 Web 服务框架。主要是用于前端人员编写相关API接口文档,后端人员根据文档进行开发,从而实现先后端分离的交互开发。

  • 安装方法:

    • 前端人员可以去官网swagger下载Swagger Editor进行数据编辑,安装完在package.json目录执行一下npm install下载相关依赖。
      也可以直接在官网进行在线编辑,编辑后导出即可
    • 后端人员则下载Swagger UI进行查看,将下载后的Swagger UI文件夹中的dist目录中的全部文件拷到Nginx(没有另下)的html目录底下,在start nginx.exe运行即可

参考模板:

swagger: '2.0'
info:
  version: "1.0.0"
  title: 基础模块-学校API
host: api.lanqiao.com
basePath: /base
paths:
  /school:
    post:
      summary: 新增学校
      parameters:
        -
          name: body
          in: body
          description: 学校实体类
          required: true
          schema:
            $ref: '#/definitions/School'
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiResponse'
    get:
      summary: 返回学校列表
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiCityListResponse'      
  /school/{cityId}:
    put:
      summary: 修改学校
      parameters:
        - name: cityId
          in: path
          description: 学校ID
          required: true
          type: string
        - name: body
          in: body
          description: 学校实体类
          required: true
          schema:
            $ref: '#/definitions/School'
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiResponse'
    delete:
      summary: 删除学校
      parameters:
        - name: cityId
          in: path
          description: 学校ID
          required: true
          type: string      
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiResponse'
    get:
      summary: 根据ID查询学校
      parameters:
        - name: cityId
          in: path
          description: 学校ID
          required: true
          type: string  
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiCityResponse'
  /school/search:
    post:
      summary: 根据条件查询学校列表 
      parameters:
        - name: body
          in: body
          description: 学校实体类
          required: true
          schema:
            $ref: '#/definitions/School'
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiCityListResponse'
  /school/search/{page}/{size}:
    post:
      summary: 根据条件查询学校列表 
      parameters:
        - name: page
          in: path
          description: 页码
          required: true
          type: integer
          format: int32
        - name: size
          in: path
          description: 页大小
          required: true
          type: integer
          format: int32          
        - name: body
          in: body
          description: 学校实体类
          required: true
          schema:
            $ref: '#/definitions/School'
      responses:
        200:
          description: 成功响应
          schema:
            $ref: '#/definitions/ApiCityPageResponse'    
definitions:
  School: 
    type: object
    properties:
      id:
        type: string
        description: ID
      name:
        type: string
        description: 学校名称
      ishot:
        type: string
        description: 是否热门 
  ApiResponse:
    type: object
    properties:
      flag:
        type: boolean
        description: 是否成功
      code:
        type: integer
        format: int32
        description: 返回码
      message:
        type: string
        description: 返回信息
  ApiCityResponse:
    type: object
    properties:
      flag:
        type: boolean
        description: 是否成功
      code:
        type: integer
        format: int32
        description: 返回码
      message:
        type: string
        description: 返回信息
      data:
        $ref: '#/definitions/School'
  CityList:
    type: array
    items: 
        $ref: '#/definitions/School'
  ApiCityListResponse:
    type: object
    properties:
      flag:
        type: boolean
        description: 是否成功
      code:
        type: integer
        format: int32
        description: 返回码
      message:
        type: string
        description: 返回信息
      data:
        $ref: '#/definitions/CityList' 
  ApiCityPageResponse:
    type: object
    properties:
      flag:
        type: boolean
        description: 是否成功
      code:
        type: integer
        format: int32
        description: 返回码
      message:
        type: string
        description: 返回信息
      data:
        properties:
          total:
            type: integer
            format: int32
          rows:
            $ref: '#/definitions/CityList' 

六、Mock.js / EasyMock

通过URL访问随机返回各种数据,从而模拟各种场景。

  • 全局安装
    cnpm install mockjs -g

主要还是直接下载EasyMock这个模拟测试辅助工具来生成假数据,也可以直接在网页端操作。

.env.development下修改数据源:
VUE_APP_BASE_API=EasyMock_URL

EasyMock中get的URL也不能传递参数,只能带方法名

DTD:数据模板定义规范

let mymock = require('mockjs');

let pers  = mymock.mock({
    'persons|1-6' :[{
        'id|+10':1,
        'name|2-5':'zs',
        'age|18-60':0 ,
        'height|160-180.2':0 ,
        'weight|50-100.2-4':0,
        'sex|2-3':true ,
        
        'address|1-3':{'homeaddress':'西安','schooladdress':'北京','workaddress':'泸州'}
    }]
});

console.log(JSON.stringify(pers ,null, 2));

DPD:数据占位符定义规范
魔法值

七、NuxtJS

nuxt最主要的就是服务器端渲染。利用 SSR(也叫做 "universal" or "isomorphic" 模式),Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端,而不是纯 javascript。与传统的 Vue SPA 相比,使用 SSR 将带来巨大的 SEO 提升从而提高网站的搜索排名、更好的用户体验和更多的机会(因为百度收录是通过爬虫来收录的,它不认识js,所以遇到ajax会自动返回)。

  • 下载:https://github.com/nuxt-community/starter-template
    进到template目录下修改package.json的{{name}},然后npm install,再npm run dev运行,通过localhost:3000访问

八、Axios

服务端向客户端的渲染,比Ajax更加简洁的异步请求。

  • 下载:cnpm install axios --save

(1)Get请求模板:

mounted() {
    axios
      .get(
        "/api/queryusertree?domId=" + this.domId + "&ownerId=" + this.ownerId,
        {
          headers: { Validate: "123456" }
        }
      )
      .then(response => {
     //注意response.data就已经是后端传过来的数据对象了,我之所以response.data.data是因为我的后端对象的一个属性字段叫做data
        let object = response.data.data;
        let head = object;
        this.data = object.childList;
        console.log(this.data);
      })
      .catch(error => {
        console.log(error);
        alert("网络错误,不能访问");
      });
  }

(2)Get请求模板:

remove(userId) {
      let data = {
        domId: this.domId,
        ownerId: this.ownerId,
        userId: userId
      };//post传递对象到后台

      axios
        .post("/api/removedomuser", data, {
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            Validate: "123456" 
          }
        })
        .then(response => {
          let resultUtils = response.data;
          console.log(resultUtils);
        })
        .catch(error => {
          console.log(error);
          alert("网络错误,不能访问");
        });
    }

九、Share.js

分享插件,可以分享到QQ、微信、空间等等,即下即用。

参考地址:https://blog.csdn.net/liwenfei123/article/details/78952337

十、正则表达式

正则一般用到什么再去找相应的就够了,这里补充的是在业务中遇到的三种正则表达的模式。

贪婪模式非贪婪模式以及独占模式,其中前两者可以合称为非独占模式


需要注意的是,如:\abc,这种的模式界定是很模糊的。一般三方引用的校验中,无论是匹配那种模式都会默认通过。(一般是通过{}?+等特殊符号进行校验)

Last modification:January 13th, 2021 at 02:46 pm
喵ฅฅ