SpringBoot+Vue的前后端框架内容

皮特约奥达曼

已于 2023-06-26 01:53:42 修改

阅读量2k

点赞数 3

文章标签： vue.js 前端 javascript spring boot

于 2023-06-26 01:48:51 首次发布

本文链接：https://blog.csdn.net/m0_56400780/article/details/131382705

版权

近期在写一个SpringBoot+Vue的前后端项目，所以想着写个博客来记录自己的框架搭建以免以后遗忘。

（一）SpringBoot后端部分

总览：

为了方便理解，根据总览图从上往下开始描述，以及一些要注意的地方。

1. common包

用于定义返回给前端的标识状态码。

2. config包

用于存放处理前后端跨域问题程序的包。

3. controller层控制层

用于存放控制层程序。

4. dao层数据层

存放操作数据库的接口文件。

5. pojo层持久层

放置基础类的包

6. service层服务层

分开两个部分，接口放在外层，在子包中实现接口。控制层使用接口调用服务层。

7. util包

用于存放一些程序使用到的工具程序，例如大小写变化，排序等多次使用的程序。

8. resources 资源

这个部分是用于存放mapper等配置文件和静态网页或图片的。

9. test 测试

用于存放测试程序

注意点：我们为了开发方便，使用了@Data注解，所以要在pom.xml文件中添加如下配置

application文件我们修改成了yml类型，内容如下：

（二）Vue前端部分

这部分开发我们使用了ElementUI组件。

总览：

1. api 接口*

api包用于存放调用后端接口的程序，需要有一个index.js文件，文件内容如图

接口程序例子

这里使用登录接口作为例子，这里需要先引入index中的的request，然后就可以跟后端写程序方法一样书写前端调用的方法，url为你需要调用的后端接口的标识符。method为请求的方法，有post与get两种。params为需要传输的参数，如果是简单无需保密的参数可以使用params进行url传参，如果需要传递更大或者需要保密的参数则建议使用data。

2. assuets包

用于存放静态图片文件和css文件

3. components 组件*

这里存放的是各个页面上的组件，可以是单独的组件，也可以是几个页面共用的组件。

4. router 路由*

路由是vue项目中非常重要的一部分，通过路由可以实现页面的快速切换。这里必须有一个默认文件index.js

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";
import storage from "@/util/storage";


Vue.use(VueRouter)

const routes = [
  {
    name:'login',
    path:'/login',
    component: () => import('@/views/LoginView'),
  },
  {
    name: 'register',
    path: '/register',
    component: () => import('@/views/RegisterView')
  },
  {
    name: 'home',
    path: '',
    component: () =>import('@/views/HomeView'),
    children:[
      //  主页面
      {
        name: 'main',
        path: '/main',
        component: () => import('@/views/MainView')
      },
      //  测试人员界面
      {
        name: 'tester',
        path: '/tester',
        component: () => import('@/views/TesterView')
      },
      //  开发人员界面
      {
        name: 'developer',
        path: '/developer',
        component: () => import('@/views/DeveloperView')
      },
      //  消息界面
      {
        name: 'task',
        path: '/task',
        component: () => import('@/views/TaskView')
      },
      //  用户界面
      {
        name: 'user',
        path: '/user',
        component: () => import('@/views/UserView')
      },
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach(((to, from,next) => {
  //每次进行路由切换都判断一下有没有登录，如果没有登录则路由到登录页面，否则放行
  /*if (to.meta.requireAuth) {
    console.log(to.meta.requireAuth)
    if (user.user_id!=='undefined') {
      console.log(user.user_id);
      next();
    }else {
      // next({
      // path: '/login',
      // })
      console.log(user.user_id);
      router.push({name:'login'});
    }
  }else {
    next();
  }*/

  //1.如果去的是登录页面，就放行
  if(to.name === 'login'){
    return next();
  }

  console.log(store.getters["user/isLogin"])
  //2.检查是否登录，如果已经登录则放行
  if(!store.getters["user/isLogin"]){
    console.log(store.getters["user/isLogin"])
    console.log("没登录")
    if (!storage.getSessionObject("loginUser")){
      console.log("找不到")
      if (from.name !== 'login'){
        console.log("这个页面不是login")
        router.push({name: 'login'},).then()
      }
    }else {
      store.dispatch("user/RECOVERY_USER").then()
      console.log("执行了")
    }
  }

  /*console.log(to)
  console.log(from)*/
  //3.每次进行路由切换都判读那一下有没有登录，如果没有登录则路由到登录页面，否则放行
  console.log("跳转了")
  next();
  return true
}))
export default router

5. store 状态

这里存储的是前端常用的某种数据的状态，例如用户信息是每个页面都要使用的信息，就可以在这里建立用户状态进行存储，在需要时取出来使用，必须拥有index.js文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from "@/store/modules/user";
import actions from "@/store/actions"
import mutations from "@/store/mutations"

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        user:user,
    },
    actions,
    mutations
})

