显示导航

使用365bet地区构建Vue js应用

了解如何向您的应用程序添加Vue js前端

本·莱茵·扎卡里·克莱因

365bet地区版本 3.3.3

训练

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

365bet地区在本指南中,我们将使用Vue js应用程序作为前端构建365bet地区应用程序,个人资料视图该示例项目将是车库如中所示的应用程序反应我的需求指南您可以参考这些指南以与Vue js版本进行比较

请注意,本指南不是Vue js的简介。您可以参考官方文件或看到这个介绍性文章.

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区指南存储库包含两个文件夹

  • 初始初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入grails指导如何构建vue应用程序

您可以直接前往如果你光盘进入grails指导完成vue应用的构建

运行应用程序

Vue配置文件生成具有以下内容的多项目构建服务器客户子项目服务器365bet地区该项目是一个365bet地区应用程序,使用休息api客户是使用Vue CLI生成的Vue应用程序Webpack模板为了运行整个项目,您需要启动服务器客户分别申请

换成初始目录

cd首字母

365bet地区要启动365bet地区应用程序,请运行以下命令

gradlew服务器bootRun

365bet地区365bet地区应用程序将在以下位置提供HTTP本地主机

要启动Vue js应用程序,请在同一目录中打开第二个终端会话,然后运行以下命令

gradlew客户端启动

Vue js应用程序将在以下位置提供HTTP本地主机浏览到该URL,您应该看到默认的“欢迎”页面

构建服务器

创建以下四个域类

grails创建域类演示车辆grails创建域类演示驾驶员grails创建域类演示Make grails创建域类演示模型

如下编辑域类

服务器grails应用程序域演示Vehicle groovy
演示进口 grails rest资源

资源资源小号'车辆')
 车辆 {

    名称制作型号模型静态的属于司机: 司机]
}
服务器grails应用程序域演示驱动程序groovy
演示进口 grails rest资源

资源资源小号'司机')
 司机 {

    那么静态的有很多车辆静态的约束车辆可为空: 真正
    }
}
服务器grails应用程序域演示进行常规
演示进口 grails rest资源

资源资源小号'使')
  {
    那么
服务器grails应用程序域演示模型groovy
演示进口 grails rest资源

资源资源小号'模型')
  {
    那么

自从我们添加了资源资源365bet地区GORM数据服务.

服务器grails应用程序服务演示MakeDataService groovy
演示进口 grails gorm services服务

服务使接口MakeDataService进行保存那么
演示进口 grails gorm services服务

服务模型接口那么
服务器grails应用程序服务演示DriverDataService常规
演示进口 grails gorm services服务

服务(司机)
接口司机那么
服务器grails应用程序服务演示VehicleDataService groovy
演示进口 grails gorm services服务

服务车辆接口VehicleDataService车辆保存那么司机驱动程序Make make Model模型
服务器grails应用程序初始化演示BootStrap groovy
演示进口 常规转换CompileStatic

静态编译
 引导带DriverDataService driverDataService MakeDataService makeDataService ModelDataService modelDataService VehicleDataService vehicleDataService定义初始化servletContext日志信息"载入资料库"
        司机驱动程序driverDataService保存"苏珊")
        司机驱动程序driverDataService保存"彼得"使日产makeDataService保存"日产"使福特makeDataService保存"福特汽车"模型巨人modelDataService保存"Titan"模型叶modelDataService保存""模型windstar modelDataService保存"风星"vehicleDataService保存"拾起"司机日产泰坦vehicleDataService保存""驾驶员nissan leaf vehicleDataService保存"小型货车"司机福特风星定义破坏

重新启动服务器将测试数据加载到默认数据源中的项目

如果您想运行服务器365bet地区365bet地区包装器的应用程序grailsw运行应用程序而不是Gradle包装器,请确保您在服务器启动应用程序时的目录

365bet地区当365bet地区应用程序运行时,我们可以尝试使用cURL或其他API工具为365bet地区为我们生成的RESTful API

做一个得到请求车辆获得车辆清单

