使⽤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 f 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'
fig.productionTip = false
11//使⽤use命令后才起作⽤
12 Vue.use(ElementUI)
13
14/* eslint-disable no-new */
15new 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)=>{
29if(to.path.startsWith('/login')){
30            veItem('access-token');
31            next();
32        }else{
33            let token = Item('access-token');
34if(!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 = '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 <!--  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 >
22            <el-button type="primary" @click.native.prevent='handleLogin' :loadin
g= '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() {
35return {
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        },
jquery框架搭建
56        methods:{
57            handleLogin(){
58this.$refs.AccountFrom.validate((valid)=>{
59
60if(valid){
61//验证通过可以提交
62this.logining = true;
63//将提交的数据进⾏封装
64var loginParams = {cUsername : this.account.username,cPwd:this.account.pwd};
65
66//调⽤函数传递参数获取结果
67                        requestLogin(loginParams).then(data=>{
68
69this.logining = false;
70
de == '200'){
72//登录成功
73                                sessionStorage.setItem('access-token',ken);
74//⽤vue路由跳转到后台主界⾯
75this.$router.push({path:'/home'});
76                            }else{
77this.$message({
78                                    message:data.msg,
79                                    type:'error'
80                                });
81                            }
82                        })
83
84                    }else{
85                        console.log('error submit');
86return 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" >
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" >
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="w)">查看详情</el-button>
32
33                    <el-button type="info" @click="w)">修改</el-button>
34
35                    <el-button type="info" @click="w)">删除</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() {
70return {
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 () {
98this.loadData();
99        },
100
101        methods: {
102            loadData() {
103                let param = {filter:this.filters.name};
104                axios.post('/user/userlist',qs.stringify(param)).then((result) => {
105var _data = result.data;
106this.userInfoList = _data;
107                });
108
109
110            },
111            getUsers() {
112this.loadData();
113            },
114            addUser() {
115this.addFormData = {
116                    cId: '',
117                    cUsername: '',
118                    cPwd: ''
119                };
120this.isView = true;
121this.dialogVisible = true;
122//    this.addFormReadOnly = false;
123            },
124            checkDetail(rowData) {
125this.addFormData = Object.assign({}, rowData);
126this.isView = false;
127this.dialogVisible = true;
128
129//    this.addFormReadOnly = true;
130            },
131            modifyUser(rowData) {
132this.addFormData = Object.assign({}, rowData);
133this.isView = true;
134this.dialogVisible = true;
135//    this.addFormReadOnly = false;
136            },
137            deleteUser(rowData) {
138
139this.$alert('是否删除这条记录', '信息删除', {
140                    confirmButtonText: '确定',
141                    callback: action => {
142var params = {
143                            userId: rowData.cId
144                        };
145                        axios.post("/user/delete", qs.stringify(params)).then((result) => { 146                            console.info(result);
147if (result.data.success) {
148this.$message({
149                                    type: 'info',
150                                    message: `已删除`
151                                });
152                            } else {
153this.$message({
154                                    type: 'info',
155                                    message: `删除失败`
156                                });
157
158                            }
159this.loadData();
160                        });
161
162                    }
163                });
164
165            },
166//增加⼀条记录
167            addSubmit() {
168
169//先判断表单是否通过了判断
170this.$refs.addFormData.validate((valid) => {
171//代表通过验证 ，将参数传回后台
172if (valid) {
173                        let param = Object.assign({}, this.addFormData);
174                        axios.post("/user/submit", qs.stringify(param)).then((result) => { 175if (result.data.success) {
176this.$message({
177                                    type: 'info',
178                                    message: '添加成功',
179                                });
180this.loadData();
181                            } else {
182this.$message({
183                                    type: 'info',
184                                    message: '添加失败',
185                                });
186                            }
187this.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运⾏项⽬
  在项⽬⽬录下执⾏以下命令并访问

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。