当前位置: 首页 > 后端技术 > Node.js

Adminify-基于Vuetify的后台管理界面

时间:2023-04-03 16:57:29 Node.js

Adminifyhttps://github.com/wxs77577/a...基于Vuetify的后台管理框架,后续会推出基于AdonisJs的后台接口AnAdmindashboardbasedonVuetify.Dataindemouseaxios-mock-adapterBetterServerAPIisbuilt关于AdonisJs,html输入类型和json配置。内置任何数据类型的localStorage代理。AxiosMock带有axios-mock-adapter和mockjsConfigurablesidemenuwithjsoni18nwithvue-i18nBasicandMainlayoutsStylusprocessorAndmoreofyourrequests.Gettingstartgitclonehttps://github.com/wxs77577/adminify.git复制src/config.sample.js到src/config.jsnpminstallnpmrundev在ChinaConfigsrc/config.jsconstbaseUrl='http://localhost:3333'constconfig={locale:'en-US',//en-US,zh-CNurl:baseUrl,debug:{mock:1,//启用mockhttp:true,//http请求日志},api:`${baseUrl}/admin/api`//locale:'en',//en//api:'http://192.168.1.108:3333/admin/api'}MenuConfigsrc/menu.jsexportdefault[{"href":"/","title":"Home","icon":"home"},{"href":"/crud/types","title":"Types","icon":"view_list"},{"href":"/crud/posts","title":"帖子","icon":"view_list"},{"href":"/crud/posts/create","title":"创建帖子","icon":"note_add"},{"href":"/crud/comments","title":"评论","icon":"view_list"},{"href":"/crud/users","title":"用户","icon":"人"},{"href":"/chat","title":"Chat","icon":"chat"},{"title":"Pages","icon":"domain","items":[{"href":"/example","title":"Example"},{"href":"/about","title":"关于"}]},{"href":"/settings","title":"设置","icon":"settings"},{"href":"/login","icon":"lock","title":"Logout"}]没有更多e需要说明吗?RoutesPartofsrc/router.js//`route`函数的签名:functionroute(path,file,name,children){}//routes[route('/login','Login','login'),route('/error','Error','error'),//path,file(*.vue),name,childrenroute('/','Main',null,[route('/','Home','home'),route('/crud/:resource','CrudGrid','grid'),route('/crud/:resource/:id/edit','CrudForm','edit'),route('/crud/:resource/create','CrudForm','create'),route('/crud/:resource/:id/:action','CrudForm','action'),route('/crud/:resource/:action','CrudForm','indexAction'),route('/example','Example'),route('/settings','Settings'),route('/theme','Theme'),route('/chat','Chat'),route('/about','About'),]),//404全局重定向{path:'*',redirect:'/error',query:{code:404,message:'PageNotFound.'}}]GridViewConfigsrc/mock/index.jsmock.onGet('/types/grid').reply(200,{"options":{"sort":"id",//默认排序列"create":false,//显示创建按钮"update":true,//显示更新按钮"delete":false//显示删除按钮},"filters":{"model":{"name":"","created_at":""},"fields":{//filtersfieldsconfig"name":{"label":"Name"},"created_at":{"label":"CreatedAt","type":"date"}},"rules":{}},"columns":[//columnsconfig{"text":"Id",//列标题文本"value":"id"//fieldname},{"text":"Name",left:true,//使文本左对齐,默认右对齐"value":"name"}]});GridViewDatasrc/mock/index.jsmock.onGet(/\/(posts|users|types|comments)$/).reply(({params={page:1,perPage:10},url})=>{letresource=url.split('/')[1]letoffset=(params.page-1)*params.perPagelet模型=数据[资源]return[200,{//返回这样的格式currentPage:params.page,lastPage:Math.ceil(models.length/params.perPage),perPage:params.perPage,total:data[resource].length,data:models.slice(offset,offset+params.perPage)}]});FormBuilderConfigsrc/mock/index.jsmock.onGet('/settings/form').reply(({params})=>{return[200,{“模型”:{//表单模型名称:'Adminify',徽标:'http://placeimg.com/128/128/any',日期:null,类型:1,状态:1,标签:[],description:'AnAwesomeSite',intro:'',},"fields":{//表单字段"name":{label:'Name'},//默认类型是'text'"logo":{label:'Logo',type:'image'},//workinginprogress"date":{label:'CreatedAt',type:'date'},"type":{label:'Type',类型:'select',options:[{text:'Blog',value:1},{text:'Company',value:2},{text:'Game',value:3},]},"status":{label:'Status',type:'radios',width:'md3',options:[{text:'Enabled',value:1},{text:'Disabled',value:2}]},“标签”:{标签:'标签',类型:'复选框',宽度:'md3',选项:[{文本:'启用',值:1},{文本:'禁用',值:2}]},"description":{label:'Description',type:'textarea'},"intro":{label:'Intro',type:'html'},}}]})ComunicationGitterIMhttps://gitter.im/vue-adminify/微信群