curl X GET http localhost车辆HTTP X应用程序上下文应用程序开发内容类型应用程序json字符集UTF传输编码块化日期Fri Jan GMT连接关闭ID驱动程序ID制造ID模型ID名称拾取ID驱动程序ID制造ID模型ID名称经济ID驱动程序ID制造ID型号ID名称小型货车

做一个得到请求司机获得特定的驱动程序实例

curl X GET http localhost驱动程序HTTP X应用程序上下文应用程序开发内容类型应用程序json charset UTF Transfer编码成块的日期Fri Jan GMT连接关闭ID名称Susan车辆ID

做一个开机自检请求司机创建一个新的Driver实例

curl X POST http localhost驱动程序H内容类型应用程序json charset utf d名称Edward HTTP X应用程序上下文应用程序开发位置Location http localhost驱动程序内容类型应用程序json charset UTF Transfer编码成组的日期Fri Jan GMT Connection close id name Edward

做一个请求车辆更新Vehicle实例

curl X PUT http本地主机H内容类型应用程序json字符集utf d名称卡车ID HTTP X应用程序上下文应用程序开发位置Location http localhost车辆内容类型应用程序json字符集UTF传输编码块化日期Fri Jan GMT Connection close id driver id make id model id name卡车

自定义API

365bet地区

curl X GET http本地主机HTTP X应用程序上下文应用程序开发内容类型应用程序json字符集UTF传输编码块化日期Fri Jan GMT连接close id名称Pickup make id driver id

JSON视图让我们创建一个新的JSON视图以呈现我们的Vehicle列表

mkdir grails应用程序视图车辆

按照约定,宁静的控制器(例如,由生成的控制器)在相应视图目录中的任何JSON视图资源资源将代替默认的JSON表示形式现在,我们可以通过为Vehicle创建一个新的JSON模板,为每辆Vehicle自定义JSON输出

vim grails应用程序视图车辆车辆gson

编辑文件以包括以下内容

服务器grails应用视图车辆车辆gson
进口 演示车那么ID车辆识别码模型那么车型名称ID车辆型号ID驾驶员那么车辆驾驶员姓名ID车辆驾驶员编号

现在,当我们访问API时,将看到那么ID, 模型司机被包含在内

HTTP X应用程序上下文应用程序开发内容类型应用程序json字符集UTF传输编码分组日期星期六星期六格林尼治标准时间连接关闭ID名称取货名称Nissan ID模型名称Titan ID驱动程序名称Susan ID

建立客户

至此,我们的服务器项目已完成,我们准备开始构建Vue js客户

Vue CLI项目包括运行测试和构建Vue js项目所需的所有配置。它遵循Vue js社区推荐的约定

vueDirListing
图客户端

建立目录包含webpack配置文件,其中包括针对开发产品和测试环境的特定于环境的配置

配置365bet地区指向365bet地区的URL服务器应用程序,默认设置为HTTP本地主机

vueConfig
图客户端配置
365bet地区尽管它们具有类似的功能,但请记住,Vue Webpack环境设置与365bet地区环境没有直接关系,例如,如果您使用特定环境运行构建365bet地区项目,它将不会自动影响环境中的环境。客户项目

静态的该目录包含Webpack不应处理的静态资产,您在本指南中将不会使用它

测试

vueTest
图客户端测试

src目录包含我们Vue js项目的实际源代码,其中包含组件资产(例如CSS文件)的子目录和默认的Vue Router配置。这是Vue js应用程序的典型项目结构,但您可以在src目录这是我们将在本指南其余部分中花费大部分时间的地方

vueApp
图客户端src

组件视图

单个文件组件

我们将创建几个Vue组件来消耗与我们的API的交互作用单个文件组件在本指南中,单个文件组件使我们能够封装模板HTML样式和组件的Vue实例在单个文件中处理组件的数据和行为。这些文件的扩展名为查看.

单个文件组件需要一些额外的处理才能在浏览器中呈现。客户Vue概要文件提供的项目已配置为正确编译单个文件组件

