Spring Boot和Vue前后端分离项目架构的全过程

目录
  • Spring Boot+Vue 前后端分离项目架构
  • 1. SpringBoot 后端项目
  • 2. Vue 前端项目
  • 总结

Spring Boot+Vue 前后端分离项目架构

项目流程:

1. SpringBoot 后端项目

1、新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖;

2、数据库新建 book 数据表;

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `title` varchar(55) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `publish` varchar(55) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `authors` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `createTime` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0),
  `updateTime` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0),
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES (2, '数据结构', '浙江出版社', '严威', '2022-03-18 14:38:22', '2022-03-18 14:38:25');
INSERT INTO `book` VALUES (5, '计算机组成原理', '机械工业出版社', '唐朔飞', '2022-03-14 14:38:28', '2022-03-15 14:38:36');
INSERT INTO `book` VALUES (6, '机器学习', '人民邮电出版社', '周志华', '2022-03-16 14:38:41', '2022-03-16 14:38:45');
INSERT INTO `book` VALUES (7, '图论及其应用', '科学技术出版社', '徐俊明', '2022-03-03 14:38:49', '2022-03-18 18:33:57');
INSERT INTO `book` VALUES (8, '推荐系统开发实战', '电子工业出版社', '高团阳', '2022-03-14 14:38:57', '2022-03-16 14:39:02');
INSERT INTO `book` VALUES (9, '大数据导论', '机械工业出版社', '曾诚', '2022-03-10 14:39:06', '2022-03-12 14:39:09');
INSERT INTO `book` VALUES (13, 'Java从零基础到实战', '中国工信出版集团', '宁楠', '2022-03-18 17:05:18', '2022-03-18 17:05:18');

3、application.yml 配置数据源和项目启动的端口号;

# 修改服务启动的端口
server:
  port: 8181
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
# 配置日志,打印执行的sql语句
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

项目整体的目录结构如下:

4、创建实体类 Book.java;

@AllArgsConstructor
@NoArgsConstructor
@Data
@TableName(value = "book")
public class Book {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String title;
    private String publish;
    private String authors;

    @TableField(value = "createTime", fill = FieldFill.INSERT)
    private Date createTime;
    @TableField(value = "updateTime", fill = FieldFill.INSERT_UPDATE)
    private Date updateTime;
}

5、添加 MyBatis Plus 自动填充的处理器 config/DataHandler.java;

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;

import java.util.Date;

@Component
public class DataHandler implements MetaObjectHandler{
    //插入时的填充策略
    @Override
    public void insertFill(MetaObject metaObject) {
        this.setFieldValByName("createTime", new Date(), metaObject);
        this.setFieldValByName("updateTime", new Date(), metaObject);
    }
    //更新时的填充策略
    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("updateTime", new Date(), metaObject);
    }
}

6、持久化层 mapper/BookMapper.java;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.trainingl.entity.Book;
import org.springframework.stereotype.Repository;

@Repository  //持久层注解
public interface BookMapper extends BaseMapper<Book> {
    //所有的CRUD操作都已经编写好了
}

7、服务层 service;

service/BookService.java

import com.trainingl.entity.Book;
import java.util.List;

//数据的增删改查接口
public interface BookService {
    public List<Book> findAll();
    public Book findById(Long id);
    public int insert(Book book);
    public int deleteById(Long id);
    public int updateById(Book book);
}

service/Impl/BookServiceImpl.java

import com.trainingl.entity.Book;
import com.trainingl.mapper.BookMapper;
import com.trainingl.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookMapper bookMapper;
    @Override
    public List<Book> findAll() {
        //查询搜索记录
        return bookMapper.selectList(null);
    }

    @Override
    public Book findById(Long id) {
        return bookMapper.selectById(id);
    }

    @Override
    public int insert(Book book) {
        return bookMapper.insert(book);
    }

    @Override
    public int deleteById(Long id) {
        return bookMapper.deleteById(id);
    }

    @Override
    public int updateById(Book book) {
        return bookMapper.updateById(book);
    }
}

