一. 開發環境和工具的準備
·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
六. 運行結果