vue Esview 可视化编程程序流程(一)解决不能登录问题

版权声明:个人发声,博客技术文章都是本人项目工程经验积累,转载请注明!(物联网云平台全站设计师-承接软硬件设计、微信、web前端、Java后台、云平台搭建项目,请联系微信:28775855,邮件:[email protected]) https://blog.csdn.net/phlr5/article/details/83780628

esview的git地址:
https://github.com/furioussoul/esview
下载后有两个工程,一个是server,springboot服务器端;一个是ui端
Ui端用npm install,npm run dev进行编译,服务器端用marven install来编译,本地运行可以:
在这里插入图片描述
编译报错,是没有定义数据库,定义下:
在这里插入图片描述

编译通过。
程序流程:
Index.html:app
Main.js中:
之后在switch (Store.getters[‘userModule/page’]) {
case ‘manage’:
return h(manageApp)
case ‘login’:
return h(Login)
}
跳转login.vue
在这里插入图片描述
执行auth_resource.js中的login函数:
function login() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …0){ this.router.push(’/’)=》home.vue
store.commit(‘userModule/changePage’,‘manage’)=>在main.js里return h(manageApp)
//这里执行的是app.vue,因为:
//import manageApp from ‘./view/esview/app.vue’

}else {
  this.$Message.error(res.data.msg)
}

})
}
我们再来看一下router,在router.js中:
在这里插入图片描述
之后跳转到home.vue中,mounted中执行如下
mounted(){
getPageList.call(this, {all:true}, (data) => {
this.apps = data
})//这里从服务器中拿到pagelist并且加载
我们再来看app.vue:
mounted() {
let accessToken = getCookie(“access_token”);
if(!accessToken) store.commit(‘userModule/changePage’, ‘login’)
这里得到cookie,如果有的话,就会把username和password得到,如果没有就在弹出login窗口,进入登录界面。
登录界面
后台server的java程序中设置cookie:
在这里插入图片描述
这样,理论上就应该把主界面都得到了,并显示出来。
但是目前的问题是cookie得到的是null,没有。需要好好研究一下。

getCookie函数:在assist.js中得不到document.cookie,所以自己写了一个setCookie函数,暂时避过了这个问题。

我们继续看看当得到了cookie后,login函数进入app.vue
在这里插入图片描述
App.vue:
咱们先来一起看一下Assemble流程:
在这里插入图片描述
在app.vue文件中定义assenble managerPage的地址如下:
“title”: “Assemble”,
“url”: “/esview/assemble”,

                "title": "managePage",
                "url": "/esview/assemble/manage_page",

manage_page.vue:
在这里插入图片描述
edit(param){
this.$router.push({path: ‘./assemble_page’, query: {pageSoulId: param.row.id}})
edit函数直接调用assemble_page 进行编辑,界面展示如下:
在这里插入图片描述
左侧菜单:

调用的是controlClazzes

go on next day…

猜你喜欢

转载自blog.csdn.net/phlr5/article/details/83780628
今日推荐