正文 

当前位置： 首页 > 代码 > java教程

springboot+mybatisplus+vue前后端分离项目快速搭建前端篇快速生成后端代码封装结果集增删改查模糊查找毕设基础框架(代码片段)

牛哄哄的柯南 牛哄哄的柯南     2022-10-21     453

关键词：

前后端分离项目快速搭建【前端篇】

后端篇

SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】

前端篇

创建vue项目

1、找个文件夹进入命令行，输入：vue create vue-front

2、直接回车，等待片刻，稍微有点小久

3、根据提示指令测试



打开浏览器输入：http://localhost:8080/

安装所需工具

安装的工具会有点多，为了提供更好的拓展性，可以自主选择安装（不建议），后面的代码中都是使用到了，不安装然后按照我的代码写可能会报错，建议安装，这样拓展性更高。

1、安装vue-router

npm install vue-router


2、安装 element-ui

npm i element-ui -S


3、安装axios

npm install axios

4、安装 vuex

npm install vuex --save


5、安装 axios-utils

npm i axios-utils



6、安装vuex-persistedstate

npm i -S vuex-persistedstate


开始编码

1、在根目录下添加vue.config.js文件


vue.config.js：

module.exports = 
    lintOnSave:false, //关闭代码格式化校验工具
    devServer:
        port: 81//修改启动端口

2、编写main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from '@/utils/axiosutils.js'
import store from '@/vuex'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.axios = axios
new Vue(
	router,
  render: h => h(App),
).$mount('#app')

3、编写App.vue

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>

<script>


export default 
	
  name: 'App',
  components:    

</script>

<style>
*
	padding: 0;
	margin: 0; 

</style>

4、编写axiosutils.js

在src目录下创建utils目录，并在utils目录创建axiosutils.js

import axios from 'axios'
import store from '../vuex'
axios.defaults.baseURL = 'http://127.0.0.1:80'
if (store.getters.getToken) 
  axios.defaults.headers.common['token'] = store.getters.getToken

axios.defaults.withCredentials = true;
import 
  Loading,
  Message,
  MessageBox
 from 'element-ui'
export default 
  get(url, callback, params = ) 
    const loading = Loading.service(
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    )
    axios.get(url, 
      params: params
    ).then(response =>  
      if (response.data.code === 200) 
        callback(response.data)
       else 
        Message.error(response.data.message)
      
    ).catch(err => 
      Message.error(err);
    ).finally(() => 
      loading.close()
    )
  ,
  post(url, callback, params = ,msg) 
    const formData = new FormData()
    for (let key in params) 
      formData.append(key, params[key])
    
    const loading = Loading.service(
      lock: true,
      text: '数据提交中',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    )
    setTimeout(() => 
      loading.close()
    , 10000)
    axios.post(url, formData)
      .then(response => 
        if (response.data.code === 200) 

          if(msg===undefined  )
              Message.success(response.data.message)
          else if(msg != null && msg.length != 0 )
            Message.success(msg)
          

 
          callback(response.data)
         else 
          Message.error(response.data.message)
        
      ).catch(err => 
        Message.error(err)
      ).finally(() => 
        loading.close()
      )
  ,
  setToken(token) 
    axios.defaults.headers.common['token'] = token

5、在components目录下编写menu.vue

<template>
	<div>
		<el-menu default-active="2" class="el-menu-vertical-demo" router background-color="#545c64" text-color="#fff"
			active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>系统管理</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/user">用户管理</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			
		</el-menu>



	</div>
</template>

<script>
	export default 
		name: 'Menu',
		components: 

		,
		data() 
			return 
		,
		methods: 

		,
		created() 
	
</script>

<style>
</style>

7、在router目录下编写router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter(

	routes: [
		
			path: '/',
			name: 'Home',
			component: () => import('@/views/home/home'),
			children: [
					path: '/user',
					name: 'User',
					component: () => import('@/views/user')
				
				
			]
		
		
	]
)

8、在src目录下创建vuex

1、编写getters.js

export default 
  getToken: state => return state.token

2、编写index.js

