vue

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.youkuaiyun.com/lwpoor123/article/details/85259614

 

SpringBoot+Vue框架详解

C-2创建:张丽荟, 最后修改: 张丽荟2019-07-17 13:01

目录

一、技术栈

1、后端技术栈

2、前端技术栈

3、项目后端用到的依赖

二、SpringBoot与 Vue 的 整合

具体的数据流转流程：

数据流转解释

1、vue 实现代码

2、SpringBoot 实现代码

3、SpringBoot 与 Vue 的集成

参考：http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html

一、技术栈

1、后端技术栈

1. SpringBoot

2. MySQL

3. Spring Data JPA

    

2、前端技术栈

1. vue

2. ElementUI

3. axios

4. vue-router

    

3、项目后端用到的依赖

1. SpringBoot

   1. data-jpa

   2. web

   3. thymeleaf

2. MySQL

3. jackson

   1. jackson-databind

   2. jackson-annotations

   3. jackson-module-jaxb-annotations

   4. jackson-datatype-joda

   5. jackson-core

4. fastjson

5. commons-dbcp

6. com.google.code.gson

7. jstl

8. rest-assured

9. commons-lang3

10. zebra

11. sso-java-sdk

12. com.meituan.mtrace

13. xm-pub-api-sdk（大象通知）

 

二、SpringBoot与 Vue 的 整合

核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

具体的数据流转流程：

 

入口js中引入elementUI&axios

Vue前端

SpringBoot后端

 

JSON

Controller控制层

包含路由信息router/RequestMappping

Service服务层

DAO持久层（Repository）,执行SQL

Entity

HTTP

DataBase

config中配置后端访问路径

/config.local.js

新建组件component

在vue里设置访问路由

通过axios发送请求

​

 

数据流转解释

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页面了。