文章更新时间:2020/03/14

一、前言

  作为一个后端程序员,前端知识多少还是要了解一些的,vue能很好的实现前后端分离,且更便于我们日常中的调试,还具备了轻量、低侵入性的特点,所以我觉得是很有必要了解的一门前端技术。

  这篇文章先记录下如何把vue整合到我们的整个工程中,并作为前端页面的入口,贯穿到后场服务的调用;一些基础知识和使用技巧的总结,后面再找合适的时间去开新的篇幅,看完这篇文章,应该可以大致了解vue的结构,并跑起一个完整的项目了。

二、启动第一个vue工程

1、前置准备:安装node.js

  Node是一个让 JavaScript 运行在服务端的开发平台,node.js的npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,我们开发vue之前先把node.js安装好,相关教程网上也很多,这里就不详细描述了,安装成功后在idea里面右键工程->open in terminal->输入命令,若出现下图中的场景,我们就可以开始搭建vue环境了

2、创建前端模块

创建完以后的结构:

3、安装vue脚手架工具vue-cli,并初始化项目

##安装脚手架工具vue-cli
npm install --global vue-cli

## 安装webpack模块打包工具
npm install -g webpack

##初始化项目
vue init webpack 刚创建的目录名称

##安装vue的基础依赖库
npm install

由于我的项目已经初始过,这里借用一张图来简单了解下配置:

4、启动项目

##执行package.json中的script脚本
npm run dev

详细解析命令看这里

三、配置自定义页面

1、目录结构

2、运行流程

四、配置跨域

  由于浏览器存在同源策略,当我们启动后台的时候,很可能后台服务访问路径的端口会和前端页面工程的端口不一致(比如后台服务端口为8080,即controller的访问为8080,再启动vue工程端口为8081,这时由8081端口的vue页面要发送请求给8080端口的controller,就会存在跨域的问题),所以我们还需要配置一下跨域的设置

1、安装axios用于发送请求

#安装命令【vue主目录下执行,安装完成后在main.js中引入,下面有图解】
$ npm install axios -S

2、跨域代理设置

VUE开发(一)Spring Boot整合Vue并实现前后端贯穿调用的更多相关文章

  1. Spring Boot 整合JDBC 实现后端项目开发

    一.前言 二.新建Spring Boot 项目 三.Spring Boot 整合JDBC 与MySQL 交互 3.1 新建数据表skr_user 3.2 Jdbcproject 项目结构如下 3.3 ...

  2. Spring Boot整合Elasticsearch

    Spring Boot整合Elasticsearch   Elasticsearch是一个全文搜索引擎,专门用于处理大型数据集.根据描述,自然而然使用它来存储和搜索应用程序日志.与Logstash和K ...

  3. spring boot整合servlet、filter、Listener等组件方式

    创建一个maven项目,然后此项目继承一个父项目:org.springframework.boot 1.创建一个maven项目: 2.点击next后配置父项目及版本号 3.点击finish后就可查看p ...

  4. Spring Boot(十四):spring boot整合shiro-登录认证和权限管理

    Spring Boot(十四):spring boot整合shiro-登录认证和权限管理 使用Spring Boot集成Apache Shiro.安全应该是互联网公司的一道生命线,几乎任何的公司都会涉 ...

  5. Spring boot整合jsp

    这几天在集中学习Spring boot+Shiro框架,因为之前view层用jsp比较多,所以想在spring boot中配置jsp,但是spring boot官方不推荐使用jsp,因为jsp相对于一 ...

  6. Spring Boot 整合 FastDFS 客户端

    原文地址:Spring Boot 整合 FastDFS 客户端 博客地址:http://www.extlight.com 一.前言 前两篇介绍整体上介绍了通过 Nginx 和 FastDFS 的整合来 ...

  7. Spring Boot整合JPA、Redis和Swagger2

    好久没有总结了,最近也一直在学习.今天就把spring boot与其它技术的整合做个小总结,主要是jpa.redis和swagger2.公司里有用到这些,整合起来也很简单. 首先,新建一个Spring ...

  8. Spring Boot整合实战Spring Security JWT权限鉴权系统

    目前流行的前后端分离让Java程序员可以更加专注的做好后台业务逻辑的功能实现,提供如返回Json格式的数据接口就可以.像以前做项目的安全认证基于 session 的登录拦截,属于后端全栈式的开发的模式 ...

  9. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

随机推荐

  1. akka-grpc - 基于akka-http和akka-streams的scala gRPC开发工具

    关于grpc,在前面的scalaPB讨论里已经做了详细的介绍:google gRPC是一种全新的RPC框架,在开源前一直是google内部使用的集成工具.gRPC支持通过http/2实现protobu ...

  2. 模拟画图题P1185 绘制二叉树

      题目链接P1185 绘制二叉树 题意概述   根据规则绘制一棵被删去部分节点的满二叉树.节点用 \(o\) 表示,树枝用/\表示.每一层树枝长度会变化,以满足叶子结点有如下特定: 相邻叶子节点是兄 ...

  3. 用maven整合SSM中jsp运行报404和500问题解决方案

    如果代码检查没有错误,建议更改maven版本,可以改为maven-3.6.1 网址:https://archive.apache.org/dist/maven/maven-3/ 选择3.6.1 再点击 ...

  4. 1. 不吹不擂,第一篇就能提升你对Bean Validation数据校验的认知

    乔丹是我听过的篮球之神,科比是我亲眼见过的篮球之神.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免 ...

  5. 屏幕适配 部分知识点总结,CSDN小冰原创

    /** * 作者:David Zheng on 2015/11/7 15:38 * *  网站:http://www.93sec.cc * *  微博:http://weibo.com/mcxiaob ...

  6. P1164 小A点菜(动态规划背包问题)

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...

  7. Codeforces Round #668 (Div. 2)A-C题解

    A. Permutation Forgery 题目:http://codeforces.com/contest/1405/problem/A 题解:这道题初看有点吓人,一开始居然想到要用全排序,没错我 ...

  8. 洛谷 P4093 [HEOI2016/TJOI2016]序列 CDQ分治优化DP

    洛谷 P4093 [HEOI2016/TJOI2016]序列 CDQ分治优化DP 题目描述 佳媛姐姐过生日的时候,她的小伙伴从某宝上买了一个有趣的玩具送给他. 玩具上有一个数列,数列中某些项的值可能会 ...

  9. 测试JsonAnalyzer2的12个测试用例:

    测试用例如下: 01. Compact json text={"status":"","message":"success&quo ...

  10. 测试JsonAnalyzer解析Json的十一个测试用例

    目测以下测试用例都是通过的. 01. 原文={"status":"","message":"success"," ...