vue 封裝highcharts元件

阿新 • • 發佈：2020-07-20

GraphQL 簡介

一種用於 API 的查詢語言。

GraphQL 既是一種用於 API 的查詢語言也是一個滿足你資料查詢的執行時。 GraphQL 對你的 API 中的資料提供了一套易於理解的完整描述，使得客戶端能夠準確地獲得它需要的資料，而且沒有任何冗餘，也讓 API 更容易地隨著時間推移而演進，還能用於構建強大的開發者工具。

對比 restful api:

restful —個介面只能返回一個資源, graphql 一次可以獲取多個資源。
restful 用不同的 url 來區分資源, graphql 用型別區分資源。

安裝

使用 JavaScript 語言，express node.js 框架開始。

npm install express express-graphql graphql

建立 server.js 並使用命令 node server.js 執行 demo。

const express = require('express');
const app = express();
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = { hello: () => 'Hello world!' };

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

引數型別

基本型別: String, Int, Float, Boolean, ID。
[型別]代表陣列,例如:[Int]代表整型陣列。

引數傳遞

和 JavaScript 傳遞引數一樣,小括號內定義形參,但是注意 : 引數需要定義型別。
! 歎號代表引數不能為空。

type Query {
    rollDice (numDice: Int!, numSide: Int): [Int]
}

自定義引數型別

GraphQL 允許使用者自定義引數型別,通常用來描述要獲取的資源的屬性。

type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary: (city: String): Int
}

type Query {
    account (name: string): Account
}

server.js

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  type Query {
    hello: String
    getClassMates(classNo: Int!): [String]
    account (username: String): Account
  }
`)

const root = {
  hello: () => 'Hello world!',

  getClassMates: ({ classNo }) => {
    const obj = {
      31: ['張三', '李四', '王五'],
      61: ['張大三', '李大四', '王大五'],
    }
    return obj[classNo]
  },

  account: ({ username }) => {
    const name = username
    const sex = 'nan'
    const age = 10
    const department = '開發部'
    const salary = ({ city }) => {
      if (city === '北京' || city === '上海' || city === '深圳' || city === '廣州') {
        return 10000
      }
      return 3000
    }
    return {
      name,
      sex,
      age,
      department,
      salary,
    }
  },
}

在客戶端訪問GraphQL介面

在 server.js 公開資料夾供使用者訪問靜態資源。

app.use(express.static('public'))

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="getData()">獲取資料</button>

    <script>

        function getData() {
            const query = `
                query Account ($username: String!) {
                    account(username: $username) {
                        name
                        age
                        sex
                        salary(city: "北京")
                    }
                }`

            const variables = { username: '李大四' }

            fetch('/graphql', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    query,
                    variables
                })
            })
                .then(res => res.json)
                .then(json => {
                    console.log(json)
                })
        }
    </script>
</body>
</html>

後端的 username 對應 variales 的值中的 username，和 query 中的 $username。

使用 Mutations 修改資料

不能單獨使用 Mutation, 需結合 Query。


const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  input AccountInput {
    name: String
    age: Int 
    sex: String
    department: String
    salary: Int
  }

  type Query {
    accounts: [Account]
  }

  type Mutation {
      createAccount(input: AccountInput): Account
      updateAccount(id: ID!, input: AccountInput): Account
  }
`)

// 模擬資料庫
const fakeDb = {}

const root = {
  createAccount({ input }) {
    // 模擬資料庫儲存
    fakeDb[input.name] = input
    // 返回儲存結果
    return fakeDb[input.name]
  },

  updateAccount({ id, input }) {
    // 模擬更新資料庫
    const updatedAccount = Object.assign({}, fakeDb[id], input)
    fakeDb[id] = updatedAccount
    return updatedAccount
  },

  accounts() {
    let arr = []
    for (const key in fakeDb) {
      arr.push(fakeDb[key])
    }
    return arr
  },
}

試著建立一個 account。

通過 accounts，查詢到剛剛建立的 account。

試著修改資料，我們將 age 18 改為 20，並將該 account 更改後的資訊返回。

這裡將 name 作為記錄的主鍵了。

Constructing Types

上文通過字串的形式構建 schema，還可以通過建構函式來構建。

以前：

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  type Query {
    account (username: String): Account
  }
