1. 程式人生 > >1112_Vue+SpringBoot+Mybatis的簡單員工管理專案

1112_Vue+SpringBoot+Mybatis的簡單員工管理專案

Vue+SpringBoot+Mybatis的簡單員工管理專案

本文專案參考自:https://github.com/boylegu/SpringBoot-vue

https://www.cnblogs.com/wlovet/p/8317282.html

為了完成此專案你需要會springBoot,mybatis的一些基本操作

執行介面

 

 

第一步:搭建前端伺服器

複製程式碼

①安裝node.js,下載相應版本的node.js,下載地址:https://nodejs.org/en/download/,下載完雙擊安裝,點選下一步直到安裝完成
②安裝完成後,附件裡選擇命令提示符(或者在開始的搜尋框裡輸入cmd回車調出命令面板)輸入:node -v回車,出現相應版本證明安裝成功,
 node環境已經安裝完成,由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的
 國內映象---cnpm。在命令列中輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org回車,大約需要3分鐘,
 如果報錯或沒反應,則卸掉node.js重新安裝
③安裝全域性vue-cli腳手架,用於幫助搭建所需的模板框架。輸入命令:cnpm install -g vue-cli回車等待完成。
④建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄,假如我們打算把專案新建在e盤下的vue資料夾中則輸入下面的命令:
 e:回車,然後cd vue,然後輸入命令:vue init webpack 專案資料夾名稱,回車,執行初始化命令的時候會讓使用者輸入幾個基本的選項,
 如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好。(一頓回車+N鍵就完成了)
⑤安裝專案所需的依賴包,首先輸入:cd 專案名回車,然後輸入:cnpm install回車等待安裝,安裝完成之後,會在我們的專案目錄firstVue
 資料夾中多出一個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。安裝完依賴包之後,就可以執行整個專案了。
⑥測試環境是否搭建成功,在cmd裡輸入:cnpm run dev回車,專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟
 ,可以手動輸入)。執行成功後,會看到Welcome to Your Vue.js App頁面。

複製程式碼

 

第二步:建立資料庫表:persons<mysql>

複製程式碼

CREATE TABLE persons 
(id  integer, 
create_datetime datetime, 
email varchar(255), 
phone varchar(255), 
sex varchar(255), 
username varchar(255), 
zone blob, 
primary key (id));

複製程式碼

複製程式碼

INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '
[email protected]
', 08613000001111, 'male', 'gubaoer', 'HongKou District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001112, 'male', 'baoer.gu', 'JingAn District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '
[email protected]
', 08613000001113, 'female', 'yoyo.wu', 'JingAn District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001114, 'female', 'stacy.gao', 'MinHang District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001116, 'male', 'hong.zhu', 'YangPu District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001117, 'male', 'leon.lai', 'JinShan District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001118, 'male', 'mark.lei', 'HuangPu District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001119, 'male', 'wen.liu', 'ChongMing District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001120, 'female', 'cai.lu', 'BaoShan District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001121, 'male', 'alex.li', 'ChangNing District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001123, 'female', 'cora.zhang', 'XuHui District'); INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001124, 'female', 'tom.gao', 'HuangPu District');

複製程式碼

 

第三步:編寫前端伺服器程式碼:Vue框架

1、什麼是vue框架

 Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,Vue 也完全能夠為複雜的單頁應用提供驅動

2、vue框架的特點

  • 元件化的開發方式類似於java中的類呼叫
  • 適用於前端部分的MVVM開發模式
  • 可使用webpack打包釋出

3、vue框架核心組成檔案介紹

  • App.vue:頁面入口檔案
  • main.js:程式入口檔案,載入各種公共元件
  • eventBus:作為各個元件的通道
  • components包:存放公共元件的資料夾

4、整個前端專案檔案介紹

    

5、前端專案結構圖

    

components包下的內容

  

6、App.vue內容

這裡需要注意引入元件的方法:首先取名不能隨便去,必須按照駝峰命名法來,比如DbTable並且首字母大寫,然後引入按照大寫字母轉換為db-table,也就是兩個字母以‘-’連線,大寫變小寫
,否則會引入失敗!!!

複製程式碼

<template>
    <div class="wrapper">
        <db-header></db-header>
        <el-row class="container">
            <el-col :span="4" class="menu">
                <db-sidebar></db-sidebar>
            </el-col>
            <el-col :span="20" class="content">
                <db-filterinput></db-filterinput>
                <db-table></db-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <footer class="footer">
                    <db-footer></db-footer>
                </footer>
            </el-col>
        </el-row>
    </div>
</template>
<script>
  /*此處命名必須按照駝峰命名法,並且引入也需要遵守規則*/
    import DbHeader  from './components/DbHeader.vue'
    import DbSidebar from './components/DbSidebar.vue'
    import DbFilterinput from './components/DbFilterinput.vue'
    import DbTable from './components/DbTable.vue'
    import DbFooter from './components/DbFooter.vue'
    import ElRow from "element-ui/packages/row/src/row";
    export default {
        name: 'app',
        components: {
            ElRow, DbHeader,
            DbSidebar,
            DbFilterinput,
            DbTable,
            DbFooter
        },
    }
