vue 和 java vue和javaweb

转载

互联网小思悟 2024-01-12 13:00:40

文章标签 vue 和 java 前端 vue.js javascript java 文章分类 Java 后端开发

VUE框架

前端MVVM设计模式

VUE相关指令

Vue脚手架

1. Vue脚手架

2. 关于Node.js

3. 安装Vue CLI

4. 创建项目

5. 启动项目

6. 关于视图文件

7. 关于路由

8. 关于<router-view>

9. 关于Vue CLI项目的目录结构

10. 关于启动、停止、重启项目

11. 在Vue CLI中安装Element UI

12. Vue CLI中的嵌套路由

13. Vue CLI项目的启动端口

14. 在Vue CLI项目中使用axios

15. 关于跨域访问

VUE框架

VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架
引入VUE框架的地址:

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.6.14/vue.min.js
unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

如何加载CDN服务器上面的js文件

vue 和 java vue和javaweb_javascript

把CDN服务器上的js文件下载到本地是如何加载

vue 和 java vue和javaweb_vue 和 java_02

VUE框架的运行原理:

Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动

前端MVVM设计模式

M: Model 模式,指数据模型, 前端数据一般都来自于服务器
V: View 视图, 指页面相关代码
VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率

VUE相关指令

{{变量}}: 插值, 让此处的文本内容和变量进行绑定
v-text="变量": 让元素的文本内容和变量进行绑定
v-html="变量": 让元素的标签内容和变量进行绑定
v-bind:属性名="变量" 让元素的某个属性的值和变量进行绑定, 简写是去掉v-bind直接写 :属性名
v-model="变量",双向绑定,主要用在各种控件中, 变量的值会影响控件的值, 控件的值也会影响变量的值
v-on:事件名="方法"; 事件绑定, @事件名="方法"; 简写
v-for="变量 in 数组"; 循环遍历指令, 遍历的过程中会自动生成页面元素
v-if="布尔值变量"; true则显示元素 false则不显示(删除元素)
v-else 作用是和v-if状态取反
v-show="布尔值变量";true则显示元素 false则不显示(隐藏元素),

频繁切换显示状态时使用

Vue脚手架

1. Vue脚手架

Vue脚手架是一个开发基于Vue框架的前端项目的软件。

Vue脚手架的项目是“单页面”的，也就是在这样的项目，只有1个HTML页面，它认为页面是由多个模块组成的，各个模块都是可以随时替换的，从而显示出不同的页面效果。

2. 关于Node.js

首先,需要安装Node.js软件，下载得到安装后直接安装即可，安装过程中没有需要特别关注的部分。

安装完成后，可以通过npm -v命令查看安装的npm软件的版本，顺便检查是否安装成功。

npm -v

以上安装Node.js主要是为了使用npm(Node Package Management)，通常，应该修改“npm源”，以使得其下载软件将从配置的站点进行下载：

npm config set registry https://registry.npm.taobao.org

执行以上命令默认没有任何反馈，可以通过以下命令查看配置的值：

npm config get registry

3. 安装Vue CLI

Vue脚手架软件称之为：Vue CLI

通过npm命令可以安装此软件：

npm install -g @vue/cli

以上安装过程可能会提示WARN字样，可以无视，只要以上命令可以正常执行结束，并没有任何ERR字样的提示，即为成功！

安装Vue CLI主要是为了创建项目并管理项目(例如启动项目)。

4. 创建项目

首先，准备用于存放Vue脚手架项目的文件夹（任何你找得到的地方，不推荐操作系统的敏感文件夹），并且，在命令提示符窗口（或者终端窗口）中进入此文件夹。

然后，通过vue命令（来自前一步安装的@vue/cli）来创建项目，命令的基本格式是vue create 项目名称，例如：

vue create jsd2205-web-client

注意：执行创建项目的命令后，可能会有一点卡顿，此时不可以反复按回车键！

注意：如果创建项目的过程中选择错误，可以通过按下CTRL + C终止，并重新创建！

在创建选项中，需要选择”

Manually select features：手动选择功能
Babel / Vuex / Router
2.x
Y
In package.json
N

