1
This commit is contained in:
张成
218
demo/advanced.html
Normal file
218
demo/advanced.html
Normal file
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Framework - 高级示例</title>
|
||||
|
||||
<!-- 引入 iView 样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/view-design@4.7.0/dist/styles/iview.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
|
||||
}
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- 引入依赖库 -->
|
||||
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
|
||||
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
|
||||
<script src="https://unpkg.com/view-design@4.7.0/dist/iview.js"></script>
|
||||
<script src="https://unpkg.com/axios@0.27.2/dist/axios.js"></script>
|
||||
|
||||
<!-- 引入 admin-framework -->
|
||||
<script src="../dist/admin-framework.js"></script>
|
||||
|
||||
<script>
|
||||
// 获取框架实例
|
||||
const framework = window.AdminFramework
|
||||
|
||||
// ========== 1. 自定义页面组件 ==========
|
||||
const CustomPage = {
|
||||
name: 'CustomPage',
|
||||
template: `
|
||||
<div style="padding: 20px;">
|
||||
<Card>
|
||||
<p slot="title">自定义页面</p>
|
||||
<p>这是一个自定义页面示例</p>
|
||||
<p>当前时间: {{ currentTime }}</p>
|
||||
<Button type="primary" @click="handleClick">点击测试</Button>
|
||||
</Card>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
currentTime: new Date().toLocaleString()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$Message.success('按钮点击成功!')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 定时更新时间
|
||||
this.timer = setInterval(() => {
|
||||
this.currentTime = new Date().toLocaleString()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 2. 自定义 Vuex 模块 ==========
|
||||
const customModule = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
customData: '自定义数据'
|
||||
},
|
||||
getters: {
|
||||
customData: state => state.customData
|
||||
},
|
||||
mutations: {
|
||||
SET_CUSTOM_DATA(state, data) {
|
||||
state.customData = data
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateCustomData({ commit }, data) {
|
||||
commit('SET_CUSTOM_DATA', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 3. 配置参数 ==========
|
||||
const config = {
|
||||
title: 'Admin Framework 高级示例',
|
||||
apiUrl: 'http://localhost:3000/api/',
|
||||
uploadUrl: 'http://localhost:3000/api/upload',
|
||||
// 其他自定义配置
|
||||
theme: 'light',
|
||||
language: 'zh-CN'
|
||||
}
|
||||
|
||||
// ========== 4. 组件映射（用于动态路由加载） ==========
|
||||
const componentMap = {
|
||||
'custom/page': CustomPage,
|
||||
'custom/page.vue': CustomPage
|
||||
}
|
||||
|
||||
// ========== 5. 初始化框架 ==========
|
||||
framework.install(Vue, {
|
||||
config: config,
|
||||
ViewUI: iview,
|
||||
VueRouter: VueRouter,
|
||||
Vuex: Vuex,
|
||||
createPersistedState: null,
|
||||
componentMap: componentMap
|
||||
})
|
||||
|
||||
// ========== 6. 添加自定义 Vuex 模块 ==========
|
||||
framework.store.registerModule('custom', customModule)
|
||||
|
||||
// ========== 7. 添加自定义路由 ==========
|
||||
const customRoutes = [
|
||||
{
|
||||
path: '/custom',
|
||||
component: framework.Main, // 使用框架的主布局
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
name: 'custom_page',
|
||||
component: CustomPage,
|
||||
meta: {
|
||||
title: '自定义页面',
|
||||
hideInMenu: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 添加路由
|
||||
customRoutes.forEach(route => {
|
||||
framework.router.addRoute(route)
|
||||
})
|
||||
|
||||
// ========== 8. 路由守卫（可选） ==========
|
||||
framework.router.beforeEach((to, from, next) => {
|
||||
// 可以在这里添加权限验证等逻辑
|
||||
console.log('路由跳转:', from.path, '->', to.path)
|
||||
next()
|
||||
})
|
||||
|
||||
// ========== 9. Axios 拦截器配置（可选） ==========
|
||||
framework.http.interceptors.request.use(
|
||||
config => {
|
||||
// 在请求发送前做些什么
|
||||
console.log('发送请求:', config.url)
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
framework.http.interceptors.response.use(
|
||||
response => {
|
||||
// 对响应数据做些什么
|
||||
console.log('收到响应:', response.config.url)
|
||||
return response
|
||||
},
|
||||
error => {
|
||||
// 对响应错误做些什么
|
||||
console.error('请求错误:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// ========== 10. 创建 Vue 实例 ==========
|
||||
const app = new Vue({
|
||||
router: framework.router,
|
||||
store: framework.store,
|
||||
render: h => h('router-view'),
|
||||
created() {
|
||||
console.log('=== Admin Framework 高级示例启动 ===')
|
||||
console.log('配置信息:', this.$config)
|
||||
console.log('可用路由:', this.$router.options.routes)
|
||||
}
|
||||
})
|
||||
|
||||
// ========== 11. 挂载应用 ==========
|
||||
app.$mount('#app')
|
||||
|
||||
// ========== 12. 全局暴露（方便调试） ==========
|
||||
window.app = app
|
||||
window.rootVue = app
|
||||
window.framework = framework
|
||||
|
||||
// ========== 13. 打印框架信息 ==========
|
||||
console.log('框架版本:', framework.version)
|
||||
console.log('框架实例:', framework)
|
||||
console.log('路由实例:', framework.router)
|
||||
console.log('Store 实例:', framework.store)
|
||||
console.log('工具函数:', framework.tools)
|
||||
console.log('UI 工具:', framework.uiTool)
|
||||
console.log('HTTP 实例:', framework.http)
|
||||
|
||||
// ========== 14. 提示信息 ==========
|
||||
setTimeout(() => {
|
||||
iview.Message.success({
|
||||
content: 'Admin Framework 高级示例启动成功!',
|
||||
duration: 3
|
||||
})
|
||||
}, 500)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user