SpringBoot 整合 Vue 实现 前后端分离

最新推荐文章于 2023-05-28 20:08:19 发布
最新推荐文章于 2023-05-28 20:08:19 发布
阅读量668 收藏 4
点赞数 2
分类专栏： springboot vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51364443/article/details/119081654
版权

新建一个SpringBoot  项目

导包

 <dependencies>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
 
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
 
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>
 
 
        <!--  fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
 
 
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
 
 
 
        <!--mybatisplus代码生成-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
 
        <!--模板-->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>
 
 
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
 
 
        <!-- 引入swagger-bootstrap-ui包 /doc.html-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.1</version>
        </dependency>
 
 
  
 
     
 
    </dependencies>

写配置文件 application.yml

server:
  port: 8001

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/db-vue?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: root
  thymeleaf:
    cache: false

mybatis:
  mapper-locations: classpath*:mapper/*.xml		#扫描映射文件
  type-aliases-package: com.example.springbootvue004.entity		#实体类别名
  configuration:
    map-underscore-to-camel-case: true		#驼峰命名规则
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl	#控制台输出SQL

在把实体类和 mapper,service  都建好

 

新建ContactController ,写接口

    @PostMapping("/findAll")
    public JsonData getAllInfo(@RequestBody PageUserJson pageUserJson){
 
 
         JsonData jsonData = new JsonData();
 
        System.out.println("pageUserJson:"+pageUserJson);
 
        Page<Contact> page = new Page<>(pageUserJson.getPage(),pageUserJson.getLimit());
 
        QueryWrapper<Contact> queryWrapper = new QueryWrapper<>();
 
        String name = pageUserJson.getName();
 
        if(!StringUtil.isEmpty(name)){
            queryWrapper.like("name",name);
        }
 
 
        IPage<Contact> paperPageInfo = contactService.page(page,queryWrapper);
 
        if(paperPageInfo.getRecords()!=null){
            jsonData.setCode(200);
            jsonData.setMsg("成功得到数据！");
        }
 
        //设置总条数
        jsonData.setCount(paperPageInfo.getTotal());
        jsonData.setData(paperPageInfo.getRecords());
        return jsonData;
 
    }

工具类

分页工具类

其他 CRUD  的接口


    @PostMapping("/insert")
    public JsonData insert(@RequestBody Contact contact){

        System.out.println(contact);

        JsonData jsonData = new JsonData();

        boolean insert = contactService.save(contact);
        if(insert){

            jsonData.setCode(200);
            jsonData.setMsg("添加成功！");
        }else{
            jsonData.setCode(0);
            jsonData.setMsg("添加用户失败！");

        }

        return jsonData;

    }



    @PostMapping("/deleteContactById/{id}")
    public JsonData deleteContactById(@PathVariable("id") Integer id){

        System.out.println(id);

        JsonData jsonData = new JsonData();

        boolean remove = contactService.removeById(id);
        if(remove){

            jsonData.setCode(200);
            jsonData.setMsg("删除成功！");
        }else{
            jsonData.setCode(0);
            jsonData.setMsg("删除用户失败！");

        }

        return jsonData;

    }


    @PostMapping("/deleteBatchContact/{ids}")
    public JsonData deleteBatchContact(@PathVariable("ids") String ids){

        JsonData jsonData = new JsonData();

        System.out.println(ids);

        String [] split = ids.split(",");

        boolean b=false;


        for(String id:split){
            b = contactService.removeById(Long.parseLong(id));
            System.out.println(b);

        }

        if(b){

            jsonData.setCode(200);
            jsonData.setMsg("批量删除成功！");
        }else{
            jsonData.setCode(0);
            jsonData.setMsg("批量删除失败！");

        }

        return jsonData;

    }

 最后   启动类上要 扫描 mapper  包

二.  Vue 前端


<template>
	
  <div>
		
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
			
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
			
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
			
    </el-breadcrumb>
		
		
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.name" placeholder="输入名称"></el-input>
      </el-form-item>
     
	  
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
		<el-button class="small" type="warning" size="small" @click="removeBatch()">批量删除</el-button>
		
      </el-form-item>
	  
    </el-form>
	
	
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" ref="multipleTable" @selection-change="handleSelectionChange">
     
	  <el-table-column align="center" type="selection" prop="id" width="60" >
      </el-table-column>
	  
	    <el-table-column
	              label="序号"
	              width="70px">
	          <template slot-scope="scope">
	              {{scope.$index+1}}
	          </template>
	      </el-table-column>
		  
	  
      <el-table-column sortable prop="id" label="主键" width="60">
      </el-table-column>
	  
	  <el-table-column sortable prop="name" label="姓名" width="110">
	  </el-table-column>
	  
	 <el-table-column sortable prop="gender" label="性别" width="60">
	 </el-table-column>
	 
	  <el-table-column sortable prop="age" label="年龄" width="80">
	  </el-table-column>
      
	<el-table-column sortable prop="address" label="地址" width="100">
	</el-table-column>
	
	<el-table-column sortable prop="qq" label="qq" width="80">
	</el-table-column>
	
	<el-table-column sortable prop="email" label="邮箱" width="120">
	</el-table-column>
	
	  
      <el-table-column align="center" label="操作" min-width="160">
		<template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
	  
    </el-table>
	
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
	
	
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
		
      <el-form label-width="80px" :model="editForm" :rules="rules" ref="editForm">
		 
		   <el-input size="small" v-model="editForm.id" style="display:none" auto-complete="off"></el-input>
		 
		
      <el-form-item label="姓名" prop="name">
        <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
      </el-form-item>
	  
	  <el-form-item label="性别" prop="gender">
	    <el-radio v-model="editForm.gender" label="男">男</el-radio>
	    <el-radio v-model="editForm.gender" label="女">女</el-radio>
	  </el-form-item>
	  
		<el-form-item label="年龄" prop="age">
		  <el-input size="small" v-model="editForm.age" auto-complete="off" placeholder="请输入年龄"></el-input>
		</el-form-item>
    
		<el-form-item label="地址" prop="address">
		  <el-input size="small" v-model="editForm.address" auto-complete="off" placeholder="请输入地址"></el-input>
		</el-form-item>
	
   
		<el-form-item label="qq" prop="qq">
		  <el-input size="small" v-model="editForm.qq" auto-complete="off" placeholder="请输入qq"></el-input>
		</el-form-item>
		
    	<el-form-item label="Email:" prop="email">
    	   <el-input v-model="editForm.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
    	</el-form-item>

      </el-form>
	  
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
	  
    </el-dialog>
	
  </div>
  
</template>

<script>

import Pagination from '../../components/Pagination'

export default {
	
  name: "ContactList",
 
  data() {
	  
	  var validateEmail = (rule, value, callback) => {
	      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
	    
	    
	        if (mailReg.test(value)) {
	          callback()
	        } else {
	          callback(new Error('请输入正确的邮箱格式'))
	        }
	     
	    }

    var checkQQ = (rule, value, callback) => {
    
        if (!value) {
          return callback(new Error('qq不能为空!'))
        }
       
          // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
          // 所以在前面加了一个+实现隐式转换
     
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } 
      
		
    }
	  

    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
	   logIds:'',
	   multipleSelection:[],//多选的数据
	   
	 
      title: '添加',
      editForm: {
        id: '',
        name: '',
		gender:'女',
		age:'',
		address:'',
		qq:'',
		email:'',
        token: localStorage.getItem('logintoken')
      },
	  
      // rules表单验证
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
		
		qq: [{ validator: checkQQ, trigger: 'blur' }],
		
		address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
		
		email: [{required: true, message: '邮箱不能为空', trigger: 'blur'},
		{validator: validateEmail, trigger: 'blur'}]


      },
	  
	  //模糊查询数据 
      formInline: {
        page: 1,
        limit: 5,
        name: '',
        token: localStorage.getItem('logintoken')
      },
	  
	  
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
	
	  
	  //用户数据
      listData: [], 
	  
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10
      }
    }
  },
  
  // 注册组件
  components: {
    Pagination
  },
 

  /**
   * 创建完毕
   */
  // activated
  created() {
    this.getdata(this.formInline)
  },
 
 

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
	  
	  // 表格加载数据
	   getdata(parameter) {
		   
		    console.log(parameter);
			
			this.loading = true;
			
			
			let url = this.axios.urls.CONTACT_ALL;
			
		   this.axios.post(url,parameter).then(
		   
		   	res =>{
		   		   console.log(res.data);
		   			 console.log(res.data.data);
					 
		   			 if(res.data.code == 200){
						 
		   				 this.loading = false;
						 
						 
						this.listData = res.data.data;
						
						// 分页赋值
						console.log(this.formInline.page)
						console.log(this.formInline.limit)
					
						this.pageparm.currentPage = this.formInline.page
						this.pageparm.pageSize = this.formInline.limit
						this.pageparm.total = res.data.count
							
		   			 }
		   		})
		    .catch(err => {
			  this.loading = false
			  this.$message.error('菜单加载失败，请稍后再试！')
			  
            });
		   
		   
	   },
	 
	
    // 分页插件事件
    callFather(parm) {
		
		console.log(parm.currentPage)
		console.log(parm.pageSize)
		
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
	  
	  console.log(this.formInline.page)
	  console.log(this.formInline.limit)
	  
	  console.log(this.formInline)
     
	  //重新加载数据
	  this.getdata(this.formInline);
	  
	 
    },
	
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
	
	
    //显示编辑界面
    handleEdit: function(index, row) {
		//显示弹出框
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改用户'
        this.editForm.id = row.id
   
        this.editForm.name = row.name
		this.editForm.gender = row.gender
		this.editForm.age = row.age
		this.editForm.address = row.address
		this.editForm.qq = row.qq
		this.editForm.email = row.email
		
		
	
      } else {
		  
        this.title = '添加用户'
		this.editForm.id = ''
		  this.editForm.name = ''
		  this.editForm.gender ='女'
		  this.editForm.age = ''
		  this.editForm.address = ''
		  this.editForm.qq = ''
		  this.editForm.email = ''
       
      }
    },
	
    // 编辑、增加页面保存方法
    submitForm(editData) {
		
	 console.log("1111")
   
		    console.log(this.editForm)
			
			
			    let url = this.axios.urls.CONTACT_UPDATE;
				
				this.axios.post(url,this.editForm).then(
					res =>{
						this.editFormVisible = false
						this.loading = false
					
							 if(res.data.code==200){
								  //重新加载数据
									this.getdata(this.formInline)
									this.$message({
									  type: 'success',
									  message: '用户保存成功！'
									})
								
							
							 }else{
								 this.$message({
								   type: 'info',
								   message: res.data.msg
								 })
							 }
							
				})
				.catch(err => {
				  this.editFormVisible = false
				  this.loading = false
				  this.$message.error('用户保存失败，请稍后再试！')
				})
				
			
	
      
    },
	
	
    // 删除用户
    deleteUser(index, row) {
		
	  var _this = this;
	  
      _this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
			
			console.log(row.id)
			console.log("2222")
			
			 let url = _this.axios.urls.CONTACT_DELETE;
			 
		
			_this.axios.post(url+"/"+row.id).then(
				res =>{
					
						 if(res.data.code==200){
							
							_this.$message({
							  type: 'success',
							  message: '用户已删除!'
							});
							
							// 重新加载数据
							_this.getdata(_this.formInline);
							
						 }else{
							 
							 _this.$message({
							   type: 'info',
							   message: res.data.msg
							 })
							 
						 }
						 
						
					}) 
					.catch(err => {
						
					  _this.loading = false
					  _this.$message.error('用户删除失败，请稍后再试！')
					  
					  
					})
			
			
        })
		
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
		  
        }) 
    },
	
	
	
	handleSelectionChange(val) {
			 
	   this.multipleSelection = val;
	},
	
	
	
	// 批量删除
	removeBatch () {
		
	  const length = this.multipleSelection.length;
	  console.log(this.multipleSelection);
	  
	  alert(length);
	  if(length<=0){
		  this.$message({
		    type: 'info',
		    message: "请选择一条数据！"
		  });
		  return false;
	  }
	  
	 for (let i = 0; i < length; i++) {
	   this.logIds += this.multipleSelection[i].id+','
	 }
	 console.log(this.logIds);
	 
	 
	 var _this = this;
	 
	 
	  this.$confirm('确定要批量删除日志信息, 是否继续?', '提示', {
			 confirmButtonText: '确定',
			 cancelButtonText: '取消',
			 type: 'warning'
			 
	  }).then(() => {        
			
			
			  let url = _this.axios.urls.CONTACT_DELETE_BATCH;
			   _this.axios.post(url+"/"+_this.logIds).then(res => {
			   				  
					   _this.$message({
						 type: 'info',
						 message: res.data.msg
					   });
					   
						if(res.data.code==200){
											
							// 重新加载数据
							_this.getdata(_this.formInline);
													
						}
			   					
			     })
			   
			   
			   
	  })
	  .catch(() => {
			 _this.$message({
			   type: 'info',
			   message: '已取消删除'
			 })
	  });
	  
	},
	
	
	
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
	
	
  }
  
  
  
  
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

