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

目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧。

在此之前需要先了解vue的大致语法和规则，可先前往官方文档进行学习https://cn.vuejs.org/v2/guide/

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 run install安装所需要的依赖

　　2.4执行npm run dev启动工程，默认地址为localhost:8080，打开看到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 = false
11 //使用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:loginpage
14         },
15         {
16             path:'/login',
17             name :'login',
18             component:loginpage
19         },
20         {
21             path:'/home',
22             name :'home',
23             component:home
24         }
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运行项目

　　在项目目录下执行以下命令并访问localhost:8080

　　npm install

　　npm run dev

5.java编写后台api

 　　创建mavevn项目，引入springboot与数据库的相关的包，pom文件如下

　　

  1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  2   <modelVersion>4.0.0modelVersion>
  3   <groupId>com.megalithgroupId>
  4   <artifactId>vtpjartifactId>
  5   <version>0.0.1-SNAPSHOTversion>
  6   <name>vtpjname>
  7   <description>vtpjdescription> 
  8   
  9   
 10       <parent>
 11         <groupId>org.springframework.bootgroupId>
 12         <artifactId>spring-boot-starter-parentartifactId>
 13         <version>2.0.1.RELEASEversion>
 14         <relativePath /> 
 15     parent>
 16 
 17     <properties>
 18         <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
 19         <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
 20         <java.version>1.8java.version>
 21     properties>
 22 
 23     <dependencies>
 24         <dependency>
 25             <groupId>org.springframework.bootgroupId>
 26             <artifactId>spring-boot-starter-actuatorartifactId>
 27         dependency>
 28         <dependency>
 29             <groupId>org.springframework.bootgroupId>
 30             <artifactId>spring-boot-starter-cacheartifactId>
 31         dependency>
 32         <dependency>
 33             <groupId>org.springframework.bootgroupId>
 34             <artifactId>spring-boot-starter-jdbcartifactId>
 35         dependency>
 36         <dependency>
 37             <groupId>org.springframework.bootgroupId>
 38             <artifactId>spring-boot-starter-webartifactId>
 39         dependency>
 40         <dependency>
 41             <groupId>org.springframework.bootgroupId>
 42             <artifactId>spring-boot-starter-testartifactId>
 43             <scope>testscope>
 44         dependency>
 45         <dependency>
 46             <groupId>org.springframework.bootgroupId>
 47             <artifactId>spring-boot-devtoolsartifactId>
 48             <optional>trueoptional>
 49         dependency>
 50         <dependency>
 51             <groupId>org.apache.commonsgroupId>
 52             <artifactId>commons-lang3artifactId>
 53         dependency>
 54         <dependency>
 55             <groupId>org.apache.commonsgroupId>
 56             <artifactId>commons-collections4artifactId>
 57             <version>4.1version>
 58         dependency>
 59         
 60             
 61          <dependency>
 62         <groupId>org.mybatis.spring.bootgroupId>
 63         <artifactId>mybatis-spring-boot-starterartifactId>
 64         <version>1.1.1version>
 65     dependency>
 66     <dependency>
 67     <groupId>mysqlgroupId>
 68     <artifactId>mysql-connector-javaartifactId>
 69     <version>6.0.6version>
 70 dependency>
 71     dependencies>
 72 
 73     <repositories>
 74         <repository>
 75             <id>aliyunid>
 76             <name>aliyunname>
 77             <url>http://maven.aliyun.com/nexus/content/groups/publicurl>
 78         repository>
 79     repositories>
 80 
 81     <build>
 82         <plugins>
 83             <plugin>
 84                 <groupId>org.springframework.bootgroupId>
 85                 <artifactId>spring-boot-maven-pluginartifactId>
 86             plugin>
 87         plugins>
 88 
 89         <resources>
 90             <resource>
 91                 <directory>src/main/javadirectory>
 92                 <includes>
 93                     <include>**/*.propertiesinclude>
 94                     <include>**/*.xmlinclude>
 95                 includes>
 96                 <filtering>falsefiltering>
 97             resource>
 98         resources>
 99 
100     build>
101 project>

 　　配置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=UTC
spring.datasource.username = root
spring.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: CorseConfig
12  * @Desc: 
13  * @author: zhouming
14  * @date: 2018年8月7日 下午4:16:39
15  * @version 1.0
16  */
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("/**", buildConfig());
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", 200);
            result.put("msg", "登录成功");
            result.put("token", "adminxxxx");
            return result;
        }
        
        
        result.put("code", 500);
        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("success", true);
        result.put("msg", "登录成功");
        result.put("token", "adminxxxx");
        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("success", true);
        }else {
            result.put("success", false);
        }
        return result;
    }
    
}

 

项目简单demo地址github：https://github.com/hetutu5238/vue-demo

5.项目部署

　　Nginx部署我也还在琢磨当中，下一篇再看能不能写出来吧吧

6.总结

　　本来之前是主要负责后端的，现在开始接触前端后不得不说前端的发展都超过自己的想象了。node.js还有vue之类的主流前端技术都完全没有

　　接触过，刚开始学起来完全是一脸懵逼，自己还停留在jquery，bootstrap之类的东西上。看了两三天天的教程才都是模糊的。这儿借鉴了很多

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

 

　　　　

转载于:https://www.cnblogs.com/hetutu-5238/p/9456016.html