`)

現在

const AccountType = new graphql.GraphQLObjectType({
  name: 'Account',
  fields: {
    name: {type: graphql.GraphQLString},
    age: {type: graphiql.GraphQLInt},
    sex: {type: raphql.GraphQLString},
    department: {type: graphql.GraphQLString},
  }
})

const queryType = new graphiql.GraphQLObjectType({
  name: 'Query',
  fields: {
    account: {
      type: AccountType,
      args: {
        username: {type: graphiql.GraphQLString}
      },
      resolve(_, {username}){
        const name = username
        const sex = 'nan' 
        const age = 18
        const department = '開發部'
        return {
          name,
          age,
          sex,
          department
        }
      }
    }
  }
})

const schema = new graphiql.GraphQLSchema({query: queryType})

程式碼量提升，編輯器提示，可維護性提升，報錯資訊更精準。

結合 MySql CURD

接下來需要稍作更改，拼接幾個 SQL 語句，操作資料庫。

建立資料庫 test ，表 account，並新增幾個欄位如下：

npm i mysql -S

const mysql = require('mysql')

const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'test',
})

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  input AccountInput {
    name: String
    age: Int 
    sex: String
    department: String
    salary: Int
  }

  type Query {
    accounts: [Account]
  }

  type Mutation {
      createAccount(input: AccountInput): Account
      updateAccount(id: ID!, input: AccountInput): Account
      deleteAccount(id: ID!): Boolean
  }
`)

const rootValue = {
  createAccount({ input }) {
    const data = {
      name: input.name,
      age: input.age,
      sex: input.sex,
      department: input.department,
    }

    // query 是非同步操作， 使用  promise
    return new Promise((resolve, reject) => {
      pool.query('insert into account set ?', data, err => {
        if (err) {
          console.log('出錯了' + err.message)
          return
        }
        resolve(data)
      })
    })
  },

  deleteAccount({ id }) {
    return new Promise((resolve, reject) => {
      pool.query('delete from account where id = ?', id, err => {
        if (err) {
          console.log('出錯了' + err)
          reject(false)
          return
        }
        resolve(true)
      })
    })
  },

  updateAccount({ id, input }) {
    const data = input
    return new Promise((resolve, reject) => {
      pool.query('update account set ? where id = ?', [data, id], err => {
        if (err) {
          console.log('出錯了' + err.message)
          return
        }
        resolve(data)
      })
    })
  },

  accounts() {
    return new Promise((resolve, reject) => {
      pool.query('select name, age, sex, department from account', (err, res) => {
        if (err) {
          console.log('出錯了' + err)
          return
        }
        let arr = []
        for (let i = 0; i < res.length; i++) {
          arr.push({
            name: res[i].name,
            sex: res[i].sex,
            age: res[i].age,
            department: res[i].department,
          })
        }
        resolve(arr)
      })
    })
  },
}

程式碼片段

為方便操作，我將完整程式碼片段放在最後，供你試一試。

fakeDb

const express = require('express')
const app = express()
const { graphqlHTTP } = require('express-graphql')
const { buildSchema } = require('graphql')

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  input AccountInput {
    name: String
    age: Int 
    sex: String
    department: String
    salary: Int
  }

  type Query {
    hello: String
    getClassMates(classNo: Int!): [String]
    account (username: String): Account
    accounts: [Account]
  }

  type Mutation {
      createAccount(input: AccountInput): Account
      updateAccount(id: ID!, input: AccountInput): Account
  }
