使用vue+elementUI+springboot创建基础后台增删改查的管理页面--（1）

⽬前这家公司前端⽤的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使⽤js和jquery,所以..慢慢来吧。在此之前需要先了解vue的⼤致语法和规则，可先前往官⽅⽂档进⾏学习

1.搭建vue⼯程

使⽤vue⼀般有直接引⼊vue.js⽅式,或者使⽤node.js进⾏构建,因为⼤部分的教程都是围绕node.js来展开的,所以这⼉也使⽤node。步骤1.下载node.js并安装,⼀般安装完成后会环境变量已经配置好,⽹上此类教程很多,不作赘述

步骤2.使⽤node.js创建vue⼯程　　2.1安装vue脚⼿架

　　　　npm install –global vue-cli 　　2.2创建vue⼯程

　　　　vue init webpack my-project 　　　　这⼉的选项

　　2.3创建好之后进⼊⼯程⽬录执⾏npm install安装所需要的依赖

　　2.4执⾏npm run dev启动⼯程，默认地址为，打开看到vue主页表明⼯程创建成功　　　同时创建好的⼯程⽬录⼤致如下

2.主要⽂件说明

　　引⼊需要的包

　　npm install --save axios //主要⽤来发送请求，可理解为ajax　　npm install element-ui -S //⼀个ui框架

　　npm install qs -S　　//包装传回后台的数据防⽌接收不到 　　npm install vue-router //vue路由

　　完成后可以在package.json中可以查看到项⽬依赖

3.代码详细

3.1 src/main.js　

1 // The Vue build version to load with the `import` command

2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6

7 //引⼊elemen-u控件

8 import ElementUI from 'element-ui'

9 import 'element-ui/lib/theme-chalk/index.css' 10 Vue.config.productionTip = false11 //使⽤use命令后才起作⽤12 Vue.use(ElementUI)13

14 /* eslint-disable no-new */15 new Vue({16 el: '#app',17 router,

18 components: { App },19 template: ''20 })

3.2 src/router/index.js　

1 import Vue from 'vue'

2 import Router from 'vue-router'

3 //使⽤懒加载的⽅式来引⼊,只有路由被访问的时候才加载 4 import home from '@/components/home'

5 const loginpage = resolve => require(['@/components/Login'],resolve) 6

7 Vue.use(Router)

8 let router = new Router({ 9 routes: [10 {

11 path:'/',

12 name :'login',

13 component:loginpage14 },15 {

16 path:'/login',17 name :'login',

18 component:loginpage19 },20 {

21 path:'/home',22 name :'home',23 component:home24 }25 ]26 })

27 //对每次访问之前都要先看是否已经登录28 router.beforeEach((to,from,next)=>{29 if(to.path.startsWith('/login')){

