@Massimo and @All concerned Uploaded <https://github.com/valq7711/rapydml_cmp> to github with short manual and examples. Discussion is welcome!
On Wednesday, August 16, 2017 at 6:00:36 AM UTC+3, Massimo Di Pierro wrote: > > I want to know more. > > On Tuesday, 15 August 2017 18:40:57 UTC-5, Val K wrote: >> >> >> Considering the number of views, this issue is quite exciting. >> >> Here is my experience. I use RapydML and RapydScript to generate >> Vue-components. >> >> I wrote brute-force parser + made some hacks of RapydML-compiler so, as >> exhaust I receive single js-file with embeded template as html-string. >> >> If anyone is interested, I can describe in more detail. In gVim it looks >> like this: >> >> >> >> >> >> <https://lh3.googleusercontent.com/-SWHAIsxMvcE/WZOFDZqjxlI/AAAAAAAAAB4/rH3olx6FH8cirbUaZh9M54XMnqU9rQzSgCLcBGAs/s1600/v_hello.png> >> >> >> >> >> >> >> On Tuesday, August 15, 2017 at 8:23:34 AM UTC+3, Limedrop wrote: >>> >>> @Carlos...I don't know if this is better, but it is different. Probably >>> more suited to bigger apps. My basic assumption is that if you're going to >>> use vue.js then, ultimately, it will be a lot easier if you stick to the >>> proper vue.js way of doing things. In general this means letting vue.js do >>> it's stuff with the frontend and leaving web2py with the data and backend. >>> >>> Specifically it means setting up your view files like this: >>> https://vuejs.org/v2/guide/single-file-components.html >>> >>> And using this: >>> https://github.com/vuejs-templates/webpack >>> >>> In development mode I have web2py running on one port and node running >>> on another (node's hot-reloading seems like magic, and you can use the >>> chrome VueDevtools plugin to debug). When I'm ready to commit I run "npm >>> run build". The index file is then compiled to >>> "/views/default/index.html", and the assets are compiled to "/static". >>> >>> In production I get web2py to serve the index file and then get vue.js >>> to load whatever else it needs via ajax (axios). >>> >>> A basic outline of the key files are given below. Note that these are >>> just snippets to show you how you might do it...the code is incomplete and >>> it will NOT work out-of-the-box. >>> >>> >>> ====\web2py\applications\app\controllers\default.py >>> >>> def index(): >>> """ Starts vue.js session >>> >>> The uuid is injected into the html <body> tag as >>> the id. For example: <body >>> id="14e4de39-dc9e-467f-a28e-9c78bd485bc1"> >>> >>> vue.js then uses status_load() to retrieve the session details. >>> """ >>> uuid = session_new() >>> return dict(UUID=uuid) >>> >>> def status_load(): >>> uuid, error = >>> IS_MATCH('[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\Z')(request.vars['uuid']) >>> if error: >>> raise HTTP(403, "Not authorized") >>> query = (db.vue_session.uuid==uuid) >>> session = >>> db(query).select(orderby=~db.vue_session.expiry_datetime).first() >>> if not session: >>> raise HTTP(403, "Not authorized") >>> return response.json(session) >>> >>> >>> ====\web2py\applications\app\views\index.html >>> ## The COMPILED VUE.JS FILE GOES HERE!!! >>> >>> >>> ====\vue\index.html >>> <!DOCTYPE html> >>> <html> >>> <head> >>> </head> >>> <body id="{{=UUID}}"> >>> <div id="app"></div> >>> <!-- built files will be auto injected --> >>> </body> >>> </html> >>> >>> ====\vue\src\App.vue >>> <template> >>> <div id="app" class="OuterWrapper"> >>> <div class="PageContainer"> >>> <router-view></router-view> >>> </div> >>> </div> >>> </template> >>> >>> <script> >>> export default { >>> name: 'app', >>> components: { >>> }, >>> data () { >>> return { >>> } >>> }, >>> computed: { >>> }, >>> methods: { >>> }, >>> mounted: function () { >>> // The uuid is injected into the parentElement by web2py >>> // The store will then use the uuid to get the session from web2py >>> // and may redirect to the restore_point >>> this.$store.dispatch('NEW_UUID', { uuid: this.$el.parentElement.id >>> }) >>> } >>> } >>> </script> >>> >>> ====\vue\src\store\index.js >>> import Vue from 'vue' >>> import Vuex from 'vuex' >>> import axios from 'axios' >>> import router from '../router' >>> Vue.use(Vuex) >>> var axiosi = axios.create({ >>> baseURL: '/myapp/default/', >>> timeout: 5000 >>> }) >>> const store = new Vuex.Store({ >>> state: { >>> // put your session variables here >>> }, >>> actions: { >>> NEW_UUID: function ({ commit, dispatch, state }, { uuid }) { >>> // At the start of each session web2py gives us a uuid >>> // We then go back to web2py and retrieve the session state >>> commit('SET_UUID', { uuid: uuid }) >>> var data = {} >>> data.uuid = uuid >>> axiosi.post('status_load', data).then((response) => { >>> commit('UPDATE_STATUS', { newState: response.data }) >>> }, (err) => { >>> console.log(err) >>> router.push({ name: 'error', params: { errorMessage: >>> err.response.data } }) >>> }) >>> } >>> >>> >>> -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
