Spring Boot+Vue前后端分离项目案例

Spring Boot+Vue前后端分离项目案例一、构建项目使用vue-cli创建项目:然后导入编辑器(我使用的是webstorm),先进行启动下,看能否访问到localhost:8080。能访问到表示使用vue-cli创建项目正常。二、进行前端代码编写记得添加修改config下 的index.js文件前端页面代码:Footer.vue<template> <…

大家好,又见面了,我是你们的朋友全栈君。

一、构建项目

使用vue-cli创建项目:

Spring Boot+Vue前后端分离项目案例

然后导入编辑器(我使用的是webstorm),先进行启动下,看能否访问到localhost:8080。

能访问到表示使用vue-cli创建项目正常。

Spring Boot+Vue前后端分离项目案例

 

二、进行前端代码编写

记得添加修改config下 的index.js文件

 

Spring Boot+Vue前后端分离项目案例

 

前端页面代码:

Footer.vue

<template>
  <div>
    页面尾部
  </div>
</template>

<script>
    export default {
        name: "footer"
    }
</script>

<style scoped>

</style>

Header.vue

<template>
  <div>
    页面头部
  </div>
</template>

<script>
    export default {
        name: "header"
    }
</script>

<style scoped>

</style>

Index.vue

<template>
  <div>
    <blog-header></blog-header>
    <hr/>
    <div>
      这是首页,嘻嘻嘻。
    </div>
    <hr/>
    <blog-footer></blog-footer>
  </div>
</template>

<script>
  import Header from '@/components/common/Header'
  import Footer from '@/components/common/Footer'
    export default {
        name: "index",
      // Header/Footer组件给申明到components里面然后在template里面使用
      components: { Header, Footer }
    }
</script>

<style scoped>

</style>

Login.vue 

<template>
  <div>
    <header></header>
    <hr/>
    <div>
      用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
      <br/>
      密码:<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
      <br/>
      <button v-on:click="login">登录</button>
      <br/>
      登录验证情况:<textarea cols="30" rows="10" v-model="responseResult"></textarea>
    </div>
    <hr/>
    <footer></footer>
  </div>
</template>

<script>
  import Header from '@/components/common/Header'
  import Footer from '@/components/common/Footer'
    export default {
        name: "login",
  // Header、Footer组件给申明到components里面然后在template里面使用
  components: { Header, Footer },
  data () {
    return {
      loginInfoVo: { username: '', password: '' },
      responseResult: []
    }
   },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          username: this.loginInfoVo.username,
          password: this.loginInfoVo.password
        })
        .then(successResponse => {
          this.responseResult = JSON.stringify(successResponse.data)
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {})
    }
  }
  }
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/manage/Login'
import Index from '@/components/home/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/index',
      name: 'Index',
      component: Index
    },
    {
      path: '/manage',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 引用axios,并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

中途启动的项目可能会报错:

Spring Boot+Vue前后端分离项目案例

停掉项目,在项目中安装axios,再重新启动项目。

Spring Boot+Vue前后端分离项目案例

基本上就是这个页面:

Spring Boot+Vue前后端分离项目案例

三、后端代码编写

后端使用springboot。

由于我的开发环境用的是IntelliJ IDEA 2017.3.3,创建Spring Boot项目时参考另一篇博文“idea快速搭建springboot项目   ”http://www.cnblogs.com/pengyan-9826/p/8093099.html。 但这里要注意的是,原文人家用MyBatis了,咱这里测试前后端分离,先不用勾选MyBatis,要不还得配置数据库,否则项目启动会报错:
Spring Boot+Vue前后端分离项目案例

 创建相关类:

Spring Boot+Vue前后端分离项目案例

后端写好了,把前端打包生成的dist目录里的文件拷贝到后端项目的static目录下。运行一下,发现启动的是8080端口。想起来Vue那指定的是8443了,得修改一下项目中的application.properties文件:

Spring Boot+Vue前后端分离项目案例

把打包的vue项目放到resources文件夹下,css和js文件夹在static下,index.html在最外面的

Spring Boot+Vue前后端分离项目案例

四、运行

启动idea,输入localhost:8843即可进行跳转

Spring Boot+Vue前后端分离项目案例

登录成功进行跳转:

Spring Boot+Vue前后端分离项目案例

失败:

Spring Boot+Vue前后端分离项目案例

到此,springboot+vue前后端连接上,后面再连接上数据库,替换成数据库数据。

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147168.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • navicat怎么连接远程mysql_navicat可以连接sql server吗

    navicat怎么连接远程mysql_navicat可以连接sql server吗第一,首先能ping通mysql数据库所在的主机。第二,telnetmysql数据库的端口号。如果不行,要在防火墙,高级设置里面,配置入站规则;开放3306端口。第三,如果还不行,结合下面两个网址http://blog.csdn.net/a19881029/article/details/50805562,总结如下:第一步:mysql服务没问

    2022年10月13日
  • mybatis log plugin激活码激活流程[最新免费获取][通俗易懂]

    (mybatis log plugin激活码激活流程)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1STL5S9V8F-eyJsaWNlbnNlSWQi…

  • 《人工神经网络原理》读书笔记(六)-Boltzmann机[通俗易懂]

    《人工神经网络原理》读书笔记(六)-Boltzmann机[通俗易懂]全部笔记的汇总贴:《人工神经网络原理》-读书笔记汇总一、随机型神经网络的提出BP和Hopfield网络陷入局部最小点的原因网络误差或能量函数构成了含有多个极小点的非线性超曲面;网络误差或能量函数只能按照梯度下降方向单调变化,而不能有任何上升趋势。随机型神经网络的基本思想不但能够让网络误差或能量函数按照梯度下降方向变化,也能够让它们按照某种方式向梯度上升方向变化,这样才有可能使网络跳出局部极小点而向全局极小点收敛。随机型神经网络的特点神经元的输出状态有概率决定;网络连接权值的调整

  • ASP.NET Framework 重写后的 .NET 异常报错界面(异常堆栈和溯源一目了然)

    ASP.NET Framework 重写后的 .NET 异常报错界面(异常堆栈和溯源一目了然)

    2021年11月24日
  • Flask 的 jsonify解析

    Flask 的 jsonify解析首先运行如下代码:fromflaskimportFlask,jsonifyapp=Flask(__name__)tasks=[{‘id’:1,’title’:u’订阅python_mastery专栏’,’description’:u’专栏Link:https://xiaozhuanlan.com/python_mastery’},{‘id’:2,’t

  • RewriteCond指令格式

    RewriteCond指令格式RewriteCond指令格式语法:RewriteCondTestStringCondPattern[flags]RewriteCond指令定义一条规则条件。在一条RewriteRule指令前面可能会有一条或多条RewriteCond指令,只有当自身的模板(pattern)匹配成功且这些条件也满足时规则才被应用于当前URL处理。1、TestString是一个纯文本的字符串,除

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号