vue-springboot实现基本crud

记录下最近写的东西，以后忘了还能翻翻~~

本例项目目录大概为：

前端：                                                           后端：

      

前端：

准备工作：vue-cli搭建项目，安装axios，element-ui（刚开始没用element-ui所以装了bootstrap）等。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入emlment-ui的提示功能
import {Message} from 'element-ui'
Vue.prototype.$message=Message

Vue.use(ElementUI);
//引入bootstrap
import 'bootstrap'
import $ from 'jquery'
// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
//登录验证用tokon
axios.defaults.withCredentials  = true //请求发送cookie

// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable */
new Vue({
  el: '#app',
  router,//路由
  store,//vuex 
  components: { App },
  template: '',
  emulateJSON:true,
  render: h => h(App)
})
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (window.sessionStorage.getItem('token')) {
      // Vue.http.headers.common['Authorization'] = 'Bearer ' + window.sessionStorage.getItem('token')
      config.headers.token = window.sessionStorage.getItem('token')
    }

    return config;
  },
  error => {
    return Promise.reject(error);
  });

router/index.js

 

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login.vue'
import Welcome from '@/components/welcome.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    //通过meta指定路由是否需要登录校验标识
    {
      path: '/',
      redirect: '/welcome'
    },
    
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path:'/welcome',
      name:'Welcome',
      component:Welcome
    },
    
    {
      path:'/header',
      name:'Header',
      component: resolve => require(['@/components/commons/Header.vue'],resolve),
      children:[
        {
          path:'/list',
          name: 'List',
          component:Lresolve => require(['@/components/crud/list.vue'],resolve),
        },
        {
          path:'/add',
          name: 'Add',
          component:resolve => require(['@/components/crud/add.vue'],resolve),
        },
        
        {
          path:'/Upload',
          name:'Upload',
          component: resolve => require(['@/components/views/Upload.vue'],resolve)
        },
        {
          path:'/upList',
          name:'UpList',
          component: resolve => require(['@/components/views/UpList.vue'],resolve),
          children:[
            {
            path:'/update',
            name: 'Update',
            component:resolve => require(['@/components/crud/update.vue'],resolve),
          },
        ]
        },
        {
          path:'/upFile',
          name:'UpFile',
          component: resolve => require(['@/components/views/UpFile.vue'],resolve)
        },
        {
          path:'/uploadUi',
          name:'UploadUi',
          component: resolve => require(['@/components/views/UploadUi.vue'],resolve)
        },
      ]
    },
    
  ]
})
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
// router.beforeEach((to, from, next) => {
//   if (to.path === '/login') {
//     next();
//   } else {
//     let token = window.sessionStorage.getItem('token');
 
//     if (token === null || token === '') {
//       next('/login');
//     } else {
//       next();
//     }
//   }
// });
 
export default router;

导航守卫是为了实现登录验证，但是后面为了方便，就注释了，后台也没有再验证，读者可以打开注释，后台自己添加验证代码。

登录功能：

前端 login.vue

后端：loginController.java

package com.example.demo.controller;


import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.component.TokenProccessor;
import com.example.demo.entity.Result;
import com.example.demo.entity.User;
import com.example.demo.service.LoginService;


@RestController
@CrossOrigin//允许跨域访问
public class LoginController {

	@Autowired
	private LoginService loginService;
	
	
	@PostMapping("/api/login")
	@ResponseBody
	public Result login(@RequestBody User user,HttpSession session) {
		//log.info("开始查询");
		//System.out.println(user.toString());
		Result result = loginService.login(user);
		if(result.getCode() == 200) {
			//创建token
			String token = TokenProccessor.getInstance().makeToken();
			session.setAttribute("stoken", token);
			result.setObj(token);
		}
		return result;
	}
}

 loginService.java

package com.example.demo.service;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.alibaba.druid.util.StringUtils;
import com.example.demo.component.TokenTools;
import com.example.demo.entity.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.LoginMapper;

@Service
public class LoginService {
	@Autowired
	private LoginMapper loginMapper;
	