export default store

这是一个状态类的例子

user.js

import storage from "@/util/storage";
import {selectByPhone} from "@/api/eroll";

const user = {
    namespaced:true,
    state: {
        id:'',
        name:'',
        phone:'',
        e_mail:'',
        password:'',
        position:'',
        gender:'',
    },
    getters:{
        isLogin(state){
            return state.phone !== '';
        }
    },
    mutations:{
        SAVE_USER_ID(state,id){
            state.id = id;
        },
        SAVE_USER_NAME(state,name){
            state.name = name;
        },
        SAVE_USER_PHONE(state,phone){
            state.phone = phone;
        },
        SAVE_USER_E_MAIL(state,e_mail){
            state.e_mail = e_mail;
        },
        SAVE_USER_PASSWORD(state,password){
            state.password = password;
        },
        SAVE_USER_POSITION(state,position){
            state.position = position;
        },
        SAVE_USER_GENDER(state,gender){
            state.gender = gender;
        },
    },
    actions:{
        //获取用户数据（部分，包括密码）传入前端使用
        FIND_USER({commit},user){
            return new Promise(resolve => {
                selectByPhone(user.phone).then(
                    res => {
                        console.log(res);
                        commit("SAVE_USER_ID",res.data.id);
                        commit("SAVE_USER_NAME",res.data.name);
                        commit("SAVE_USER_PHONE",res.data.phone);
                        commit("SAVE_USER_E_MAIL",res.data.e_mail);
                        commit("SAVE_USER_PASSWORD",res.data.password);
                        commit("SAVE_USER_POSITION",res.data.position);
                        commit("SAVE_USER_GENDER",res.data.gender);
                        storage.saveSessionObject("loginUser",res.data);
                        //定义方法结束
                        resolve();
                    }
                )
            })
        },
        //登出，删除session对应信息
        LOGOUT({commit}){
            return new Promise(function (){
                commit("SAVE_USER_ID",'');
                commit("SAVE_USER_NAME",'');
                commit("SAVE_USER_PHONE",'');
                commit("SAVE_USER_E_MAIL",'');
                commit("SAVE_USER_PASSWORD",'');
                commit("SAVE_USER_POSITION",'');
                commit("SAVE_USER_GENDER",'');
                storage.remove("loginUser");
            })
        },
        //从Session中获取信息，在页面跳转后用户信息依然存在
        RECOVERY_USER({commit}){
            let loginUser = storage.getSessionObject("loginUser");
            console.log(loginUser)
            if (loginUser){
                commit("SAVE_USER_ID",loginUser.id);
                commit("SAVE_USER_NAME",loginUser.name);
                commit("SAVE_USER_PHONE",loginUser.phone);
                commit("SAVE_USER_E_MAIL",loginUser.e_mail);
                commit("SAVE_USER_PASSWORD",loginUser.password);
                commit("SAVE_USER_POSITION",loginUser.position);
                commit("SAVE_USER_GENDER",loginUser.gender);
            }
        }
    }
}
export default user

6. util 工具

这里用于存放一些工具程序

例如我这里存放的就是用于将用户数据存进浏览器session中的工具程序 storage.js

storage.js

//功能是将session信息存储进浏览器，或是将session信息从浏览器中提取出来
export default {
    saveSessionString(key,value){
        window.sessionStorage.setItem(key,value);
    },
    getSessionString(key){
        return window.sessionStorage.getItem(key);
    },
    saveSessionObject(key,value){
        window.sessionStorage.setItem(key,JSON.stringify(value));
    },
    getSessionObject(key){
        return JSON.parse(window.sessionStorage.getItem(key));
    },
    remove(key){
        return window.sessionStorage.removeItem(key);
    }
}

7. views 视图

这里存放的是的用于切换的完整的网页页面，也就是视图。视图会调用组件来使用，

8. main.js*

main.js是vue项目的关键文件之一，创建新项目后要修改其中的内容，由于我们开发使用的是ElementUI，所以在安装ElementUI后引入ElementUI，同时加入路由、状态和接口的对象。这些对象已经在路由、状态和接口自身的index.js中抛出了。

main.js（修改后）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from "@/store";
import request from '@/api'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css';

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  router,
  store,
  request,
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

9. vue.config.js

vue.config.js是用于配置一些vue项目的基础属性的，例如启动端口号、启动后是否自动打开网页、https是否开启等属性，在这里需要配置代理服务器来解决跨域问题和前后端连接问题。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  transpileDependencies: true,
  //代理
  devServer:{
    port:8082, // 启动端口号
    /*open:true  // 启动后是否自动打开网页*/
    proxy:{
      '/api':{
        target:'http://localhost:8888',
        //todo 服务器代理
        //ws还没搞明白是什么东西 但这个原本应该是true
        ws:true,
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    },
    https:true
  }
}