vue+ssm+Element实现登录页面的优化和员工管理

结合前两篇博文：“vue+ssm实现登录页面和部门管理”和“Element完善页面效果及项目生成”

ssm框架—后台搭建：

项目整体框架：

补充代码部分如下：

Emp：

package com.aaa.demo.entity;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

@Data
public class Emp {
    private Integer empId;
    private String empName;
    private String sex;
    @DateTimeFormat(pattern="yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
    private String phone;
    //private Integer deptId;  //注意，关联部门对象
    private Dept dept;

}

EmpMapper ：

package com.aaa.demo.mapper;

import com.aaa.demo.entity.Emp;
import org.apache.ibatis.annotations.Insert;

import java.util.List;

public interface EmpMapper {
    List listAll();

    @Insert("insert into tb_emp values (null,#{empName},#{sex},#{birthday},#{phone},#{dept.deptId})")
    Integer insert(Emp emp);
}

EmpMapper.xml:

    
        
        
        
    
    
         select e.emp_id,e.emp_name,e.sex,e.birthday,e.phone, --e.dept_id,
                d.dept_id,d.dept_name
        from tb_emp e
        join tb_dept d
        on e.dept_id=d.dept_id
    

IEmpService :

package com.aaa.demo.service;

import com.aaa.demo.entity.Dept;
import com.aaa.demo.entity.Emp;

import java.util.List;

public interface IEmpService {
    List listAll();
    Integer insert(Emp emp);
}

EmpServiceImpl :

package com.aaa.demo.service.impl;

import com.aaa.demo.entity.Emp;
import com.aaa.demo.mapper.EmpMapper;
import com.aaa.demo.service.IEmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class EmpServiceImpl implements IEmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public List listAll() {
        return empMapper.listAll();
    }

    @Override
    public Integer insert(Emp emp) {
        return empMapper.insert(emp);
    }
}

EmpController :

package com.aaa.demo.controller;

import com.aaa.demo.entity.Emp;
import com.aaa.demo.service.IEmpService;
import com.aaa.demo.util.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/emp")
public class EmpController {
    @Autowired
    private IEmpService empService;

    @GetMapping("/list")  //注意：这里是GetMapping
    public CommonResult list(){
        return CommonResult.success(empService.listAll());
    }

    @PostMapping("/add") //注意：这里是PostMapping
    public CommonResult add(@RequestBody Emp emp){
        return  CommonResult.success(empService.insert(emp));
    }

}

后端：

①vue+Element—前台搭建（目的：优化登录页面）：

优化登录页面：在“vue+ssm实现登录页面和部门管理”的基础上，仅修改了Login.vue文件。

App.vue :

views—Login.vue :

router—index.js（部分）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

//在vue实例中使用路由组件
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:"/login" //路径重定向
  },
  {
    path: '/login',  //地址路径
    name: 'Login',    //地址命名
    component:Login
  },
  {
    path: '/elui',  
    name: 'ELUi',    
    component:()=>import("../views/ELUiTest")
  },
  {
    path:"adminhome",
    name:"AdminHome",
    component:()=>import("../views/AdminHome"),
    children:[ //配置子级视图的页面
      {
        path:"",
        name:"AdminWelcome",
        component:()=>import("../views/AdminWelcome")
      },
      {
        path:"deptMgr",
        name:"DeptMgr",
        component:()=>import("../views/DeptMgr")
      }
    ]
  }
]

//创建路由对象
const router = new VueRouter({
  routes
})

//导出路由对象
export default router

components—SideBar.vue:

views—AdminHome.vue:

代码运行效果 ：

②vue+Element—前台搭建（目的：员工管理）：

router—index.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

//在vue实例中使用路由组件
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:"/login" //路径重定向
  },
  {
    path: '/login',  //地址路径
    name: 'Login',    //地址命名
    component:Login
  },
  {
    path: '/elui',  
    name: 'ELUi',    
    component:()=>import("../views/ELUiTest")
  },
  {
    path:"adminhome",
    name:"AdminHome",
    component:()=>import("../views/AdminHome"),
    children:[ //配置子级视图的页面
      {
        path:"",
        name:"AdminWelcome",
        component:()=>import("../views/AdminWelcome")
      },
      {
        path:"deptMgr",
        name:"DeptMgr",
        component:()=>import("../views/DeptMgr")
      },
      {
        path:"empMgr",
        name:"EmpMgr",
        component:()=>import("../views/EmpMgr")
      }
    ]
  }
]

//创建路由对象
const router = new VueRouter({
  routes
})

//导出路由对象
export default router

util—AxiosUtil.js:

//导入axios模块
import axios from 'axios'
//配置axios模块
let axiosUtil=axios.create({
    baseURL:"http://localhost:8080/0927_ssm_vue_KTLX_war_exploded/api/" //配置axios组件请求的固定前缀
}) 

//到处具有特定配置的axios对象
export default axiosUtil;

service—EmpService.js:

//导入axios模块
import axiosUtil from "../util/AxiosUtil";
//定义业务方法，实现后台接口请求
//查询
function list(){
    //返回请求指定Controller的一个promise对象(ajax异步请求对象)
    return axiosUtil.get("emp/list");
}
//添加
function add(dept){
    return axiosUtil.post("emp/add",dept);
}

//当前是一个js module(模块),如果想要当前模块的内容，被其他模块使用，需要进行导出
export default{
    list,add
}

views—EmpMgr.vue:

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';