	//登录
	public Result login(User user) {
		
		if(StringUtils.isEmpty(user.getUsername())) {
			return new Result(444,"用户名不能为空！");
		}
		if(StringUtils.isEmpty(user.getPassword())){
			return new Result(445,"密码不能为空！");
		}
		User byName = loginMapper.getByUsername(user.getUsername());
		if(byName == null) {
			return new Result(443,"查无此人！");
		}else if(!user.getPassword().equals(byName.getPassword())){
			return new Result(446,"用户名或密码错误");
		}else {
			
			return new Result(200,"登录成功！");
		}
	}
}

 loginMapper.java

package com.example.demo.mapper;


import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import com.example.demo.entity.User;

@Mapper
public interface LoginMapper {

	@Select("select * from user where username=#{username}")
	public User getByUsername(String username);
}

首页：

welcome.vue

 操作中心页面

header.vue  这里用is属性实现了组件切换

add.vue

 

查询全部点击员工列表，通过header父组件点击触发showList方法查询后台，将数据存给all，再父传子给list

list.vue

想实现点击编辑让update修改组件顶替list列表组件，list为header的子组件，但是能力有限，没有实现，有大佬知道可以评论告知一下。

由于要在update回显，要传当前emp数据和全部department数据，对于从后台获取数据获取并传过去又没搞定，我这里就把update放在list里面当子组件了，通过父子组件传过去了。

update.vue

后台：

application.yml

server:
  port: 8443
  
spring:
  mvc:
    format: 
      date: yyyy-MM-dd
    
  datasource:
#   数据源基本配置
    username: root
    password: 962464
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/demo?serverTimezone=GMT%2B8&
    type: com.alibaba.druid.pool.DruidDataSource
#   数据源其他配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
#   配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙  
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true  
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
#    schema:
#    - classpath:sql/department.sql
#    - classpath:sql/employee.sql
#    initialization-mode: always
  devtools:
    restart:
      enabled: true #是否支持热部署
#mybatis:
#  config-location: classpath:mybatis/mybatis-config.xml
#  mapper-locations: classpath:mybatis/mapper/*.xml
logging:
  level:
    com.example.demo.mapper: debug
