├── .gitattributes
├── .gitignore
├── README.md
├── README_files
├── 1.jpg
└── 2.jpg
├── package-lock.json
├── package.json
├── public
├── favicon.ico
└── index.html
├── src
├── App.vue
├── assets
│ ├── iconfont
│ │ └── iconfont.js
│ └── images
│ │ ├── logo-drizzle.png
│ │ ├── logo-ganache.png
│ │ ├── logo-truffle.png
│ │ └── logo-vue.png
├── components
│ ├── GetAccountData.vue
│ ├── NotConnect.vue
│ ├── SimpleStorage
│ │ ├── GetContractData.vue
│ │ └── SetContractData.vue
│ ├── Tittle.vue
│ ├── Tool
│ │ ├── ColHelper.vue
│ │ └── IconSvg.vue
│ └── TutorialToken
│ │ ├── GetBalance.vue
│ │ ├── GetSymbol.vue
│ │ ├── GetTotalSupply.vue
│ │ ├── Introduction.vue
│ │ └── Transfer.vue
├── drizzleOptions.js
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── views
│ ├── About.vue
│ ├── Home.vue
│ ├── SimpleStorage.vue
│ └── TutorialToken.vue
├── vue.config.js
└── webstorm.config.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # dapp-client
2 | - ETH Dapp 客户端 脚手架 (Truffle+Drizzle+Vue) 欢迎Star🎉
3 | 
4 | 
5 |
6 | ### 项目集成npm包
7 | #### Core
8 | 1. vue: 2.6.11
9 | 2. vue-router: 3.1.6
10 | 3. vuex:3.3.0
11 | 4. @drizzle/vue-plugin: 0.1.1
12 | #### UI
13 | 1. view-design: 4.1.3
14 | #### Development
15 | 1. @vue/cli-service: 4.3.0
16 | 2. @vue/cli-plugin-router: 4.3.0
17 | 3. @vue/cli-plugin-vuex: 4.3.0
18 | 4. vue-template-compiler: 2.6.11
19 |
20 | ### 启动
21 | #### 环境
22 | - os: Windows 10 Pro 1903
23 | - node: v12.16.1
24 | - npm: 6.13.4
25 | - @vue/cli: 4.2.3
26 | - chrome plugins: MetaMask
27 | #### 导入
28 | 1. 打开 vue控制台:
29 | > vue ui
30 | 2. 导入项目
31 | 3. 完成
32 | #### IDE配置(WebStorm)
33 | - (推荐) 在设置中 Webpack 添加WebStorm.config.js 路径. 使项目支持vue路径解析
34 | - (可选) 配置 Scopes
35 |
36 | ### 备注
37 | #### MetaMask
38 | - 请确保 MetaMask 为最新版本并做好相关配置工作
39 | - 若遇到转账交易失败,请注意 MetaMask 配置 或将 MetaMask 数据清除重置
40 | #### Icon
41 | - 图标采用 view-design库 和 Iconfont库.
42 | - view-design风格图标使用方式请查询官方文档
43 | - Iconfont风格图标 使用 IconSvg.vue 组件引用
44 | - 若添加图标 请前往 [Iconfont库官网](https://www.iconfont.cn/) 下载对应图标的二进制JS文件
45 | 导入至 assets/iconfont 目录下
46 |
47 | ### 完成
48 | - end
--------------------------------------------------------------------------------
/README_files/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/README_files/1.jpg
--------------------------------------------------------------------------------
/README_files/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/README_files/2.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dapp-client",
3 | "version": "0.0.1",
4 | "description": "Dapp客户端",
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build"
8 | },
9 | "dependencies": {
10 | "@drizzle/vue-plugin": "^0.1.1",
11 | "view-design": "^4.1.3",
12 | "vue": "^2.6.11",
13 | "vue-router": "^3.1.6",
14 | "vuex": "^3.1.3"
15 | },
16 | "devDependencies": {
17 | "@vue/cli-plugin-router": "~4.3.0",
18 | "@vue/cli-plugin-vuex": "^4.3.0",
19 | "@vue/cli-service": "~4.3.0",
20 | "vue-template-compiler": "^2.6.11"
21 | },
22 | "browserslist": [
23 | "> 1%",
24 | "last 2 versions",
25 | "not dead"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | dapp-client
10 |
11 |
12 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | |
9 |
10 |
11 |
12 |
13 |
14 |
15 | |
16 |
17 |
18 |
19 |
20 |
21 |
22 | |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
64 |
65 |
--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.js:
--------------------------------------------------------------------------------
1 | !function(d){var t,h='',l=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(l&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()};document.addEventListener("DOMContentLoaded",l,!1)}else document.attachEvent&&(a=t,i=d.document,n=!1,(h=function(){try{i.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}e()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,e())});function e(){n||(n=!0,a())}var a,i,n,h}(function(){var t,l,e,a,i,n;(t=document.createElement("div")).innerHTML=h,h=null,(l=t.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",e=l,(a=document.body).firstChild?(i=e,(n=a.firstChild).parentNode.insertBefore(i,n)):a.appendChild(e))})}(window);
--------------------------------------------------------------------------------
/src/assets/images/logo-drizzle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-drizzle.png
--------------------------------------------------------------------------------
/src/assets/images/logo-ganache.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-ganache.png
--------------------------------------------------------------------------------
/src/assets/images/logo-truffle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-truffle.png
--------------------------------------------------------------------------------
/src/assets/images/logo-vue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-vue.png
--------------------------------------------------------------------------------
/src/components/GetAccountData.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
23 |
24 |
25 |
26 |
67 |
68 |
--------------------------------------------------------------------------------
/src/components/NotConnect.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
搭建失败!
4 |
5 |
请前往 GitHub下 载并配置 dapp-server
6 |
请前往 Chrome 应用商店下载 MetaMask 插件 并添加 Ganache 网络
7 |
8 |
9 |
10 |
15 |
16 |
--------------------------------------------------------------------------------
/src/components/SimpleStorage/GetContractData.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{contractData}}
4 |
5 |
6 |
7 |
36 |
37 |
--------------------------------------------------------------------------------
/src/components/SimpleStorage/SetContractData.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
59 |
60 |
--------------------------------------------------------------------------------
/src/components/Tittle.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Dapp 客户端
4 |
5 |
6 |
7 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/Tool/ColHelper.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 1
5 | 2
6 | 3
7 | 4
8 | 5
9 | 6
10 | 7
11 | 8
12 | 9
13 | 0
14 | 1
15 | 2
16 | 3
17 | 4
18 | 5
19 | 6
20 | 7
21 | 8
22 | 9
23 | 0
24 | 1
25 | 2
26 | 3
27 | 4
28 |
29 |
30 |
31 |
32 |
37 |
38 |
--------------------------------------------------------------------------------
/src/components/Tool/IconSvg.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 |
20 |
21 |
31 |
--------------------------------------------------------------------------------
/src/components/TutorialToken/GetBalance.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 余额
6 |
7 |
8 | {{balance}}
9 |
10 |
11 |
12 |
13 |
14 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/TutorialToken/GetSymbol.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 代币简称
4 |
{{symbol}}
5 |
6 |
7 |
8 |
37 |
38 |
--------------------------------------------------------------------------------
/src/components/TutorialToken/GetTotalSupply.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 发行总量
4 |
{{totalSupply}}
5 |
6 |
7 |
8 |
37 |
38 |
--------------------------------------------------------------------------------
/src/components/TutorialToken/Introduction.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
这是基于ERC20协议发行的代币 TutorialToken (简称TT).
4 | 由智能合约描述:所有铸币奖励由部署智能合约的账户获得(即Ganache客户端第一个地址). 该账户可进行 TT代币 转账交易.
5 | 其简称 总发行量 精度 均由智能合约限定.
6 |
7 |
8 |
9 |
14 |
15 |
--------------------------------------------------------------------------------
/src/components/TutorialToken/Transfer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
63 |
64 |
--------------------------------------------------------------------------------
/src/drizzleOptions.js:
--------------------------------------------------------------------------------
1 | import SimpleStorage from './contracts/SimpleStorage.json'
2 | import TutorialToken from './contracts/TutorialToken.json'
3 |
4 | const options = {
5 | //web3
6 | web3: {
7 | block: false,
8 | fallback: {
9 | type: 'ws',
10 | url: 'ws://127.0.0.1:9545'
11 | }
12 | },
13 | // 受监控的智能合约
14 | contracts: [SimpleStorage, TutorialToken],
15 | events: {
16 | SimpleStorage: ['StorageSet']
17 | },
18 | // 每15000毫秒检查一次账户
19 | polls: {
20 | accounts: 15000
21 | }
22 | }
23 |
24 | export default options
25 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import store from './store'
4 | import router from './router'
5 | import Vuex from 'vuex'
6 | import ViewUI from 'view-design'
7 | import 'view-design/dist/styles/iview.css'
8 | import '@/assets/iconfont/iconfont.js'
9 |
10 | import drizzleVuePlugin from '@drizzle/vue-plugin'
11 | import drizzleOptions from './drizzleOptions'
12 |
13 |
14 | Vue.use(ViewUI)
15 | Vue.use(Vuex)
16 | // 注册 drizzleVuePlugin
17 | Vue.use(drizzleVuePlugin, {store, drizzleOptions})
18 | Vue.config.productionTip = false
19 |
20 | new Vue({
21 | router,
22 | store,
23 | render: function (h) {
24 | return h(App)
25 | }
26 | }).$mount('#app')
27 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import Home from '@/views/Home.vue'
4 |
5 | Vue.use(VueRouter)
6 |
7 | const routes = [
8 | {
9 | path: '/',
10 | name: 'Home',
11 | component: Home
12 | },
13 | {
14 | path: '/simpleStorage',
15 | name: 'SimpleStorage',
16 | // 这将为该路由生成单独一个JS块 (about.[hash].js)
17 | // 当路径被访问时采用懒加载,速度比import导入快 (推荐写法)
18 | component: function () {
19 | return import(/* webpackChunkName: "simpleStorage" */ '@/views/SimpleStorage.vue')
20 | }
21 | },
22 | {
23 | path: '/tutorialToken',
24 | name: 'TutorialToken',
25 | component: function () {
26 | return import(/* webpackChunkName: "tutorialToken" */ '@/views/TutorialToken.vue')
27 | }
28 | },
29 | {
30 | path: '/about',
31 | name: 'About',
32 | component: function () {
33 | return import(/* webpackChunkName: "about" */ '@/views/About.vue')
34 | }
35 | },
36 | ]
37 |
38 | const router = new VueRouter({
39 | routes
40 | })
41 |
42 | export default router
43 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | Vue.use(Vuex)
5 |
6 | export default new Vuex.Store({
7 | state: {
8 | },
9 | mutations: {
10 | },
11 | actions: {
12 | },
13 | modules: {
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
design by WDING
4 |
5 |
GitHub/Email: wding624@outlook.com
6 |
QQ: 246445526
7 |
2020/04/01
8 |
9 |
10 |
11 |
18 |
19 |
29 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
搭建成功!
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
38 |
39 |
49 |
50 |
--------------------------------------------------------------------------------
/src/views/SimpleStorage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/src/views/TutorialToken.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
43 |
44 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | css: {
3 | extract: false,
4 | sourceMap: true
5 | }
6 | }
--------------------------------------------------------------------------------
/webstorm.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 |
4 | function resolve(dir) {
5 | return path.join(__dirname, '.', dir)
6 | }
7 |
8 | module.exports = {
9 | context: path.resolve(__dirname, './'),
10 | resolve: {
11 | extensions: ['.js', '.vue', '.json'],
12 | alias: {
13 | '@': resolve('src'),
14 | }
15 | },
16 | }
--------------------------------------------------------------------------------