使用vue+elementUI+springboot建立基礎後臺增刪改查的管理頁面--(1)

時間 2019-11-21

標籤使用 vue+elementui+springboot vue elementui springboot 建立基礎後臺增刪管理頁面欄目 Spring 简体版

原文原文鏈接

目前這家公司前端用的是vue框架,因爲在以前的公司不多涉及到前端內容,對其的瞭解也只是會使用js和jquery,因此..慢慢來吧。css

在此以前須要先了解vue的大體語法和規則，可先前往官方文檔進行學習https://cn.vuejs.org/v2/guide/前端

1.搭建vue工程

使用vue通常有直接引入vue.js方式,或者使用node.js進行構建,由於大部分的教程都是圍繞node.js來展開的,因此這兒也使用node。vue

步驟1.下載node.js並安裝,通常安裝完成後會環境變量已經配置好,網上此類教程不少,不做贅述java

步驟2.使用node.js建立vue工程node

　　2.1安裝vue腳手架mysql

　　　　npm install –global vue-cli jquery

　　2.2建立vue工程webpack

　　　　vue init webpack my-project ios

　　　　這兒的選項git

　　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: '<App/>'
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 <!--
  2     做者：18728424465@163.com
  3     時間：2018-08-07
  4     描述：
  5 -->
  6 
  7 <template>
  8     <!--<div id="login">
  9         
 10         <h1> {{msg}}</h1>
 11     </div>-->
 12     <el-form ref='AccountFrom' :model='account' :rules='rules' lable-position='left' lable-width='0px' class='demo-ruleForm login-container'>
 13         <h3 class="title">登陸系統首頁</h3>
 14         <el-form-item prop="username">
 15             <el-input type="text" v-model="account.username" auto-complete="off" placeholder="帳號"></el-input>
 16         </el-form-item>
 17         <el-form-item prop="pwd">
 18             <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密碼"></el-input>
 19         </el-form-item>
 20         <el-checkbox v-model="checked" checked class="remember">記住密碼</el-checkbox>
 21         <el-form-item style="width:100%;">
 22             <el-button type="primary" style="width:100%;" @click.native.prevent='handleLogin' :loading= 'logining'>登陸</el-button>
 23         </el-form-item>
 24 
 25     </el-form>
 26 
 27 </template>
 28 
 29 <script>
 30     //引入api.js  好調用裏面的接口
 31     import {requestLogin} from '../api/api';
 32     export default {
 33         name: 'login',
 34         data() {
 35             return {
 36                 logining: false,
 37                 account: {
 38                     username: '',
 39                     pwd: ''
 40                 },
 41                 rules: {
 42                     username: [{
 43                         required: true,
 44                         message: '請輸入帳號',
 45                         trigger: 'blur'
 46                     }],
 47                     pwd: [{
 48                         required: true,
 49                         message: '請輸入密碼',
 50                         trigger: 'blur'
 51                     }]
 52                 },
 53                 checked: true
 54             }
 55         },
 56         methods:{
 57             handleLogin(){
 58                 this.$refs.AccountFrom.validate((valid)=>{
 59                     
 60                     if(valid){
 61                         //驗證經過 能夠提交
 62                         this.logining = true;
 63                         //將提交的數據進行封裝
 64                         var loginParams = {cUsername : this.account.username,cPwd:this.account.pwd};
 65                         
 66                         //調用函數  傳遞參數 獲取結果
 67                         requestLogin(loginParams).then(data=>{
 68                             
 69                             this.logining = false;
 70                             
 71                             if(data.code == '200'){
 72                                 //登陸成功
 73                                 sessionStorage.setItem('access-token',data.token);
 74                                 //用vue路由跳轉到後臺主界面
 75                                 this.$router.push({path:'/home'});
 76                             }else{
 77                                 this.$message({
 78                                     message:data.msg,
 79                                     type:'error'
 80                                 });
 81                             }
 82                         })
 83                         
 84                     }else{
 85                         console.log('error submit');
 86                         return false;
 87                     }
 88                 });
 89             }
 90         }
 91     }
 92 </script>
 93 
 94 <style>
 95     body {
 96         background: #DFE9FB;
 97     }
 98     
 99     .login-container {
100         width: 350px;
101         margin-left: 35%;
102     }
103 </style>

