vue + element-UI + springboot 前后端分离教程(图文并茂,前端工具vscode,后端工具IntelliJ IDEA)

1、node.js 安装

  (中)https://nodejs.org/zh-cn/ 
  (英)https://nodejs.org/en/

鄙人使用版本为:node-v10.16.1-x64.msi       

网盘链接:https://pan.baidu.com/s/16qAwa9AVKracKID4HvZkDw 
提取码:aj5e 

安装很简单,一路安装即可,安装后查看版本:

    node.js 里面内置了 npm,安装完 node,npm 也就安装好了

2、安装 cnpm(淘宝镜像) 

    1、npm install -g cnpm --registry=https://registry.npm.taobao.org

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

3、安装 vue

    cnpm install vue

4、安装 vue-cli 脚手架工具

    cnpm install --global vue-cli

5、创建 vue 项目

    vue init webpack vue-project   注:项目名不能有大写,否则报错

6、vue 集成 element-ui 框架

    1、cnpm i element-ui -S

    2、 在 main.js 中引入

    // 引入 element-ui
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI);

7、vue 集成 axios (与后端进行数据交互)

 1、安装 axios
    cnpm install axios --save-dev

    2、 在 main.js 中引入

    // 引入 axios
    import axios from 'axios'
    Vue.prototype.axios = axios 

    至此,前端基本搭建完毕,可以愉快的进行前端玩耍了

    

8、vue 项目 与 springboot 项目进行交互 

    1、springboot 配置文件:

    2、vue 项目配置:

    3、vue 中发送请求(基于 axios,在main.js 中引入,上文有介绍)

         1、post 方式(需要 qs 进行数据转换,在main.js 中引入,看下文)

 

        2、get 方式 (不需要进行数据转换)

 

    4、后台接收方式(传统接收方式)

    至此,基本流程已经打通。。。

 

展开阅读全文

Springboot+Vue前后的分离整合项目实战

09-09
适用人群 Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后端技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前端技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后端分离的开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值