springboot + mybatis + nodejs + vue + nginx 搭建前后端分离项目
一. 开发环境和工具的准备
·jdk1.8
·maven
·mysql数据库
·Navicat
·nodejs
·vuejs
·后端工具idea
·前端工具WebStorm
二. 数据库设计
create database fontandback
use fontandback
create table user(
id int(10) primary key auto_increment,
username varchar(20),
password varchar(20)
)
insert into user(username,password) values('admin','admin');
三. 后端
1.创建项目
2.添加maven依赖
<dependencies>
<!--springboot核心，包括内嵌的tomcat，SpringMVC等-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--springboot核心-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<!--测试，包括Junit-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
</dependencies>
3.配置application.properties
#后端端口号
server.port=8081
#数据库的配置
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/fontandback?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = GMT
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#映射配置
mybatis.type-aliases-package=com.example.frontandback.entity
mybatis.mapper-locations=classpath:mapper/*Mapper.xml
4.去除掉用不到的文件，最终的目录结构：
5.User
package com.example.frontandback.entity;
public class User {
private int id;
private String username;
private String password;
private User(){
}
private User(int id,String username,String password){
this.id = id;
this.username = username;
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
6.UserMapper
package com.example.frontandback.mapper;
import com.example.frontandback.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;
@Mapper
@Component("userMapper")
public interface UserMapper {
public User getUser(@Param("username")String username, @Param("password")String password);
}
7.UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.frontandback.mapper.UserMapper">
<select id="getUser" resultType="com.example.frontandback.entity.User">
select * from user where username=#{username} and password=#{password}
</select>
</mapper>
8.省略UserService。。。。。。。。。。。。
UserServiceImpl
package com.example.frontandback.service.impl;
import com.example.frontandback.entity.User;
import com.example.frontandback.mapper.UserMapper;
import com.example.frontandback.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserMapper userMapper;
@Override
public User getUser(String username, String password) {
return userMapper.getUser(username,password);
}
}
9.SystemController
package com.example.frontandback.controller;
import com.example.frontandback.entity.User;
import com.example.frontandback.service.impl.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class SystemController {
@Autowired
UserServiceImpl userService;
@RequestMapping(value="checkLogin")
@ResponseBody
public User checkLogin(@RequestParam("username")String username,
@RequestParam("password")String password){
return userService.getUser(username,password);
}
}
四. 前端
生成的目录结构为
直接在所给页面进行编写
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<form action="http://127.0.01:8081/checkLogin" method="post">
<table align="center">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
五. nginx
此时前后端代码便写完了，分别运行前后端服务器。。。
然后运行nginx
nginx的配置：listen后面为切入端口号，第一个location配置的是前端的端口号，默认为8080，第二个location配置的是后端的端口号。
进入解压出nginx的目录输入命令：start nginx.exe
六. 运行结果