当前位置:首页 > Java技术 > Vue+SpringBoot+Mybatis的简单员工管理项目

Vue+SpringBoot+Mybatis的简单员工管理项目

2022年09月17日 09:11:24Java技术8

本文项目参考自:https://github.com/boylegu/SpringBoot-vue

这个项目主要讲的是一些概念,想要自己实现代码操作请看:https://www.cnblogs.com/wlovet/p/10980579.html

为了完成此项目你需要会springBoot,mybatis的一些基本操作

运行界面

Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

 

 Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

第一步:搭建前端服务器

①安装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(), 'gubaoer@hotmail.com', 08613000001111, 'male', 'gubaoer', 'HongKou District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'boyle.gu@hotmail.com', 08613000001112, 'male', 'baoer.gu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yoyo.wu@gmail.com', 08613000001113, 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'stacy.gao@126.com', 08613000001114, 'female', 'stacy.gao', 'MinHang District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yomiko.zhu@qq.com', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'hong.zhu@163.com', 08613000001116, 'male', 'hong.zhu', 'YangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'leon.lai@qq.com', 08613000001117, 'male', 'leon.lai', 'JinShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'mark.lei@sohu.com', 08613000001118, 'male', 'mark.lei', 'HuangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'wen.liu@360.com', 08613000001119, 'male', 'wen.liu', 'ChongMing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cai.lu@baidu.com', 08613000001120, 'female', 'cai.lu', 'BaoShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'alex.li@icee.com', 08613000001121, 'male', 'alex.li', 'ChangNing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'sofia.xu@qq.com', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cora.zhang@qq.com', 08613000001123, 'female', 'cora.zhang', 'XuHui District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'tom.gao@hotmail.com', 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、整个前端项目文件介绍

     Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

5、前端项目结构图

     Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

components包下的内容

  Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

6、App.vue内容

<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、项目结构图

  Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

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)等等

 

Vue+SpringBoot+Mybatis的简单员工管理项目 _ JavaClub全栈架构师技术笔记

 

 

作者:sum墨
来源链接:https://www.cnblogs.com/wlovet/p/8317282.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/java/42433.html

标签: Spring Boot
分享给朋友:

“Vue+SpringBoot+Mybatis的简单员工管理项目” 的相关文章

SpringBoot之Hello World篇,使用eclipse+maven搭建SpringBoot工程

SpringBoot之Hello World篇,使用eclipse+maven搭建SpringBoot工程

首先来了解下什么是SpringBoot 百度百科:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Spring Boot致力于在蓬...

SpringBoot之整合Mybatis篇

SpringBoot之整合Mybatis篇

开头语 啪嚓,醒木一拍(咳咳) ,上回书我们说到:SpringBoot的简单搭建,也就是SpringBoot的搭建流程,简单的将项目进行启动,本次,我们简单的把SpringBoot与持久层框架Mybatis进行整合,接下来,我们开始。 Mybatis名词解释   &...

SpringBoot整合Dubbo与zookeeper纯注解版

SpringBoot整合Dubbo与zookeeper纯注解版

一、Dubbo和zk的作用 上回讲到,Dubbo作为一款优秀的RPC框架,封装了dubbo-provider(提供者)和dubbo-consumer(消费者),而provider和consumer之间需要通过注册中心来作为可发现的服务目录。而zookeeper(此处简称zk)提供了服务接口注...

SpringBoot整合Redis缓存

SpringBoot整合Redis缓存

一、前言 之前分享过关于Redis集群如何搭建的,最近有小伙伴儿说分享一下Redis如何使用SpringBoot的整合,项目中经常使用的就是Redis,本次整合的是Redis单机版,后续会分享Redis集群版本,请多提出自己的意见。 二、开始整合 1.首先需要搭建Redis服务器,可参...

SpringBoot日志框架

SpringBoot日志框架

概述项目中日志系统是必不可少的的。 目前比较流行的日志框架有log4j、logback等 。可能大家还不知道,这两个框架的作者是同一个人,Logback旨在作为流行的log4j项目的后续版本,从而恢复log4j离开的位置。另外 slf4j(Simple Logging Facade for Java...

Spring Boot+微信小程序

Spring Boot+微信小程序

1. 前言 微信小程序开发平台,提供有一类 API,可以让开发者获取到微信登录用户的个人数据。这类 API 统称为开放接口。 Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文数据和敏感数据。 明文数据也称为公开数据,开发者可以直接获取到,如登...

Spring Boot 整合 Log4j2 日志并压测性能

Spring Boot 整合 Log4j2 日志并压测性能

1/ Log4j2的性能测试从图中不难看出,在线程数为 2~16 之间,混合使用同步和异步的logger来打印日志,性能是最好的。2/ 目标混合 sync/async彩色日志分类输出到不同文件自动压缩日志文件并归档3/ 实现0x01 Maven 依赖 pom.xml<?xml ver...

Spring Boot 中如何使用 Dubbo Activate 扩展点

Spring Boot 中如何使用 Dubbo Activate 扩展点

摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 公司的核心竞争力在于创新 – 《启示录》 』 继续上一篇:《 Springboot 整合 Dubbo/ZooKeeper 》,在...

SpringBoot(三) -- SpringBoot与日志

SpringBoot(三) -- SpringBoot与日志

一.日志的起源  现在假设一个开发人员在开发一个大型系统,由于这个系统过于庞大没在很多的地方将关键的数据使用System.out.println()打印,但是当我们在项目正式上线时又需要去除,在项目bug修复时又需要重新打印,那么我们是不是可以将这些实用的输出信息保存到一个文件中.我们...

11.springboot与日志

11.springboot与日志

市场上的日志框架: JUL,JCL,Jboss-logging,logback,log4j,log4j2,slf4j......

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。