</script>
<style>

    element.style {
        background-color: rgb(10, 47, 88);
    }

    body {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif;
        margin: 0;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }

    .el-menu, body, html {
        height: 100%;
    }

    .wrapper {
        position: relative;
    }

    footer, div {
        display: block;
    }

    .container {
        padding-top: 70px;
        flex: 1;
    }

    .container, .wrapper {
        height: 100%;
    }

    .menu {
        height: 100%;
        background-color: #eef1f6;
    }

    .content {
        padding-top: 25px;
        padding-right: 25px;
        padding-bottom: 125px;
        padding-left: 25px;
    }

    .footer {
        height: 120px;
        background-color: #324057;
        color: #a4aebd;
        width: 100%;
        z-index: 1000;
        margin-top: -120px;
        line-height: 1;
        font-size: 22px;
    }

</style>

複製程式碼

vue檔案中3大標籤的作用:

<template></template>

  可以在<template></template>標籤中新增自定義標籤,並且可以使用vue中特有的指令

<script></script>

  可以在此處編寫js程式碼,但如果此vue檔案是一個元件則需要新增”export default{}”程式碼將該元件匯出

<style></style>

  可以在此處編寫css程式碼,若希望該css樣式只作用在該vue元件中,則需要改成<style scoped></style>

7、main.js中的內容

複製程式碼

/**
* Created by wlovet on 18/1/17
*/
import Vue from 'vue'
import{
    Button,
    Select,
    Row,
    Col,
    Pagination,
    Table,
    TableColumn,
    Form,
    FormItem,
    Input,
    Dialog,
    Option
}from 'element-ui'
//匯入App.vue頁面入口元件
import App from './App.vue'
//Element-UI使用指南 Element-UI是餓了麼前端團隊
//推出的一款基於Vue.js 2.0 的桌面端UI框架,
//手機端有對應框架是 Mint UI 
import 'element-ui/lib/theme-default/index.css'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale' 

// 匯入更多的第三方庫的元件
//Moment.js 是一個 JavaScript 日期處理類庫
//,用於解析、檢驗、操作、以及顯示日期
import moment from 'moment'
//Vue2.0的網路請求庫
import axios from 'axios'
//curvejs 中文讀["克js"],是騰訊AlloyTeam
//打造的一款魔幻線條框架,
//讓線條成為一名優秀的舞者,
//讓線條們成為優秀的舞團,HTML5 Canvas就是舞臺。
import curvejs from 'curvejs'

//Object.defineProperty 是vue中雙向繫結的基礎。
//vue是通過資料劫持的方式來做資料繫結的,
//最核心的方法是通過 Object.defineProperty()
//方法來實現對屬性的劫持,達到能監聽到資料的變動。
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
Object.defineProperty(Vue.prototype, '$axios', { value: axios });
Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });

//引入Element-UI元件的步驟
Vue.use(Button);
Vue.use(Select);
Vue.use(Row);
Vue.use(Col);
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Dialog);
Vue.use(Option);

new Vue({
    el:'#app',
    render:h=>h(App)
})

複製程式碼

8、eventBus.js的內容

//作為vue元件之間資訊交流的通道
import Vue from 'vue'
const Bus = new Vue();
export default Bus

各個元件的內容具體資訊可去github下載:https://github.com/boylegu/SpringBoot-vue

第四步:編寫後臺伺服器程式碼:SpringBoot

1、專案結構圖

  

2、pom.xml配置

複製程式碼

<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.sunyard</groupId>
  <artifactId>SpringBoot-MVVM-Vue</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.6.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>Dalston.SR3</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

複製程式碼

 3、application.properties配置檔案

複製程式碼

spring.application.name=springboot-mvvm-vue
server.port=8088
spring.datasource.url=jdbc:mysql://localhost:3306/springboot-mvvm-vue2
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#掃描專案中的pojo類
mybatis.typeAliasesPackage=com.mycom.pojo
#掃描mapper包下的xml檔案
mybatis.mapperLocations=classpath\:com/mycom/mapper/*.xml

複製程式碼

4、啟動入口類Application

複製程式碼

package com.mycom;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;

@SpringBootApplication
//掃描dao包下的dao介面
@MapperScan("com.mycom.dao")
//掃描config包下的CORSConfig類,用來解決axios的跨域請求問題
@Configuration
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

複製程式碼

 5、此處為基本springMVC程式設計,業務編寫請自行完成

 這裡認為你可以獲得persons表中所有資料

 6、config包新建CORSConfig類解決axios的跨域請求問題

複製程式碼

package com.mycom.config;

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

import static org.springframework.web.cors.CorsConfiguration.ALL;

/**
 * CORS configuration
 */
@Configuration
public class CORSConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins(ALL)
                        .allowedMethods(ALL)
                        .allowedHeaders(ALL)
                        .allowCredentials(true);
            }
        };
    }

}

複製程式碼

 不建這個類的話在前端部分使用axios(一種ajax的封裝)請求資料是會失敗!

  介紹一下webpack是什麼?

  •能夠實現多種不同的前端模組系統

   •webpack 打包前端資源(模組)時能夠實現程式碼分割,按需載入

   •處理所有資源,如javascript、css、圖片、模板(jade、各種template)等等