30 window.sessionStorage.removeItem('access-token');31 next();32 }else{

33 let token = window.sessionStorage.getItem('access-token');34 if(!token){

35 //未登录 跳回主页⾯36 next({path:'/login'});37 }else{38 next();39 }40 }41 42 });43 44

45 export default router

3.3在src下创建api⽂件夹，进⼊⽂件夹后创建api.js与index.js　　api.js

//进⾏远程调⽤

import axios from 'axios'//包装param参数import qs from 'qs'// 声明基础访问地址

axios.defaults.baseURL = 'http://localhost:8081'

//声明⼀个调⽤⽅法

export const requestLogin = params => {return axios.post('/user/login',qs.stringify(params)).then(res => res.data)}

　　index.js

import * as api from './api'export default api

3.4在src/components下创建登录组件Login.vue　

1 6

7 28

29 93

94

3.5在component下创建home.vue组件作为登录成功后跳转的页⾯　

1 60

61 198

199

4运⾏项⽬

　　在项⽬⽬录下执⾏以下命令并访问

　　npm install　　npm run dev

5.java编写后台api

　　创建mavevn项⽬，引⼊springboot与数据库的相关的包，pom⽂件如下　　

1 4.0.0 3 com.megalith 4 vtpj

5 0.0.1-SNAPSHOT 6 vtpj

7 vtpj 8 9

10

11 org.springframework.boot 12 spring-boot-starter-parent 13 2.0.1.RELEASE

14 15 16

17

18 UTF-8

19 UTF-8 20 1.8 21 22

23 24

25 org.springframework.boot 26 spring-boot-starter-actuator 27 28

29 org.springframework.boot 30 spring-boot-starter-cache 31 32

33 org.springframework.boot 34 spring-boot-starter-jdbc 35 36

37 org.springframework.boot 38 spring-boot-starter-web 39 40

41 org.springframework.boot 42 spring-boot-starter-test 43 test 44 45

46 org.springframework.boot 47 spring-boot-devtools 48 true 49 50

51 org.apache.commons 52 commons-lang3 53 54

55 org.apache.commons 56 commons-collections4 57 4.1 58 59

60 61

62 org.mybatis.spring.boot

63 mybatis-spring-boot-starter 64 1.1.1 65 66

67 mysql

68 mysql-connector-java 69 6.0.6 70

71 72

73 74

75 aliyun

76 aliyun

77 http://maven.aliyun.com/nexus/content/groups/public 78 79 80

81

82 83

84 org.springframework.boot 85 spring-boot-maven-plugin 86 87 88

89 90

91 src/main/java 92

93 **/*.properties 94 **/*.xml 95

96 false 97 98 99

100

101

　　配置application.properties数据库链接及其他配置　　

server.port=8081#取消⾃动加载数据源

#spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration#配置数据源

mybatis.type-aliases-package=com.megalith.tjfx.bean

spring.datasource.driverClassName = com.mysql.jdbc.Driver

spring.datasource.url = jdbc:mysql://localhost:3306/tjfx?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTCspring.datasource.username = rootspring.datasource.password = root

　项⽬⽬录⼤致如下

　　　corseconfig.java内容如下，主要解决跨域访问不到地址的问题　　　　

1 package com.megalith.tjfx.config; 2

3 import org.springframework.context.annotation.Bean;

4 import org.springframework.context.annotation.Configuration; 5 import org.springframework.web.cors.CorsConfiguration;

6 import org.springframework.web.cors.UrlBasedCorsConfigurationSource; 7 import org.springframework.web.filter.CorsFilter; 8 9 /**10 *

11 * @ClassName: CorseConfig12 * @Desc:

13 * @author: zhouming

14 * @date: 2018年8⽉7⽇ 下午4:16:3915 * @version 1.016 */

17 @Configuration

18 public class CorseConfig {19 20

21 private CorsConfiguration buildConfig() {

22 CorsConfiguration corsConfiguration = new CorsConfiguration();23 corsConfiguration.addAllowedOrigin(\"*\");24 corsConfiguration.addAllowedHeader(\"*\");25 corsConfiguration.addAllowedMethod(\"*\");26 corsConfiguration.setAllowCredentials(true);27 return corsConfiguration;28 }29

30 @Bean

31 public CorsFilter corsFilter() {

32 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();33 source.registerCorsConfiguration(\"/**\34 return new CorsFilter(source);35 36 }37 }

　启动类记得添加mybatis扫描　

1 @EnableCaching

2 @SpringBootApplication

3 @MapperScan(\"com.megalith.tjfx.dao\")4 public class ApplicationContext {5

6 public static void main(String[] args) {

7 SpringApplication.run(ApplicationContext.class, args);8 }9 }

编写相应api，然后启动项⽬后vue项⽬即可以与java进⾏开发

package com.megalith.tjfx.controller;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.UUID;

import org.apache.commons.lang3.StringUtils;

import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import com.megalith.tjfx.bean.User;

import com.megalith.tjfx.service.IUserService;/** *

* @ClassName: UserController * @Desc: ⽤户注册的controller * @author: zhouming

* @date: 2018年8⽉7⽇ 下午1:43:16 * @version 1.0 */

@RestController

@RequestMapping(\"/user\")public class UserController {

@Autowired

private IUserService userService;

@PostMapping(\"/login\")

public Object loginUser(User user) {

Map result = new HashMap(); System.err.println(user);

if(\"admin\".equals(user.getcUsername()) && \"123456\".equals(user.getcPwd())) { result.put(\"code\

result.put(\"msg\登录成功\"); result.put(\"token\ return result; }

result.put(\"code\

result.put(\"msg\登录失败\"); return result; }

@PostMapping(\"/submit\")

public Object submitUser(User user) {

Map result = new HashMap(); if(StringUtils.isBlank(user.getcId())) {

user.setcId(UUID.randomUUID().toString().replaceAll(\"-\ userService.save(user); }else{

userService.update(user); }

result.put(\"successrue); result.put(\"msg\登录成功\"); result.put(\"token\ return result; }

@PostMapping(\"/userlist\")

public List userList(String filter){ return userService.listUser(filter); }

@PostMapping(\"/delete\")

public Map delete(String userId){

Map result = new HashMap(); if(StringUtils.isNotBlank(userId)) {

userService.deleteByPrimarykey(userId); result.put(\"successrue); }else {

result.put(\"success\false); }

return result; } }

项⽬简单demo地址github：https://github.com/hetutu5238/vue-demo5.项⽬部署

　　Nginx部署我也还在琢磨当中，下⼀篇再看能不能写出来吧吧6.总结

　　本来之前是主要负责后端的，现在开始接触前端后不得不说前端的发展都超过⾃⼰的想象了。node.js还有vue之类的主流前端技术都完全没有　　接触过，刚开始学起来完全是⼀脸懵逼，⾃⼰还停留在jquery，bootstrap之类的东西上。看了两三天天的教程才都是模糊的。这⼉借鉴了很多

　　的博客，所以要是有博主发现和⾃⼰的很像还请见谅，因为我实在不能记住全部。