Spring boot+vue前后端分离

目录

1、前端vue的搭建

2、后端项目的构建

pom文件中引入的jar包

yml文件用来配置连接数据库和端口的设置

application.property进行一些整合

service层

imp层

mapper

实体类

额外写一个类、解决跨域问题

3、测试

1、前端vue的搭建


建立项目的过程略
开启一个建立好的vue项目用npm run dev
关闭一个vue项目可在终端操作:ctrl+c
需要注意的几点
1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。
2、安装axios npm install --save axios vue-axios

前端项目结构样式

Spring boot+vue前后端分离_第1张图片

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 './plugins/axios'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

Vue.js
在这里可以定义跳转到其他页面的连接







配置的路由
在这里配置各个页面跳转的路由

import Vue from 'vue'
import Router from 'vue-router'

import UserList from '../components/UserList'
import Home from '../components/Home'


Vue.use(Router)

export default new Router({
  routes: [

  {
    path:'/user',
    component:UserList
    },
    {
      path:'/',
      component:Home
    }
  ]
})

组件1、







组件2
(每个组件之间都可以和后台数据交互通过axios)
提示: const _this =this变量的设置,否则会和回调函数搞混
这里和后台进行连接是通过url。这里的url是访问某一个接口的url,就相当于和某个方法进行打通




                    
                    

你可能感兴趣的:(spring,boot,vue.js,后端)