文章目錄

概述
一、搭建SpringBoot后端
- 1.sql腳本
- 2.新建SpringBoot專案
- 3.MP代碼生成
- 4.撰寫Controller
二、搭建Vue前端
- 1.IDEA安裝Vue.js插件
- 2.IDEA啟動Vue專案
- 3.撰寫Vue代碼
- 4.接收后端資料
三、Element UI使用
- 1.簡單的資料展示
- 2.Element-ui更多...

參看：https://www.bilibili.com/video/BV137411B7vB

概述

vue+springboot+mybatisplus+mysql演示，搭建起來的是一整個專案架構，可直接增加對應的代碼，實作更多功能

這次搭建的是一個前后端分離的示例，前端只需要獨立撰寫客戶端代碼，后端也只需要獨立撰寫服務端代碼提供資料介面即可，

前端通過AJAX訪問后端介面，將Model展示到View即可，
前后端提前約定好介面檔案（URL、引數、資料型別…），獨立開發即可，解耦，
前端 HTML -》ajax -》 RESTful后端資料介面，

一、搭建SpringBoot后端

后端需要的環境是：jdk1.8+、IDEA、Maven、Mysql，等等，

借助于Mybatis-plus的自動化配置（代碼生成），

1.sql腳本

DROP TABLE IF EXISTS `mp_book`;