import Vuex from 'vuex'

import Vue from 'vue'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
export default new Vuex.Store(
  plugins: [createPersistedState(
    storage: window.sessionStorage
  )],
  state,
  mutations,
  getters
)

3、编写mutations.js

export default 
  setToken: (state,token) => state.token = token

4、编写state.js

export default 
  token: ''

9、编写home.vue

在views目录下创建home目录，在home目录下创建home.vue

<template>
  <div>
  <el-container class="wrap" >
    <el-header class="header" >牛哄哄的柯南</el-header>
    <el-container>
      <el-aside width="260px" class="aside">
		    
		  <Menu></Menu>
		 
	  </el-aside>
      <el-main class="main">
		  
		  <router-view></router-view>
		  	  
	  </el-main>
    </el-container>
  </el-container>
  	
  
  </div>
</template>

<script>
	
	import Menu from '@/components/menu'
	
  export default 
    name: 'Home',
    components: 
		Menu
    ,
    data() 
      return 
      
    ,
    methods: 

    ,
    created()  
  
</script>

<style >
	
	.wrap
			height: 80vh;
			
		
		.header
			background-color: grey;
		
		
		.aside
			background-color: black;
		
		.main
			background-color: white;
		
	
	
</style>

10、编写user相关代码（前端核心逻辑代码、增删改查还有模糊查询，包括逻辑删除和物理删除）

在views目录下创建user目录，在home目录下创建index.vue和edit.vue

编写index.vue

<template>
	<div>

		<el-row>

			<el-col :span="5">
				<el-button type="danger" icon="el-icon-delete" circle @click="batchdel"></el-button>
			</el-col>
			<el-col :span="9">
				<el-input v-model="search.name" placeholder="请输入账号查找"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary"   @click="searchData">查询</el-button>
				<el-tooltip class="item" effect="dark" content="添加数据" placement="top-start">
					<el-button type="primary" @click="add">添加</el-button>
				</el-tooltip>
			</el-col>
		</el-row>
		<el-divider><i ></i></el-divider>

		<el-table :data="tableData" style="width: 100% ;" stripe
			@selection-change="handleSelectionChange">

			<el-table-column type="selection">
			</el-table-column>
			<el-table-column label="序号"  prop="userId">
			
			</el-table-column>
			<el-table-column label="账号" prop="userName">
			
			</el-table-column>

			<el-table-column label="密码" prop="password">

			</el-table-column>

			

			<el-table-column label="状态" prop="userState" fixed="right">
				<template slot-scope="scope">
			
					<el-tag v-if="scope.row.userState == 1">正常</el-tag>
					<el-tag type="danger" v-else-if="scope.row.userState == 0">禁用中</el-tag>
			
				</template>
			</el-table-column>
			
			




			 
			<el-table-column label="操作" fixed="right" width="150">
				查看详情  

                

springboot整合mybatis以及mybatisplus


这篇文档介绍整合的过程  查看详情  

                

springboot----mybatisplus插件


自动填充注解实体字段publicclassUser{@TableField(fill=FieldFill.INSERT)privateDatecreateTime;@TableField(fill=FieldFill.INSERT_UPDATE)privateDateupdateTime;}自定义实现类@ComponentpublicclassMyMetaObjectHandlerimplemen  查看详情  

                

mybatisplus新版本springboot集成mybatisplus主键生成策略(代码片段)


设置在pojo类的id上添加注解@TableId(type=IdType.x)源码TableId.classpackagecom.baomidou.mybatisplus.annotation;importjava.lang.annotation.Documented;importjava.lang.annotation.ElementType;importjava.lang.an  查看详情  

                

springboot+postgresql+mybatisplus整合的一些坑


技术架构:springboot+mybatisplus+postgresql+gradle自定义TypeHnadler的使用自定义的TypeHandler主要是转换Jsonb和array等类型如果是使用mybatisplus的内置方法,则需要在实体字段加上@TableField注解,并且需要在类名上启动@TableName(autoResultMap=true)//autoRe...  查看详情  

                

