一文教會你如何搭建vue+springboot專案

2022-05-25 14:00:19

前言

最近剛剛做了一個基於vue+springboot的學生成績管理系統，於是基於這點，對遇到的一些問題進行一些設定的彙總。以及vue+springboot專案是怎麼實現的，以下將貼出vue和springboot的重要程式碼和設定。

開發使用的軟體

idea：編寫後端springboot程式碼
hbuilderx或VSCode編寫vue程式碼
navicat或者dbeaver 編寫建立資料庫表

vue專案搭建

環境設定

在搭建之前，首先你需要安裝nodeJs，具體如何安裝就不多贅述，百度即可。

cmd命令

win+R鍵喚出彈框輸入cmd，進入控制檯介面。

然後，

命令列

cd/d 路徑地址

切換到想建立專案的路徑

再使用

vue init webpack 專案名稱

命令建立專案

Project name：專案名稱
Project description：專案描述
author：作者
Runtime + Complier： 執行時和編譯器：預設第一個
install router ：是否安裝路由，選擇安裝就後面我安裝步驟就不用執行
Use ESLint to lint your code? (Y/n)：問你是否使用eslint限制語法，新手建議否
Set up unit tests (Y/n):單元測試，新手選否
Setup e2e tests with Nightwatch? (Y/n)：使用Nightwatch設定端到端測試?，選否
Should we run `npm install` for you after the project has been created?：用什麼方式執行專案：選npm

然後就建立好了，找到建立專案的路徑，cmd命令列，看package.json是dev還是serve

------------------本內容於2022-04-11更新start-------------------------

此時的package.json檔案內容

