springboot + vue开发环境搭建

文章目录

springboot + vue开发环境搭建
一、vue开发环境搭建
二、springboot项目搭建
三、springboot+vue测试

springboot + vue开发环境搭建

一、vue开发环境搭建

见：vue开发环境搭建

二、springboot项目搭建

我使用 eclipse+maven开发工具，springboot版本号为：2.1.4.RELEASE

POM文件如下所示：

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.4.RELEASE</version>
</parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- 数据库操作  hibernate --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins>
</build>

说明：我采用内嵌Tomcat，jar方式启动项目

项目结构如下图：

在项目根包下面创建项目启动类：Application.class

@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);System.out.println("spring boot Application started");}
}

controller层代码：

@RestController
public class ApplicationController {private static final Logger LOGGER = LoggerFactory.getLogger(ApplicationController.class);@Autowiredprivate IUserService userService;@GetMapping("test")public String test() {return "test success";}
}

启动项目测试，运行Appliction.class中的main方法，测试结果如下：

配置hibernate:

POM文件中添加依赖：spring-boot-starter-data-jpa和
mysql-connector-java，如上述POM文件所示。
配置application.properties文件
在src/main/resources下创建application.properties文件：

 #datasource config
spring.datasource.url=jdbc:mysql://localhost/springboottest?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.jpa.show-sql = true

说明：serverTimezone=UTC是为了解决数据库时区问题，在数据库中设置也可以。

实体：

@Entity(name = "t_user")
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private int id;@NotNull(message = "username can not be null")private String username;@NotNull(message = "password can not be null")private String password;

因为数据库中设置了主键自增，所以这里设置实体主键ID为GenerationType.IDENTITY，否则会报错：

Dao：

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;import springBoot.entity.User;@Repository
public interface UserDao extends JpaRepository<User, Integer> {User findByUsername(String username);
}

单元测试

@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest(classes = { Application.class })
public class ApplicationTest {@Autowiredprivate IUserService userService;@Autowiredprivate IPersonService personService;@Testpublic void startTest() {System.out.println("test success");}@Testpublic void saveUserTest() {User user = new User();user.setUsername("zsandf");user.setPassword("123456");userService.save(user);System.out.println("save success");}}

三、springboot+vue测试

前端配置代理，指向后端服务器：localhost:8080
在config目录下的index.js中配置 proxyTable：

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://localhost:8080',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''},       }},

后端解决跨域

在springboot/config下新增CorsConfig.class文件：

@Configuration
public class CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1corsConfiguration.addAllowedHeader("*"); // 2corsConfiguration.addAllowedMethod("*"); // 3return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4return new CorsFilter(source);}
}

部分主要代码

前端vue代码

 //登录组件
<template><div id="log"><label>请输入用户名</label><input type="text" name="username" v-model="username"><label>请输入密码</label><input type="text" name="password" v-model="password"><br><button @click.prevent="doLogin">登录</button><br><h5>{{ loginMessage }}</h5></div>
</template><script>export default {name: 'login',data() {return{loginMessage: null,username: null,password: null};},methods: {doLogin() {// console.log("调用了doLogin方法");// var parms = {//     username: this.username,//  password: this.password// };// this.axios.get('/api/login?username=' + parms.username).then(result => {//   console.log(parms);//   console.log(result.data);//     this.loginMessage = result.data;// })this.axios.post('/api/login', {username: this.username,password: this.password}).then(result => {console.log(result.data);this.loginMessage = result.data;})}}}</script><style></style>

后端controller代码

@RestController
public class ApplicationController {private static final Logger LOGGER = LoggerFactory.getLogger(ApplicationController.class);@Autowiredprivate IUserService userService;@GetMapping("test")public String test() {return "test success";}@PostMapping("login")public String loginTest(@RequestBody @Valid User user) {LOGGER.info(user.getUsername());LOGGER.info(user.getPassword());if (userService.isLegaled(user)) {return "login success!";}return "logon failed!!!!";}
}

运行测试结果
分别启动前端、后端，然后访问：http://localhost:8090/

springboot + vue开发环境搭建相关推荐

Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
Vue开发环境搭建及在docs新建vue项目
参考: https://www.cnblogs.com/winter92/p/7117057.html (写在开头的废话:相信很多人在学习vue这个框架时,最开始搭建开发环境,容易遇到一些大大小小的坑 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...
Vue开发环境搭建和vue-cli脚手架
vue本质是一个js脚本,提供了一个前端框架.在开发时,可以直接引入这个js脚本,也可以使用脚手架工具,在本地搭建一个项目. Vue.js安装方法一.在 Vue.js 的官网上直接下载 vue.mi ...
Vue开发环境搭建详细操作（NodeCnpmVue）
目录一.安装node.js 二.安装cnpm 三.安装Vue 四.常用命令五.其他扩展信息一.安装node.js 1.官网下载地址:Download | Node.js 2.设置nodejs p ...
Cesium Vue开发环境搭建
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程.官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程. 一 ...
VS Code + Vue 开发环境搭建
1.下载并安装 Visual Studio Code 2019 2.Visual Studio Code 2019安装成功后,打开VS Code 工具点击左侧[扩展]菜单,在搜索栏中输入 Chines ...

springboot + vue开发环境搭建

文章目录

springboot + vue开发环境搭建

一、vue开发环境搭建

二、springboot项目搭建

三、springboot+vue测试

springboot + vue开发环境搭建相关推荐

最新文章

热门文章