# echart后端node

**Repository Path**: javafdx/echart-backend-node

## Basic Information

- **Project Name**: echart后端node
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-12
- **Last Updated**: 2021-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### node版本在7.6以上
### 安装koa
    npm init -y
    npm install koa
    创建app.js
### 启动
node app.js    

http://localhost:3000/

打印
/
/favicon.ico

第一行是路径
第二行是标题图标

### 目录结构
--data/  保存文件，前端需要的数据
middleware  中间件
    --koa_response_data.js  业务逻辑中间件
    --koa_response_duration.js  总耗时中间件
    --koa_response_header.js  响应头中间件
utils/ 
    --file_utils.js  快速读取文件的工具类
### 总耗时中间件
    1.第一层中间件
    2.计算执行时间
        一进入时记录开始时间
        其他所有中间件执行完后记录结束时间
        两者相减
    3.设置响应头
        X-Response-Time:5ms    

### 响应头中间件
    1.第二层中间件
    2.获取mime类型
        application/json
    3.设置响应头
        Content-Type:application/json;charset=UTF-8        

### 业务逻辑中间件
    1. 第三层中间件
    2.读取文件内容
        获取请求的路径，拼接文件路径
        读取该路径对应文件的内容
    3.设置响应体
    ctx.response.body 
### 业务逻辑
http://localhost:3000/api/map 

### 允许跨域
    1.实际上是通过ajax访问服务器
    2.同源策略
        同协议/同域名/同端口
        当前页面的地址和ajax获取数据的地址（相对比）
    3.设置响应头
    app.use(async(ctx, next) => {
        ctx.set("Access-Control-Allow-Origin", "*")
        ctx.set("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE")
        await next()
    })


### 新建vue项目
npm install @vue/cli -g   // 如果安装过脚手架，不必再次安装
vue create vision
手动选择一些特性  > Manually select features
------------------
空格选择一些插件
 Check the features needed for your project:
 ( ) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
------------------- 
是否使用历史模式的路由
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
------------------
css预处理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
----------------------
标准eslint
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier  
----------------------
保存文件的时候提示
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
------------------  
配置文件怎么处理--单独文件处理
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
-----------------  
以上的选择是否保存预设
 Save this as a preset for future projects? (y/N) n
--------------------
 npm run serve


 ### git删除已经 add 的文件
 git rm -r --cached node_modules

 ### 引入websocket（后端）
 npm i ws -S
 ----创建对象
const WebSocket = require("ws");
const wss = new WebSocket.Server({
    port: 9998
})
----链接事件
wss.on("connection", client => {
    console.log("客户端链接...")
})
----接收数据事件
wss.on("connection", client => {
    client.on("message", msg => {
        console.log("客户端发送数据过来了")
    })
})
----发送数据
client.send('hello socket')
### WebSocket基本使用(前端)
----创建对象
const ws = new WebSocket('ws://localhost:9998')
注意：WebSocket是window对象就提供了的，因此不需要额外的包
----连接成功事件
ws.onopen
----接收数据事件
ws.onmessage
----关闭连接事件
ws.onclose
----发送数据
ws.send