{
  "name": "專案名稱",
  "version": "0.1.0", // b=版本
  "private": true,
  // 執行指令碼：serve為啟動專案指令碼，build為打包專案指令碼
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },
  // 安裝的vue依賴檔案
  "dependencies": {
    "vue": "^2.6.11",
    // vue-router一般作傳參和頁面跳轉使用
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.12",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

------------------本內容於2022-04-11更新end-------------------------

執行
npm run dev
或
npm run serve

vue ui 建立專案

這裡給大家推薦第二種方式建立

使用cmd命令列

vue ui

會開啟一個ui介面，跟著ui提示操作就行

開啟cmd提示的網頁地址：我的是http://localhost:800

然後一步步操作：

ps：如果提示不是內部命令資訊提示，就需要安裝vue元件
命令列輸入： npm install vue

更具體的百度搜尋操作即可

------------------本內容於2022-04-11更新start-------------------------

vue專案製作方向梳理

在正式開始執行之前先梳理一下建立vue專案需要什麼

在按照我剛剛的方式建立完vue專案後，（如有勾選安裝router的情況）

便已經可以通過npm run serve直接執行專案了，（只是有前端部分）；

初始它會有一個HelloWorld.vue的元件介面。一執行便能夠看到該頁面的內容。

但是單單有這些是不夠的。

要製作一個功能齊全的vue專案，最少需要安裝這幾項：

vue-router :頁面跳轉和傳參

一個UI框架元件：根據你需要製作電腦端還是手機端專案去搜尋vue ui框架。
一般都能夠搜尋到比較常用的vue ui框架。這些ui框架都會有檔案，檔案內部有如何安裝
的npm install 命令。
本次的ui框架為elementUi

axios: 目前常用的與後端資料互動的元件，因為我們是vue+springboot專案，為前後端
分離的專案，需要用它來連線前後端

那麼，通過梳理我們便清楚瞭如何往下去製作。

此外，為了快速的構建好vue專案，你最起碼你需要掌握以下關於vue的

知識：

vue常用指令：
內容渲染指令 ————》
{{ 屬性值 }}   別名：插值表示式
屬性值為自定義的屬性
該指令將資料渲染到頁面
例子：
name: "張三" // 自定義屬性
<div>{{ name }}</div>

------------------------------------------------------
屬性渲染指令
v-bind:元素="屬性值"  簡寫方式==>    :元素="屬性"
------------------------------------------------------
事件渲染指令
v-on:事件名  只需要知道v-on:click="方法名" 點選事件  簡寫:@click="方法名"
------------------------------------------------------
雙向繫結指令
v-model="屬性值"
例如：給input繫結一個v-model的屬性值，修改input的值，該繫結的屬性值內容會跟
著改變
------------------------------------------------------
條件渲染指令
v-if
v-else-if
v-else
該指令分條件渲染頁面，只有滿足條件的標籤才會被渲染到頁面
完整寫法例子：
name: "張三" // 自定義屬性
// 頁面寫法
<div v-if="name=='張三'">
我的名字是張三</div> // 當滿足條件時該文字會顯示在頁面

<div v-else>我的名字不是張三</div> // 不滿足條件顯示本文字內容

------------------------------------------------------

列表渲染指令
v-for=(item ,index) in list
該指令為渲染集合陣列的指令，通過該指令可以把多條資料分批次渲染到介面
item為陣列集合元素的內容，index為下標
例：
list: [
		{
	name: "xxx",
	age: xx,
	},
	{
	name: "zzz",
	age: zz,
	},
]
當下標為0時，item值為list下的
{
	name: "xxx",
	age:xx,
}
需要獲取name屬性值，則在頁面中寫成{{ item.name }}
完整寫法例子：
<div v-for(item,index) in list>
<span>{{ item.name }}</span>
</div>

除了掌握基礎指令外，還需要最起碼掌握以下函數：
data() {
	return {
		// 在return這裡定義自定義的屬性
	}
},
// 在methods定義方法
methods: {
 方法A() {
	
	}
},
// 在created內呼叫方法，實現一載入頁面就獲取資料，用於增刪改查中的查，來
查詢資料
created() {
}

還需要了解：
在main.js這個入口檔案參照npm install 後的元件

// 匯入安裝的元件
import 自定義元件名 from "元件路徑（一般在搜尋安裝的元件檔案會有說明）"
Vue.use(自定義元件名) // 參照元件(一般安裝的元件檔案會有說明)

例:
import Router from "./vue-router"
Vue.use(Router)

掌握了以上知識的前提，是你已經有學習過html5相關的知識後，然後就可以著手製作vue專案了

------------------本內容於2022-04-11更新end-------------------------

通過軟體vscode開啟專案

vscode，找到專案路徑（我用的是idea，無所謂用什麼軟體，直接用cmd也能執行）

然後新建終端，輸入執行的命令：

------------------本內容於2022-04-11更新start-------------------------

------------------本內容於2022-04-11更新end-------------------------

執行
npm run dev
或
npm run serve

vue 設定

以下vue程式碼皆以vue2.x為準！

vue-router

vue-router是vue.js的官方路由管理器，一般用它作頁面跳轉和跳轉時傳參。

如何設定

以我的學生管理系統的結構為例：

首先需要在vue專案的介面引入vue-router，

使用程式設計軟體的終端或者cmd 切換到自己專案的路徑下，使用以下程式碼安裝：

npm install vue-router

axios

axios的作用用於於後端非同步通訊，簡單的說就是你想把前端資料傳給後端就需要它進行資料互動
同樣，使用程式設計軟體的終端或者cmd 切換到自己專案的路徑下，使用以下程式碼安裝：

npm install axios

ui框架

ui框架，顧名思義就是用於編寫介面用的，像淘寶網站，京東等等。

其實選擇哪個都ok，看自己喜好，一般比較用的多的是elementui，layui，museui，和mintui等等。

有基於行動端的也有基於電腦端。

以我的學生成績管理系統為例，用的是elementui

同樣，使用程式設計軟體的終端或者cmd 切換到自己專案的路徑下，使用以下程式碼安裝：

npm i element-ui -S

到這裡基礎的vue專案所需要的都安裝好了，開啟package.json能看到剛剛安裝的

引入

安裝完了，你還需要引入

在mian.js裡進行引入剛剛安裝的，以及使用elementui

// 匯入包
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import axios from 'axios'

Vue.config.productionTip = false
// elementui
Vue.use(ElementUI)
Vue.prototype.$axios = axios

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

結構

首先看看我的學生成績管理系統的完整結構

api: 用於與後端資料互動
assets：用於存放靜態資源，如圖片，樣式設定
components：元件，一般我用它作為專案的主入口，即專案一啟動就開啟它的介面
router: 設定路由，管理頁面跳轉
utils：主要工具設定，這裡主要是寫axios的設定，用於引入api裡的get.js和post.js，作為資料互動
views: 你的專案裡需要幾個頁面就使用幾個頁面進行增添檢視元件

router設定

在以上截圖中，我有：

Login.vue
addScore.vue
deleteScore.vue
updateScore.vue
showScore.vue
maintry.vue

這幾個檢視元件

則，router的index.js程式碼如下

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import maintry from '@/views/maintry'
import addScore from '@/views/addScore'
import deleteScore from '@/views/deleteScore'
import showScore from '@/views/showScore'
import updateScore from '@/views/updateScore'

// 掛載vue-router
// 將元件新增到router
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/maintry',
            name: 'maintry',
            component: maintry
        },
        {
            path: '/addScore',
            name: 'addScore',
            component: addScore
        },
        {
            path: '/deleteScore',
            name: 'deleteScore',
            component: deleteScore
        },
        {
            path: '/showScore',
            name: 'showScore',
            component: showScore
        },
        {
            path: '/updateScore',
            name: 'updateScore',
            component: updateScore
        }
    ]
})

