SpringBoot&Vue 前后端分离项目框架搭建

SpringBoot&Vue   前后端分离项目框架搭建

• 1.下载底层支持node.js
• 2.通过npm安装vue-cli(npm install @vue/cli -g)

• 1.选择项目文件夹创建项目(vue create [项目文件名])
• 2.试验是否创建Vue项目成功(按照cmd命令行提示即可)
• 3.Element-Plus安装(npm install element-plus --save)

• 4.改造前端页面(没学到火候，页面还是丑)

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

App.vue:

Home.vue:

about.vue:

router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import('@/views/Home')
const about = () => import('@/views/about')

const routes = [
  {
    path: '/',
    name: 'default',
    component: Home
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: about
  }
]

const router = createRouter({
  history: createWebHistory(process.env.base_URL),
  routes
})

export default router

components/Header.vue:

components/SideBar.vue:

components/Table.vue:

• 1.创建Springboot项目

项目基本结构(vue导入，配置数据库等)：

相关依赖：

    4.0.0
    org.wu
    demo
    0.0.1-SNAPSHOT
    demo
    Demo project for Spring Boot
    
        1.8
        UTF-8
        UTF-8
        2.3.7.RELEASE
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.4
        
        
            mysql
            mysql-connector-java
            runtime
        
        
            com.fasterxml.jackson.core
            jackson-core
            2.11.3
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        
    

    
        
            
                org.springframework.boot
                spring-boot-dependencies
                ${spring-boot.version}
                pom
                import
            
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                3.8.1
                
                    1.8
                    1.8
                    UTF-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.3.7.RELEASE
                
                    org.wu.demo.DemoApplication
                
                
                    
                        repackage
                        
                            repackage
                        
                    
                
            
        
    

application.properties:

# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8888
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=org.wu.demo.entity
# 数据库驱动：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=defaultDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/spring-vue?serverTimezone=UTC
# 数据库用户名&密码：
spring.datasource.username=root
spring.datasource.password=root

Application.java:

package org.wu.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("org.wu.demo.mapper")
@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

Student.java:

package org.wu.demo.entity;

import lombok.Data;

@Data
public class Student {
    private Integer studentId;
    private String studentName;
    private Integer studentAge;
}

StudentMapper.java:

package org.wu.demo.mapper;

import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import org.wu.demo.entity.Student;

import java.util.List;

@Repository("studentMapperBean")
public interface StudentMapper {
    Student queryStudentById(int id);
    List queryStudentsByName(String name);
    List queryStudentsByAge(int age);
    List queryStudentsByPage(@Param("pageSize") int pageSize,@Param("start") int start);
    List findAllStudents();
    int countStudents();
    void addStudent(Student student);
    void deleteStudentById(int id);
    void updateStudent(Student student);
}

StudentService.java:

package org.wu.demo.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;
import org.wu.demo.entity.Student;
import org.wu.demo.mapper.StudentMapper;

import java.util.List;

@Service("studentServiceBean")
public class StudentService {
    private StudentMapper studentMapper;

    @Autowired
    @Qualifier("studentMapperBean")
    private void setStudentMapper(StudentMapper studentMapper){
        this.studentMapper = studentMapper;
    }
    public Student queryStudentById(int id){
        return studentMapper.queryStudentById(id);
    }
    public List queryStudentsByName(String name){
        return studentMapper.queryStudentsByName(name);
    }
    public List queryStudentsByAge(int age){
        return studentMapper.queryStudentsByAge(age);
    }
    public List queryStudentsByPage(int pageSize,int currPage){
        return studentMapper.queryStudentsByPage(pageSize,(currPage - 1)*pageSize);
    }
    public List findAllStudents(){
        return studentMapper.findAllStudents();
    }
    public int countStudents(){
        return studentMapper.countStudents();
    }
    public void addStudent(Student student){
        studentMapper.addStudent(student);
    }
    public void deleteStudentById(int id){
        studentMapper.deleteStudentById(id);
    }
    public void updateStudent(Student student){
        studentMapper.updateStudent(student);
    }
}

StudentController.java:

package org.wu.demo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.wu.demo.entity.Student;
import org.wu.demo.service.StudentService;

@RestController
public class StudentController {

    private StudentService studentService;

    @Autowired
    @Qualifier("studentServiceBean")
    public void setStudentService(StudentService studentService){
        this.studentService = studentService;
    }
    @GetMapping(value="/student_id")
    public String queryStudentById(int id){
        return studentService.queryStudentById(id).toString();
    }
    @GetMapping(value="/student_name")
    public String queryStudentByName(String name){
        return studentService.queryStudentsByName(name).toString();
    }
    @GetMapping(value="/student_age")
    public String queryStudentByAge(int age){
        return studentService.queryStudentsByAge(age).toString();
    }
    @GetMapping(value="/page")
    public String queryStudentByPage(int pageSize,int currPage){
        System.out.println("pageSize为："+pageSize+"currPage为："+currPage);
        return studentService.queryStudentsByPage(pageSize,currPage).toString();
    }
    @GetMapping(value="/all_students")
    public String findAllStudents(){
        return studentService.findAllStudents().toString();
    }
    @GetMapping(value="/count_students")
    public int countStudents(){
        return studentService.countStudents();
    }
    // 这里json参数返回的key应该为Student对象的键
    @PostMapping(value="/add_student")
    public void addStudent(@RequestBody Student student){
        studentService.addStudent(student); // 需要完善的地方：这里应该要返回成功码或者失败码
    }
    @GetMapping(value="/delete_student")
    public void deleteStudent(int id){
        studentService.deleteStudentById(id); // 需要完善的地方：这里应该要返回成功码或者失败码
    }
    @PostMapping(value="/update_student")
    public void updateStudent(@RequestBody Student student){
        studentService.updateStudent(student); // 需要完善的地方：这里应该要返回成功码或者失败码
    }
}

StudentMapping.xml:

    
        
        
        
    

    
        select * from student where id=#{id}
    
    
        select * from student where `name` like CONCAt('%',#{name},'%')
    
    
        select * from student where age = #{studentAge}
    
    
        select * from student limit #{start},#{pageSize}
    
    
        select * from student
    
    
        select count(*) from student
    
    
        insert into student(id,`name`,age)
        values(#{studentId},#{studentName},#{studentAge})
    
    
        delete from student where id=#{id}
    
    
        update student set `name` = #{studentName},age = #{studentAge}
        where id = #{studentId}
    

对于后台数据部分，这里一切从简，Navicat创建新的数据库以及表结构：