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依赖

   
   
        org.springframework.boot
        spring-boot-starter-web
   
   
   
        org.springframework.boot
        spring-boot-starter-tomcat
        provided
   
   
   
        org.springframework.boot
        spring-boot-starter-test
        test
   

   
   
        mysql
        mysql-connector-java
        runtime
   
   
   
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        1.3.2
   

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

   
        select * from user where username=#{username} and password=#{password}
   


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

App.vue

五. nginx
此时前后端代码便写完了，分别运行前后端服务器。。。
然后运行nginx
nginx的配置：listen后面为切入端口号，第一个location配置的是前端的端口号，默认为8080，第二个location配置的是后端的端口号。
进入解压出nginx的目录输入命令：start nginx.exe

六. 运行结果