CREATE TABLE `mp_book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `book_name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publish` varchar(20) DEFAULT NULL,
  `pages` int(10) DEFAULT NULL,
  `price` float(10,2) DEFAULT NULL,
  PRIMARY KEY (`id`),
	UNIQUE KEY (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=1;

INSERT INTO `mp_book` VALUES
(1,'解憂雜貨店','東野圭吾','電子工業出版社',102,27.30),
(2,'追風箏的人','卡勒德·胡賽尼','中信出版社',330,26.00),
(3,'人間失格','太宰治','作家出版社',150,17.30),
(4,'這就是二十四節氣','高春香','電子工業出版社',220,59.00),
(5,'白夜行','東野圭吾','南海出版公司',300,27.30),
(6,'擺渡人','克萊兒·麥克福爾','百花洲文藝出版社',225,22.80),
(7,'暖暖心繪本','米攔弗特畢','湖南少兒出版社',168,131.60),
(8,'天才在左瘋子在右','高銘','北京聯合出版公司',330,27.50),
(9,'我們仨','楊絳','生活.讀書.新知三聯書店',89,17.20),
(10,'活著','余華','作家出版社',100,100.00),
(11,'水滸傳','施耐庵','三聯出版社',300,50.00),
(12,'三國演義','羅貫中','三聯出版社',300,50.00),
(13,'紅樓夢','曹雪芹','三聯出版社',300,50.00),
(14,'西游記','吳承恩','三聯出版社',300,60.00);

2.新建SpringBoot專案

引入Mybatis-plus代碼生成等所需要的依賴，使用代碼生成器生成代碼，之后測驗資料，把資料傳輸到vue即可實作，

pom.xml中的mp依賴：

mysql、web、lombok依賴自行匯入

<!-- mp -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3</version>
</dependency>

<!-- mp代碼生成器 -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.4.1</version>
</dependency>

<!-- velocity -->
<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity</artifactId>
    <version>1.7</version>
</dependency>

配置application.yml：

server:
  port: 8082

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8
    username: root
    password:

mybatis-plus:
  mapper-locations: classpath*:com/pdh/mapper/*.xml
  configuration:
    # 列印sql
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

3.MP代碼生成

需要撰寫代碼生成器Generate，運行它

public class Generate {
    public static void main(String[] args) {

        // 創建generate物件
        AutoGenerator autoGenerator = new AutoGenerator();

        // 資料源
        DataSourceConfig dataSourceConfig = new DataSourceConfig();
        dataSourceConfig.setDbType(DbType.MYSQL);
        dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test?useUnicode=true&useSSL=false&characterEncoding=utf8");
        dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
        dataSourceConfig.setUsername("root");
        dataSourceConfig.setPassword("");
        autoGenerator.setDataSource(dataSourceConfig);

        // 全域配置
        GlobalConfig globalConfig = new GlobalConfig();
        globalConfig.setOutputDir(System.getProperty("user.dir") + "/src/main/java");
        globalConfig.setOpen(false);
        globalConfig.setAuthor("彭_德華");
        globalConfig.setServiceName("%sService"); // 去掉service的前綴
        autoGenerator.setGlobalConfig(globalConfig);

        // 包資訊
        PackageConfig packageConfig = new PackageConfig();
        packageConfig.setParent("com.pdh");
        packageConfig.setController("controller");
        packageConfig.setService("service");
        packageConfig.setServiceImpl("service.impl");
        packageConfig.setMapper("dao.mapper");
        packageConfig.setXml("dao.mapper.xml");
        packageConfig.setEntity("entity");
        autoGenerator.setPackageInfo(packageConfig);

        // 配置策略
        StrategyConfig strategyConfig = new StrategyConfig();
        strategyConfig.setTablePrefix("mp_");
        strategyConfig.setInclude(scanner("表名，多個英文逗號分割").split(","));
        strategyConfig.setEntityLombokModel(true);
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel); // 下劃線轉駝峰
        autoGenerator.setStrategy(strategyConfig);

        // 執行
        autoGenerator.execute();
    }

    /**
     * 接收用戶輸入的方法
     * @param str
     * @return
     */
    private static String scanner(String str){
        Scanner sc = new Scanner(System.in);
        System.out.println("請輸入"+str+":");
        if(sc.hasNext()){
            String tableNames = sc.next();
            if(StringUtils.isNotBlank(tableNames)){
                return tableNames;
            }
        }
        throw new MybatisPlusException("請輸入正確的" + str + "!");
    }
}

啟動以后輸入對應的資料庫表名 mp_book，就會生成對應的dao、service、contorller、entity等，

生成之后，可以根據專案，添加指定的包（簡單的測驗就不添加了），

4.撰寫Controller

在controller中撰寫一個測驗：

@Controller
@RequestMapping("/book")
public class BookController {
    @Autowired
    private BookService bookService;

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

啟動專案，瀏覽器發起對應的請求，idea控制臺能看見列印了對應的陳述句和資料，說明前面的操作成功，之后，就是使用vue接收后端發送的資料，進行簡單的資料展示，

二、搭建Vue前端

搭建Vue前端專案需要在 命令列或 Vue-cli下 搭建，我使用的是最簡單的搭建方法，即【使用Vue可視化工具搭建（點擊我跳轉）】，

之后，使用 IDEA 打開Vue專案（無法使用IDEA創建Vue專案，只能是在里面撰寫它），

1.IDEA安裝Vue.js插件

在這里插入圖片描述

2.IDEA啟動Vue專案

IDEA自帶有Vue客戶端，我試過，mac直接在idea終端輸入 npm run server 能啟動，但是windows下，就得進行簡單的配置

在這里插入圖片描述

配置完成之后，點擊運行，成功訪問 localhost:8080 即可，

3.撰寫Vue代碼

我們都是在src包下進行前端代碼撰寫，

router包下的index.js

配置請求 /book

/* 匯入依賴 */
import Book from '../views/Book'

/* 匹配請求 */
{
    path: '/book',
    component: Book
}

views包下新建Book.vue

撰寫假資料進行展示

<template>
<div>
    <table border="1px">
        <tr>
            <td>編號</td>
            <td>圖書名稱</td>
            <td>作者</td>
            <td>出版社</td>
            <td>頁數</td>
            <td>價格</td>
    </tr>
        <!-- 回圈展示資料 -->
        <tr v-for="elem in books">
            <td>{{ elem.id }}</td>
            <td>{{ elem.name }}</td>
            <td>{{ elem.author }}</td>
            <td>{{ elem.publish }}</td>
            <td>{{ elem.pages }}</td>
            <td>{{ elem.price }}</td>
    </tr>
    </table>
    {{ msg }}
    </div>
</template>

<script>
    export default {
        name: "Book",
        data() {
            /* 資料造假 */
            return {
                msg: 'Hello Vue',
                books: [
                    {
                        id: 1,
                        name: '平凡的世界',
                        author: '張三',
                        publish:'開心出版社',
                        pages:'100',
                        price:'100.01'
                    },
                    {
                        id: 2,
                        name: '月亮與六便士',
                        author: '李四',
                        publish:'快樂出版社',
                        pages:'90',
                        price:'99.01'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
</style>

之后就是訪問 http://localhost:8080/book，就能看見假資料，之后使用axios插件，向后端發起請求，接收并展示資料，

4.接收后端資料

常用的引入插件方式有npm和vue-cli兩種，當然不排除在

首先要在vue引入axios插件，在vue專案所在的目錄下，執行下列命令，注意，一定要是管理員權限（血淚啊~）

vue add axios

以管理員身份運行cmd，指令cd是切換目錄，

d: ：切換到盤符D
cd .. ：回傳上級目錄
cd 檔案名：進入該檔案

在Book.vue撰寫creaeted()方法，它是初始化方法（放在 data()方法下面）

/* created()是初始化方法 */
  created() {
    const _this = this
    axios.get("http://localhost:8082/book/list")
        .then(function (resp) {
          _this.books = resp.data;
        })

  }

之后，解決跨域問題，在SpringBoot專案中配置，解決跨域名問題，

在后端代碼中，撰寫WebMvcConfig類（也可以選擇在yml中配置）

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //跨域配置
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

之后啟動前后端，訪問 localhost:8080/book，就成功訪問到資料了，

在這里插入圖片描述

上面就簡單實作了前后端的分離開發，前端開發人員可以根據使用假資料

之后就是對 vue前端的使用+撰寫后端介面，

三、Element UI使用

進入到專案的目錄下，管理員身份運行cmd，執行下列命令

vue add element

1.簡單的資料展示

這里就使用Element-ui展示一下所有的資料（不進行分頁）

撰寫Page.vue

<template>
  <div>

    <!-- 展示資料 -->
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          label="編號"
          width="180">
      </el-table-column>
      <el-table-column
          prop="bookName"
          label="書名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者">
      </el-table-column>
      <el-table-column
          prop="publish"
          label="出版社">
      </el-table-column>
      <el-table-column
          prop="page"
          label="頁數">
      </el-table-column>
      <el-table-column
          prop="price"
          label="價格">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {

  /* 初始化方法 */
  created() {
    const _this = this
    axios.get("http://localhost:8082/book/list")
    .then(function (resp){
      _this.tableData = resp.data;
    })
  },

  /* 資料方法 */
  data() {
    return {
      /* 如果請求不可用，就展示靜態資料 */
      tableData: [{
        id: '1',
        bookName: '月亮與六便士',
        author: 'dd',
        publish: '大力出版社',
        page: '101',
        price: '100.12'
      },
        {
          id: '2',
          bookName: '月亮與六便士',
          author: 'dd',
          publish: '大力出版社',
          page: '101',
          price: '100.12'
        }
      ]
    }
  }
}
</script>

在index.js里面配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page from '../views/Page.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: "/page",
        name: "展示資料",
        component: Page
    }
]

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

export default router

之后就是訪問 localhost:8080/page，就是成功訪問到資料庫資料，

2.Element-ui更多…

添加好 Element UI 的插件，使用的話，最直接的就是去它的官網查看開發手冊學習：

https://element.eleme.cn/#/zh-CN/component/installation

更多詳細的使用方法，建議通過視頻進行學習，邊看邊敲學習效果真的好~

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306419.html

標籤：java

上一篇：第一屆LeetCode刷題打卡贏現金活動開始啦，助力每一位想拿大廠offer的小伙伴！

下一篇：面試前hr加了微信，面試后是否可以向hr詢問面試結果？

SpringBoot+Vue前后端分離專案的搭建及簡單開發（這次保證看明白~）

文章目錄

概述

一、搭建SpringBoot后端

1.sql腳本

2.新建SpringBoot專案

3.MP代碼生成

4.撰寫Controller

二、搭建Vue前端

1.IDEA安裝Vue.js插件

2.IDEA啟動Vue專案

3.撰寫Vue代碼

4.接收后端資料

三、Element UI使用

1.簡單的資料展示

2.Element-ui更多…