`)

const fakeDb = {}

const rootValue = {
  hello: () => 'Hello world!',

  getClassMates: ({ classNo }) => {
    const obj = {
      31: ['張三', '李四', '王五'],
      61: ['張大三', '李大四', '王大五'],
    }
    return obj[classNo]
  },

  account: ({ username }) => {
    const name = username
    const sex = 'nan'
    const age = 10
    const department = '開發部'
    const salary = ({ city }) => {
      if (city === '北京' || city === '上海' || city === '深圳' || city === '廣州') {
        return 10000
      }
      return 3000
    }
    return {
      name,
      sex,
      age,
      department,
      salary,
    }
  },

  createAccount({ input }) {
    // 模擬資料庫儲存
    fakeDb[input.name] = input
    // 返回儲存結果
    return fakeDb[input.name]
  },

  updateAccount({ id, input }) {
    // 模擬更新資料庫
    const updatedAccount = Object.assign({}, fakeDb[id], input)
    fakeDb[id] = updatedAccount
    return updatedAccount
  },

  accounts() {
    let arr = []
    for (const key in fakeDb) {
      arr.push(fakeDb[key])
    }
    return arr
  },
}

// 公開資料夾  供使用者訪問靜態資源
app.use(express.static('public'))

// const middleware = (req, res, next) => {
//   // console.log(req.headers.cookie)
//   if (req.url.indexOf('/graphql') !== -1) {
//     res.send(
//       JSON.stringify({
//         error: '您沒有權訪問這個介面',
//       })
//     )
//     return
//   }
//   next()
// }

// app.use(middleware)

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue,
    graphiql: true,
  })
)

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'))

MySQL

const express = require('express')
const app = express()
const { graphqlHTTP } = require('express-graphql')
const { buildSchema } = require('graphql')
const mysql = require('mysql')
const { resolve } = require('path')

const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'test',
})

const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    sex: String
    department: String
    salary(city: String): Int
  }

  input AccountInput {
    name: String
    age: Int 
    sex: String
    department: String
    salary: Int
  }

  type Query {
    hello: String
    getClassMates(classNo: Int!): [String]
    account (username: String): Account
    accounts: [Account]
  }

  type Mutation {
      createAccount(input: AccountInput): Account
      updateAccount(id: ID!, input: AccountInput): Account
      deleteAccount(id: ID!): Boolean
  }
`)

const rootValue = {
  hello: () => 'Hello world!',

  getClassMates: ({ classNo }) => {
    const obj = {
      31: ['張三', '李四', '王五'],
      61: ['張大三', '李大四', '王大五'],
    }
    return obj[classNo]
  },

  account: ({ username }) => {
    const name = username
    const sex = 'nan'
    const age = 10
    const department = '開發部'
    const salary = ({ city }) => {
      if (city === '北京' || city === '上海' || city === '深圳' || city === '廣州') {
        return 10000
      }
      return 3000
    }
    return {
      name,
      sex,
      age,
      department,
      salary,
    }
  },

  accounts() {
    return new Promise((resolve, reject) => {
      pool.query('select name, age, sex, department from account', (err, res) => {
        if (err) {
          console.log('出錯了' + err)
          return
        }
        let arr = []
        for (let i = 0; i < res.length; i++) {
          arr.push({
            name: res[i].name,
            sex: res[i].sex,
            age: res[i].age,
            department: res[i].department,
          })
        }
        resolve(arr)
      })
    })
  },

  createAccount({ input }) {
    const data = {
      name: input.name,
      age: input.age,
      sex: input.sex,
      department: input.department,
    }
    return new Promise((resolve, reject) => {
      pool.query('insert into account set ?', data, err => {
        if (err) {
          console.log('出錯了' + err.message)
          return
        }
        resolve(data)
      })
    })
  },

  updateAccount({ id, input }) {
    const data = input
    return new Promise((resolve, reject) => {
      pool.query('update account set ? where id = ?', [data, id], err => {
        if (err) {
          console.log('出錯了' + err.message)
          return
        }
        resolve(data)
      })
    })
  },

  deleteAccount({ id }) {
    return new Promise((resolve, reject) => {
      pool.query('delete from account where id = ?', id, err => {
        if (err) {
          console.log('出錯了' + err)
          reject(false)
          return
        }
        resolve(true)
      })
    })
  },
}

// 公開資料夾  供使用者訪問靜態資源
app.use(express.static('public'))

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    rootValue,
    graphiql: true,
  })
)

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'))

vue 封裝highcharts元件

在components資料夾下建立hightBar 資料夾以及highcharts.vue和index.js 檔案 highcharts.vue寫入要封裝的內容

vue 封裝 Adminlte3元件的實現

之前找了一下vue關於adminlte3的元件庫，github大部分都是2的。比較老了，都是幾年前更新的。有adminlte3的，但是都只封裝了一兩個元件，而且居然還引入jq，然後一股腦把adminlte3的html程式碼複製進去，這樣就成了一

前端開發技術之如何用VUE封裝日曆元件

結構及樣式先拆分一下日曆, 可將其上下拆分成兩部分, 上面的星期部分, 和下面的資料部分, 一週7天限定了列數為7列, 行數會隨當月天數及1號所在位置而有所不同.

