Transformers与Vue框架能力对比
Vue能力 | 是否支持 | Transformers |
---|---|---|
响应式渲染 | ✅ | @data与@prop在模板中可以完成渲染 |
computed | 🚫 | 暂不支持 |
methods | ✅ | 支持。对象中的函数(除lifecycle函数外)在模板中都可以访问。 |
watch(deep) | ✅ | 对于对象属性,将属性标记为@propDataClass,在flutter端,会进行关于watch能力的预编译,可完成deep watch能力 |
template | ✅ | 支持。template在flutter端会编译成widgetTree |
render | 🚫 | 暂不支持 |
声明周期函数 | ⚠️ | 部分支持。支持lifecycleCreated();lifecycleMounted();lifecycleUpdated();lifecycleDestroyed() |
$emit | ✅ | 支持。绑定的函数需要符合 void Function(dynamic)类型。 |
自定义组件 | ✅ | 支持 |
slot、slot-scope | ⚠️ | vue侧支持,flutter侧不支持 |
v-if | ✅ | 支持 |
v-else | ✅ | 支持 |
v-else-if | ✅ | 支持 |
v-for | ✅ | 支持 |
v-show | 🚫 | 暂不支持 |
v-on | ⚠️ | 只支持直接绑定函数。绑定一个可运行的函数,暂不支持。 |
v-bind | ✅ | 支持 |
v-model | ✅ | 支持 |
v-pre | 🚫 | 暂不支持 |
v-once | 🚫 | 暂不支持 |
v-cloak | 🚫 | 暂不支持 |
vue框架+项目实践梳理
一、框架整体目录解析
teddy平台代码结构readme.md文件中有对应的代码架构图
1、常见的框架目录及解析
2、teddy平台中的目录结构
teddy目录结构与页面对应结构梳理
页面布局由那部分来控制?components中的home.vue
3、vue构造器
*知识点
1、Vue.prototype.$http=Axios,给原型链添加方法,Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,Vue中的全局变量是通过 Vue.prototype实现的,https://segmentfault.com/q/1010000020425616
2、axios https://blog.csdn.net/lwpoor123/article/details/85259614
SpringBoot+Vue框架详解
参考:http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html
一、技术栈
1、后端技术栈
-
SpringBoot
-
MySQL
-
Spring Data JPA
2、前端技术栈
-
vue
-
ElementUI
-
axios
-
vue-router
3、项目后端用到的依赖
-
SpringBoot
-
data-jpa
-
web
-
thymeleaf
-
-
MySQL
-
jackson
-
jackson-databind
-
jackson-annotations
-
jackson-module-jaxb-annotations
-
jackson-datatype-joda
-
jackson-core
-
-
fastjson
-
commons-dbcp
-
com.google.code.gson
-
jstl
-
rest-assured
-
commons-lang3
-
zebra
-
sso-java-sdk
-
com.meituan.mtrace
-
xm-pub-api-sdk(大象通知)
二、SpringBoot与 Vue 的 整合
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
具体的数据流转流程:
数据流转解释
1、前端的Http请求会到controller这一层,而controller层根据相应路由信息注解会跳转到相应的类。
2、在框架经过处理以后,最终调用的是mapper层。
3、在执行相应的Sql以后,将会依次返回到controller层,然后在Http的返回中将会以Json串对象返回给前端的调用方。
4、前端在Http的response中拿到返回值,然后再进行一些处理进行展示。
vue框架详解
1、vue 实现代码
这是 vue 的主要目录,我们的代码写在该目录下
components 是组件,这里面编写了我们要访问的视图代码
router 文件里面配置了路由,通过指定的 url 访问到特定的组件
index.js文件代码段如下:
在utils 里面,我们定义了不同类型的请求发送数据给后端的 API
如commons.js文件中通用方法的定义
自此,我们与 SpringBoot 后端交互的代码就已经基本实现了,vue 和 SpringBoot 是两个项目,他们配置了不同的端口,如果要间接访问,我们还需要进行跨域的配置。
找到 vue 项目下 config 的 index.js 文件,查看local配置:
注:api_host对应配置在Springboot项目中application-local.properties中
2、SpringBoot 实现代码
关键代码如下,接收 vue 端发送过来的数据,根据查询的结构,以 json 的形式返回 vue 端。
3、SpringBoot 与 Vue 的集成
我们通过执行 $ npm run build 命令,打包 vue 项目,会生成一个 dist 文件,我们把这个文件直接复制到 SpringBoot 项目的 static 下,只启动 SpringBoot 项目,访问http://127.0.0.1:7080就可以看到vue页面了。