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 web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