接下来，会自动完成项目的创建，在创建结束后，如果信息中没有错误，且出现了Successfully created project 项目名称.的字样，则创建成功！

如果创建项目失败，应该先删除已经创建的项目的文件夹，然后检查npm源，确认无误后，再次执行vue create 项目名称命令来重新创建项目。

5. 启动项目

当项目创建成功后，可以通过IntelliJ IDEA打开此项目。

在IntelliJ IDEA中，打开Terminal窗口，默认的提示符的位置应该就是当前项目的文件夹，在此处执行命令即可启动项目：

npm run serve

当启动成功后，可以看到Compiled successfully in 7859ms字样。

提示：启动成功后，会提示访问此项目的URL，例如：http://localhost:8080，根据当前计算机的网络配置不同，接下来的其它URL提示可能不同，均可无视。

在浏览器中，可以通过http://localhost:8080来访问此项目。

6. 关于视图文件

在Vue CLI项目中，默认的视图文件（页面文件）在src/views文件夹中。默认的项目中，负责显示的是：

src/App.vue
src/views/AboutView.vue
src/views/HomeView.vue
src/components/HelloWorld.vue

每个视图文件都是以.vue作为扩展名的，每个文件都可以有3个根标签：

<template>：用于设计页面，例如页面中有哪些标签、显示什么内容等，注意：此标签的直接子级标签必须有且仅有1个！
<style>：【可选】用于设计样式，此标签下的都是CSS代码
<script>：【可选】用于编写JavaScript代码

7. 关于路由

Vue CLI的“路由”是一种配置了“访问路径”与“视图组件”的对应关系的对象！

路由是通过src/router/index.js文件的routes常量进行配置的，默认的代码是：

const routes = [
  {
    path: '/about',
    name: 'home',
    component: HomeView
  },
  {
    path: '/',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AdminIndexView.vue')
  }
]

以上routes常量的类型是数组，数组的元素是一个个的对象，以上代码中各对象配置了：

path：访问路径
name：名称，并不是必须的
component：视图组件，配置此属性时，视图组件有2种加载模式，分别是“预加载”和“懒加载”，其中，预加载需要通过当前文件顶部的import语句导入视图，而懒加载则是直接配置此属性时，直接使用箭头函数加上import函数进行配置即可，通常，在每个项目中，应该有且仅有1个视图是预加载的

8. 关于`<router-view>`

在设计视图时，使用<router-view>则表示：当前视图文件（例如默认的App.vue）不处理此部分的显示，将根据访问路径来决定由哪个视图进行显示（取决于src/router/index.js中routes常量的配置）！

9. 关于Vue CLI项目的目录结构

[node_modules]：当前项目的依赖项（各依赖的框架、工具包对应的文件，类似于Maven所需的本地仓库），注意：通常，从GIT等位置获取的项目，将没有此文件夹及相关文件，则项目不可以直接运行！需要先执行npm install以安装当前项目必须的软件，才可以执行npm run serve来启动项目！
[public]：静态资源文件夹，通常用于存放图片、.css、.js等文件

favicon.ico：网站的图标文件，必须在此位置，必须是此文件名
index.html：是VUE Cli项目中唯一的HTML文件，通常，不建议修改

[src]：源文件的文件夹，此文件夹下的内容将会被编译后再用于执行

[assets]：资源文件夹，只能存放不会因为程序而发生变化的资源文件（例如：某张图片会因为js代码而改变显示状态，则此图片不可以放在此文件夹中）
[components]：存放可能共用的视图组件的文件夹，此处的视图组件可以理解是被封装后的视图部分，可以被其它的视图组件引用
[router]：存放路由配置文件的文件夹

index.js：默认的路由配置文件

[store]：存放共享变量的文件夹

index.js：默认的存放共享变量的文件夹

[views]：存放视图组件（.vue文件）的文件夹
App.vue：项目的入口视图，默认是绑定到了index.html中的
main.js：项目的主配置文件

package.json：当前项目的配置文件，在此文件中，典型的配置包含：项目中的依赖项，例如，当执行npm install时，将根据此文件中的配置来决定下载哪些软件
package-lock.json：是锁定的配置文件，通常，不建议手动维护此文件