ps: 需要注意的是，設定好了路由，你還需要在App.vue裡進行宣告，需要在App.vue
加入<router-view/>程式碼

App.vue程式碼：

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

<script>

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
    height: 100%;
}
</style>

request.js

這個檔案是axios的組態檔

程式碼如下：

import axios from 'axios'

// 建立axios範例
// eslint-disable-next-line no-unused-vars
const service = axios.create({
    // baseURL: '/', // api的base_Url
    // 後端的請求路徑
    baseURL: 'http://localhost:8081/student', // api的base_Url
    timeout: 50000 // 請求超時時間
})

// 請求攔截器
axios.interceptors.request.use(
    function (config) {
        // 在傳送請求之前做些什麼
        return config
    },
    function (error) {
        // 對請求錯誤做些什麼
        return Promise.reject(error)
    }
)

// 響應攔截器
axios.interceptors.response.use(
    function (config) {
        // 對響應資料做點什麼
        return config
    },
    function (error) {
        // 對響應錯誤做點什麼
        return Promise.reject(error)
    }
)

export default service

get和post請求

寫完request.js後，就需要根據自己的需求在get.js和post.js編寫對應的和後端互動的程式碼

以其中一個進行舉例：

get.js：

// 匯入axios設定
import service from '../utils/request'

// 登入
export function loginTosystem(username, password) {
    return service.get('/login/loginTosystem', {
        headers: { 'Content-Type': 'application/json' },
        params: {
            username: username,
            password: password
        }
    })
}

如我想實現登入功能，則需要先引入剛剛的request.js檔案，把前端輸入框輸入的兩個引數，賬號username和密碼password傳到後端，去獲取後端路徑下的/login/loginTosystem裡編寫的controller方法

post.js

// 匯入axios設定
import service from '../utils/request'

// 註冊賬號
export function registerAccount (obj) {
    return service.post('/register/registerAccount', JSON.stringify(obj), {
        headers: { 'Content-Type': 'application/json' }
    })
}

post一般處理引數比較多的情況

如我實現註冊功能，用一個物件引數去接收，把它傳入後端的/register/registerAccount的controller方法

------------------本內容於2022-04-11更新start-------------------------

// 這裡給大家舉一個例子：
// 登入和註冊介面以及功能
<template>
    <div v-show="loginShowControll">
<!--        登入介面-->
        <div v-show="loginShow" id="login_login">
            <el-container>
                <el-header>學生成績管理系統登入入口</el-header>
                <el-main>
<!--                    輸入框-->
                    <span id="login_usernameInfo">使用者名稱:</span>
                    <el-input v-model="username" placeholder="請輸入使用者名稱" id="login_input_username"></el-input>
                    <span id="login_passwordInfo">密碼:</span>
                    <el-input v-model="password" placeholder="請輸入密碼" id="login_input_password"></el-input>
<!--                    按鈕-->
                    <button type="submit" id="login_submit" @click="loginButton">登入</button>
                    <button type="submit" id="login_registerButton" @click="registerButton">註冊</button>
                </el-main>
                <el-footer>登入介面</el-footer>
            </el-container>
        </div>
