首页 > 其他分享> 文章详细

Spring Boot+Vue测试项目

2019-09-06 20:03:21 阅读：222 来源： 互联网

标签：vue Footer Spring Boot Header Vue components import

一、构建项目

使用vue-cli创建项目：

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

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

二、进行前端代码编写

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

前端页面代码：

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/>'
})

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

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

基本上就是这个页面：

三、后端代码编写

后端使用springboot。

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

创建相关类：

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

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

四、运行

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

登录成功进行跳转：

失败：

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

标签：vue,Footer,Spring,Boot,Header,Vue,components,import
来源： https://blog.csdn.net/BlackPlus28/article/details/100585759

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Spring Boot+Vue测试项目

一、构建项目

二、进行前端代码编写