从零开始的后台管理系统

本后台管理系统采用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: {//PathsassetsSubDirectory: '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" //引入axiosconst _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 = falsethis.$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 = falsethis.$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>

<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.recordsconsole.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>

从零开始的后台管理系统相关推荐

vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【从零开始JavaEE课设】《影院系统》成品展示——后台管理系统
后台管理系统是整个课设最磨人的地方写起来的感觉简直就是: while(头发总数 != 0){头发总数--; } 员工登录员工登录按钮位于前台页面的正上方,点击那个图标即可显示员工登录窗口. 输入员工 ...
从零开始编写自己的C#框架（8）——后台管理系统功能设计
还是老规矩先吐下槽,在规范的开发过程中,这个时候应该是编写总体设计(概要设计)的时候,不过对于中小型项目来说,过于规范的遵守软件工程,编写太多文档也会拉长进度,一般会将它与详细设计合并到一起来处理,所 ...
从零开始实现放置游戏（三）：后台管理系统搭建
需求分析整个游戏的核心玩法是放置挂机,打怪练级是核心功能,先实现一个最小可运行的DEMO,那么可以先实现玩家和怪物挂机战斗这部分.像装备.道具.掉落.随机词缀.组队等功能都可以放到后面做.想实现挂机 ...
axios传数组到后台_我是如何让公司后台管理系统焕然一新的
作者:yeyan1996 https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热潮,虽说今年 ...
jquery数组怎么传给后台_我是如何让公司后台管理系统焕然一新的（下）封装组件...
作者:yeyan1996 https://juejin.im/post/5c7b4761f265da2db2795036 写在前面上篇在这里马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热 ...
扛把子级别的Java开源后台管理系统
还是那句话,重复造轮子是个苦逼的活,能搞懂搞会一个好轮子,是多么美好的事情,今天介绍一款杠把子级别的Java开源后台管理系统,RuoYi 基于SpringBoot开发分普通交互前段bootstrap ...
开源项目：时光后台管理系统前后端分离项目，后台系统模板时光大魔王
最近对自己的之前开源项目进行优化,发现每个项目的后台管理系统都有大大小小的Bug和之前没考虑到的优化,于是这段时间重新从零构建了Vue2后台管理系统模板. 作者:时光 | 当前版本:v1.0.6 前端 ...

从零开始的后台管理系统

从零开始的后台管理系统相关推荐

最新文章

热门文章