<!--        註冊介面-->
        <div v-show="registerShow" id="login_register">
            <el-container>
                <el-header>學生成績管理系統註冊入口<span id="register_return" @click="registerReturn" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="bgc">返回</span></el-header>
                <el-main>
                    <!--                    輸入框-->
                    <span id="register_nameInfo">姓名:</span>
                    <el-input v-model="name" placeholder="請輸入姓名" id="register_input_name"></el-input>
                    <span id="register_usernameInfo">使用者名稱:</span>
                    <el-input v-model="registerUsername" placeholder="請輸入使用者名稱" id="register_input_username"></el-input>
                    <span id="register_passwordInfo">密碼:</span>
                    <el-input v-model="registerPassword" placeholder="請輸入使用者名稱" id="register_input_password"></el-input>
                    <!--                    按鈕-->
                    <button type="submit" id="register_submit" @click="submitButton">提交</button>
                    <button type="submit" id="register_registerButton" @click="resetButton">重置</button>
                </el-main>
                <el-footer>註冊介面</el-footer>
            </el-container>
        </div>
    </div>
</template>
<script>
    import { loginTosystem } from "../api/get";
    import { registerAccount } from "../api/post"

export default {
    name: 'Login',
    data () {
        return {
            loginShowControll: true, // 登入、註冊介面顯示控制
            loginShow: true, // 登入介面顯示控制
            registerShow: false, // 註冊介面顯示控制
            username: '', // 使用者名稱
            password: '', // 密碼
            name: '', // 姓名
            bgc: '', // 滑鼠懸停變色
            registerUsername: '', // 註冊賬號
            registerPassword: '' // 註冊密碼
        }
    },
    methods: {
        // 跳轉註冊介面
        registerButton () {
            this.loginShow = false
            this.registerShow = true
        },
        // 登入學生成績管理系統
        loginButton () {
            if (this.username.trim() == '') {
                alert('請輸入使用者名稱')
                return
            }
            if (this.password.trim() == '') {
                alert('請輸入密碼')
                return
            }
            loginTosystem(this.username, this.password).then(res => {

                if (res.data.data == null) {
                    alert('賬號或密碼錯誤！')
                } else {
                    alert('登入成功')
                    this.$router.push({
                        path: '/maintry',
                        // 將username傳到maintry元件，用於獲取登陸人員的姓名
                        query: {username: this.username}
                    })
                }
            })
        },
        // 註冊按鈕
        submitButton () {
            if (this.name = '') {
                alert('請輸入姓名')
                return
            }
            if (this.username = '') {
                alert('請輸入使用者名稱')
                return
            }
            if (this.password = '') {
                alert('請輸入密碼')
                return
            }
            const obj = {
                username: this.registerUsername,
                password: this.registerPassword,
                name: this.name
            }
           this.registerAccount(obj)
            this.name = ''
            this.registerUsername = ''
            this.registerPassword = ''

        },
        // 註冊資訊
        async registerAccount(obj) {
            await registerAccount(obj).then(res => {
                alert(res.data.data)
            })
        },
        // 重置文字
        resetButton () {
            this.name = ''
            this.registerUsername = ''
            this.registerPassword = ''
        },
        // 返回登入介面
        registerReturn () {
            this.loginShow = true
            this.registerShow = false
        },
        // 滑鼠懸停變色
        mouseOver () {
            this.bgc = 'background-color: #cccccc;color: red'
        },
        mouseLeave () {
            this.bgc = ''
        }
    },
    watch: {
        // 監聽登入和註冊地方只能使用數位和英文
        username(newValue, oldValue) {
            this.username = newValue.replace(/[^A-Za-z0-9]/g, '')
        },
        password(newValue, oldValue) {
            this.password = newValue.replace(/[^A-Za-z0-9]/g, '')
        },
        registerUsername (newValue, oldValue) {
            this.registerUsername = newValue.replace(/[^A-Za-z0-9]/g, '')
        },
        registerPassword(newValue, oldValue) {
        this.registerPassword = newValue.replace(/[^A-Za-z0-9]/g, '')
    },
        // 只能輸入漢字
        name(newValue,oldValue) {
            this.name = newValue.replace(/[^4E00-u9FA5]/g, '')
        }
    }
}
</script>
<style scoped>
@import "../assets/css/login.css";
</style>

