js代码片段

{
  "serizlize": {
    "prefix": "seri",
    "body": "serialize"
  },
  "bodyParser": {
    "prefix": "body-parser",
    "body": [
      "const bodyParser = require('body-parser');",
      "app.use(bodyParser.urlencoded({extended:false}));"
    ]
  },
  "art-template": {
    "prefix": "art",
    "body": [
      "//告诉express框架模板所在的位置",
      "app.set('views',path.join(__dirname,'views'));",
      "//告诉express框架模板的默认后缀是什么",
      "app.set('view engine','art');",
      "//当渲染后缀为art的模板时，所使用的模板引擎是什么",
      "app.engine('art',require('express-art-template'));"
    ]
  },
  "console.log": {
    "prefix": "clg",
    "body": [
      "console.log($1)"
    ]
  },
  "e.stop": {
    "prefix": "e.stop",
    "body": "e.stopPropagation()"
  },
  "enctype": {
    "prefix": "enctype",
    "body": "'application/x-www-form-urlencoded'"
  },
  "react": {
    "prefix": "react",
    "body": [
      "import React,{Component} from 'react'
",
      "export default class $1 extends Component{
",
      "  constructor(){
",
      "    super()
",
      "    this.state = {}
",
      "  }
",
      "  render(){
",
      "    return (
",
      "      <div>$1</div>
",
      "    )
",
      "  }
",
      "} "
    ],
    "description": "react"
  },
  "Mongoose Connect": {
    "prefix": "mongo",
    "body": [
      "//连接mongodb数据库",
      "const mongoose = require("mongoose");",
      "mongoose",
      "  .connect('mongodb://localhost/${1:数据库的名字}',{useNewUrlParser: true,useUnifiedTopology:true})",
      "  .then(() => console.log("数据库连接成功"))",
      "  .catch(err => console.log("数据库连接失败"));"
    ],
    "description": "mongodb连接数据库"
  },
  "schema": {
    "prefix": "jihe",
    "body": [
      "//集合规则",
      "var guize = new mongoose.Schema({",
      "	name:String,",
      "	age:Number",
      "});",
      "",
      "//创建文档的构造函数,前后两个单词规范的写法都是首字母大写",
      "//mongoose的实现方式：当你根据如下的构造函数创建文档对象的时候，在数据库中的集合自动会有一个persons的集合",
      "const Person = mongoose.model('Person',guize);"
    ]
  },
  "qs": {
    "prefix": "qs",
    "body": [
      "document.querySelector('${2:selector}')"
    ]
  },
  "qsa": {
    "prefix": "qsa",
    "body": [
      "document.querySelectorAll('${2:selector}')"
    ]
  },
  "xyljq": {
    "prefix": "xyljq",
    "description": "",
    "body": [
      "//axios响应拦截器",
      "axios.interceptors.response.use(function(res){",
      "	return res;//响应回来的数据",
      "},function(error){",
      "	console.log(error)",
      "})"
    ]
  },
  "qqljq": {
    "prefix": "qqljq",
    "description": "",
    "body": [
      "//axios请求拦截器",
      "axios.interceptors.request.use(function(config){",
      "	return config;//请求头配置项",
      "},function(error){",
      "	console.log(error)",
      "})"
    ]
  },
  "requiredfield": {
    "prefix": "required_field",
    "body": [
      "{required:true,message:'请输入',trigger:'blur'}"
    ]
  },
  "id": {
    "prefix": "gid",
    "body": "document.getElementById('$1')"
  },
  "tag": {
    "prefix": "gtag",
    "body": "document.getElementsByTagName('$1')"
  },
  "ajax": {
    "prefix": "$.ajax",
    "body": [
      "$.ajax({",
      "	type:'${1:get}',",
      "	url:'$2',",
      "	success:function(res){",
      "		$3",
      "	}",
      "})"
    ]
  },
  "mysql_lianjie": {
    "prefix": "mysql_lianjie",
    "body": [
      "const mysql = require('mysql')",
      "const db = mysql.createPool({",
      "	host:'127.0.0.1',//数据库的ip地址",
      "	user:'root',//登录数据库的账号",
      "	password:'admin123',//登录数据库的密码",
      "	database:'$1'//指定要操作哪个数据库",
      "})"
    ]
  },
  "express": {
    "prefix": "express",
    "description": "",
    "body": [
      "const express = require('express')",
      "const app = express()",
      "",
      "app.listen(80,()=>{",
      "    console.log('服务器创建成功,运行在http://127.0.0.1')",
      "})",
      "",
      ""
    ]
  },
  "fwq": {
    "prefix": "fwq",
    "description": "",
    "body": [
      "const express = require('express')",
      "const app = express()",
      "",
      "app.listen(80,()=>{",
      "    console.log('服务器创建成功,运行在http://127.0.0.1')",
      "})",
      ""
    ]
  },
  "sjk": {
    "prefix": "sjk",
    "description": "",
    "body": [
      "const mysql = require('mysql')",
      "var db = mysql.createPool({",
      "    host:'127.0.0.1',",
      "    user:'root',",
      "    password:'',",
      "    database:''",
      "})",
      ""
    ]
  },
  "baocuo": {
    "prefix": "baocuo",
    "description": "",
    "body": [
      "if (res.meta.status !== 200) return this.$$message.error('获取失败')"
    ]
  },
  "http": {
    "prefix": "http",
    "description": "",
    "body": [
      "const {data:res} = await this.$$http.get('')",
      "if (res.meta.status !== 200) return this.$$message.error('获取数据失败')",
      ""
    ]
  },
  "node_day1_shizhong": {
    "prefix": "node_day1_shizhong
",
    "description": "",
    "body": [
      "/* eslint-disable */
",
      "
",
      "/* eslint-disable */
",
      "
",
      "// 1.1 导入 fs 模块
",
      "const fs = require('fs')
",
      "// 1.2 导入 path 模块
",
      "const path = require('path')
",
      "
",
      "// 1.3 定义正则表达式，分别匹配 <style></style> 和 <script></script> 标签
",
      "const regStyle = /<style>[\s\S]*<\/style>/
",
      "const regScript = /<script>[\s\S]*<\/script>/
",
      "
",
      "// 2.1 调用 fs.readFile() 方法读取文件
",
      "fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr) {
",
      "  // 2.2 读取 HTML 文件失败
",
      "  if (err) return console.log('读取HTML文件失败！' + err.message)
",
      "  // 2.3 读取文件成功后，调用对应的三个方法，分别拆解出 css, js, html 文件
",
      "  resolveCSS(dataStr)
",
      "  resolveJS(dataStr)
",
      "  resolveHTML(dataStr)
",
      "})
",
      "
",
      "// 3.1 定义处理 css 样式的方法
",
      "function resolveCSS(htmlStr) {
",
      "  // 3.2 使用正则提取需要的内容
",
      "  const r1 = regStyle.exec(htmlStr)
",
      "  // 3.3 将提取出来的样式字符串，进行字符串的 replace 替换操作
",
      "  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
",
      "  // 3.4 调用 fs.writeFile() 方法，将提取的样式，写入到 clock 目录中 index.css 的文件里面
",
      "  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
",
      "    if (err) return console.log('写入 CSS 样式失败！' + err.message)
",
      "    console.log('写入样式文件成功！')
",
      "  })
",
      "}
",
      "
",
      "// 4.1 定义处理 js 脚本的方法
",
      "function resolveJS(htmlStr) {
",
      "  // 4.2 通过正则，提取对应的 <script></script> 标签内容
",
      "  const r2 = regScript.exec(htmlStr)
",
      "  // 4.3 将提取出来的内容，做进一步的处理
",
      "  const newJS = r2[0].replace('<script>', '').replace('</script>', '')
",
      "  // 4.4 将处理的结果，写入到 clock 目录中的 index.js 文件里面
",
      "  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
",
      "    if (err) return console.log('写入 JavaScript 脚本失败！' + err.message)
",
      "    console.log('写入 JS 脚本成功！')
",
      "  })
",
      "}
",
      "
",
      "// 5.1 定义处理 HTML 结构的方法
",
      "function resolveHTML(htmlStr) {
",
      "  // 5.2 将字符串调用 replace 方法，把内嵌的 style 和 script 标签，替换为外联的 link 和 script 标签
",
      "  const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
",
      "  // 5.3 写入 index.html 这个文件
",
      "  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
",
      "    if (err) return console.log('写入 HTML 文件失败！' + err.message)
",
      "    console.log('写入 HTML 页面成功！')
",
      "  })
",
      "}
",
      ""
    ]
  },
  "node_day01_shizhong": {
    "prefix": "node_day01_shizhong
",
    "description": "",
    "body": [
      "/* eslint-disable */
",
      "
",
      "// 1.1 导入 http 模块
",
      "const http = require('http')
",
      "// 1.2 导入 fs 模块
",
      "const fs = require('fs')
",
      "// 1.3 导入 path 模块
",
      "const path = require('path')
",
      "
",
      "// 2.1 创建 web 服务器
",
      "const server = http.createServer()
",
      "// 2.2 监听 web 服务器的 request 事件
",
      "server.on('request', (req, res) => {
",
      "  // 3.1 获取到客户端请求的 URL 地址
",
      "  //     /clock/index.html
",
      "  //     /clock/index.css
",
      "  //     /clock/index.js
",
      "  const url = req.url
",
      "  // 3.2 把请求的 URL 地址映射为具体文件的存放路径
",
      "  // const fpath = path.join(__dirname, url)
",
      "  // 5.1 预定义一个空白的文件存放路径
",
      "  let fpath = ''
",
      "  if (url === '/') {
",
      "    fpath = path.join(__dirname, './clock/index.html')
",
      "  } else {
",
      "    //     /index.html
",
      "    //     /index.css
",
      "    //     /index.js
",
      "    fpath = path.join(__dirname, '/clock', url)
",
      "  }
",
      "
",
      "  // 4.1 根据“映射”过来的文件路径读取文件的内容
",
      "  fs.readFile(fpath, 'utf8', (err, dataStr) => {
",
      "    // 4.2 读取失败，向客户端响应固定的“错误消息”
",
      "    if (err) return res.end('404 Not found.')
",
      "    // 4.3 读取成功，将读取成功的内容，响应给客户端
",
      "    res.end(dataStr)
",
      "  })
",
      "})
",
      "// 2.3 启动服务器
",
      "server.listen(80, () => {
",
      "  console.log('server running at http://127.0.0.1')
",
      "})
",
      ""
    ]
  },
  "node_express_zhongjianjian": {
    "prefix": "node_express_zhongjianjian",
    "description": "",
    "body": [
      "中间件的分类：",
      "1. 应用级别的中间件",
      "2. 路由级别的中间件",
      "3. 错误级别的中间件",
      "4. express内置的中间件",
      "    + express.static",
      "    + express.json",
      "    + express.urlencoded",
      "5. 第三方的中间件",
      "",
      ""
    ]
  },
  "node_kuayu": {
    "prefix": "node_kuayu",
    "description": "",
    "body": [
      "Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、",
      "Content-Type （值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded ",
      "",
      "Access-Control-Allow-Origin ",
      "Access-Control-Allow-Headers ",
      "Access-Control-Allow-Methods ",
      "",
      "简单请求：",
      "1. 同时满足以下两大条件的请求，就属于简单请求：",
      "    + 请求方式：GET、POST、HEAD 三者之一",
      "    + HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、",
      "    Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-form-",
      "    urlencoded、multipart/form-data、text/plain）",
      "2. 简单请求的特点：客户端与服务器之间只会发生一次请求",
      "",
      "",
      "预检请求",
      "只要符合以下任何一个条件的请求，都需要进行预检请求：",
      "1. 请求方式为 GET、POST、HEAD 之外的请求 Method 类型",
      "2. 请求头中包含自定义头部字段",
      "3. 向服务器发送了 application/json 格式的数据",
      "在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一",
      "次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据",
      "预检请求的特点：OPTION 预检请求成功之后，才会发起真正的请求。",
      "",
      "jsonp ",
      "浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据",
      "的方式叫做 JSONP",
      "特点：JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求",
      "",
      ""
    ]
  },
  "node_shujukugainian": {
    "prefix": "node_shujukugainian",
    "description": "",
    "body": [
      "在传统型数据库中，数据的组织结构分为数据库(database)、数据表(table)、数据行(row)、字段(field)这 4 大部分组成",
      "",
      ""
    ]
  },
  "node_day_xuanruan": {
    "prefix": "node_day_xuanruan",
    "description": "",
    "body": [
      "服务端渲染的优缺点",
      "优点：",
      "前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电。",
      "有利于SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于",
      "",
      ".缺点：",
      "占用服务器端资源。即服务器端完成 HTML 页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力。",
      "不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度高的项目，不利于",
      "项目高效开发。",
      "",
      "",
      "前后端分离的 Web 开发模式",
      "前后端分离的概念：前后端分离的开发模式，依赖于 Ajax 技术的广泛应用。即后端不提供完整的 HTML 页面内容，而",
      "是提供一些 API 接口，使得前端可以获取到 json 数据；然后前端通过 Ajax 调用后端提供的 API 接口，拿到 json 数据",
      "之后再在前端进行 HTML 页面的拼接，最终展示在浏览器上",
      "简而言之，前后端分离的 Web 开发模式，就是后端只负责提供 API 接口，前端使用 Ajax 调用接口的开发模式。",
      "",
      "前后端分离的优缺点",
      "",
      "优点",
      "开发体验好。前端专注于 UI 页面的开发，后端专注于api 的开发，且前端有更多的选择性。",
      "用户体验好。Ajax 技术的广泛应用，极大的提高了用户的体验，可以轻松实现页面的局部刷新。",
      "减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的",
      "",
      "缺点 ",
      "不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成，所以爬虫对无法爬取页面的有效信息。（解决方",
      "案：利用 Vue、React 等前端框架的 SSR （server side render）技术能够很好的解决 SEO 问题",
      ""
    ]
  },
  "node_http_xieyi": {
    "prefix": "node_http_xieyi
",
    "description": "",
    "body": [
      "/* eslint-disable */
",
      "
",
      "# http协议
",
      "- 二台电脑 一台是客户端 一台是服务器 客户端和服务器在通信
",
      "- 本质就是二台电脑在交互
",
      "- 提前规定好了什么东西代表，有一套规范在里面，必须严格按这个规范来传递消息，要不然双方不知道对方在说什么
",
      "    1. 提前规定好
",
      "    2. 严格按这个格式去发消息
",
      "- http协议
",
      "    + 传的是超文本的东西 只有文本、还有图片、视频、音频
",
      "        + 超文本 html
",
      "- http协议
",
      "    + 客户端向服务器传递东西 请求相关的东西 请求报文
",
      "    + 服务器向客户端传递的东西 响应相关的东西 响应报文
",
      "- 报文不能随便写 格式严格提前约定好
",
      "- 所谓掌握http协议指的就是了解请求报文格式、响应报文格式长什么样子
",
      "- 想办法看原始报文
",
      "    + 请求报文
",
      "        + 请求行
",
      "            + 请求方式(get,post) url 协议版本(http1.1)
",
      "        + 请求头
",
      "            + 组成格式是：键:值
",
      "            + Content-Type:
",
      "                + 告诉服务器请求体的格式长什么样子 
",
      "                    + application/x-www-form-urlencoded 打包成一个整体
",
      "                    + multipart/form-data 一个一个发送 
",
      "        + 请求体
",
      "            + 只有post才会请求体
",
      "            + 就是查询参数
",
      "            + xhr.send('username=zs&age=20')
",
      "    + 响应报文
",
      "        + 状态行
",
      "            + 状态码
",
      "                电脑出问题了 黑屏 按电源键 主板坏了 响一声 二声 
",
      "                有 200 没有 404  
",
      "                200 成功
",
      "                404 找不到
",
      "                500 服务器出问题 
",
      "                304 走缓存
",
      "                
",
      "        + 响应头
",
      "            + 告诉客户端这个数据是什么类型的数据
",
      "        + 响应体
",
      "            + html代码、css代码\图片、ajax返回的数据
",
      "
",
      "    + 请求头可以用来告诉服务器请求体的数据长什么样子的
",
      "    + 响应头是用来告诉客户端响应体数据长什么样子的
",
      "
",
      ""
    ]
  },
  "error": {
    "prefix": "error_msg",
    "description": "",
    "body": [
      "if(res.meta.status !== 200)return this.$$message.error('$1')"
    ]
  }
}