10. 关于启动、停止、重启项目

在项目文件夹下，通过npm run serve即可启动项目：

npm run serve

如果项目已经启动，当需要停止时，在启动项目的终端窗口中按下CTRL + C即可停止项目！

提示：当按下CTRL + C后，将提示“终止批处理操作吗(Y/N)?”，其实，此处无论选择Y或N，效果都是一样的！在按下CTRL + C的那一刻，项目就已经停止运行了！

此项目没有直接“重启”的操作，只能停止后再次运行！

11. 在Vue CLI中安装Element UI

首先，在终端窗口中，在当前项目的文件夹下，执行安装命令：

npm i element-ui -S

经过以上操作后，会下载element ui相关的文件到本项目的node_modules文件夹中！

注意：如果你此前已经从GIT拉取了老师的项目，并执行过npm install，再次拉取添加了element ui的项目后，需要再次执行npm install，否则，老师的项目将缺少element ui相关的文件，将不可以正常启动！

接下来，需要在项目的主配置文件（src/main.js）中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

12. Vue CLI中的嵌套路由

通常，在设计视图时，在App.vue中不会设计页面元素，只是添加一个<router-view/>即可！

在其它的视图中，设计的目标效果中可能存在多“页面”中相同的部分，反之，也可以理解为“某个页面的某个区域（不同的部分）是动态变化的”，则对应的区域（某个页面中会变化的部分）就可以设计为<router-view/>，同时，由于当前视图本身也是显示在App.vue设计的<router-view/>中的，就出现了“嵌套路由”！

当项目中多个视图中都使用到了<router-view/>时，某个视图组件到底显示在哪个<router-view/>，取决于路由的配置：

如果某个视图的路由配置在src/router/index.js的routes常量中，则此视图将显示在App.vue的<router-view/>中

const routes = [
  {
    path: '/',
    component: HomeView
  },
  // 以下AboutView将显示在App.vue的<router-view/>中
  {
     path: '/about',
     component: () => import('../views/AboutView.vue')
   }
];

如果某个视图的路由配置在src/router/index.js的routes常量中的某个路由配置的子级，则此视图将显示在其父级路由的视图中

const routes = [
  {
    path: '/',
    component: HomeView,
    // 以下AboutView将显示在HomeView的<router-view/>中
    children: [
      {
        path: '/about',
        component: () => import('../views/AdminIndexView.vue')
      }
    ]
  }
];

13. Vue CLI项目的启动端口

Vue CLI项目在启动时，默认将尝试占用8080端口，如果此端口已经被占用，则会顺延后一位端口号，即尝试占用8081……当然，如果8081也被占用，则会继续顺延至8082，以此类推。

建议为Vue CLI项目显式的指定端口，避免发生冲突，或多次启动时的端口号不一致。需要在package.json，原本有（通常在第6行）：

"serve": "vue-cli-service serve",

在以上属性值的末尾添加--port 端口号，例如：

"serve": "vue-cli-service serve --port 8888",

14. 在Vue CLI项目中使用axios

首先，需要安装axios：

npm i axios -S

然后，需要在main.js中导入，并声明为Vue对象的成员：

import axios from 'axios';

Vue.prototype.axios = axios;

15. 关于跨域访问

默认情况下，不允许执行跨域访问（从某一台服务器向另一台服务器发起异步请求），如果出现跨域访问，在浏览器的错误提示大致如下：

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

提示：以上错误的关键字是：CORS！

在基于Spring Boot开发的服务器端项目中，添加一个Spring MVC的配置类即可允许跨域访问！

可以让Spring Boot项目的启动类实现WebMvcConfigurer接口，并在此类中添加以下代码：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOriginPatterns("*")
            .allowedHeaders("*")
            .allowedMethods("*")
            .allowCredentials(true)
            .maxAge(3600);
}

完成后，重启服务器端项目，然后，使用客户端再次发出请求，此请求可以正常发出（浏览器不会报告错误），且服务器端可以接收到请求参数。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：计算机二级python课本计算机二级python官方教材pdf

下一篇：JAVA白皮书多少页 java编程黑皮书

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