从零开始的后台管理系统

本后台管理系统采用vue cli + element ui 简单搭建

旨在总结自己思路，旁人可能看的不喜欢，但是本意是总结自己思路。

项目框架构建完成后，基础的登入登出实现，然后各个页面的搭建完成路由的跳转有一个整体的视觉效果后，开始思考 要干什么，先解决跨域和代理的问题，因为最终目的是把，接口数据呈现到页kuku

//在config/dev.env.js中
module.exports = merge(prodeEnv,{
    NODE_ENV: '"development"',
    BASE_URL_HTTPS: '"/api/"'
})

//在config/index.js中

'user strict'

const path = require('path')
moudele.exportes={
    dev: {
        //Paths
        assetsSubDirectory: 'static',
        assetsPublicPath:'/',
        proxyTable:{

           '/api':{
                target: ''//你请求的第三方接口
                secure： false,
                secure:  false,
                changeOrigin:true,
                pathRewrite: {
                    '^/api':'/api'
                }
            }    
        },
        host : '0.0.0.0' //内网开发要设置
        port ： 8888
    }
}
//在congfig/prod.env.js中
moudele.exports = {
    NODE_ENV: '"production"',
    ENV_CONFIG: '"prod"',
    BASE_URL_HTTPS: ' 你请求的接口地址'
}

 跨域和代理目前就了解这么多 有点菜

然后就是设置api文件夹

api/axiosFun.js中设置请求拦截器和响应拦截器

import axios from "axios" //引入axios

const _axios = axios.create({
    baseURL: process.env.BASE_API,
});
/* 请求拦截器（是在你发起请求之前的操作）*/

_axios.interceptprs.request.use(
    (config) => {
        let token = window.localStorage.getItem("accessTOken")
        console.log('token',token)
        if(token) {
            config.headers.token = token //将token放到请求头发送给服务器
        }
        return config
    },
    (err) => Promise.reject(err)
);

/*响应的操作*/
_axios.interceptors.response.use(
    (res) => {
        console.log(res)
        if(res.data.code === 400){
            
        }
        if(res.data.code === 400){
            
        } else {
            Promise.resolve(res.data)
        }
        return res
    },
       (err) => {
        if(err) {
            console.log(err)
        }
        return Promise.reject(err)
    }
);
export const req = _axios

api/basisMG.js

//登录接口
export const Login = (params) => {
    return req({
        method: 'get',
        params,
        url:'/api/login/login'
   })
}

//退出接口
export const Login = (data) => {
    return req({
        method: 'get',
        data,
        url:'/api/login/logput'
    })
 }

 有了跨域和接口下一步就是把接口数据显示到页面

<template>
    <div class="login-warp">
        <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleFrom" label-width="0px" class="demo-ruleFrom">
            <h3>用户登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
           <el-form-item style="width:100%">
              <el-button type="primary" style="width:100%;" @click="submitFrom('ruleFrom')":laoding="logining">登录</el-button> 
            </el-form-item>
        </el-from>
    </div>
</template>

 

<script type="text/ecmascript-6">
    //引入登录接口
    import { Login } from '@api/basisMG'
    export default {
        name: 'login',
        data(){
         return {
             logining:false,
            // 记住密码    
             rememberpwd:false,
             ruleFrom :    {
                    // username 和password默认为空
                    username: '',
                    password: '',          
                },
              rules: {
                    username: [{required:true,message:'请输入账号'，trigger:'blur'}],
                    password: [{required:true,message:'请输入密码'，trigger:'blur'}],
                }
            }   
        },
        created(){},
        methods: {
            //获取info列表
            submitForm(forName){
                console.log('formName'+formName);
                this.$refs[formName].validate(valid =>{
                    if(valid){
                        this.logining = true
                        //调用接口啦！！
                        Login(this.ruleForm).then(res => {
                            if(res.data.code === 200){
                                this.logining = false
                                this.$store.commit('login',true)
                                this.$router.push({path:'/goods/Goods'})
                                let accseeToken = res.data.data.token, //从
                                console.log(accessTOken)
                                localStorage.setItem('accessToken',accessToken)//用localhost缓存token值
                            }else{
                                this.$store.commit('login','false')
                                this.loadining = false
                                this.$message('用户密码不对')
                            }
                        })
                    }
                })
            }
        }
    }
