Springboot+Vue管理类小项目结构搭建

SpringBoot+Vue项目

1.SpringBoot部分

1.1 创建项目

创建一个Maven项目，在pom.xml文件中导入Springboot需要的依赖，这部分依赖可以去网上找复制一份，这里也准备了一份比较完整的项目需要的依赖,需要哪个部分的话可以单独使用

<dependencies>
        <!-- 支持web环境 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 数据库的jar包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- 支持持久化层框架 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- Springboot测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <!-- mybatis与springboot的整合包 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!-- 对thymeleaf的支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--热部署jar-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- pagehelper分页插件依赖 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
    </dependencies>

1.2 建立项目的目录结构

新建一个包，这个包自己取名，建好之后，在里面新建一个启动类，用于启动这个项目。

@SpringBootApplication // SpringBoot启动类注解
@MapperScan("cn.itsource.mapper") // 扫描包的路径
public class App {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run(App.class);
    }
}

在resources文件夹中新建一个application.yml配置文件，用于配置项目需要的配置。

#配置数据源
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql:///auth
    driver-class-name: com.mysql.jdbc.Driver
#配置mybatis
mybatis:
  type-aliases-package: cn.itsource.domain, cn.itsource.query #配置别名
  mapper-locations: classpath:cn/itsource/mapper/*Mapper.xml #可以省略，约定大于配置
#配置打印的日志
logging:
  level:
    cn:
      itsource: trace
    root: info

上述的两个文件，缺一个都不可以，都会报错，因此需要准备好springboot的启动环境。启动后默认端口是8080，可以在上面的配置文件中对端口进行配置。

2.Vue部分

首先需要创建一个StaticWeb项目，

打开底部的命令行窗口

输入指令：vue init webpack，初始化一个vue项目，初始化项目的时候会有些简单的命令选择，

E:\ideaworkspace\Vue-Test>vue init webpack
// 在当前项目路径创建 选择 Y
? Generate project in current directory? Yes 
// 项目名称
? Project name vueproject
// 项目的描述信息
? Project description A Vue.js project
// 作者
? Author westwei
? Vue build standalone
// 安装路由选择 Y，这个一定要选择
? Install vue-router? Yes
// N
? Use ESLint to lint your code? No
// N
? Set up unit tests No
// N
? Setup e2e tests with Nightwatch? No
// 选择npm进行安装
? Should we run `npm install` for you after the project has been created? (recommended) npm

项目初始化的时间会比较久，中途也可能遇到一些问题，可能出现超时的情况，出现这种情况，会报错，有一条信息是说在那个目录里面的.log文件已经有了，

出现这种错误需要将目录找到从node-cache这里删除这个文件夹。然后重新输入初始化项目的命令。

运行vue项目： npm run dev

当输入命令，运行完成之后，在浏览器地址栏中输入这个地址，出现图中的样式，则代表vue项目初始化完成了，就可以进行接下来的编写了。

扫描二维码关注公众号，回复： 13532272 查看本文章