分页组件 Pagination.vue

/**
* 分页组件
*/ 
<template>
	
  <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[3, 5, 10, 20]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
  </el-pagination>
	
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data() {
    return {
      pageparm: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.pageSize = val
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange(val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.currentPage = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>

因为是前后端分离。就一定会出现跨域问题，需要在后端配置  下


@Configuration
@Component
public class CrosOriginConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }


}

三.  测试

 

安的丢
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
springboot+Vue整合前后端分离权限后台管理系统
06-19
本课程从0到1实现一个基于SpringBoot+Jpa+JWT+Spring Security+Vue+ElementUI整合前后端分离权限后台管理系统，数据库采用的是：mysql5.7，本项目主要功能模块有:用户管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、邮件发送、日志管理等基础功能，项目在线体验地址：http://vue.xueden.cn/
SpringBoot + Vue前后端分离项目实战 || 三：Spring Boot后端与Vue前端连接
qq1803291168
06-25 9706
Spring Boot + Vue 管理系统，新手小白入门教程三，配套视频及代码
Springboot+Vue前后端分离项目-管理系统-上
m0_56308072的博客
05-28 3922
前端技术Vue 前端框架Vuex 全局状态管理框架ElementUI 前端UI框架。
手把手教你搭建Spring Boot+Vue前后端分离
做兴趣使然的Hero
12-11 2万+
1 什么是前后端分离 前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建 2.1 Mapper层 请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/article/details/118342143 此次项目的后端搭建就是在这个项目的基础上 2.2 Service层 接口
spring boot+vue前后端项目的分离（我的第一个前后端分离项目）
做笔记\记录遇到的程序bug
12-22 1万+
1、前端vue的搭建 建立项目的过程略 需要注意的几点 1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。 2、安装axios在这里插入代码片
Springboot+Vue实现简单的前端后分离数据交互
热门推荐
Young_深情不及里子的博客
09-02 5万+
学习前后端分离的同学看过来，一篇文章带你了解一下当前一个简单前后端分离的后台系统的数据交互实现过程，告别传统JSP，模板引擎式的系统开发。
SpringBoot 和 Vue 前后端分离教程(附源码)
xmt1139057136的专栏
03-04 1万+
编辑：业余草 来源：https://www.xttblog.com/?p=4851 昨天，一位网友问我要 SpringBoot + Vue 的源码项目。其实网上有很多，我这里分享一个项目...
SpringBoot+Vue前后端分离
weixin_47006863的博客
03-17 9508
springboot+vue前后端分离入门demo
springboot+vue的前后端分离部署（详细）
x-dragon8899的博客
05-20 9057
部署一、前端部署1、下载 nginx，官方网址如下：2、解压安装包到任意目录3、打开前端项目，执行` npm run build`4、进入本地项目的dist目录，把里面的文件都复制5、然后把它直接拷贝进` nginx\html` 下（注意：需要覆盖掉nginx\html 下的index.html）6、配置一下服务器的默认端口，打开 `nginx\conf\nginx.conf`，找到 server 的配置处，然后按照下图来更改：7、配置完成后，运行 nginx 根目录下的 `nginx.exe` （会出现命
springboot和vue实现前后端分离基础教程
qq_54076935的博客
06-02 8107
springboot-vue 前后端分离，解决跨域问题
springboot+vue 前后端分离如何整合教程
07-17
springboot+vue 前后端分离 整合教程额外补充 详情请查看文档资料 2020年11月12日10:25:51
spring boot+vue 的前后端分离与合并方案实例详解
08-28
主要介绍了spring boot+vue 的前后端分离与合并方案实例详解,需要的朋友可以参考下
SpringBoot+Vue前后端分离学校教学管理系统
05-26
在技术上，前台采用 Vue渐进式框架，利用VantUI组件库搭建页面，后台使用 SpringBoot框架进行开发，做到了前后端分离。使用JWT实现单点登录，图片和文档上传使用阿里的OSS对象存储，短信功能使用腾讯云的接口，聊天...
SpringBoot2.2.6 整合Jwt实现前后端分离
04-23
SpringBoot2.2.6整合MyBatis3.5.4，利用JWT技术实现前后端分离 数据库采用的是MySQL
SpringBoot整合LayUI
weixin_51364443的博客
08-26 5512
新建一个SpringBoot项目 导包 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.4.RELEASE</version> <relativePath/>
SpringBoot集成RabbitMQ
weixin_51364443的博客
07-05 3851
新建springboot项目 写pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.4.RELEASE<version> <relativePath/&g...
SpringBoot 整合 Docker 并 推送到阿里云镜像服务
weixin_51364443的博客
07-25 931
一. 创建项目 1.使用 idea 构建一个SpringBoot 项目 2.编写一个HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello,hjj"; } } 3.在配置文件中，把端口号 改下，避免 8080 冲突。 4. 打包 5. idea 中 安装插件 ：docker ...
Spring Boot集成MongoDB
weixin_51364443的博客
07-07 801
集成简介 spring-data-mongodb提供了MongoTemplate与MongoRepository两种方式访问mongoDB（都能对mongoDB进行CRUD操作），MongoRepository操作简单，MongoTemplate操作灵活，我们在项目中可以灵活适用这两种方式操作mongodb，MongoRepository的缺点是不够灵活，MongoTemplate正好可以弥补不足。 搭建开发环境 初始化工程 使用 Spring Initializr 快速初始化一个 Sprin
SpringBoot集成ES
weixin_51364443的博客
07-08 767
Maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency> <dependency> &lt
springboot+vue实现前后端分离具体框架代码
最新发布
09-14
可以使用 Spring Boot + Vue + Webpack 来实现前后端分离的框架，具体代码如下：Spring Boot： <groupId>org.springframework.boot <artifactId>spring-boot-starter-web </dependency><dependency> <groupId>org...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值