组件已导出,可以导入到其他组件中。它们也可以接受道具像所有Vue组件一样触发和响应事件并包含内部数据。查看js文档了解有关单个文件组件的更多信息

UI标头组件

我们的第一个组件将是标题栏。AppHeader视图客户端src组件并如下所示进行编辑

客户端src组件AppHeader视图
<> ID="应用标题模板">
  <> ="容器">
    <> ="超大加速器">
      <> src="资产徽标png">
      

欢迎来到车库

包含将由组件呈现的HTML模板。在上面的示例中,我们呈现了一个

标记来表示我们UI的主要标题,包括横幅图像和

标签

每一个必须仅包含一个根级别元素

默认情况下,当您在模板中使用组件时,元素名称将是带连字符的组件名称E gAppHeader会变成.

选择表组件

选择组件

我们需要一个通用的允许用户从可用中选择的组件, 司机创建新车辆时记录

vueSelect

创建文件FieldSelect视图客户端src组件表格并编辑内容,如下所示

客户端src组件形成FieldSelect vue
<> ID="driverSelect模板" xmlns="http www w org xhtml">
  <> ="表格组"> (4)
    <> ="形式控制" 进入模型="已选" @更改="updateValue"> (7)
      <> 残障人士 ="空值">选择一个领域 (2)
      (1)
      <> v为="价值中的价值" ="值编号" ="值编号">值名称
    
  
1 声明一个关闭名称价值观该道具将代表我们要选择的对象列表,并将作为HTML属性E g传递到组件中。.
2 第二个道具命名为领域并将代表所选字段的可读名称,用作默认的非选择选项
3 数据函数返回一个对象,该对象将成为组件的初始数据或状态。在这种情况下,我们只有一个变量数据 - 已选它将存储选择列表的当前值
4 进入模型指令在元素的值和变量中的变量之间建立了两种方式的绑定数据当值更改模型变量时已选将会更新,反之亦然
5 方法是一个包含任意JavaScript函数的对象,可以在模板内或从组件中的其他方法调用
6 updateValue方法发出一个事件,该事件允许父组件响应此组件中的更改。在这种情况下,我们将发出已选这将是列表中用户选择的选项
7 我们使用updateValue作为事件处理程序的方法onChange我们的事件元素使用更改属性还支持其他事件点击, 焦点等等
单向与双向数据绑定

Vue js都支持单程双向数据绑定该组件演示了在模板表达式中使用数据变量时的两种方法领域或通过属性绑定到组件价值领域语法将在以下情况下更新元素:领域变量更改此绑定是元素不能更改的值的一种方法领域

但是,如果元素使用进入模型指令将创建两种方式的数据绑定,例如选择元素将绑定到所选数据但是,如果在元素e中更改了该值,则用户会在选择列出然后的值所选数据将使用新值进行更新

这种灵活性意味着您可以使用任何一种方法在Vue js中进行开发,并在适当的时候进行混合和匹配。通常,一种方式数据绑定可导致更简单,更可预测的代码。但是,两种方式绑定很方便,并且可以简化与许多字段对应的表单的创建。组件的数据Vue js让您作为开发人员

表组件

接下来的几个组件将用于在我们的UI中显示车辆表。它们是表示组件,因此它们不需要任何方法或事件处理

表格行视图客户端src组件表并添加以下内容

src组件客户端TableRow视图
<> ID="桌模板" xmlns="http www w org xhtml">
     
      商品编号
      项目名称
      项目名称
      项目型号名称
      项目驱动程序名称
    




1 该组件接受单个道具项目

车辆表视图客户端src组件表并添加以下内容

客户端src组件表VehicleTable vue
<> ID="完全模板" xmlns="http www w org xhtml">
  <> ="">
    <> ="反演">
      
        ID
        name
        
        
        司机
      
     (1)
      <> v为="车辆中的车辆"
                 项目="车辆" =""> (2)
  




