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项目初始化完成了,就可以进行接下来的编写了。