springboot+postgresql+mybatisplus整合的一些坑


技术架构:springboot+mybatisplus+postgresql+gradle自定义TypeHnadler的使用自定义的TypeHandler主要是转换Jsonb和array等类型如果是使用mybatisplus的内置方法,则需要在实体字段加上@TableField注解,并且需要在类名上启动@TableName(autoResultMap=true)//autoRe...  查看详情  

                

springboot+mybatisplus替换mybatis整合报错mappedstatementscollectiondoesnotcontainvalue


mybatisPlus完全兼容mybatis，一般来说直接替换掉就可以了，如果mybatis的数据源不能取消创建的话，就注掉mybatisplus的数据源//@ConfigurationpublicclassDataSourceConfig{//@Bean(name="dataSource2")//@ConfigurationProperties(prefix="spring.datasource  查看详情  

                

springboot+mybatisplus实现多表联查分页


1配置分页插件publicclassMybatisPlusConfig{@BeanpublicPaginationInterceptorpaginationInterceptor(){returnnewPaginationInterceptor();}@BeanpublicPerformanceInterceptorperformanceInterceptor(){PerformanceInter  查看详情  

                

springboot+mybatisplus，再加入shardingjdbc分表玩法


mybatisplus是mybatis的升级版，省去了繁琐的写xml环节，十分好用，具体文档可见http://mp.baomidou.com先创建一个springboot项目，导入关键jar包<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-s  查看详情  

                

springboot调整mybatisplus全局的验证策略


由于Mybatisplus默认的更新策略是NOT_NULL：非NULL；即通过接口更新数据时数据为NULL值时将不更新进数据库。所以Mybatisplus通过updateById(XX)更新数据，当用户有更新字段为空字符串或者null的需求时，需要对FieldStrategy策略进行调整。Fie...  查看详情  

                

mybatisplus的代码生成器使用详解（整合springboot）(代码片段)


MybatisPlus代码生成器使用详解（整合springboot）文章目录MybatisPlus代码生成器使用详解（整合springboot）代码生成器概述整合springboot步骤第一步：创建数据库表第二步：导入jar包第三步：去配置文件第四步...  查看详情  

                

springboot+mybatisplus配置多数据源(代码片段)


springboot+mybatisplus配置多数据源1、引入依赖pom.xml文件引入dynamic-datasource-spring-boot-starter包<dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-st  查看详情  

                

mybatisplus新版本springboot集成mybatisplus主键生成策略(代码片段)


...解@TableId(type=IdType.x)源码TableId.classpackagecom.baomidou.mybatisplus.annotation;importjava.lang.annotation.Documented;importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Document...  查看详情  

                

mybatisplus新版本springboot集成mybatisplus主键生成策略(代码片段)


...解@TableId(type=IdType.x)源码TableId.classpackagecom.baomidou.mybatisplus.annotation;importjava.lang.annotation.Documented;importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Document...  查看详情  

                

springboot关闭mybatisplus启动图标(banner)(代码片段)


  去掉此图标配置文件：application.yml添加内容：mybatis-plus:global-config:banner:false   查看详情  

                

springboot+mybatis+mybatisplus整合实现基本的crud操作


SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作1>数据准备--创建测试表CREATETABLE`tb_user`(`id`bigint(20)NOTNULLAUTO_INCREMENTCOMMENT‘主键ID‘,`user_name`varchar(20)NOTNULLCOMMENT‘用户名‘,`password`varchar(20)NOTNULLC  查看详情  

                

springboot学习mybatisplus(代码片段)


引入Mybatis-plus<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3.1</version></dependency>   查看详情  

                

spring-boot-mybatisplus(代码片段)


文章目录Springboot整合MybatisPlus上一节springbootJPA源码MybatisPlusspringboot整合MybatisPlussql打印mybatisPlus通用mapperMybatisPlus通用ServiceMybatisPlus分页MybatisPlus条件查询QueryWrapperUpdateWrapperLambdaQueryWrapperLambdaUpdateWrapperMybatisPlusAR主键生成策略逻辑...  查看详情