WeBASE管理平台开发文档¶
本代码仅支持FISCO-BCOS 2.0以上版本,支持群组和群组切换。
1、开发环境搭建¶
1.2 安装依赖包¶
1.2.1 拉取代码¶
执行命令:
git clone https://github.com/WeBankBlockchain/WeBASE-Web.git
# 若网络问题导致长时间无法下载,可尝试以下命令
git clone https://gitee.com/WeBank/WeBASE-Web.git
将代码放在你的工作目录,例如:D:\project
切换到项目目录:
cd D:\project\WeBASE-Web
使用命令:
npm install
下载依赖包
执行update修改依赖和下载相关文件:
npm run update
注意:必须执行update,否则编译打包都是失败,此脚本会修改部分依赖文件并且从cdn下载solc的编译文件,执行成功后,后面无需再执行。
1.3 启动项目¶
在项目根目录使用命令:
npm run dev
控制台出现:
Listening at http ://localhost:3006
在浏览器输入”http ://127.0.0.1:3006”。
默认端口是3006,可在config文件夹index.js中修改。
修改跨域配置,在config文件夹index.js中,在dev中的proxyTable修改,修改地址即可,请求的url路径必须加上前缀。
dev: {
host: 'localhost', // can be overwritten by process.env.HOST
port: 3006, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/mgr':{
target:'http://10.0.0.1:8080/', //在此修改跨域地址,这里是node_mgr服务ip和端口,且可以访问
changeOrigin:true,
pathRewrite:{
'^/mgr':''
}
},
},
},
本地启动服务用127.0.0.1代替localhost,因为部分合约版本使用了web worker
1.4 修改solidity版本¶
solidity版本默认0.4.25,如果需要修改请按以下步骤修改:
获取所需solidity版本的编译文件; 自行编译或者点击此处下载,将其移动到路径/static/js下面,并删除之前的solidity编译文件。
修改solc依赖版本; 找到package.json的dependencies部分的solc,将其版本修改成和上面下载的solidity编译文件一致,执行命令
npm install
修改引入solidity编译文件名称 在路径 /src/views/chaincode/code 找到引入文件的位置,修改为下载solidity编译文件名称。 在生命周期beforeMount时引入改文件,修改这里就可以了
beforeMount() {
var head = document.head;
var script = document.createElement("script");
script.src = "./static/js/soljson-v0.4.25+commit.59dbf8f1.js";
script.setAttribute('id', 'soljson');
if (!document.getElementById('soljson')) {
head.append(script)
}
},
修改完后,即可进行打包或本地开发测试。
1.5 模拟数据¶
模拟数据在mock.js中,在开发联调前使用,使用中注意mock.js的url和axios请求的url要保持一致。包括get拼接在url上面的参数
注意:开发时将mian.js中加上mock.js引用,打包时需要注释mock.js的引用。
axios请求地址:
overview请求url: /WeBASE-Web/network/general/1
mock.js地址:
Mock.mock('/WeBASE-Web/network/general/1',function (req,res) { //url和上面axios相同
return {
"code":0,
"message":"success",
"data":{
"orgCount":1,
"nodeCount":1,
"contractCount":11,
"latestBlock":10,
"transactionCount":10,
}
}
});
main.js引用mock.js:
Vue.use(ElementUI);
// require('./mock') //直接require引入,开发时放开注释,打包时注释
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})