/oui

A modern web interface for OpenWrt implemented in vue.js.

Primary LanguageVueMIT LicenseMIT

oui(中文)

license PRs Welcome Issue Welcome Build Status Support oui

OpenWrt web user interface implemented in vue.js and Ant Design of Vue.

Oui uses json-rpc to communicate with OpenWrt subsystems and support ACL.

Oui is especially suitable for enterprise custom development.

How to build

Add feeds

echo "src-git oui https://github.com/zhaojh329/oui.git" >> feeds.conf.default
./scripts/feeds update oui
./scripts/feeds install -a -p oui

Configure

Oui  --->
	Applications  --->
		<*> oui-app-admin............................................. Administration
		<*> oui-app-diagnostics.......................................... Diagnostics
		<*> oui-app-firewall................................................ Firewall
		<*> oui-app-home.......................................... Built-in home page
		<*> oui-app-interfaces.................................... Network Interfaces
		<*> oui-app-login........................................ Built-in login page
		<*> oui-app-system............................................ System Setting
		<*> oui-app-upgrade......................................... Backup / Upgrade
		<*> oui-app-wireless................................................ Wireless
	-*- oui-bwm........................................ Bandwidth Monitor for oui
	-*- oui-httpd................................................ Oui rpc backend
	-*- oui-ui-core.................................................. Oui ui core

Compile

make V=s

Jsonrpc example

General

{
	"jsonrpc": "2.0",
	"id": 27,
	"method": "call",
	"params": ["sid", "network", "dhcp_leases", {}]
}

Ubus

{
	"jsonrpc": "2.0",
	"id": 7,
	"method": "call",
	"params": ["sid", "ubus", "call", { "object": "system", "method": "board" }]
}

How to modify vue

oui-ui-core

  1. Modify
  2. Enter directory 'oui/oui-ui-core/vue' and run the follow commands
	npm install
	npm run build
	../../scripts/clean-dist.sh dist

application

  1. Modify
  2. Enter your application directory(e.g. 'oui-app-example') and run the follow commands
	cp vue/app.vue ../../build-app/src/
  1. Enter directory oui/build-app and run the follow commands
	npm install
	npm run build
	cp dist/app.common.js.gz ../applications/oui-app-example/vue/dist/app.js

How to debug vue for application(e.g. oui-app-example)

  1. Copy oui-app-example/vue/app.vue to oui-ui-core/vue/src/views/oui-app-example.vue
  2. Enter directory 'oui/oui-ui-core/vue' and run the follow commands
	npm install
	npm run serve

Contributing

If you would like to help making oui better, see the CONTRIBUTING.md file.