增刪改查的思路按照該方法去製作即可

------------------本內容於2022-04-11更新end-------------------------

vue.config.js

這個是vue的組態檔，是代理的一種，可以理解解決跨域

module.exports = {
  publicPath: '/',
  lintOnSave: false,
  devServer: {
    disableHostCheck: true,
    open: true,
    port: 8080,
    proxy: {
      '/': {
        // 連線到後端的路徑
        target: 'http://localhost:8081/student',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }
}

這裡有一個要注意的是，前面的module.exports一定要注意有沒有“s”如果沒有s，設定是不會生效的

vue完成

以上vue的設定基本就完成了，接下來就可以去編寫你需要的頁面和功能了

springboot

和前端不同，springboot一般使用的是依賴進行設定所需要的內容，以及使用註解去宣告

建立springboot專案

我使用的idea去建立springboot專案。

直接建立maven專案在後面新增資料夾作為不同的功能

直接下一步，填寫完專案名稱建立即可

依賴

本依賴為pom.xml檔案的內容

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.hxc</groupId>
    <artifactId>com.StudentScoreManage</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
    </parent>
    <dependencies>
<!--        springboot-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
<!--        mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.26</version>
        </dependency>
<!--        fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
<!--        mybatis-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>
<!--        lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
<!--        redis-->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>3.6.0</version>
        </dependency>
    </dependencies>
    <!--    編碼格式-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>
    <!--    打包設定-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

以上按需引入，引入了springboot依賴，mysql驅動，mybatis等等，具體功能請百度

專案結構

以我的學生成績管理系統為例：

config：設定跨域和redis設定
constant：設定與前端互動返回的資料提示和內容
controller：控制層，接收前端的資料
service： service層，處理接收到的資料，主要作功能程式碼
dto：實體類
mapper：從service到mapper，主要實現資料庫的增刪改查方法的實現
Vo：主要用於構建不同資料的綜合的實體類，以及設定與前端互動的資料
utils: 工具類，但是本專案並沒有用到
resource/mapper：資料庫的增刪改查語句
application.yml: 設定資料庫驅動和redis設定、伺服器埠等等
pom.xml: 依賴
StudentScoreApplication.java: 啟動類

ps： constant和Vo可簡化不編寫，如不編寫資料互動提示，把controller和service
層的返回資料修改為別的資料型別即可，如String

啟動類設定

想啟動專案，必須要有一個入口檔案，

程式碼如下：

package com.StudentScore;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//宣告springboot
@SpringBootApplication
//定義mapper區
@MapperScan("com.StudentScore.Mapper")
public class StudentScoreApplication {
    public static void main(String[] args) {
        SpringApplication.run(StudentScoreApplication.class,args);
    }
}

設定跨域

只有設定跨域，才能接收到前端的資料請求

原本教學需要設定redis，現在簡化，修改為不需要redis，更新時間2022-04-11

package com.StudentScore.Config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 跨域設定
 * */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //設定允許跨域
        registry.addMapping("/**")
                .allowedOrigins("*")
                // 設定允許跨域請求的域名
                .allowedOriginPatterns("*")
                //設定允許的方法
                .allowedMethods("*")
                .maxAge(3600);
    }
}

資料庫設定、伺服器埠

application.yml 檔案主要是設定資料庫和伺服器的

server:
  port: 8081
  servlet:
# 專案的路徑，設定如下之後，它的路徑為http:locahost:8081/student
    context-path: /student
#    資料庫
spring:
  datasource:
    username: root
    url: jdbc:mysql://localhost:3306/mydb
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

在這裡要注意的是，context-path,設定了專案的路徑

於是本專案路徑為：

http:locahost:8081/student

之所以提這個，因為怕你們和後面要講的contoller的路徑搞亂

資料互動

ps：如需要簡化，此處可不設定

主要有兩個檔案，一個是ResutEnum，一個是ResutVo

用於與前端資料互動

程式碼如下

package com.StudentScore.constant;

import lombok.Getter;

@Getter
public enum ResutEnum {
    OK(2000,"成功"),
    Error(5000,"失敗");
    ResutEnum(Integer code,String message){
        this.code = code;
        this.message = message;
    }
    Integer code;
    String message;
}

