Vue实现前后端完全分离的项目实战

目录
  • 1.Vue
  • 2. 安装Nodejs服务器
    • 2.1安装npm
    • 2.2 安装vue的脚手架
  • 3. 使用脚手架创建Vue工程
    • 3.1.在cmd窗口中输入命令,打开创建界面
    • 3.2创建
    • 3.3创建完成后
  • 4.使用WebStorm打开Vue工程
  • 5.App.vue组件
    • 5.1一个组件引用另一个组件:
    • 5.2父组件如何向子组件传值
  • 6.浅谈路由

1.Vue

我们之前项目中也使用到了Vue，但是我们之前的vue和我们的java代码是不是都在一个工程下。没有做到前后端完成分离。企业中前端也会由自己的服务器，也有自己的开发工具。

前端服务器Nodejs 开发工具VsCode[我们为了和idea匹配使用WebStorm].

2. 安装Nodejs服务器

2.1安装npm

因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。

我们无需安装因为在nodejs中默认带了该软件

2.2 安装vue的脚手架

脚手架的作用:就是用来帮你创建前端vue工程。

安装的命令: npm install -g @vue/cli

速度很慢

3. 使用脚手架创建Vue工程

3.1.在cmd窗口中输入命令,打开创建界面

vue ui

3.2创建

(1)

(2)

(3)

(4)

(5)

3.3创建完成后

3.3.1

3.3.2安装需要的elementui插件

3.3.3安装axios发送异步请求的依赖

4.使用WebStorm打开Vue工程

关联:npm命令

（1）

（2）

整个项目中node_modules占用项目的空间99%。 以后拿到的项目一定没有node_modules。需要自己在本地安装。

npm install  -- 安装项目需要的模块

npm run serve  --运行项目 nodejs

4. 聊聊main.js

5.App.vue组件

注意:每个组件必须加 div

5.1一个组件引用另一个组件:

当前组件中导入另一个组件 

import hello from './components/Hello.vue'

注册另一个组件

export default {
  name: 'app',
  //(2)注册组件
  components: {
     hello
  }
}

使用注册的组件

<!--(3)使用组件-->
<hello></hello>

5.2父组件如何向子组件传值

5.2.1父组件App.vue定义要传的属性

data() {
    return {
      age: 15,
      names: ["喜羊羊","美羊羊"]
    }
  }

5.2.2使用子组件的时候传值

 <!--③使用组件  在子组件 props中定义了msg名称   跟子组件保持一致就行-->
    <Hello :msg="names" :msg2="age"></Hello>

5.2.3子组件定义props，并使用

props: {
            msg: [],
            msg2: String
        }

5.2.4子组件使用属性

{{msg[0]}}  {{msg2}}

6.浅谈路由

（1）使用路由跳转

   <p>
     <!--router-link可以理解为<a>   to可以理解为href=路径
        一旦使用了路由跳转  ----必须找router/index.js文件
        该文件中配置了路由和组件的映射关系
     -->
     <router-link to="/home"><el-button type="primary">首页</el-button></router-link>
     <router-link to="/user"><el-button type="primary">用户管理</el-button></router-link>
   </p>

（2）配置router/index.js文件

    //不管以后有没有用用到都先把组件引用过来
  {
    path: '/home',
    name: 'Home',
    component: Home
  },

    //使用的时候再把组件引用过来
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue')
  }

这里有两种配置路由的方式，一种是不管用不用直接把组件先引过来，另一种是使用的时候再把组件引过来

（3）渲染组件

<!--渲染组件-->
      <router-view/>

到此这篇关于Vue实现前后端完全分离的项目实战的文章就介绍到这了,更多相关Vue 前后端完全分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解前后端分离之VueJS前端

    详解前后端分离之VueJS前端

    前言 前端用什么框架都可以,这里选择小巧的vuejs. 要实现的功能很简单: 1.登录功能,成功将服务器返回的token存在本地 2.使用带token的header访问服务器的一个资源 本次实验环境: "dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

  • 详解Vue微信授权登录前后端分离较为优雅的解决方案

    微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份. 微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后

  • 详解VueJs前后端分离跨域问题

    使用vue-cli搭建的vue项目 可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题 设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址 dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ag

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • vue2 前后端分离项目ajax跨域session问题解决方法

    最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

  • 详解vue.js+UEditor集成 [前后端分离项目]

    详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

  • Vue实现前后端完全分离的项目实战

    Vue实现前后端完全分离的项目实战

    目录 1.Vue 2. 安装Nodejs服务器 2.1安装npm 2.2 安装vue的脚手架 3. 使用脚手架创建Vue工程 3.1.在cmd窗口中输入命令,打开创建界面 3.2创建 3.3创建完成后 4.使用WebStorm打开Vue工程 5.App.vue组件 5.1一个组件引用另一个组件: 5.2父组件如何向子组件传值 6.浅谈路由 1.Vue 我们之前项目中也使用到了Vue,但是我们之前的vue和我们的java代码是不是都在一个工程下.没有做到前后端完成分离.企业中前端也会由自己的服务器

  • SpringBoot+VUE实现前后端分离的实战记录

    SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • 利用docker-compsoe部署前后端分离的项目方法

    说在前面 我们都知道,docker可以实现很简便的部署环境.现在我们有一个前后端分离的项目,前端基于Vue开发.利用Webpakc打包为dist文件夹.后端则是一个Node.js服务,提供API接口,前端和后端是分离的.所以我们肯定是前端项目一个container,后台项目也是一个container.那么如果是在生产环境,就会产生跨域问题.前端的请求要反向代理到后台.大家肯定首先想到的就是使用 Nginx 设置 proxy_pass .是的没有错.那么我们有了这些想法.我们如何通过 docker

  • Shiro+Cas微服务化及前后端完全分离

    本文实例为大家分享了Shiro Cas微服务化及前后端完全分离,供大家参考,具体内容如下 shiro+cas微服务化笔记 1.Spring Boot 配置 有如下两个配置文件:ShiroBaseConfig.java import lombok.extern.log4j.Log4j; import org.apache.shiro.cache.CacheManager; import org.apache.shiro.cache.MemoryConstrainedCacheManager; im

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

随机推荐