8、控制层 Controller;

controller/BookController.java

import com.trainingl.entity.Book;
import com.trainingl.service.BookService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@CrossOrigin  //跨域注解
public class BookController {
    @Autowired
    private BookService bookService;

    @RequestMapping("/booklist")
    public List<Book> booklist(){
        return bookService.findAll();
    }

    @RequestMapping("/addbook")
    public int addbook(@RequestBody Book book){
        return bookService.insert(book);
    }

    @DeleteMapping("/deleteById/{id}")
    public int deleteById(@PathVariable("id") Long id){
        Integer result = 0;
        result = bookService.deleteById(id);
        //删除成功则返回受影响的行数
        return result;
    }

    @GetMapping("/findById/{id}")
    public Book findById(@PathVariable("id") Long id){
        return bookService.findById(id);
    }

    @PutMapping("/updateById")
    public int updateById(@RequestBody Book book){
        //返回修改的条数
        return bookService.updateById(book);
    }

}

2. Vue 前端项目

1、主页面 App.vue

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

<script>
    export default {
        name: 'App',
        components: {
        },
        data(){
            return{
            }
        },

    }
</script>

2、数据列表视图 views/table.vue

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 70%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="书籍名称"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="publish"
                    label="出版社"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="authors"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="修改时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
                    <el-button @click="edit(scope.row)" type="success" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="addBook" icon="el-icon-edit" size="small">添加记录</el-button>
    </div>
</template>

<script>
    export default {
        name: "table",
        methods: {
            addBook(){
                this.$router.push("/addbook")
            },
            del(row) {
                let _this = this;

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("http://localhost:8181/deleteById/" + row.id).then(function (response) {
                        if (response.data == 1) {
                            //刷新页面
                            location.reload();
                        } else {
                            _this.$message({
                                showClose: true,
                                message: '删除信息失败!',
                                type: 'danger'
                            });
                        }
                    })
                })
            },
            edit(row) {
                this.$router.push("/edit?id=" + row.id);
            }
        },

        data() {
            return {
                tableData: []
            }
        },
        created(){
            let _this = this;
            this.$axios.get("http://localhost:8181/booklist").then(function (response) {
                _this.tableData = response.data;
            })
        }

    }
</script>

<style scoped>
</style>

3、新增视图文件 views/addBook.vue