package com.StudentScore.Vo;

import com.StudentScore.constant.ResutEnum;
import lombok.Getter;
/**
 * @author hxc
 * @dateTime: 2021-12-4
 * @description: 資料互動響應-提示
 * */
@Getter
public class ResultVo<T> {
    private T data;
    private Integer code;
    private String message;
    public ResultVo(ResutEnum resutEnum) {
        this.code = resutEnum.getCode();
        this.message = resutEnum.getMessage();
        data = null;
    }
    public ResultVo(ResutEnum resutEnum,T data) {
        this.code = resutEnum.getCode();
        this.message = resutEnum.getMessage();
        this.data = data;
    }
    public ResultVo(Integer code,String message,T data){
        this.code = code;
        this.message = message;
        this.data = data;
    }
}

springboot執行順序

以上，springboot的基礎設定就已經ok了。

但是，在繼續往下寫程式碼，我們得明白，springboot是怎麼執行程式碼的。

其實，我們哪怕只建立一個資料夾，只建立兩三個java檔案也能編寫完一個springboot專案，但是，這樣的程式碼是特別亂的，也不利於維護；因此我們才分層，一個資料夾一個層次，每個層次處理一種型別的功能

首先，我們知道，第一步肯定是從前端接收資料，那麼接收到的資料第一步是哪裡？

答案就是controller，別的層也可以，但是約定俗成，規定了它作為和前端互動

同理，controller接收到後，傳到了service，service編寫功能的實現，service再請求到mapper，mappe裡編寫資料庫增刪改查的實現

mapper再請求到resource下的mapper.xml，資料庫的增刪改查語句去查詢資料庫的資料。

當查到資料庫資料後，返回到mapper，再到service，然後回到controller，最後再返回前端。

controller層

然後我們再看controller程式碼，以下所有的都以登入和註冊功能作為例子，因為其他功能都和這兩個差不多

登入是查詢

註冊是插入

登入controller：

package com.StudentScore.Controller;

import com.StudentScore.Service.LoginService;
import com.StudentScore.Vo.ResultVo;
import com.StudentScore.constant.ResutEnum;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登入Controller
 * */
@RestController
@RequestMapping("/login/**")
public class LoginController {
    @Resource
    private LoginService loginService;

    // 登入到系統
    @GetMapping("/loginTosystem")
    public ResultVo loginTosystem(@RequestParam("username")String username, @RequestParam("password")String password) {
        return new ResultVo(ResutEnum.OK,loginService.loginTosystem(username,password));
    }
    @GetMapping("/findName")
    public ResultVo findName(@RequestParam("username")String username) {
        return new ResultVo(ResutEnum.OK,loginService.findName(username));
    }
}

ps：如簡化不編寫資料互動，把ResultVo修改為別的型別，如String

這裡需要特別說明，其他和它一樣
我們看到，它@RequestMapping("/login/**")
代表會請求到login路徑
@GetMapping("/loginTosystem")
在login路徑下寫這個請求，代表它的路徑為
/login/loginTosystem
細心的人會發現，前端的get和post也有寫相同的路徑
再結合設定的路徑，到請求到這裡的時候，最終路徑為
http:localhost:8081/student/login/loginTosystem
其他同理

註冊controller：

package com.StudentScore.Controller;

import com.StudentScore.Service.RegisterService;
import com.StudentScore.Vo.ResultVo;
import com.StudentScore.constant.ResutEnum;
import com.StudentScore.dto.Account;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 註冊Controller
 * */
@RestController
@RequestMapping("/register/**")
public class RegisterController {
    @Resource
    private RegisterService registerService;

    // 註冊
    @PostMapping("/registerAccount")
    public ResultVo registerAccount(@RequestBody Account account) {
        return new ResultVo(ResutEnum.OK,registerService.registerAccount(account));
    }
}

ps：如簡化不編寫資料互動，把ResultVo修改為別的型別，如String

dto層：實體

在請求到下面的service的時候，我們應該要有一個實體去對映，

即和資料庫欄位相同，賬號表

package com.StudentScore.dto;

import lombok.Data;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 賬號登入註冊實體
 * */