1 v为指令使我们可以遍历类似于GSP的数组标签或ng为Angular中的指令
2 再次,我们正在使用项目绑定一个语法车辆项目的支柱组件请注意,我们还将绑定到类似于与元素的React迭代的propv为要求每个元素都有唯一的在我们的情况下是.
3 为了使用我们的组件,我们将其导入到我们的顶部
1 这是我们之前创建的组件
2 再次,我们正在使用进入模型指令将输入的值绑定到我们的变量中数据.
3 这是字段选择我们之前创建的组件请注意,我们正在使用进入模型双向绑定的指令,允许组件更新我们的数据,以及使用一种双向数据绑定来传递列表价值观.
4 自从我们写了字段选择通常,我们可以将其用于表单中的每个选择列表
5 请注意,我们实际上并未进行POST调用以在此组件中创建车辆,该任务将通过以下方式委派给父组件:散发一种提交事件在这里完成提交方法
6 车辆prop表示以这种形式从字段创建的新的车辆对象。使, 楷模司机道具将是用于填充选择组件的记录列表

至此,我们拥有了构建表格并将车辆显示在表格中所需的所有组件。我们仍然需要实现我们的API集成,然后将所有这些组件放到一个可以运行的应用程序中

车辆展示

车库视图客户端src组件并如下所示进行编辑

客户端src组件车库视图

  <> ID="车库">
    
    <> 进入模型="车辆"
                  使="使"
                  楷模="楷模"
                  司机="司机"
                  @提交="SubmitNewVehicle">

    
    <> 汽车="">
  

分解

因为这是一个很大的组成部分,所以我们将分节介绍

客户端src组件车库视图

  <> ID="车库">
    
    <> 进入模型="车辆"
                  使="使"
                  楷模="楷模"
                  司机="司机"
                  @提交="SubmitNewVehicle"> (1)

    
    <> 汽车=""> (2)
  
1 我们已经设定了SubmitNewVehicle方法,我们很快将其视为提交我们在VehicleForm提交功能
2 我们约束我们数据变量的道具车辆表零件
客户端src组件车库视图
1 因为我们存储了车辆所使用的对象车辆形式顶级组件s中的组件数据使开机自检请求保存车辆实例很简单,我们只需从我们的变量中获取变量数据是先生这辆车将其转换为JSON字符串并使用发出POST请求.
2 开机自检请求将返回新创建的车辆实例,我们只需到我们的数据载体数组
3 将新车辆添加到列表后,我们通过设置数据载体到一个空对象,记得用空来初始化所需的字段空值价值观
客户端src组件车库视图

(1)
1 此处包含一些样式,可以使应用布局更加美观。请随意使用所需的任何样式。请注意,这些样式受限制或范围到组件自己的模板

路由

如果您要运行客户立即使用或重新加载(如果您保留了客户开始在遵循指南的同时运行任务时,您会注意到默认主页没有更改,这是因为Vue Router已配置为Vue js应用程序的官方路由库显示欢迎幸运的是,这是一个简单的更改

编辑档案客户端src路由器索引js如下所示

客户端src路由器索引js
进口从查看'查看'
进口路由器来自'查看路由器'
进口车库来自'组件车库' (1)Vue使用路由器出口 默认 路由器路线: [
    {
      路径: '/',
      那么: '车库', (1)
      零件车库(1)
    }
  ]
})
1 替换导入和用法欢迎与我们的组件车库索引的组成部分/路线

运行应用程序

跑过客户与项目gradlew客户端启动并浏览到HTTP本地主机365bet地区您应该会看到我们的新Vue应用程序,并且能够与365bet地区 REST API进行交互。祝贺您使用365bet地区构建了Vue js应用程序

完成

下一步

有很多机会可以扩展此应用程序的范围,以下是一些您可以自己进行改进的想法

您需要365bet地区帮助吗

OCI赞助了本指南的创建OCI提供了几种365bet地区服务:

免费咨询

OCI 365bet地区团队包括365bet地区联合创始人Jeff Scott Brown和Graeme Rocher检查我们的365bet地区365bet地区课程365bet地区并向发展和维护365bet地区的工程师学习

Grails OCI团队