</script>

再感悟一个页面

<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-treadcrumb>
        <template>
            <div class="basetable" v-loading="loading" element-loading-text="拼命加载中">
                // v-loading 设置加载
                <div class="selectMenu">
                    //绑定的点击事件中，调用封装好的axios接口
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button type="primary" @click="queryList">查询列表</el-button>
                </div>
                <div class="tableMain">
                    <el-table :data="tableData" style="width:100%">
                        <el-table-colunm prop="username" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="password" label="密码" width="180"><el-table-column>
                        <el-table-column prop="email" label="邮箱"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>、
                                <el-button size="small" type="danger" @click="handlDelete(scope.$index,scope.row)">删除</el-button>
                            </template>
                        <el-table-column>
                    </el-table>
                    <div>
                        <el-dialog title="用户信息" :visible.sync="dialogFormVIsible">
                        //在el-dialog中进行el-from嵌套实现弹出表格效果
                      <el-form :model="form">
                         <el-form-item label="用户名" :label-width="formLabelWidth">
                         <el-input v-model="form.username" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth">
                         <el-input v-model="form.password" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" :label-width="formLabelWidth">
                         <el-input v-model="form.email" auto-complete="off"></el-input>
                        </el-form-item>
                      </el-form>
                          <div slot="footer" class="dialog-footer">
                             <el-button @click="cancel">取 消</el-button>
                                <!-- 设置触发更新的方法 -->
                            <el-button type="primary" @click="add">确 定</el-button>
                          </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

js

<script>
    import {adduser,updateuser,selectpage,deleteuser} from '@/api/basisMG'
    //导入请求方法
    export default {
        return {
            loading:true
            //表格数据
            tableteData:[],
            dialogFromVisible: false,
            formLabelWidth:"80px"m
            
            //设置form用于进行添加时候绑定值 添加用
            form: {
                username: '',
                password: '',
                email: ''
            },
            //修改用
            data: {
               "uuid": 'oee15707-9acb-4b09-b205-3f2014ca41ba',
                "password": '23456',
                "email": '898888@qq.com'
            },
            //删除用
            data2:{
                 "uuid": "0ee15707-9acb-4b09-b205-3f2014ca41ba"
            }，
            //查询列表用
            data3: {
                "pageSize": 10,
                "pageNum":1,
                 "username":' ,       
            },
            value6:"",
            currentPage3:1,
            currentINdex:""
        }    
    },
    creat(){
        setTimeout(()=> {
            this.loading = false;
        },1500)    
    },

    methods: {
    showTime() {
      this.$alert(this.value6, "起止时间", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: "已显示"
          });
        }
      });
    },

    //查看列表界面，需要验证
    queryList(){
      selectpage(this.date3).then(res => {
       this.tableData= res.data.data.records
        console.log("shuju========="+JSON.stringify(this.tableData))

      })

    },
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      adduser(this.form).then(res => {
        console.log("表单JSON数据====="+JSON.stringify(this.form))
        // alert(JSON.stringify(res))
      })
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
      
    },

    //更新操作，把页面的值带入
    update() {
      updateuser(this.data).then(res => {
        console.log("表单JSON数据====="+JSON.stringify(this.data))
        alert(JSON.stringify(res))

      })
    },

    //删除用户
    deteleUser(){
      deleteuser(this.data2).then(res => {
        console.log("表单JSON数据====="+JSON.stringify(this.data))
        alert(JSON.stringify(res))

      })
    },
    handleEdit(index, row) {
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.tableData[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      // 设置类似于console类型的功能
      this.$confirm("永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // }
  }
}
    </script>