<template>
    <div>
        <h2 style="padding-left: 200px">新增图书信息</h2>
        <el-form :model="ruleForm" style="width: 500px;" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="书籍名称" prop="title">
                <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" prop="publish">
                <el-input type="text" v-model="ruleForm.publish" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者信息" prop="authors">
                <el-input v-model.number="ruleForm.authors"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "addBook",
        data() {
            var checkAuthor = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入作者信息'));
                } else {
                    callback();
                }
            };
            var validateTitle = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入书籍名称'));
                } else {
                    callback();
                }
            };
            var validatePublish = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入出版社'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    title: '',
                    publish: '',
                    authors: ''
                },
                rules: {
                    title: [
                        { validator: validateTitle, trigger: 'blur' }
                    ],
                    publish: [
                        { validator: validatePublish, trigger: 'blur' }
                    ],
                    authors: [
                        { validator: checkAuthor, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post("http://localhost:8181/addbook", _this.ruleForm).then(function (response) {
                            if(response.data == 1){
                                //跳转到表格页面
                                _this.$router.push('/table')
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
</style>

4、编辑或修改视图文件 views/edit.vue

<template>
    <div>
        <h2 style="padding-left: 200px">修改图书信息</h2>
        <el-form :model="ruleForm" style="width: 500px;" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="图书编号">
                <el-input type="text" readonly  v-model="ruleForm.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="书籍名称" prop="title">
                <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" prop="publish">
                <el-input type="text" v-model="ruleForm.publish" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者信息" prop="authors">
                <el-input v-model.number="ruleForm.authors"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-input readonly v-model.number="ruleForm.createTime"></el-input>
            </el-form-item>
            <el-form-item label="修改时间">
                <el-input readonly v-model.number="ruleForm.updateTime"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "edit",
        data() {
            var checkAuthor = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入作者信息'));
                } else {
                    callback();
                }
            };
            var validateTitle = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入书籍名称'));
                } else {
                    callback();
                }
            };
            var validatePublish = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入出版社'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    id: '',
                    title: '',
                    publish: '',
                    authors: '',
                    createTime: '',
                    updateTime: ''
                },
                rules: {
                    title: [
                        { validator: validateTitle, trigger: 'blur' }
                    ],
                    publish: [
                        { validator: validatePublish, trigger: 'blur' }
                    ],
                    authors: [
                        { validator: checkAuthor, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.put("http://localhost:8181/updateById", _this.ruleForm).then(function (response) {
                            if(response.data === 1){
                                //跳转到表格页面
                                _this.$router.push('/table')
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted(){
            let _this = this;
            this.$axios.get("http://localhost:8181/findById/" + this.$route.query.id).then(function (response) {
                _this.ruleForm = response.data;
            });
        }
    }
</script>

<style scoped>
</style>

5、路由文件 router.js

import Vue from 'vue'

//1.导入路由依赖,安装 vue-router组件后系统带有的依赖
import VueRouter from 'vue-router'

//2.导入两个页面
import Login from "@/views/login";
import Second from "@/views/Second";
import Table from "@/views/table";
import AddBook from "@/views/addBook";
import Edit from "@/views/edit";

// 3.使用路由
Vue.use(VueRouter);

//4.创建路由对象,new VueRouter为上面import设置的名称
const router = new VueRouter({
    //没有history,访问URL会有#
    mode: "history",
    routes: [
        {
            path:"/login",
            component: Login
        },
        {
            path:"/second",
            component: Second
        },
        {
            path:"/table",
            component: Table
        },
        {
            path:"/addbook",
            component: AddBook
        },
        {
            path:"/edit",
            component: Edit
        },
    ]
});
export default router;

6、组件的全局配置 main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import axios from "axios"
import qstring from "querystring"

// Vue 全局Vue对象,prototype原型设置全局属性
Vue.prototype.$axios = axios
Vue.prototype.$qstring=qstring

Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

总结

到此这篇关于Spring Boot和Vue前后端分离项目架构的文章就介绍到这了,更多相关Spring Boot Vue前后端分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • Spring Boot和Vue前后端分离项目架构的全过程

    目录 Spring Boot+Vue 前后端分离项目架构 1. SpringBoot 后端项目 2. Vue 前端项目 总结 Spring Boot+Vue 前后端分离项目架构 项目流程: 1. SpringBoot 后端项目 1.新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖: 2.数据库新建 book 数据表: -- ---------------------------- -- Table structure for book -- ---------------

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • Spring Boot + Vue 前后端分离项目如何踢掉已登录用户

    上篇文章中,我们讲了在 Spring Security 中如何踢掉前一个登录用户,或者禁止用户二次登录,通过一个简单的案例,实现了我们想要的效果. 但是有一个不太完美的地方,就是我们的用户是配置在内存中的用户,我们没有将用户放到数据库中去.正常情况下,松哥在 Spring Security 系列中讲的其他配置,大家只需要参考Spring Security+Spring Data Jpa 强强联手,安全管理只有更简单!一文,将数据切换为数据库中的数据即可. 本文是本系列的第十三篇,阅读前面文章有助

  • Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建议使用的方案是 axios.今天松哥就带大家来看看 axios 的使用. axios 引入 axios 使用步骤很简单,首先在前端项目中,引入 axios: npm install axios -S 装好之后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

随机推荐