3.5在component下建立home.vue組件做爲登陸成功後跳轉的頁面

  1 <template>
  2     <div>
  3         <!--工具條-->
  4         <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5             <el-form :inline="true" :model="filters">
  6                 <el-form-item>
  7                     <el-input v-model="filters.name" placeholder="姓名"></el-input>
  8                 </el-form-item>
  9                 <el-form-item>
 10                     <el-button type="primary" v-on:click="getUsers">查詢</el-button>
 11                 </el-form-item>
 12                 <el-form-item>
 13                     <el-button type="info" @click="addUser">新增</el-button>
 14                 </el-form-item>
 15             </el-form>
 16         </el-col>
 17 
 18 
 19         <el-table :data="userInfoList" style="width: 100%">
 20             <el-table-column prop="cId" label="id" width="180">
 21             </el-table-column>
 22             <el-table-column prop="cUsername" label="名字" width="180">
 23             </el-table-column>
 24             <el-table-column prop="cPwd" label="密碼" width="180">
 25             </el-table-column>
 26             <!--第二步  開始進行修改和查詢操做-->
 27             <el-table-column label="操做" align="center" min-width="100">
 28 
 29                 <template slot-scope="scope">
 30 
 31                     <el-button type="text" @click="checkDetail(scope.row)">查看詳情</el-button>
 32 
 33                     <el-button type="info" @click="modifyUser(scope.row)">修改</el-button>
 34 
 35                     <el-button type="info" @click="deleteUser(scope.row)">刪除</el-button>
 36                 </template>
 37             </el-table-column>
 38             <!--編輯與增長的頁面-->
 39 
 40 
 41         </el-table>
 42         <!--新增界面-->
 43         <el-dialog title="記錄" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
 44             <el-form :model="addFormData" :rules="rules2" ref="addFormData" label-width="0px" class="demo-ruleForm login-container">
 45                 <el-form-item prop="cUsername">
 46                     <el-input type="text" v-model="addFormData.cUsername" auto-complete="off" placeholder="帳號"></el-input>
 47                 </el-form-item>
 48                 <el-form-item prop="cPwd">
 49                     <el-input type="password" v-model="addFormData.cPwd" auto-complete="off" placeholder="密碼"></el-input>
 50                 </el-form-item>
 51             </el-form>
 52             <span slot="footer" class="dialog-footer">
 53                 <el-button @click.native="dialogVisible = false,addFormData={cId:'',cUsername:'',cPwd:''}">取 消</el-button>
 54                 <el-button v-if="isView" type="primary" @click.native="addSubmit">確 定</el-button>
 55             </span>
 56         </el-dialog>
 57     </div>
 58 
 59 </template>
 60 
 61 <script>
 62     import {
 63         userList
 64     } from '../api/api';
 65     import axios from 'axios';
 66     import qs from 'qs';
 67     export default {
 68         name: 'home',
 69         data() {
 70             return {
 71                 userInfoList: [],
 72                 addFormReadOnly: true,
 73                 dialogVisible: false,
 74                 isView: true,
 75                 addFormData: {
 76                     cId: '',
 77                     cUsername: '',
 78                     cPwd: ''
 79                 },
 80                 rules2: {
 81                     cUsername: [{
 82                         required: true,
 83                         message: '用戶名不能爲空',
 84                         trigger: 'blur'
 85                     }],
 86                     cPwd: [{
 87                         required: true,
 88                         message: '密碼不能爲空',
 89                         trigger: 'blur'
 90                     }]
 91                 },
 92                 filters: {
 93                     name: ''
 94                 }
 95             }
 96         },
 97         mounted: function () {
 98             this.loadData();
 99         },
100 
101         methods: {
102             loadData() {
103                 let param = {filter:this.filters.name};
104                 axios.post('/user/userlist',qs.stringify(param)).then((result) => {
105                     var _data = result.data;
106                     this.userInfoList = _data;
107                 });
108 
109 
110             },
111             getUsers() {
112                 this.loadData();
113             },
114             addUser() {
115                 this.addFormData = {
116                     cId: '',
117                     cUsername: '',
118                     cPwd: ''
119                 };
120                 this.isView = true;
121                 this.dialogVisible = true;
122                 //    this.addFormReadOnly = false;
123             },
124             checkDetail(rowData) {
125                 this.addFormData = Object.assign({}, rowData);
126                 this.isView = false;
127                 this.dialogVisible = true;
128 
129                 //    this.addFormReadOnly = true;
130             },
131             modifyUser(rowData) {
132                 this.addFormData = Object.assign({}, rowData);
133                 this.isView = true;
134                 this.dialogVisible = true;
135                 //    this.addFormReadOnly = false;
136             },
137             deleteUser(rowData) {
138 
139                 this.$alert('是否刪除這條記錄', '信息刪除', {
140                     confirmButtonText: '肯定',
141                     callback: action => {
142                         var params = {
143                             userId: rowData.cId
144                         };
145                         axios.post("/user/delete", qs.stringify(params)).then((result) => {
146                             console.info(result);
147                             if (result.data.success) {
148                                 this.$message({
149                                     type: 'info',
150                                     message: `已刪除`
151                                 });
152                             } else {
153                                 this.$message({
154                                     type: 'info',
155                                     message: `刪除失敗`
156                                 });
157 
158                             }
159                             this.loadData();
160                         });
161 
162                     }
163                 });
164 
165             },
166             //增長一條記錄
167             addSubmit() {
168 
169                 //先判斷表單是否經過了判斷
170                 this.$refs.addFormData.validate((valid) => {
171                     //表明經過驗證 ,將參數傳回後臺
172                     if (valid) {
173                         let param = Object.assign({}, this.addFormData);
174                         axios.post("/user/submit", qs.stringify(param)).then((result) => {
175                             if (result.data.success) {
176                                 this.$message({
177                                     type: 'info',
178                                     message: '添加成功',
179                                 });
180                                 this.loadData();
181                             } else {
182                                 this.$message({
183                                     type: 'info',
184                                     message: '添加失敗',
185                                 });
186                             }
187                             this.dialogVisible = false;
188                         });
189                     }
190 
191                 });
192             }
193 
194         }
195 
196     }
197 </script>
198 
199 <style>
200     body {
201         background: #DFE9FB;
202     }
203 </style>

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.0</modelVersion>
  3   <groupId>com.megalith</groupId>
  4   <artifactId>vtpj</artifactId>
  5   <version>0.0.1-SNAPSHOT</version>
  6   <name>vtpj</name>
  7   <description>vtpj</description> 
  8   
  9   
 10       <parent>
 11         <groupId>org.springframework.boot</groupId>
 12         <artifactId>spring-boot-starter-parent</artifactId>
 13         <version>2.0.1.RELEASE</version>
 14         <relativePath /> <!-- lookup parent from repository -->
 15     </parent>
 16 
 17     <properties>
 18         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 19         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 20         <java.version>1.8</java.version>
 21     </properties>
 22 
 23     <dependencies>
 24         <dependency>
 25             <groupId>org.springframework.boot</groupId>
 26             <artifactId>spring-boot-starter-actuator</artifactId>
 27         </dependency>
 28         <dependency>
 29             <groupId>org.springframework.boot</groupId>
 30             <artifactId>spring-boot-starter-cache</artifactId>
 31         </dependency>
 32         <dependency>
 33             <groupId>org.springframework.boot</groupId>
 34             <artifactId>spring-boot-starter-jdbc</artifactId>
 35         </dependency>
 36         <dependency>
 37             <groupId>org.springframework.boot</groupId>
 38             <artifactId>spring-boot-starter-web</artifactId>
 39         </dependency>
 40         <dependency>
 41             <groupId>org.springframework.boot</groupId>
 42             <artifactId>spring-boot-starter-test</artifactId>
 43             <scope>test</scope>
 44         </dependency>
 45         <dependency>
 46             <groupId>org.springframework.boot</groupId>
 47             <artifactId>spring-boot-devtools</artifactId>
 48             <optional>true</optional>
 49         </dependency>
 50         <dependency>
 51             <groupId>org.apache.commons</groupId>
 52             <artifactId>commons-lang3</artifactId>
 53         </dependency>
 54         <dependency>
 55             <groupId>org.apache.commons</groupId>
 56             <artifactId>commons-collections4</artifactId>
 57             <version>4.1</version>
 58         </dependency>
 59         
 60             <!-- jdbc -->
 61          <dependency>
 62         <groupId>org.mybatis.spring.boot</groupId>
 63         <artifactId>mybatis-spring-boot-starter</artifactId>
 64         <version>1.1.1</version>
 65     </dependency>
 66     <dependency>
 67     <groupId>mysql</groupId>
 68     <artifactId>mysql-connector-java</artifactId>
 69     <version>6.0.6</version>
 70 </dependency>
 71     </dependencies>
 72 
 73     <repositories>
 74         <repository>
 75             <id>aliyun</id>
 76             <name>aliyun</name>
 77             <url>http://maven.aliyun.com/nexus/content/groups/public</url>
 78         </repository>
 79     </repositories>
 80 
 81     <build>
 82         <plugins>
 83             <plugin>
 84                 <groupId>org.springframework.boot</groupId>
 85                 <artifactId>spring-boot-maven-plugin</artifactId>
 86             </plugin>
 87         </plugins>
 88 
 89         <resources>
 90             <resource>
 91                 <directory>src/main/java</directory>
 92                 <includes>
 93                     <include>**/*.properties</include>
 94                     <include>**/*.xml</include>
 95                 </includes>
 96                 <filtering>false</filtering>
 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<String,Object> result = new HashMap<String, Object>();
        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<String,Object> result = new HashMap<String, Object>();
        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<User> userList(String filter){
        return userService.listUser(filter);
    }
    
    @PostMapping("/delete")
    public Map<String, Object> delete(String userId){
        Map<String,Object> result = new HashMap<String, Object>();
        if(StringUtils.isNotBlank(userId)) {
            userService.deleteByPrimarykey(userId);
            result.put("success", true);
        }else {
            result.put("success", false);
        }
        return result;
    }
    
}