mybatis:
  mapper-locations: classpath:mybatis/mapper/*.xml
    
    

pom.xml

	4.0.0
	
		org.springframework.boot
		spring-boot-starter-parent
		2.3.0.RELEASE
		 
	
	com.seeker
	loginDomo
	0.0.1-SNAPSHOT
	loginDemo
	Demo project for Spring Boot

	
		1.8
	

	
		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-jdbc
		
	
			mysql
			mysql-connector-java
			runtime
		

		
		
		
			com.alibaba
			druid
			1.1.8
		
		
		
			org.mybatis.spring.boot
			mybatis-spring-boot-starter
			1.3.1
		
		
			commons-fileupload
			commons-fileupload
			1.3.3
		
		
			commons-io
			commons-io
			2.4
		
		
		   com.alibaba
		   fastjson
		   1.2.39
		  
		 
		
		    log4j
		    log4j
		    1.2.17
		
	
		
		    org.projectlombok
		    lombok
		    true
		    1.18.12
		
	  
		
			org.springframework.boot
			spring-boot-starter-test
			test
			
				
					org.junit.vintage
					junit-vintage-engine
				
			
		
	
	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	

EmpController.java

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.Department;
import com.example.demo.entity.Employee;
import com.example.demo.entity.Result;
import com.example.demo.service.DeptService;
import com.example.demo.service.EmpService;

@RestController
@CrossOrigin
@RequestMapping("/api")
public class EmpController {
	
	@Autowired
	private EmpService empService;
	
	@RequestMapping("/list")
	@ResponseBody
	public Result getAll(HttpServletRequest request,HttpSession session) {
		//登录验证
//		System.out.println(request.getHeader("token"));
//		String header = request.getHeader("token");
//		String attribute = (String)session.getAttribute("stoken");
//		//System.out.println(attribute);
//		if(header == null ||attribute == null ) {
//			return new Result(401,"你还未登录或登录已过期，请先登录");
//		}else if(!attribute.equals(header.split(" ")[1])) {
//			return new Result(401,"你还未登录或登录已过期，请先登录");
//		}else {
			Result all = empService.getAll();
			return all;
		//}
	}
	@RequestMapping(value="/addEmp")
	@ResponseBody
	public Result addEmp(@RequestBody Employee emp) {
		System.out.println(emp);
		return empService.AddEmp(emp);
	}
	
	@RequestMapping(value="/toUpdate")
	@ResponseBody
	public Result getById(@RequestParam(value="id",required=false) Integer id) {
		System.out.println("id---"+id);
		
		return empService.getById(id);
	}
	
	@RequestMapping(value="/update")
	@ResponseBody
	public Result update(@RequestBody Employee emp) {
		System.out.println(emp);
		return empService.update(emp);
	}
	
	@RequestMapping(value="/delById")
	@ResponseBody //返回json对象
	public Result delById(@RequestParam(value="id",required=false) Integer id) {
		System.out.println(id);
		return empService.delById(id);
	}
}

DeptController.java

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.Department;
import com.example.demo.entity.Result;
import com.example.demo.service.DeptService;

@RestController
@CrossOrigin
public class DeptController {

	@Autowired
	private DeptService deptService;
	
	@RequestMapping("/api/getDept")
	public Result getDept() {
		List depts = deptService.getDept();
		if(depts != null) {
			return new Result(200,"部门查询成功",depts);
		}else {
			return new Result(401,"部门查询失败");
		}
	}
}

 EmpService.java

package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.entity.Employee;
import com.example.demo.entity.Result;
import com.example.demo.mapper.EmpMapper;

@Service
public class EmpService {

	@Autowired
	private EmpMapper empMapper;
	
	public Result getAll() {
		List list = empMapper.getAll();
		return new Result(200,"查询成功",list);
	}
	
	public Result AddEmp(Employee emp) {
		if(emp.getLastName() == null) {
			return new Result(410,"lastName不能为空",null);
		}
		if(emp.getEmail() == null) {
			return new Result(410,"email不能为空",null);
		}
		if(emp.getGender() == null) {
			return new Result(410,"gender不能为空",null);
		}
		if(emp.getDepartment() == null) {
			return new Result(410,"department不能为空",null);
		}
		empMapper.addEmp(emp);
		return new Result(200,"添加成功",null);
		}
		
		public Result getById(int id) {
			Employee emp = empMapper.getById(id);
			return new Result(200,"查询成功",emp);
		}
		
		public Result update(Employee emp) {
			int i = empMapper.update(emp);
			return new Result(200,"修改成功",i);
		}
		
		public Result delById(int id) {
			int i = empMapper.delById(id);
			return new Result(200,"删除成功",i);
		}
}

EmpMapper.java

package com.example.demo.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Update;

import com.example.demo.entity.Employee;

@Mapper
public interface EmpMapper {

	
	public List getAll();
	
	public void addEmp(Employee emp);
	
	public Employee getById(int id);
	
	@Update("update employee set lastName=#{lastName},email=#{email},gender=#{gender},d_id=#{department.id} where id=#{id}")
	public int update(Employee emp);
	
	@Delete("delete from employee where id=#{id}")
	public int delById(int id);
}

empmapper的mybatis映射：empMapper.xml

	
		select e.id ,e.lastName,e.email,e.gender,d.id did,d.departmentName from employee e inner join department d on e.d_id=d.id
	
	
		
		
		
		
		
		
			
			
		
	
	
	
		insert into employee (lastName,email,gender,d_id) values
		(#{lastName},#{email},#{gender},#{department.id})
	

	
		select e.id ,e.lastName,e.email,e.gender,d.id did,d.departmentName from employee e
		 inner join department d on e.d_id=d.id where e.id=#{id}
	
	
		
		
		
		
		
		
			
			
		
	

 经验不足，写的不好，不足之处各位可以给我指点指点。