vue封裝TabBar元件的完整步驟記錄

目錄實現思路：步驟一：TabBar和TabBarItem的元件封裝步驟二：給TabBarItem傳入active圖片步驟三：TabBarItem和路由的結合效果步驟四：TabBarItem的顏色控制用字型圖示實現引入字型圖示運用總結實現思路：

vue封裝一個元件(進階必學)

相比較於函式的封裝，規模更大一點的便是元件的封裝，元件包含了模版、指令碼以及樣式的程式碼，在實際開發中元件的使用頻率也是非常大的，我們專案中的每一個頁面其實都可以看作是一個父元件，其可以包含很多子元件

Vue v-model元件封裝(類似彈窗元件)

v-model是vue的一個語法糖，限制在input和textarea等這些表單元素中，官網所給的例子也是僅限於表單元件

淺析vue cli3 封裝Svgicon元件正確姿勢(推薦)

vue cli3 手把手教學封裝Svgicon元件第一步:在src檔案下新建一個放置svg檔案的資料夾

Vue 封裝防重新整理考試倒計時元件的實現

本文詳細的介紹了防重新整理考試倒計時元件，分享給大家，也給自己留個筆記，感興趣的可以瞭解下

echarts.js 動態生成多個圖表使用vue封裝元件操作

元件只做了簡單的傳值處理，記錄開發思路及echarts簡單使用。這裡預設所有圖表樣式一致，都為柱狀圖，如需其他型別，可查閱echarts官網文件，再動態傳值即可。

封裝一個VUE時間線元件

之前開發網站的時候，有一個品牌歷程的展示，拿到UI後，因為前期著急所以時間線直接用的圖片，這樣做的話後期在後臺增加品牌歷程的時候，還需要前臺更換圖片，比較麻煩，所以空閒的時候自己封裝了一個。最終效果圖如

vue 封裝手機驗證登入元件

封裝手機驗證登入元件簡單封裝手機驗證登入元件，全域性註冊，利用element-ui庫

vue封裝生成cron表示式元件

vue封裝生成cron表示式元件 cron元件(VueCronLinux.vue) <style lang="scss" scoped>

基於Ant Design Vue封裝一個表單控制元件

開原始碼 https://github.com/naturefwvue/nf-vue3-ant 有缺點本來是寫在最後的，但是博文寫的似乎有點太長了，估計大家沒時間往下看，於是就把有缺點寫在前面了，不喜歡可以先跳過。

【Vue】Re23 元件封裝

視訊地址： https://www.bilibili.com/video/BV15741177Eh?p=119 common.css /* 演示案例是base.css */

vue 封裝麵包屑元件教程

我看過一篇關於程式設計師寫部落格的文章，他說很多的程式設計師過了兩年寫了很多的程式碼，但是回想起來自己具體做了哪些技術點，遇到坑幾乎沒有印象，所以說文字是記錄的最好方式，好記性不如爛筆頭，可以方便自己

vue封裝頁面全域性載入子元件

1. 首先我們看一下 Element 中的載入方式，設定載入配置 openFullScreen2() { const loading = this.$loading({

詳解如何在vue+element-ui的專案中封裝dialog元件

1、問題起源由於 Vue 基於元件化的設計，得益於這個思想，我們在 Vue 的專案中可以通過封裝元件提高程式碼的複用性。根據我目前的使用心得，知道 Vue 拆分元件至少有兩個優點：

vue分頁元件封裝

技術標籤：vuevue分頁分頁封裝 vue分頁元件封裝座右銘：越努力越幸運，越運動越健康。熱愛前端技術，熱愛運動的（愛笑，傻傻的）這樣一個人

vue 封裝按鈕button元件

技術標籤：vue前端外掛Web前端元件放專案目錄： src/components 下面 PlainButton元件

使用Vue的render渲染函式封裝UI元件的思路（一）

技術標籤：web前端javascriptvue.jshtml5css3es6 使用Vue的render渲染函式封裝UI元件的思路（一）

vue 封裝highcharts元件

GraphQL 簡介

安裝

引數型別

引數傳遞

自定義引數型別

在客戶端訪問GraphQL介面

使用 Mutations 修改資料

Constructing Types

結合 MySql CURD

程式碼片段

相關推薦