@Data
public class Account {
    private String id;
    // 姓名
    private String name;
    // 賬號
    private String username;
    // 密碼
    private String password;
}

ps: 要注意的是，欄位名稱需要一樣，否則會對映失敗，到時候拿到的資料是空的

service層

登入service

package com.StudentScore.Service;

import com.StudentScore.Mapper.LoginMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登入service
 * */
@Service
public class LoginService {
@Resource
    private LoginMapper loginMapper;
    // 登入
    public String loginTosystem(String username,String password){
        String message = "";
        // 判斷登入的角色是否為空
        if(loginMapper.loginTosystem(username,password)== null) {
            message = "登入失敗";
        }else {
            loginMapper.loginTosystem(username,password);
            message = "登入成功";
        }
       return message;
    }

    // 獲取登入人員的姓名
    public String findName(String username) {
        return loginMapper.findName(username);
    }
}

註冊service

package com.StudentScore.Service;

import com.StudentScore.Mapper.RegisterMapper;
import com.StudentScore.dto.Account;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @author hxc
 * @dateTime:2021-12-2
 * @description: 註冊service
 * */
@Service
public class RegisterService {
    @Resource
    private RegisterMapper registerMapper;

    // 註冊
    public String registerAccount(Account account) {
        registerMapper.registerAccount(account);
        return "註冊成功";
    }
}

mapper層

登入mapper

package com.StudentScore.Mapper;

import org.apache.ibatis.annotations.Param;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 登入mapper
 * */
public interface LoginMapper {
    // 登入
    String loginTosystem(@Param("username")String username, @Param("password")String password);
    // 獲取登入的人的姓名
    String findName(@Param("username")String username);
}

註冊mapper

package com.StudentScore.Mapper;

import com.StudentScore.dto.Account;
import org.apache.ibatis.annotations.Param;

/**
 * @author hxc
 * @dateTime: 2021-12-2
 * @description: 註冊mapper
 * */
public interface RegisterMapper {
    // 註冊
    void registerAccount(@Param("account")Account account);
}

資料庫查詢語句

登入：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
        <!-- 對映的mapper層-->
<mapper namespace="com.StudentScore.Mapper.LoginMapper">

    <select id="loginTosystem" resultType="java.lang.String">
        select username,password from scorelogin where username=#{username} and password=#{password}
    </select>
    <select id="findName" resultType="java.lang.String">
        select name from scorelogin where username=#{username}
    </select>
</mapper>

註冊：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.StudentScore.Mapper.RegisterMapper">
<!--useGeneratedKeys="true" keyProperty="id"代表使用自增，自增的物件是id -->
    <insert id="registerAccount" parameterType="com.StudentScore.dto.Account" useGeneratedKeys="true" keyProperty="id">
        insert into scorelogin (name,username,password) values (#{account.name},#{account.username},#{account.password})
    </insert>
</mapper>

結語

到此這篇關於如何搭建vue+springboot專案的文章就介紹到這了,更多相關vue+springboot專案搭建內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

一文教會你如何搭建vue+springboot專案

目錄

前言

開發使用的軟體

vue專案搭建

環境設定

cmd命令

vue ui 建立專案

vue專案製作方向梳理

通過軟體vscode開啟專案

vue 設定

vue-router

如何設定

axios

ui框架

引入

結構

router設定

request.js

get和post請求

vue.config.js

vue完成

springboot

建立springboot專案

依賴

專案結構

啟動類設定

設定跨域

資料庫設定、伺服器埠

資料互動

springboot執行順序

controller層

dto層：實體

service層

mapper層

資料庫查詢語句

結語

熱門文章

一文教會你如何搭建vue+springboot專案

目錄

前言

開發使用的軟體

vue專案搭建

環境設定

cmd命令

vue ui 建立專案

vue專案製作方向梳理

通過軟體vscode開啟專案

vue 設定

vue-router

如何設定

axios

ui框架

引入

結構

router設定

request.js

get和post請求

vue.config.js

vue完成

springboot

建立springboot專案

依賴

專案結構

啟動類設定

設定 跨域

資料庫設定、伺服器埠

資料互動

springboot執行順序

controller層

dto層：實體

service層

mapper層

資料庫查詢語句

結語

熱門文章

設定跨域